Ability to show password when logging in or registering

static/css/login.css

@@ -84,4 +84,9 @@ body {
     display: flow;
     text-align: center;
     color: white;
-}
+}
+
+.inline {
+    width: fit-content;
+    color: white;
+}

static/css/register.css

@@ -4,4 +4,4 @@
 
 .ok {
     color: green;
-}
+}

static/html/login.html

@@ -23,6 +23,10 @@
             <br>
             <input id="password" type="password">
             <br>
+            <div>
+                <label class="inline" for="showPassword">Montrer le mot de passe?</label>
+                <input id="showPassword" type="checkbox">
+            </div>
             <button id="connect">Se connecter</button>
         </div>
         <p>Tu n'as pas de compte?</p>

static/html/register.html

@@ -24,6 +24,11 @@
         <label for="password">Mot de passe:</label>
         <br>
         <input id="password" type="password">
+        <br>
+        <div>
+            <label class="inline" for="showPassword">Montrer le mot de passe?</label>
+            <input id="showPassword" type="checkbox">
+        </div>
         <p class="error" id="passwordNotice">Le mot de passe doit contenir plus de 8 caractères et doit contenir au minimum:
             <br>
             1 Majuscule
@@ -37,6 +42,10 @@
         <label for="passwordConfirm">Confirmer le mot de passe:</label>
         <br>
         <input id="passwordConfirm" type="password">
+        <div>
+            <label class="inline" for="showConfirmPassword">Montrer le mot de passe?</label>
+            <input id="showConfirmPassword" type="checkbox">
+        </div>
         <p class="error" id="passwordConfirmNotice">Les mots de passe doivent être les mêmes.</p>
         <button id="register">Créer un compte.</button>
     </div>

static/js/login.js

@@ -1,6 +1,7 @@
 async function login() {
     let username = document.getElementById("username").value;
     let password = document.getElementById("password").value;
+
     let code = await fetch("/login",
     {method: "POST", body: JSON.stringify({"username": username, "password": password})})
     .then(r => {
@@ -13,6 +14,15 @@ async function login() {
 }
 
 let button = document.getElementById("connect");
+let showPassword = document.getElementById("showPassword");
+showPassword.addEventListener("click", () => {
+    let password = document.getElementById("password");
+    if (showPassword.checked) {
+        password.type = "text";
+    } else {
+        password.type = "password";
+    }
+})
 button.addEventListener("click", () => {
     let _ = login();
 })

static/js/register.js

@@ -56,3 +56,23 @@ passwordConfirm.addEventListener("input", () => {
         document.getElementById("passwordConfirmNotice").className = "error";
     }
 })
+
+let showPassword = document.getElementById("showPassword");
+let showConfirmPassword = document.getElementById("showConfirmPassword");
+showPassword.addEventListener("click", () => {
+    let password = document.getElementById("password");
+    if (showPassword.checked) {
+        password.type = "text";
+    } else {
+        password.type = "password";
+    }
+})
+
+showConfirmPassword.addEventListener("click", () => {
+    let password = document.getElementById("passwordConfirm");
+    if (showConfirmPassword.checked) {
+        password.type = "text";
+    } else {
+        password.type = "password";
+    }
+})