GH-1 # plug password generation lib to frontend

Hugo-C · Hugo-C · commit 23db9c598db7 · 2025-02-05T23:15:52.000+01:00
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,2 @@
-**/bundle.js
+src/static/*.bundle.js
 package-lock.json
diff --git a/build.js b/build.js
@@ -0,0 +1,22 @@
+#!/usr/bin/env node
+
+import * as esbuild from 'esbuild'
+
+esbuild
+  .build({
+    logLevel: "info",
+    entryPoints: ['src/static/interface_check_password_leak.js'],
+    bundle: true,
+    outfile: 'src/static/index.bundle.js',
+  })
+  .catch(() => process.exit(1));
+
+esbuild
+  .build({
+    logLevel: "info",
+    entryPoints: ['src/static/interface_password_generation.js'],
+    bundle: true,
+    outfile: 'src/static/password_generation.bundle.js',
+  })
+  .catch(() => process.exit(1));
+
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "type": "module",
   "scripts": {
-    "build": "esbuild src/static/check_password_leak.js --bundle --outfile=src/static/bundle.js",
+    "build": "./build.js",
     "test": "node --experimental-vm-modules node_modules/.bin/jest"
   },
   "devDependencies": {
diff --git a/src/static/index.html b/src/static/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <title>HIBP - clone</title>
     <link href="main.css" rel="stylesheet"/>
-    <script type="module" src="bundle.js"></script>
+    <script type="module" src="index.bundle.js"></script>
 </head>
 <body>
 <div class="sidenav">
diff --git a/src/static/interface_check_password_leak.js b/src/static/interface_check_password_leak.js
diff --git a/src/static/interface_password_generation.js b/src/static/interface_password_generation.js
@@ -0,0 +1,16 @@
+import { generatePassword } from './password_generation.js';
+
+const passwordGenerationResult = document.getElementById('passwordGenerationResultDiv')
+
+document.getElementById('generatePasswordButton').addEventListener('click', (e) => {
+    generatePasswordForUI();
+})
+
+function generatePasswordForUI() {
+    let password = generatePassword(10);
+    displayPasswordGenerationResult(password)
+}
+
+function displayPasswordGenerationResult(password){
+    passwordGenerationResult.innerHTML = `Mot de passe généré: <div id="passwordGenerated">${password}</div>`
+}
diff --git a/src/static/main.css b/src/static/main.css
@@ -52,4 +52,9 @@ body {
 
 .resultClear {
   background-color: #28b463;
-}
+}
+
+#passwordGenerated {
+	font-weight: bold;
+	background-color: #d5d5d5;
+}
diff --git a/src/static/password_generation.html b/src/static/password_generation.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <title>HIBP - clone</title>
     <link href="main.css" rel="stylesheet"/>
-    <script type="module" src="password_generation.js"></script>
+    <script type="module" src="password_generation.bundle.js"></script>
 </head>
 <body>
 <div class="sidenav">
@@ -16,6 +16,8 @@
 <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">
+    <div id="passwordGenerationResultDiv"></div>
 </div>
 
 </body>

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,2 @@`
`1`		`-**/bundle.js`
	`1`	`+src/static/*.bundle.js`
`2`	`2`	`package-lock.json`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"type": "module",`
`3`	`3`	`"scripts": {`
`4`		`- "build": "esbuild src/static/check_password_leak.js --bundle --outfile=src/static/bundle.js",`
	`4`	`+ "build": "./build.js",`
`5`	`5`	`"test": "node --experimental-vm-modules node_modules/.bin/jest"`
`6`	`6`	`},`
`7`	`7`	`"devDependencies": {`