GH-1 # add GUI input to parametrize password generation

Author: Hugo-C

src/static/interface_password_generation.js

@@ -7,10 +7,40 @@ document.getElementById('generatePasswordButton').addEventListener('click', (e)
 })
 
 function generatePasswordForUI() {
-    let password = generatePassword(10);
+    let length = document.getElementById('passwordLengthInput').value;
+    let min_lowercase = 0;  // option not exposed to the user
+    let has_uppercase = document.getElementById('hasUpperCaseInput').checked;
+    let min_uppercase = parseInt(document.getElementById('minUpperCaseInput').value);
+
+    let has_number = document.getElementById('hasNumberInput').checked;
+    let min_number = parseInt(document.getElementById('minNumberInput').value);
+
+    let has_special_char = document.getElementById('hasSpecialCharInput').checked;
+    let min_special_char = parseInt(document.getElementById('minSpecialCharInput').value);
+
+    // Weak input verification
+    if (min_lowercase + min_uppercase + min_number + min_special_char > length) {
+        displayPasswordGenerationInvalidChoice();
+        return;
+    }
+
+    let password = generatePassword(
+        length,
+        min_lowercase,
+        has_uppercase,
+        min_uppercase,
+        has_number,
+        min_number,
+        has_special_char,
+        min_special_char,
+    );
     displayPasswordGenerationResult(password)
 }
 
 function displayPasswordGenerationResult(password){
     passwordGenerationResult.innerHTML = `Mot de passe généré: <div id="passwordGenerated">${password}</div>`
+}
+
+function displayPasswordGenerationInvalidChoice(){
+    passwordGenerationResult.innerHTML = '❌ Les paramètres ne sont pas cohérent'
 }

src/static/password_generation.html

@@ -16,7 +16,26 @@
 <div class="content">
     <h2>Génération de mot de passe</h2>
     <div>Cette page permet de générer un mot de passe fort</div>
-    <input id="generatePasswordButton" type="button" value="Générer">
+    <input id="passwordLengthInput" type="range" value="15" min="1" max="64" oninput="this.nextElementSibling.value = this.value">
+    <output>15</output>
+    <p>
+        <input type="checkbox" id="hasUpperCaseInput" checked/>
+        <label for="hasUpperCaseInput">Le mot de passe inclut des majuscules, au minimum:</label>
+        <input type="number" id="minUpperCaseInput" value="1" />
+    </p>
+    <p>
+        <input type="checkbox" id="hasNumberInput" checked/>
+        <label for="hasNumberInput">Le mot de passe inclut des nombres, au minimum:</label>
+        <input type="number" id="minNumberInput" value="1" />
+    </p>
+    <p>
+        <input type="checkbox" id="hasSpecialCharInput" checked/>
+        <label for="hasSpecialCharInput">Le mot de passe inclut des caractères spéciaux, au minimum:</label>
+        <input type="number" id="minSpecialCharInput" value="1" />
+    </p>
+    <p>
+        <input id="generatePasswordButton" type="button" value="Générer">
+    </p>
     <div id="passwordGenerationResultDiv"></div>
 </div>