always reveal generated code; refactor

src/authorization.html

@@ -92,11 +92,11 @@
             width: min-content;
         }
 
-        .container[data-valid="true"] {
+        form[data-valid="true"] > .container {
             border-color: var(--success);
         }
 
-        .container[data-valid="false"] {
+        form[data-valid="false"] > .container {
             border-color: var(--caution);
         }
 
@@ -124,11 +124,6 @@
             background: var(--primary);
         }
 
-        .generate-text {
-            text-align: center;
-            margin: 1.5rem 0;
-        }
-
         a {
             color: inherit;
         }
@@ -143,16 +138,8 @@
             padding: 1rem;
             border-radius: 5px;
             box-sizing: border-box;
-            transition: ease 0.4s;
-            overflow: hidden;
         }
 
-        .info-accounts.hidden {
-            height: 0;
-            opacity: 0;
-        }
-
-
         button[data-state="password"] .closed {
             display: none;
         }
@@ -161,19 +148,15 @@
             display: none;
         }
 
-        @media (prefers-color-scheme: light) {
+        form[data-valid="true"] .generate {
-            :root {
+            display: none;
-                --background: #fefefe;
-                --text: #2f2f2f;
-                --primary: #b0b0b0;
-                --secondary: #d9d9d9;
-                --success: #76B041;
-                --caution: #FF6B6C;
-                --caution-darker: #c83033;
         }
-            .info-accounts {
+
-                color: #fefefe;
+        .login-once {
+            display: none;
         }
+        form[data-valid="true"] .login-once {
+            display: block;
         }
 
         .login-action-container {
@@ -205,6 +188,21 @@
             width: max-content;
             margin: 1.5em auto;
         }
+
+        @media (prefers-color-scheme: light) {
+            :root {
+                --background: #fefefe;
+                --text: #2f2f2f;
+                --primary: #b0b0b0;
+                --secondary: #d9d9d9;
+                --success: #76B041;
+                --caution: #FF6B6C;
+                --caution-darker: #c83033;
+            }
+            .info-accounts {
+                color: #fefefe;
+            }
+        }
     </style>
 </head>
 
@@ -219,7 +217,7 @@
                     <span style="font-weight:normal"> {{client_name}}</span>
             </h1>
 
-            <form id="loginForm" name="login" method="post" enctype="application/x-www-form-urlencoded" >
+            <form id="loginForm" name="login" method="post" enctype="application/x-www-form-urlencoded" data-valid="pending">
                 <div class="container" id="accInputCont">
                     <input id="accInput" name="account" inputmode="numeric" autocomplete="current-password" autofocus type="password"
                         class="account-number-input" placeholder="0000000000000000" maxlength="16" required />
@@ -239,8 +237,8 @@
                     <a id="newAccountButton" href="/new-account" target="_blank">
                             <span class="generate" lang="en">Generate new account</span>
                             <span class="generate" lang="cs" hidden>Generovat nový účet</span>
-                            <span class="login-once hidden" lang="en">Log in once</span>
+                            <span class="login-once" lang="en">Log in once</span>
-                            <span class="login-once hidden" lang="cs" hidden>Přihlásit se jednou</span>
+                            <span class="login-once" lang="cs" hidden>Přihlásit se jednou</span>
                     </a>
                     <button id="loginButton" class="login-button">
                             <!-- this will get changed to "Log in" by JS -->
@@ -250,7 +248,7 @@
                 </div>
             </form>
 
-            <p id="infoBox" hidden class="info-accounts hidden">
+            <p id="infoBox" class="info-accounts" hidden>
                 <span lang="en">
                     <b>Careful!</b> This code is the only way to access your accounts. Keep it
                     somewhere safe and out of sight!
@@ -274,9 +272,9 @@
             if (p.length == 16) {
                 const payload = p.slice(0, p.length - 1);
 
-                accInputCont.dataset.valid = p[0].toLowerCase() == 'a' && calculateChecksum(payload) == p[p.length - 1].toLowerCase();
+                loginForm.dataset.valid = p[0].toLowerCase() == 'a' && calculateChecksum(payload) == p[p.length - 1].toLowerCase();
             } else {
-                accInputCont.dataset.valid = "pending";
+                loginForm.dataset.valid = "pending";
             }
 
             updateSecondaryAction();
@@ -285,7 +283,7 @@
         });
 
         loginForm.addEventListener("submit", ev => {
-            if (accInputCont.dataset.valid != "true") {
+            if (loginForm.dataset.valid != "true") {
                 ev.preventDefault();
                 return;
             }
@@ -300,7 +298,6 @@
         function formatInput() {
             const caret = accInput.selectionStart;
 
-
             const formatted = [...accInput.value.replace(/ +/g, "")].map((c, i) => i != 0 && i % 4 == 0 ? " " + c : c).join("");
 
             if (formatted != accInput.value) {
@@ -330,16 +327,7 @@
 
         function updateSecondaryAction() {
             newAccountButton.target = "_self";
-
+            newAccountButton.href = loginForm.dataset.valid == 'true' ? 'javascript:loginForm.submit()' : 'javascript:generateAccountHandler()';
-            if (accInputCont.dataset.valid == 'true') {
-                document.querySelectorAll('.generate').forEach(el => el.classList.add('hidden'))
-                document.querySelectorAll('.login-once').forEach(el => el.classList.remove('hidden'))
-                newAccountButton.href = 'javascript:loginForm.submit()';
-            } else {
-                document.querySelectorAll('.generate').forEach(el => el.classList.remove('hidden'))
-                document.querySelectorAll('.login-once').forEach(el => el.classList.add('hidden'))
-                newAccountButton.href = 'javascript:generateAccountHandler()';
-            }
         }
 
         function parseDigit(d) {
@@ -383,13 +371,14 @@
 
         function generateAccountHandler() {
             accInput.value = generateAccount();
-            accInputCont.dataset.valid = true;
+            loginForm.dataset.valid = true;
 
+            showCodeButton.dataset.state == "password" && toggleInputType();
             formatInput();
+
             updateSecondaryAction();
 
             infoBox.hidden = false;
-            setTimeout(() => infoBox.classList.toggle("hidden", false), 0);
         }
 
         function forget() {
@@ -408,7 +397,7 @@
         const savedCode = window.localStorage.getItem("code");
         if (savedCode) {
             accInput.value = savedCode;
-            accInputCont.dataset.valid = true;
+            loginForm.dataset.valid = true;
             forgetAccountButton.hidden = false;
         }