toggle password visibility

client/user/login.html

@@ -23,8 +23,13 @@
             </div>
             <div class="col-12 mb-3">
                 <label class="form-label" for="password">Password</label>
-                <input class="form-control" id="password" type="password" name="password" required>
-                <div class="invalid-feedback">Enter your password.</div>
+                <div class="input-group">
+                    <input class="form-control" id="password" type="password" name="password" required>
+                    <button class="btn btn-outline-secondary" id="toggle-password" type="button" aria-label="Show password">
+                        <i class="bi bi-eye"></i>
+                    </button>
+                    <div class="invalid-feedback">Enter your password.</div>
+                </div>
                 <div class="form-text" id="passwordHelp">Forgot your password? <a href="/user/forgot-password">Click here</a>.</div>
             </div>
             <button class="btn btn-primary" id="submission" type="submit">

client/user/login.js

@@ -2,6 +2,16 @@ import account from '../scripts/accounts.js';
 
 account.deleteUsername();
 
+const passwordInput = document.getElementById('password');
+const togglePassword = document.getElementById('toggle-password');
+togglePassword.addEventListener('click', () => {
+  const isPassword = passwordInput.type === 'password';
+  passwordInput.type = isPassword ? 'text' : 'password';
+  togglePassword.querySelector('i').classList.toggle('bi-eye', !isPassword);
+  togglePassword.querySelector('i').classList.toggle('bi-eye-slash', isPassword);
+  togglePassword.setAttribute('aria-label', isPassword ? 'Hide password' : 'Show password');
+});
+
 const form = document.getElementById('login-form');
 form.addEventListener('submit', (event) => {
   event.preventDefault();

client/user/signup.html

@@ -30,8 +30,13 @@
             <div class="row mb-3">
                 <div class="col-12">
                     <label class="form-label" for="password">Password</label>
-                    <input class="form-control" id="password" type="password" name="password" required>
-                    <div class="invalid-feedback">Enter your password.</div>
+                    <div class="input-group">
+                        <input class="form-control" id="password" type="password" name="password" required>
+                        <button class="btn btn-outline-secondary" id="toggle-password" type="button" aria-label="Show password">
+                            <i class="bi bi-eye"></i>
+                        </button>
+                        <div class="invalid-feedback">Enter your password.</div>
+                    </div>
                     <div class="form-text">
                         By signing up, you agree to the <a href="/about/privacy-policy">privacy policy</a> and <a
                             href="/about/terms-of-service">terms of service</a>.

client/user/signup.js

@@ -1,3 +1,13 @@
+const passwordInput = document.getElementById('password');
+const togglePassword = document.getElementById('toggle-password');
+togglePassword.addEventListener('click', () => {
+  const isPassword = passwordInput.type === 'password';
+  passwordInput.type = isPassword ? 'text' : 'password';
+  togglePassword.querySelector('i').classList.toggle('bi-eye', !isPassword);
+  togglePassword.querySelector('i').classList.toggle('bi-eye-slash', isPassword);
+  togglePassword.setAttribute('aria-label', isPassword ? 'Hide password' : 'Show password');
+});
+
 const form = document.getElementById('signup-form');
 form.addEventListener('submit', (event) => {
   event.preventDefault();