further things around login

web/js/app-login-init.js

@@ -1,6 +1,7 @@
 import './core/app-telemetry.js';
 import './components/app-flash-auto-dismiss.js';
 import './components/app-password-hints.js';
+import './components/app-password-toggle.js';
 
 const focusPrimaryErrorNotice = () => {
   const errorNotice = document.querySelector(
@@ -29,6 +30,7 @@ const lockLoginSubmitButtons = () => {
         return;
       }
       submitButton.disabled = true;
+      submitButton.setAttribute('aria-busy', 'true');
       submitButton.dataset.submitState = 'loading';
     });
   });

web/js/components/app-password-toggle.js

@@ -0,0 +1,40 @@
+export function initPasswordToggles() {
+  const inputs = document.querySelectorAll('input[type="password"]');
+  if (!inputs.length) {return;}
+
+  inputs.forEach((input) => {
+    if (!(input instanceof HTMLInputElement)) {return;}
+    const label = input.closest('label');
+    if (!label) {return;}
+
+    const wrapper = document.createElement('div');
+    wrapper.className = 'login-password-wrapper';
+
+    const toggle = document.createElement('button');
+    toggle.type = 'button';
+    toggle.className = 'login-password-toggle';
+    toggle.setAttribute('aria-label', 'Show password');
+    toggle.tabIndex = -1;
+    toggle.innerHTML = '<i class="bi bi-eye" aria-hidden="true"></i>';
+
+    input.replaceWith(wrapper);
+    wrapper.appendChild(input);
+    wrapper.appendChild(toggle);
+
+    toggle.addEventListener('click', () => {
+      const isPassword = input.type === 'password';
+      input.type = isPassword ? 'text' : 'password';
+      toggle.innerHTML = isPassword
+        ? '<i class="bi bi-eye-slash" aria-hidden="true"></i>'
+        : '<i class="bi bi-eye" aria-hidden="true"></i>';
+      toggle.setAttribute('aria-label', isPassword ? 'Hide password' : 'Show password');
+      input.focus();
+    });
+  });
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', initPasswordToggles);
+} else {
+  initPasswordToggles();
+}