diff --git a/core/language/us.json b/core/language/us.json index c59951b0..76458f9f 100644 --- a/core/language/us.json +++ b/core/language/us.json @@ -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", diff --git a/plugins/plugins/core/name-registration/name-registration.src.js b/plugins/plugins/core/name-registration/name-registration.src.js index fd7d80b4..ecd51d15 100644 --- a/plugins/plugins/core/name-registration/name-registration.src.js +++ b/plugins/plugins/core/name-registration/name-registration.src.js @@ -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` this.openUpdateNameDialog(nameObj)}>update ${translate("publishpage.pchange2")} ${translate("login.name")}` } - 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 = '' diff --git a/plugins/plugins/utils/warning-modal.js b/plugins/plugins/utils/warning-modal.js new file mode 100644 index 00000000..7bda31cd --- /dev/null +++ b/plugins/plugins/utils/warning-modal.js @@ -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 = ` +
+
+
+
+
+

${data.message} +

+
+
+
+ + +
+
+
+ `; + 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(); \ No newline at end of file