mirror of
https://github.com/HeyPuter/puter.git
synced 2026-05-27 20:01:35 +00:00
Unify Email/Usage dialogs with Puter dialog style
This commit is contained in:
Nariman Jelveh
@@ -5,128 +5,194 @@ class EmailConfirmationDialog extends (globalThis.HTMLElement || Object) {
|
||||
|
||||
this.attachShadow({ mode: 'open' });
|
||||
|
||||
// NOTE: This dialog deliberately mirrors the design of PuterDialog
|
||||
// (the consent dialog) so all puter.js system dialogs stay visually
|
||||
// consistent. If you restyle one of them, restyle all three.
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
dialog {
|
||||
background: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
max-width: 90vw;
|
||||
}
|
||||
dialog {
|
||||
background: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
dialog::backdrop {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
dialog::backdrop {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.dialog-content {
|
||||
border: 1px solid #e8e8e8;
|
||||
border-radius: 12px;
|
||||
padding: 32px;
|
||||
background: white;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
color: #333;
|
||||
position: relative;
|
||||
max-width: 420px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
.puter-dialog-content {
|
||||
border: 1px solid #e8e8e8;
|
||||
border-radius: 8px;
|
||||
padding: 50px 30px 30px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 9px 1px rgb(0 0 0 / 21%);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
color: #575762;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 400px;
|
||||
max-width: 90vw;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 12px;
|
||||
font-size: 20px;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
dialog, dialog * {
|
||||
font-family: "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
background: #f0f0f0;
|
||||
color: #333;
|
||||
}
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
font-size: 17px;
|
||||
color: #8a8a8a8c;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin: 0 auto 20px;
|
||||
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.close-btn:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.icon-container svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
color: #1976d2;
|
||||
.dialog-icon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.dialog-icon svg {
|
||||
display: block;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
background-color: #088ef0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
font-size: 19px;
|
||||
font-weight: 500;
|
||||
color: #1f1f2a;
|
||||
margin: 18px 0 0;
|
||||
}
|
||||
|
||||
.message {
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #575762;
|
||||
padding: 10px 10px 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.button {
|
||||
color: #666666;
|
||||
background: linear-gradient(#f6f6f6, #e1e1e1);
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
padding: 0 30px;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
border: 1px solid #b9b9b9;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
width: 220px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.button:focus-visible {
|
||||
border-color: rgb(118 118 118);
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
border-color: #088ef0;
|
||||
background: linear-gradient(#34a5f8, #088ef0);
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.button-primary:active {
|
||||
background: #2798eb;
|
||||
border-color: #2798eb;
|
||||
color: #bedef5;
|
||||
}
|
||||
|
||||
.button-cancel {
|
||||
background: none;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.puter-dialog-content {
|
||||
padding: 50px 20px 25px;
|
||||
}
|
||||
.button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.puter-dialog-content {
|
||||
border: 1px solid #2a2a2e;
|
||||
background-color: #1e1e22;
|
||||
color: #d6d6dc;
|
||||
box-shadow: 0 0 9px 1px rgb(0 0 0 / 60%);
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0 0 12px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
color: #1a1a1a;
|
||||
color: #e4e4ea;
|
||||
}
|
||||
|
||||
.message {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: #666;
|
||||
margin-bottom: 24px;
|
||||
color: #b9b9c2;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
.close-btn {
|
||||
color: #8a8a90;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 10px 24px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
color: #d6d6dc;
|
||||
background: linear-gradient(#3f3f45, #2e2e34);
|
||||
border-color: #4a4a50;
|
||||
}
|
||||
|
||||
.button-secondary {
|
||||
background: #f5f5f5;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.button-secondary:hover {
|
||||
background: #e8e8e8;
|
||||
.button:focus-visible {
|
||||
border-color: #8a8a90;
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.button-primary:hover {
|
||||
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
|
||||
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
|
||||
border-color: #088ef0;
|
||||
background: linear-gradient(#34a5f8, #088ef0);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<dialog>
|
||||
<div class="dialog-content">
|
||||
<div class="puter-dialog-content">
|
||||
<span class="close-btn">✕</span>
|
||||
<div class="icon-container">
|
||||
<div class="dialog-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
@@ -134,8 +200,8 @@ class EmailConfirmationDialog extends (globalThis.HTMLElement || Object) {
|
||||
<h2>Confirm Your Email</h2>
|
||||
<p class="message">${this.message}</p>
|
||||
<div class="buttons">
|
||||
<button class="button button-secondary" id="close-btn">Close</button>
|
||||
<button class="button button-primary" id="confirm-email-btn">Go to Puter.com</button>
|
||||
<button class="button button-cancel" id="close-btn">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
@@ -35,11 +35,14 @@ class PuterDialog extends (globalThis.HTMLElement || Object) { // It will fall b
|
||||
h = `
|
||||
<style>
|
||||
dialog{
|
||||
background: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
dialog::backdrop {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.puter-dialog-content {
|
||||
border: 1px solid #e8e8e8;
|
||||
border-radius: 8px;
|
||||
@@ -352,6 +355,21 @@ class PuterDialog extends (globalThis.HTMLElement || Object) { // It will fall b
|
||||
box-shadow: inset 0px 2px 3px rgb(0 0 0 / 60%), 0px 1px 0px rgb(255 255 255 / 4%);
|
||||
}
|
||||
|
||||
/* The dark-mode 'dialog .button' rule above has the same specificity
|
||||
as the light-mode 'dialog .button-primary' rule, so without this
|
||||
override source order wins and the primary button turns gray. */
|
||||
dialog .button-primary {
|
||||
border-color: #088ef0;
|
||||
background: linear-gradient(#34a5f8, #088ef0);
|
||||
color: white;
|
||||
}
|
||||
|
||||
dialog .button-primary:active, dialog .button-primary.active, dialog .button-primary.is-active {
|
||||
background-color: #2798eb;
|
||||
border-color: #2798eb;
|
||||
color: #bedef5;
|
||||
}
|
||||
|
||||
dialog .button.disabled, dialog .button.is-disabled, dialog .button:disabled {
|
||||
background: #2a2a30 !important;
|
||||
border: 1px solid #34343a !important;
|
||||
|
||||
@@ -2,131 +2,197 @@ class UsageLimitDialog extends (globalThis.HTMLElement || Object) {
|
||||
constructor (message) {
|
||||
super();
|
||||
this.message = message || 'You have reached your usage limit for this account.';
|
||||
|
||||
|
||||
this.attachShadow({ mode: 'open' });
|
||||
|
||||
|
||||
// NOTE: This dialog deliberately mirrors the design of PuterDialog
|
||||
// (the consent dialog) so all puter.js system dialogs stay visually
|
||||
// consistent. If you restyle one of them, restyle all three.
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
dialog {
|
||||
background: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
max-width: 90vw;
|
||||
dialog {
|
||||
background: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
dialog::backdrop {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.puter-dialog-content {
|
||||
border: 1px solid #e8e8e8;
|
||||
border-radius: 8px;
|
||||
padding: 50px 30px 30px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 9px 1px rgb(0 0 0 / 21%);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
color: #575762;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 400px;
|
||||
max-width: 90vw;
|
||||
}
|
||||
|
||||
dialog, dialog * {
|
||||
font-family: "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
font-size: 17px;
|
||||
color: #8a8a8a8c;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.dialog-icon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.dialog-icon svg {
|
||||
display: block;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
background-color: #f59e0b;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
font-size: 19px;
|
||||
font-weight: 500;
|
||||
color: #1f1f2a;
|
||||
margin: 18px 0 0;
|
||||
}
|
||||
|
||||
.message {
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #575762;
|
||||
padding: 10px 10px 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.button {
|
||||
color: #666666;
|
||||
background: linear-gradient(#f6f6f6, #e1e1e1);
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
padding: 0 30px;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
border: 1px solid #b9b9b9;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
width: 220px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.button:focus-visible {
|
||||
border-color: rgb(118 118 118);
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
border-color: #088ef0;
|
||||
background: linear-gradient(#34a5f8, #088ef0);
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.button-primary:active {
|
||||
background: #2798eb;
|
||||
border-color: #2798eb;
|
||||
color: #bedef5;
|
||||
}
|
||||
|
||||
.button-cancel {
|
||||
background: none;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.puter-dialog-content {
|
||||
padding: 50px 20px 25px;
|
||||
}
|
||||
|
||||
dialog::backdrop {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.dialog-content {
|
||||
border: 1px solid #e8e8e8;
|
||||
border-radius: 12px;
|
||||
padding: 32px;
|
||||
background: white;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
color: #333;
|
||||
position: relative;
|
||||
max-width: 420px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 12px;
|
||||
font-size: 20px;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
background: #f0f0f0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin: 0 auto 20px;
|
||||
background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.icon-container svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
color: #f57c00;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0 0 12px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.message {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: #666;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 10px 24px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button-secondary {
|
||||
background: #f5f5f5;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.puter-dialog-content {
|
||||
border: 1px solid #2a2a2e;
|
||||
background-color: #1e1e22;
|
||||
color: #d6d6dc;
|
||||
box-shadow: 0 0 9px 1px rgb(0 0 0 / 60%);
|
||||
}
|
||||
|
||||
.button-secondary:hover {
|
||||
background: #e8e8e8;
|
||||
|
||||
h2 {
|
||||
color: #e4e4ea;
|
||||
}
|
||||
|
||||
|
||||
.message {
|
||||
color: #b9b9c2;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
color: #8a8a90;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button {
|
||||
color: #d6d6dc;
|
||||
background: linear-gradient(#3f3f45, #2e2e34);
|
||||
border-color: #4a4a50;
|
||||
}
|
||||
|
||||
.button:focus-visible {
|
||||
border-color: #8a8a90;
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.button-primary:hover {
|
||||
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
|
||||
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
|
||||
border-color: #088ef0;
|
||||
background: linear-gradient(#34a5f8, #088ef0);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<dialog>
|
||||
<div class="dialog-content">
|
||||
<div class="puter-dialog-content">
|
||||
<span class="close-btn">✕</span>
|
||||
<div class="icon-container">
|
||||
<div class="dialog-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
@@ -134,30 +200,30 @@ class UsageLimitDialog extends (globalThis.HTMLElement || Object) {
|
||||
<h2>Low Balance</h2>
|
||||
<p class="message">${this.message}</p>
|
||||
<div class="buttons">
|
||||
<button class="button button-secondary" id="close-btn">Close</button>
|
||||
<button class="button button-primary" id="upgrade-btn">Upgrade Now</button>
|
||||
<button class="button button-cancel" id="close-btn">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
connectedCallback () {
|
||||
const dialog = this.shadowRoot.querySelector('dialog');
|
||||
|
||||
|
||||
this.shadowRoot.querySelector('.close-btn').addEventListener('click', () => {
|
||||
this.close();
|
||||
});
|
||||
|
||||
|
||||
this.shadowRoot.querySelector('#close-btn').addEventListener('click', () => {
|
||||
this.close();
|
||||
});
|
||||
|
||||
|
||||
this.shadowRoot.querySelector('#upgrade-btn').addEventListener('click', () => {
|
||||
window.open('https://puter.com/dashboard', '_blank');
|
||||
this.close();
|
||||
});
|
||||
|
||||
|
||||
// Close on backdrop click
|
||||
dialog.addEventListener('click', (e) => {
|
||||
if ( e.target === dialog ) {
|
||||
@@ -165,11 +231,11 @@ class UsageLimitDialog extends (globalThis.HTMLElement || Object) {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
open () {
|
||||
this.shadowRoot.querySelector('dialog').showModal();
|
||||
}
|
||||
|
||||
|
||||
close () {
|
||||
this.shadowRoot.querySelector('dialog').close();
|
||||
this.remove();
|
||||
@@ -193,16 +259,15 @@ export function showUsageLimitDialog (message) {
|
||||
console.warn('[Puter]', message);
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
// Check if dialog is already shown to prevent duplicates
|
||||
if ( document.querySelector('usage-limit-dialog') ) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
const dialog = new UsageLimitDialog(message);
|
||||
document.body.appendChild(dialog);
|
||||
dialog.open();
|
||||
}
|
||||
|
||||
export default UsageLimitDialog;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user