PasswordBox: change swap authorization animation

Now it looks similar to the Hub's Ledger swap authorization.
nimiq · Oct 23, 2022 · 1131ac4 · 1131ac4
1 parent a851ba8
commit 1131ac4
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 43 deletions.
diff --git a/src/components/PasswordBox.css b/src/components/PasswordBox.css
@@ -7,7 +7,6 @@
     margin-top: -2.75rem;
     line-height: 1;
     pointer-events: none;
-    transition: opacity .3s;
 }
 
 .password-box .password-input {
@@ -72,34 +71,23 @@
 
 .password-box.show-swap-authorization {
     overflow: hidden;
-    isolation: isolate; /* separate stacking context to avoid putting the ::before element behind the password box */
 }
-.password-box.show-swap-authorization::before {
-    content: '';
+.password-box.show-swap-authorization::after {
+    content: attr(data-i18n-swap-authorization-caption);
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
-    background-image: radial-gradient(100% 100% at 100% 100%, #4D4C96 0%, #5F4B8B 100%);
-    animation: fade 1s 1.5s reverse forwards; /* 2.5s total */
-    z-index: -1; /* put behind other children of the password box */
-}
-.password-box.show-swap-authorization .prompt {
-    position: relative;
-    width: max-content;
-    padding-left: 1.5rem;
-    margin-left: auto;
-    margin-right: auto;
-    /* Set opacity to initially 0 such that the prompt gets faded in after the show-swap-authorization class gets
-    removed. While the class is still set, the effective value will be determined by the animation. */
-    opacity: 0;
-    animation: fade .4s 2.1s reverse backwards; /* 2.5s total */
-}
-.password-box.show-swap-authorization .prompt::before {
-    content: url('data:image/svg+xml,<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.9.3a1.41 1.41 0 0 0-2.16.57l-.48 1.17c-.2.47-.62.8-1.12.86l-1.25.17A1.41 1.41 0 0 0 .76 5l.49 1.16c.2.47.12 1-.19 1.4l-.77 1c-.56.75-.28 1.82.58 2.17l1.17.49c.47.19.8.62.86 1.12l.17 1.25A1.41 1.41 0 0 0 5 14.72l1.16-.48c.47-.2 1-.13 1.4.18l1 .77c.75.57 1.82.28 2.17-.58l.49-1.16c.19-.47.62-.8 1.12-.87l1.25-.16a1.41 1.41 0 0 0 1.12-1.94l-.48-1.17c-.2-.46-.13-1 .18-1.4l.77-1c.57-.74.28-1.81-.58-2.17l-1.16-.48c-.47-.2-.8-.62-.87-1.12l-.16-1.25A1.41 1.41 0 0 0 10.48.76l-1.17.49c-.46.2-1 .12-1.4-.19L6.9.3Zm4.03 6.25a.66.66 0 0 0-.92-.95L6.83 8.66l-1.35-1.3a.66.66 0 1 0-.92.95l1.81 1.76c.26.24.67.24.93 0l3.63-3.52Z" fill="white"/></svg>');
-    position: absolute; /* to avoid affecting the height of the prompt */
-    left: -1.25rem;
+    padding-top: 8.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 2.5rem;
+    pointer-events: none;
+    background: /* kyc icon */ url('data:image/svg+xml,<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.9.3a1.41 1.41 0 0 0-2.16.57l-.48 1.17c-.2.47-.62.8-1.12.86l-1.25.17A1.41 1.41 0 0 0 .76 5l.49 1.16c.2.47.12 1-.19 1.4l-.77 1c-.56.75-.28 1.82.58 2.17l1.17.49c.47.19.8.62.86 1.12l.17 1.25A1.41 1.41 0 0 0 5 14.72l1.16-.48c.47-.2 1-.13 1.4.18l1 .77c.75.57 1.82.28 2.17-.58l.49-1.16c.19-.47.62-.8 1.12-.87l1.25-.16a1.41 1.41 0 0 0 1.12-1.94l-.48-1.17c-.2-.46-.13-1 .18-1.4l.77-1c.57-.74.28-1.81-.58-2.17l-1.16-.48c-.47-.2-.8-.62-.87-1.12l-.16-1.25A1.41 1.41 0 0 0 10.48.76l-1.17.49c-.46.2-1 .12-1.4-.19L6.9.3Zm4.03 6.25a.66.66 0 0 0-.92-.95L6.83 8.66l-1.35-1.3a.66.66 0 1 0-.92.95l1.81 1.76c.26.24.67.24.93 0l3.63-3.52Z" fill="white"/></svg>') no-repeat center calc(50% /* move icon down */ - 2.5rem) / /* icon size */ 6.5rem,
+        /* purple gradient */ radial-gradient(100% 100% at 100% 100%, #4D4C96 0%, #5F4B8B 100%);
+    animation: fade 2.5s 1s reverse forwards;
 }
 
 /* SETTER */

diff --git a/src/components/PasswordBox.js b/src/components/PasswordBox.js
@@ -96,17 +96,12 @@ class PasswordBox extends Nimiq.Observable {
                     </svg>
                 <a>`
             : '';
-
-        /** @type {{[i18nTag: string]: string}} */
-        const promptVersions = {
-            'passwordbox-enter-password': '<div class="prompt nq-text-s" data-i18n="passwordbox-enter-password">Enter your password</div>',
-            'passwordbox-enter-pin': '<div class="prompt nq-text-s" data-i18n="passwordbox-enter-pin">Enter your PIN</div>',
-            'passwordbox-swap-authorized': '<div class="prompt nq-text-s" data-i18n="passwordbox-swap-authorized">Swap authorized</div>',
-        };
-        const promptHtml = promptVersions[options.showSwapAuthorization && !options.hideInput ? 'passwordbox-swap-authorized'
-            : options.minLength === Key.PIN_LENGTH ? 'passwordbox-enter-pin' : 'passwordbox-enter-password'];
         /* eslint-enable max-len */
 
+        const promptHtml = options.minLength === Key.PIN_LENGTH
+            ? '<div class="prompt nq-text-s" data-i18n="passwordbox-enter-pin">Enter your PIN</div>'
+            : '<div class="prompt nq-text-s" data-i18n="passwordbox-enter-password">Enter your password</div>';
+
         /* eslint-disable max-len */
         $el.innerHTML = TemplateTags.hasVars(3)`
             ${promptHtml}
@@ -127,19 +122,10 @@ class PasswordBox extends Nimiq.Observable {
         submitButton.classList.toggle('inverse', !options.hideInput);
 
         if (options.showSwapAuthorization && !options.hideInput) {
-            /** @type {HTMLDivElement} */
-            const $prompt = ($el.querySelector('.prompt'));
+            $el.dataset.i18nSwapAuthorizationCaption = I18n.translatePhrase('passwordbox-swap-authorized');
             AnimationUtils.animate('show-swap-authorization', $el, undefined, () => {
                 options.showSwapAuthorization = false;
-                // Apply the translation via translatePhrase such that the translationValidator finds it and also
-                // apply the data-i18n attribute such that the translation can be updated on language switch.
-                if (options.minLength === Key.PIN_LENGTH) {
-                    $prompt.textContent = I18n.translatePhrase('passwordbox-enter-pin');
-                    $prompt.dataset.i18n = 'passwordbox-enter-pin';
-                } else {
-                    $prompt.textContent = I18n.translatePhrase('passwordbox-enter-password');
-                    $prompt.dataset.i18n = 'passwordbox-enter-password';
-                }
+                delete (/** @type {HTMLFormElement} */ ($el)).dataset.i18nSwapAuthorizationCaption;
             });
         }