AlphaX
/
qortal-ui
forked from Qortal/qortal-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

add warning for name update

resolve-20231003
PhilReact 12 months ago
parent
013bda6fc7
commit
6380a62228
3 changed files with 265 additions and 2 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      core/language/us.json
  2. 12
      plugins/plugins/core/name-registration/name-registration.src.js
  3. 252
      plugins/plugins/utils/warning-modal.js

3
core/language/us.json
Unescape View File

@ -521,7 +521,8 @@
"nchange44": "To the new name", "nchange44": "To the new name",
"nchange45": "On pressing confirm, the name update request will be sent!", "nchange45": "On pressing confirm, the name update request will be sent!",
"nchange46": "Name Sale History", "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": { "websitespage": {
"schange1": "Browse Websites", "schange1": "Browse Websites",

12
plugins/plugins/core/name-registration/name-registration.src.js
Unescape View File

@ -21,6 +21,7 @@ import '@vaadin/icon'
import '@vaadin/icons' import '@vaadin/icons'
import '@vaadin/grid' import '@vaadin/grid'
import '@vaadin/text-field' import '@vaadin/text-field'
import { warningModal } from '../../utils/warning-modal.js'
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent }) 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>&nbsp;${translate("publishpage.pchange2")} ${translate("login.name")}</mwc-button>` return html`<mwc-button class="warning" @click=${() => this.openUpdateNameDialog(nameObj)}><mwc-icon>update</mwc-icon>&nbsp;${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.toUpdateName = ''
this.shadowRoot.getElementById("oldNameInput").value = '' this.shadowRoot.getElementById("oldNameInput").value = ''
this.shadowRoot.getElementById("newNameInput").value = '' this.shadowRoot.getElementById("newNameInput").value = ''

252
plugins/plugins/utils/warning-modal.js
Unescape View 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();
Write Preview
Loading…
Cancel
Save