mirror of
https://github.com/Qortal/qortal-ui.git
synced 2025-02-14 11:15:50 +00:00
add warning for name update
This commit is contained in:
parent
013bda6fc7
commit
6380a62228
@ -521,7 +521,8 @@
|
||||
"nchange44": "To the new name",
|
||||
"nchange45": "On pressing confirm, the name update request will be sent!",
|
||||
"nchange46": "Name Sale History",
|
||||
"nchange47": "Name Update Successful!"
|
||||
"nchange47": "Name Update Successful!",
|
||||
"nchange48": "Warning! If you update your name, you will forfeit the resources associated with the original name. In other words, you will lose ownership of the content under the original name in the QDN. Proceed with caution!"
|
||||
},
|
||||
"websitespage": {
|
||||
"schange1": "Browse Websites",
|
||||
|
||||
@ -21,6 +21,7 @@ import '@vaadin/icon'
|
||||
import '@vaadin/icons'
|
||||
import '@vaadin/grid'
|
||||
import '@vaadin/text-field'
|
||||
import { warningModal } from '../../utils/warning-modal.js'
|
||||
|
||||
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
|
||||
|
||||
@ -753,7 +754,16 @@ class NameRegistration extends LitElement {
|
||||
return html`<mwc-button class="warning" @click=${() => this.openUpdateNameDialog(nameObj)}><mwc-icon>update</mwc-icon> ${translate("publishpage.pchange2")} ${translate("login.name")}</mwc-button>`
|
||||
}
|
||||
|
||||
openUpdateNameDialog(nameObj) {
|
||||
async openUpdateNameDialog(nameObj) {
|
||||
const res = await warningModal.showModalAndWaitPublish(
|
||||
{
|
||||
message: get('registernamepage.nchange48')
|
||||
}
|
||||
);
|
||||
if (res.action !== 'accept'){
|
||||
this.closeUpdateNameDialog()
|
||||
return
|
||||
}
|
||||
this.toUpdateName = ''
|
||||
this.shadowRoot.getElementById("oldNameInput").value = ''
|
||||
this.shadowRoot.getElementById("newNameInput").value = ''
|
||||
|
||||
252
plugins/plugins/utils/warning-modal.js
Normal file
252
plugins/plugins/utils/warning-modal.js
Normal file
@ -0,0 +1,252 @@
|
||||
import { get } from 'lit-translate';
|
||||
|
||||
export class WarningModal {
|
||||
constructor() {
|
||||
this.initializeStyles();
|
||||
}
|
||||
|
||||
|
||||
async showModalAndWaitPublish(data) {
|
||||
return new Promise((resolve) => {
|
||||
const modal = this.createModal(data);
|
||||
document.body.appendChild(modal);
|
||||
this.addModalEventListeners(modal, resolve);
|
||||
});
|
||||
}
|
||||
|
||||
createModal(data) {
|
||||
const modal = document.createElement('div');
|
||||
modal.id = "backdrop";
|
||||
modal.classList.add("backdrop");
|
||||
modal.innerHTML = `
|
||||
<div class="modal my-modal-class">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<div class="modal-subcontainer">
|
||||
<div class="checkbox-row">
|
||||
<p style="font-size: 16px;overflow-wrap: anywhere;" class="modal-paragraph">${data.message}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-buttons">
|
||||
<button id="cancel-button">${get("general.close")}</button>
|
||||
<button id="ok-button">${get("general.continue")}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
return modal;
|
||||
}
|
||||
|
||||
addModalEventListeners(modal, resolve) {
|
||||
// Event listener for the 'OK' button
|
||||
const okButton = modal.querySelector('#ok-button');
|
||||
okButton.addEventListener('click', () => {
|
||||
const userData = { isWithFee: true };
|
||||
if (modal.parentNode === document.body) {
|
||||
document.body.removeChild(modal);
|
||||
}
|
||||
resolve({ action: 'accept', userData });
|
||||
});
|
||||
|
||||
// Prevent modal content from closing the modal
|
||||
const modalContent = modal.querySelector('.modal-content');
|
||||
modalContent.addEventListener('click', e => {
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
// Event listeners for backdrop and 'Cancel' button
|
||||
const backdropClick = document.getElementById('backdrop');
|
||||
backdropClick.addEventListener('click', () => {
|
||||
if (modal.parentNode === document.body) {
|
||||
document.body.removeChild(modal);
|
||||
}
|
||||
resolve({ action: 'reject' });
|
||||
});
|
||||
|
||||
const cancelButton = modal.querySelector('#cancel-button');
|
||||
cancelButton.addEventListener('click', () => {
|
||||
if (modal.parentNode === document.body) {
|
||||
document.body.removeChild(modal);
|
||||
}
|
||||
resolve({ action: 'reject' });
|
||||
});
|
||||
}
|
||||
|
||||
initializeStyles() {
|
||||
const styles = `
|
||||
* {
|
||||
--mdc-theme-primary: rgb(3, 169, 244);
|
||||
--mdc-theme-secondary: var(--mdc-theme-primary);
|
||||
--paper-input-container-focus-color: var(--mdc-theme-primary);
|
||||
--mdc-checkbox-unchecked-color: var(--black);
|
||||
--mdc-theme-on-surface: var(--black);
|
||||
--mdc-checkbox-disabled-color: var(--black);
|
||||
--mdc-checkbox-ink-color: var(--black);
|
||||
}
|
||||
|
||||
.backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgb(186 186 186 / 26%);
|
||||
overflow: hidden;
|
||||
animation: backdrop_blur cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
|
||||
z-index: 1000000;
|
||||
}
|
||||
|
||||
@keyframes backdrop_blur {
|
||||
0% {
|
||||
backdrop-filter: blur(0px);
|
||||
background: transparent;
|
||||
}
|
||||
100% {
|
||||
backdrop-filter: blur(5px);
|
||||
background: rgb(186 186 186 / 26%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes modal_transition {
|
||||
0% {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
animation: 0.1s cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal forwards running modal_transition;
|
||||
z-index: 1000001;
|
||||
}
|
||||
|
||||
@keyframes modal_transition {
|
||||
0% {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: var(--white);
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
||||
max-width: 650px;
|
||||
min-width: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.modal-subcontainer {
|
||||
color: var(--black);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.modal-subcontainer-error {
|
||||
color: var(--black);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.modal-paragraph-error {
|
||||
font-family: Roboto, sans-serif;
|
||||
font-size: 20px;
|
||||
letter-spacing: 0.3px;
|
||||
font-weight: 700;
|
||||
color: var(--black);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-paragraph {
|
||||
font-family: Roboto, sans-serif;
|
||||
font-size: 18px;
|
||||
letter-spacing: 0.3px;
|
||||
font-weight: 300;
|
||||
color: var(--black);
|
||||
margin: 0;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.capitalize-first {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.checkbox-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-weight: 600;
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
.modal-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.modal-buttons button {
|
||||
background-color: #4caf50;
|
||||
border: none;
|
||||
color: #fff;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.modal-buttons button:hover {
|
||||
background-color: #3e8e41;
|
||||
}
|
||||
|
||||
#cancel-button {
|
||||
background-color: #f44336;
|
||||
}
|
||||
|
||||
#cancel-button:hover {
|
||||
background-color: #d32f2f;
|
||||
}
|
||||
`;
|
||||
|
||||
const styleSheet = new CSSStyleSheet();
|
||||
styleSheet.replaceSync(styles);
|
||||
|
||||
document.adoptedStyleSheets = [styleSheet];
|
||||
}
|
||||
|
||||
|
||||
static getInstance() {
|
||||
if (!WarningModal.instance) {
|
||||
WarningModal.instance = new WarningModal();
|
||||
}
|
||||
return WarningModal.instance;
|
||||
}
|
||||
}
|
||||
|
||||
export const warningModal = WarningModal.getInstance();
|
||||
Loading…
x
Reference in New Issue
Block a user