GH-2 # display password check result

Author: Hugo-C

README.md

@@ -61,7 +61,8 @@ Plusieurs solutions sont envisagées. La première est de pousser les données e
 
 ---
 
-Pour la partie frontend, je n'ai pas réussie à mon grand regret à utiliser la librairie npm dans le navigateur d'une manière compatible avec Jest. Je me suis rabattu sur `browserify` puis sur `esbuild`.
+Pour la partie frontend, je n'ai pas réussie à mon grand regret à utiliser la librairie npm dans le navigateur d'une manière compatible avec Jest. Je me suis rabattu sur `browserify` puis sur `esbuild`.  
+Cela m'a obligé à supprimer les références au JS dans le HTML et a séparer le JS entre les éléments qui font appel au DOM (non compatible avec Jest) avec le code que l'on souhaite tester (voir [commit](https://github.com/Hugo-C/HIBP/commit/6204d792616d1e2dca3550e355350d4feeee047e)).
 
 ### Partie génération de mot de passe
 

src/static/check_password_leak.js

@@ -1,6 +1,10 @@
 import { hashPrefix } from './hash.js';
 
-document.addEventListener("keyup", ({key}) => {
+const API_URL = 'http://localhost:8000/api/v1/haveibeenrocked/';
+
+const passwordLeakCheckResult = document.getElementById('passwordLeakCheckResult')
+
+document.addEventListener('keyup', ({key}) => {
     if (key === 'Enter') {
         submitPassword()
     }
@@ -9,7 +13,30 @@ document.getElementById('submittedPasswordButton').addEventListener('click', (e)
     submitPassword();
 })
 
-function submitPassword() {
-    let password = document.getElementById('submittedPassword').value;
-    hashPrefix(password).then(prefix => alert(prefix));
+async function submitPassword() {
+    let submittedPassword = document.getElementById('submittedPassword').value;
+    let prefix = await hashPrefix(submittedPassword);
+    let passwords = await fetchMatchingPasswords(prefix);
+
+    if (passwords.includes(submittedPassword)) {
+        passwordIsLeakedResult(submittedPassword)
+    } else {
+        passwordIsClearedResult(submittedPassword)
+    }
+}
+
+async function fetchMatchingPasswords(prefix) {
+    let response = await fetch(API_URL + prefix);
+    let data = await response.json();
+    return data[prefix];
+}
+
+function passwordIsLeakedResult(submittedPassword){
+    passwordLeakCheckResult.innerHTML = `🫠 le mot de passe "${submittedPassword}" est présent dans la base`
+    passwordLeakCheckResult.className = "resultLeak";
+}
+
+function passwordIsClearedResult(submittedPassword){
+    passwordLeakCheckResult.innerHTML = `🥳 le mot de passe "${submittedPassword}" n'est pas dans la base`
+    passwordLeakCheckResult.className = "resultClear";
 }

src/static/index.html

@@ -15,11 +15,15 @@
 
 <div class="content">
     <h2>Test de la fuite de mot de passe</h2>
-    <p>Cette page permet de tester si votre mot de passe est présent dans la base <a
-            href="https://en.wikipedia.org/wiki/RockYou#Data_breach" target="_blank">RockYou</a>.</p>
+    <div>Cette page permet de tester si votre mot de passe est présent dans la base <a
+            href="https://en.wikipedia.org/wiki/RockYou#Data_breach" target="_blank">RockYou</a>.
+    </div>
+    <div>
+        Le mot de passe n'est pas envoyé au serveur, uniquement les premiers caractères de son hash.
+    </div>
     <input id="submittedPassword"/>
     <input id="submittedPasswordButton" type="button" value="Tester">
-    <p>Le mot de passe n'est pas envoyé au serveur, uniquement les premiers caractères de son hash.</p>
+    <div id="passwordLeakCheckResult"></div>
 </div>
 
 </body>

src/static/main.css

@@ -40,4 +40,13 @@ body {
 .content {
   margin-left: 200px;
   padding-left: 20px;
+}
+
+/* --- custom from here --- */
+.resultLeak {
+  background-color: #cb4335;
+}
+
+.resultClear {
+  background-color: #28b463;
 }