@oila/0account 3.5.5 → 3.5.7

package/dist/cjs/loader.cjs.js

@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["qr-code_2.cjs",[[1,"zero-account",{"appId":[1,"app-id"],"updateInterval":[2,"update-interval"],"callbackURL":[1,"callback-url"],"level":[1],"environment":[1],"enableWithCredentials":[4,"enable-with-credentials"],"themePreset":[1,"theme-preset"],"autoStartApp":[4,"auto-start-app"],"modalOpen":[32],"isAnimating":[32],"url":[32]},[[4,"0account-toggle-modal","toggleModal"],[4,"0account-close-modal","_closeModal"],[4,"0account-authenticated","_closeModal"],[4,"0account-logout","logout"],[4,"0account-open-app","openApp"]]],[0,"qr-code",{"url":[1],"level":[1],"class":[1],"color":[1]}]]]], options);
+  return index.bootstrapLazy([["qr-code_2.cjs",[[1,"zero-account",{"appId":[1,"app-id"],"updateInterval":[2,"update-interval"],"callbackURL":[1,"callback-url"],"level":[1],"environment":[1],"enableWithCredentials":[4,"enable-with-credentials"],"themePreset":[1,"theme-preset"],"autoStartApp":[4,"auto-start-app"],"modalOpen":[32],"isOpenAppBeingClicked":[32],"isAnimating":[32],"url":[32]},[[4,"0account-toggle-modal","toggleModal"],[4,"0account-close-modal","_closeModal"],[4,"0account-authenticated","_closeModal"],[4,"0account-logout","logout"],[4,"0account-open-app","openApp"]]],[0,"qr-code",{"url":[1],"level":[1],"class":[1],"color":[1]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/qr-code_2.cjs.entry.js

@@ -1414,7 +1414,7 @@ class WS {
     }
 }
 
-const zeroAccountCss = ":host{--primary-color:#7263FA;--primary-background-color:#FFF;--theme-based-radius:0px;--theme-based-padding:0px;--button-animation-duration:200ms;--text-color:#000;--button-border-color:#B2D4FF;--button-border-radius:9999px;--button-background-color:var(--primary-background-color);--modal-logo-border-color:var(--primary-color);--modal-animation-duration:350ms;--easing:cubic-bezier(0.16, 1, 0.3, 1);--disabled-background-color:rgba(0, 0, 0, 0.12);--disabled-color:rgba(0, 0, 0, 0.3);font-family:sans-serif}.dark{--button-background-color:rgb(30, 41, 59);--primary-background-color:rgb(30, 41, 59);--button-border-color:#FFFFF9;--text-color:#FFFFF9;--modal-logo-border-color:#CCC;--disabled-background-color:rgba(255, 255, 255, 0.12);--disabled-color:rgba(255, 255, 255, 0.3);--theme-based-radius:4px;--theme-based-padding:8px}.button{font-size:16px;color:var(--text-color);cursor:pointer;padding:8px 12px 8px 10px;display:flex;flex-direction:row;align-items:center;gap:6px;border:1px solid var(--button-border-color);background-color:var(--button-background-color);border-radius:var(--button-border-radius)}.button:hover{transition:box-shadow var(--button-animation-duration);box-shadow:0 0 3px rgba(0, 0, 0, 0.3);background:linear-gradient(\n    to top,\n    rgba(200, 200, 200, 0.1),\n    rgba(200, 200, 200, 0.1)\n  ) var(--button-background-color)}.button:active{transition:box-shadow var(--button-animation-duration);box-shadow:0 0 0 rgba(0, 0, 0, 0)}.button__logo{width:1.3rem}.modal{display:flex;z-index:9999;justify-content:center;align-items:center;position:fixed;top:0;left:0;width:100%;height:100%;opacity:1;background-color:rgba(0, 0, 0, 0.3);transition:opacity var(--modal-animation-duration) var(--easing)}.modal--hidden{opacity:0;pointer-events:none}.modal__content{max-width:240px;border-radius:4px;position:relative;display:flex;flex-direction:column;align-items:center;padding:16px;background-color:var(--primary-background-color);transform:scale(1);transition:transform var(--modal-animation-duration) var(--easing)}.modal--hidden .modal__content{transform:scale(0.5)}.modal__qrcode__container{position:relative;background-color:white;border-radius:var(--theme-based-radius);padding:var(--theme-based-padding)}.modal__qrcode{border-radius:4px;width:100%;height:auto}.modal__logo{padding:8px;border:2px var(--modal-logo-border-color) solid;border-radius:var(--button-border-radius);background-color:var(--primary-background-color);position:absolute;width:16%;top:50%;left:50%;transform:translate3d(-50%, -50%, 0)}.modal-animated .circle__overlay{width:100%;height:100%}.modal-animated .modal__qrcode{filter:blur(2px)}.modal-animated .modal__logo{border:none;animation:spin 2.5s var(--easing) infinite}@keyframes spin{0%{transform:translate3d(-50%, -50%, 0) rotate(0deg)}50%{transform:translate3d(-50%, -50%, 0) rotate(180deg)}100%{transform:translate3d(-50%, -50%, 0) rotate(360deg)}}.modal__buttons{width:100%;flex-direction:column;align-items:center;margin-top:14px;display:flex;text-align:center}.modal:not(.modal--hidden) .modal__button{transform:scale(1) translate3d(0, 0, 0)}.modal:not(.modal--hidden) .modal__link{transform:scale(1) translate3d(0, 0, 0)}.modal__button{transform:scale(0) translate3d(0, 150px, 0);transition:calc(var(--modal-animation-duration) + 50ms) var(--easing);transition-property:scale, transform, background-color;cursor:pointer;padding:12px;font-size:14px;background-color:var(--primary-color);color:white;border:none;border-radius:6px;width:100%}.modal__button:hover{background:linear-gradient(\n    to top,\n    rgba(0, 0, 0, 0.1),\n    rgba(0, 0, 0, 0.1)\n  ) var(--primary-color)}.modal__button:disabled{background-color:var(--disabled-background-color);color:var(--disabled-color);cursor:not-allowed;pointer-events:none}.modal__link{transform:scale(0) translate3d(0, 150px, 0);transition:calc(var(--modal-animation-duration) + 150ms) var(--easing);transition-property:scale, transform;font-size:0.8rem;padding:10px 20px 0;color:var(--primary-color);width:100%;text-decoration:underline rgba(0, 0, 0, 0)}.modal__link:hover{text-decoration-color:var(--primary-color)}.modal__close-button{position:absolute;top:-26px;right:-26px;width:24px;height:24px;background-color:rgba(0, 0, 0, 0.1);border-radius:10px;cursor:pointer;transition:background-color var(--modal-animation-duration) var(--easing)}.modal__close-button:hover{background-color:rgba(0, 0, 0, 0.3)}.modal__close-button:before,.modal__close-button:after{content:\"\";position:absolute;top:50%;left:50%;width:50%;height:1px;background-color:rgba(255, 255, 255, 0.8);transform:translate(-50%, -50%) rotate(45deg)}.modal__close-button:after{transform:translate(-50%, -50%) rotate(-45deg)}.circle__overlay{overflow:hidden;top:50%;left:50%;transform:translate(-50%, -50%);position:absolute;background-color:var(--primary-background-color);border-radius:var(--button-border-radius);width:10%;height:10%;border:2px var(--modal-logo-border-color) solid;transition:calc(var(--modal-animation-duration) + 200ms) var(--easing);transition-property:width, height, opacity}.circle{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:100px;height:100px;border-radius:50%;background-color:#E0E0E0;animation:circle__ripple 2s linear infinite}.circle--medium{width:150px;height:150px;animation-duration:2.5s}.circle--large{width:200px;height:200px;animation-duration:3s}@keyframes circle__ripple{0%{transform:translate(-50%, -50%) scale(0);opacity:1}100%{transform:translate(-50%, -50%) scale(1.5);opacity:0}}";
+const zeroAccountCss = ":host{--primary-color:#7263FA;--primary-background-color:#FFF;--theme-based-radius:0px;--theme-based-padding:0px;--button-animation-duration:200ms;--text-color:#000;--button-border-color:#B2D4FF;--button-border-radius:9999px;--button-background-color:var(--primary-background-color);--modal-logo-border-color:var(--primary-color);--modal-animation-duration:350ms;--easing:cubic-bezier(0.16, 1, 0.3, 1);--disabled-background-color:rgba(0, 0, 0, 0.12);--disabled-color:rgba(0, 0, 0, 0.3);font-family:sans-serif}.dark{--button-background-color:rgb(30, 41, 59);--primary-background-color:rgb(30, 41, 59);--button-border-color:#FFFFF9;--text-color:#FFFFF9;--modal-logo-border-color:#CCC;--disabled-background-color:rgba(255, 255, 255, 0.12);--disabled-color:rgba(255, 255, 255, 0.3);--theme-based-radius:4px;--theme-based-padding:8px}.button{font-size:16px;color:var(--text-color);cursor:pointer;padding:8px 12px 8px 10px;display:flex;flex-direction:row;align-items:center;gap:6px;border:1px solid var(--button-border-color);background-color:var(--button-background-color);border-radius:var(--button-border-radius)}.button:hover{transition:box-shadow var(--button-animation-duration);box-shadow:0 0 3px rgba(0, 0, 0, 0.3);background:linear-gradient(\n    to top,\n    rgba(200, 200, 200, 0.1),\n    rgba(200, 200, 200, 0.1)\n  ) var(--button-background-color)}.button:active{transition:box-shadow var(--button-animation-duration);box-shadow:0 0 0 rgba(0, 0, 0, 0)}.button__logo{width:1.3rem}.disabled{background-color:dimgrey;color:linen;cursor:not-allowed;pointer-events:none}.modal{display:flex;z-index:9999;justify-content:center;align-items:center;position:fixed;top:0;left:0;width:100%;height:100%;opacity:1;background-color:rgba(0, 0, 0, 0.3);transition:opacity var(--modal-animation-duration) var(--easing)}.modal--hidden{opacity:0;pointer-events:none}.modal__content{max-width:240px;border-radius:4px;position:relative;display:flex;flex-direction:column;align-items:center;padding:16px;background-color:var(--primary-background-color);transform:scale(1);transition:transform var(--modal-animation-duration) var(--easing)}.modal--hidden .modal__content{transform:scale(0.5)}.modal__qrcode__container{width:240px;box-sizing:border-box;position:relative;background-color:white;border-radius:var(--theme-based-radius);padding:var(--theme-based-padding)}.modal__qrcode{border-radius:4px;width:100%;height:auto}.modal__logo{padding:8px;border:2px var(--modal-logo-border-color) solid;border-radius:var(--button-border-radius);background-color:var(--primary-background-color);position:absolute;width:16%;top:50%;left:50%;transform:translate3d(-50%, -50%, 0)}.modal-animated .circle__overlay{width:100%;height:100%}.modal-animated .modal__qrcode{filter:blur(2px)}.modal-animated .modal__logo{border:none;animation:spin 2.5s var(--easing) infinite}@keyframes spin{0%{transform:translate3d(-50%, -50%, 0) rotate(0deg)}50%{transform:translate3d(-50%, -50%, 0) rotate(180deg)}100%{transform:translate3d(-50%, -50%, 0) rotate(360deg)}}.modal__buttons{width:100%;flex-direction:column;align-items:center;margin-top:14px;display:flex;text-align:center}.modal:not(.modal--hidden) .modal__button{transform:scale(1) translate3d(0, 0, 0)}.modal:not(.modal--hidden) .modal__link{transform:scale(1) translate3d(0, 0, 0)}.modal__button{transform:scale(0) translate3d(0, 150px, 0);transition:calc(var(--modal-animation-duration) + 50ms) var(--easing);transition-property:scale, transform, background-color;cursor:pointer;padding:12px;font-size:14px;background-color:var(--primary-color);color:white;border:none;border-radius:6px;width:100%}.modal__button:hover{background:linear-gradient(\n    to top,\n    rgba(0, 0, 0, 0.1),\n    rgba(0, 0, 0, 0.1)\n  ) var(--primary-color)}.modal__button:disabled{background-color:var(--disabled-background-color);color:var(--disabled-color);cursor:not-allowed;pointer-events:none}.modal__link{transform:scale(0) translate3d(0, 150px, 0);transition:calc(var(--modal-animation-duration) + 150ms) var(--easing);transition-property:scale, transform;font-size:0.8rem;padding:10px 20px 0;color:var(--primary-color);width:100%;text-decoration:underline rgba(0, 0, 0, 0)}.modal__link:hover{text-decoration-color:var(--primary-color)}.modal__close-button{position:absolute;top:-26px;right:-26px;width:24px;height:24px;background-color:rgba(0, 0, 0, 0.1);border-radius:10px;cursor:pointer;transition:background-color var(--modal-animation-duration) var(--easing)}.modal__close-button:hover{background-color:rgba(0, 0, 0, 0.3)}.modal__close-button:before,.modal__close-button:after{content:\"\";position:absolute;top:50%;left:50%;width:50%;height:1px;background-color:rgba(255, 255, 255, 0.8);transform:translate(-50%, -50%) rotate(45deg)}.modal__close-button:after{transform:translate(-50%, -50%) rotate(-45deg)}.circle__overlay{overflow:hidden;top:50%;left:50%;transform:translate(-50%, -50%);position:absolute;background-color:var(--primary-background-color);border-radius:var(--button-border-radius);width:10%;height:10%;border:2px var(--modal-logo-border-color) solid;transition:calc(var(--modal-animation-duration) + 200ms) var(--easing);transition-property:width, height, opacity}.circle{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:100px;height:100px;border-radius:50%;background-color:#E0E0E0;animation:circle__ripple 2s linear infinite}.circle--medium{width:150px;height:150px;animation-duration:2.5s}.circle--large{width:200px;height:200px;animation-duration:3s}@keyframes circle__ripple{0%{transform:translate(-50%, -50%) scale(0);opacity:1}100%{transform:translate(-50%, -50%) scale(1.5);opacity:0}}";
 const ZeroAccountStyle0 = zeroAccountCss;
 
 const maxInterval = 59 * 60 * 1000;
@@ -1453,6 +1453,7 @@ const ZeroAccount = class {
         this.themePreset = ThemePreset.light;
         this.autoStartApp = true;
         this.modalOpen = false;
+        this.isOpenAppBeingClicked = false;
         this.isAnimating = false;
         this.url = '';
     }
@@ -1482,13 +1483,31 @@ const ZeroAccount = class {
     }
     openApp() {
         this.refreshQR(true);
+        // TODO: uncomment if the fix with isOpenAppClicked does not work
+        // const confirmBeforeClose = (event) => {
+        //   event = event || window.event;
+        //   if (!event) return;
+        //   event.preventDefault();
+        //   event.returnValue = '';
+        //   delete event['returnValue'];
+        //   return '';
+        // }
+        //
+        // window.addEventListener('beforeunload', confirmBeforeClose);
+        if (this.isOpenAppBeingClicked)
+            return;
+        this.isOpenAppBeingClicked = true;
         window.location.href = this.url;
+        setTimeout(() => {
+            // window.removeEventListener('beforeunload', confirmBeforeClose);
+            this.isOpenAppBeingClicked = false;
+        }, 300);
     }
     render() {
         const logoColor = this.themePreset === ThemePreset.light ? '#7263FA' : '#FFFFF9';
         const qrColor = '#000';
-        return (index.h(index.Host, { key: 'd040d1baf982d80122894d74cb3c6a1006ad55d2' }, index.h("slot", { key: '4ef5cf8eb17120f75a55f4156b6aa35b8b606a2f' }), this.host.childNodes.length === 0 &&
-            index.h("button", { key: 'e590639c76ec36e93b96951062b010ecfe2c8086', class: `button ${this.themePreset}`, onClick: () => this.toggleModal() }, index.h(Logo, { key: '13ca339f832d00b7499d54ea858a9e53d8e5730e', className: 'button__logo', color: logoColor }), "use 0account"), index.h("div", { key: 'f3f7125f40de4e60cd1cd2d967c36905f9bfc7d8', ref: el => this.modalEl = el, onClick: (e) => this.closeModal(e), class: `modal ${this.themePreset} ${this.isAnimating ? 'modal-animated' : ''} ${this.modalOpen ? '' : 'modal--hidden'}` }, index.h("div", { key: '1ee747897336755b41433487d454591ca843f0a3', class: 'modal__content' }, index.h("div", { key: 'c6f56b630eb125bc5e55479fc78f31316d6513ce', ref: el => this.closeButtonEl = el, class: 'modal__close-button' }), index.h("div", { key: '1238b74020eb6ddbdee9ba45ea54eb9c34619ab1', class: 'modal__qrcode__container' }, index.h("qr-code", { key: 'fed442f079fe74fb6bf2dd7880d3421d667448aa', url: this.url, class: "modal__qrcode", level: this.level, color: qrColor }), index.h("div", { key: '7bf707437e8ebe887e608a8f0cc9aecb8cd2564e', class: 'circle__overlay' }, index.h("div", { key: 'a8ac4ae2f5e259637537011634ba02edfd41dc72', class: 'circle' }), index.h("div", { key: '573ac2721326ebe5c43957f768369f34ad4f6c36', class: 'circle circle--medium' }), index.h("div", { key: '6ca50a204602460f3a600833ae0aa83765be180d', class: 'circle circle--large' })), index.h(Logo, { key: 'cf7014b4f4027edf38a03b28680444eb72e11854', className: 'modal__logo', color: logoColor })), index.h("div", { key: 'f57b363cea150084c6047c9ce185ac25784cbda6', class: 'modal__buttons' }, index.h("button", { key: 'ddad6df5e26207f1d3d5b3e74fd093fa2f362c1d', disabled: this.isAnimating, onClick: () => this.openApp(), class: 'modal__button' }, "Open 0account"), index.h("a", { key: '35f13f818b25e1f18c98841ff3513611928308e6', href: 'https://0account.com/downloads', class: 'modal__link' }, "Download"))))));
+        return (index.h(index.Host, { key: 'fdf5ca45b68d576ba5b71d0f48b272b344caeca8' }, index.h("slot", { key: '38e565a3532aa76ab55d35a6a12a6b46ffb57510' }), this.host.childNodes.length === 0 &&
+            index.h("button", { key: 'db9461d518bd2f9d304d88884c326128f3e71f60', class: `button ${this.themePreset} ${this.isOpenAppBeingClicked ? 'disabled' : ''}`, onClick: () => this.toggleModal() }, index.h(Logo, { key: '18a4d7bfc11e1c9e633854f603357039781b7de3', className: 'button__logo', color: logoColor }), "use 0account"), index.h("div", { key: '5c3f167aa8a400c019a92160f2b6a9bb9d4bd31f', ref: el => this.modalEl = el, onClick: (e) => this.closeModal(e), class: `modal ${this.themePreset} ${this.isAnimating ? 'modal-animated' : ''} ${this.modalOpen ? '' : 'modal--hidden'}` }, index.h("div", { key: 'c1fc1c117c54a0085404e6b22238e201e653fbb8', class: 'modal__content' }, index.h("div", { key: '59b094c5105aaf55cb2db4888f88dbc73c99cd67', ref: el => this.closeButtonEl = el, class: 'modal__close-button' }), index.h("div", { key: '3171c6d422b95fb2c6e452f8f78c59103b00eeae', class: 'modal__qrcode__container' }, index.h("qr-code", { key: '83874926b0e682e103578e5677585fcc7af5b14b', url: this.url, class: "modal__qrcode", level: this.level, color: qrColor }), index.h("div", { key: '830bb649067b48654ad18f12ce85ab9d4c179a73', class: 'circle__overlay' }, index.h("div", { key: '4e41c864cf858e942cf362b77b420c5725e93250', class: 'circle' }), index.h("div", { key: 'bf7c57f92501286059118dfe7ffd7e15161fbd89', class: 'circle circle--medium' }), index.h("div", { key: 'a5f45b506b93571a7cb958adaa8533f15d97c8ae', class: 'circle circle--large' })), index.h(Logo, { key: '1d1710cdc1c89c0ec75960b4d83f1f717abf876b', className: 'modal__logo', color: logoColor })), index.h("div", { key: 'a6c223ab3d791b73f448d6415f8efb100dbebe05', class: 'modal__buttons' }, index.h("button", { key: '6c4eff22956ebe3825441399558fa1f7b8337fa6', disabled: this.isAnimating || this.isOpenAppBeingClicked, onClick: () => this.openApp(), class: 'modal__button' }, "Open 0account"), index.h("a", { key: '4236ece1098075d20af7f52c82ff41ac2ced5eb1', href: 'https://0account.com/downloads', class: 'modal__link' }, "Download"))))));
     }
     initServices() {
         if (this.logger && this.uaParser && this.ws)
@@ -1519,6 +1538,7 @@ const ZeroAccount = class {
             appId: this.appId,
             uuid: uuid,
             expires: expires,
+            domain: window.location.hostname,
         });
         if (this.isMobile()) {
             this.url = 'https://launch.0account.com/auth?' + params;