sebastienrousseau · Clemoucloum · Jun 10, 2024 · Jun 10, 2024 · Jun 10, 2024 · Jun 11, 2024
diff --git a/demo/README.md b/demo/README.md
@@ -0,0 +1,20 @@
+# Project Update for Password Generator
+## Introduction
+This repository is a fork of the original [Password Generator](https://github.com/sebastienrousseau/password-generator) by [Sebastien Rousseau](https://github.com/sebastienrousseau). We've created this fork to specifically address an enhancement outlined in [Issue #9](https://github.com/sebastienrousseau/password-generator/issues/9).
+
+## Purpose
+The purpose of this update is to create a web-based user demo interface of a password generator.
+
+## Features
+#### Customizable Password Length:
+Users can specify the exact length of the password, with a specific number of iteration of various length. 
+
+#### Character Inclusion Options:
+- Digits: Users can choose to include or exclude digits (0-9) in the password.
+- Special Characters: For added security, the option to include special characters (such as +/) can be toggled on or off.
+
+#### Copy functionality
+Once a password is generated, it can be easily copied to the clipboard with a single clic.
+
+#### Password strength indicator
+The copy button carries a color indicator based on the length of the password, its purpose is to reflect the strength of the password.
diff --git a/demo/demo.html b/demo/demo.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Password Generator</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Password Generator</h1>
+        <div class="display">
+            <input type="text" id="passwordDisplay" readonly>
+            <button id="copyButton" onclick="copyPassword()">Copy</button>
+
+        </div>
+        <div class="settings">
+            <div class="boxSettings">
+                <div class="checkbox-container">
+                    <input type="checkbox" id="specialChars" name="specialChars" checked>
+                    <label for="specialChars">Include special characters</label>
+                </div>
+                <div class="checkbox-container">
+                    <input type="checkbox" id="digits" name="digits" checked>
+                    <label for="specialChars">Include digits</label>
+            </div>
+
+            </div>
+            <div class="inputSettings">
+                <input type="number" id="iterationLength" placeholder="Iteration length">
+                <input type="number" id="iteration" placeholder="Iteration">
+                <input type="text" id="separator" placeholder="Separator for iterations">
+            </div>
+
+        </div>
+        <button onclick="generatePassword()">Generate Password</button>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/demo/script.js b/demo/script.js
@@ -0,0 +1,68 @@
+function generatePassword() {
+    // Getting input data from html
+    const lengthInput = document.getElementById('iterationLength');
+    const separatorInput = document.getElementById('separator')
+    const iterationInput = document.getElementById('iteration')
+    const includeSpecialChars = document.getElementById('specialChars').checked;
+    const includeDigits = document.getElementById('digits').checked;
+
+    // Parsing input
+    const length = parseInt(lengthInput.value); 
+    const iteration = parseInt(iterationInput.value);
+    const separator = separatorInput.value;
+
+    const baseCharset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
+    const digits = "0123456789";
+    const specialChars = "+/";
+
+    let charset = baseCharset;
+    if (includeDigits) {
+        charset += digits;
+    }
+    if (includeSpecialChars) {
+        charset += specialChars;
+    }
+
+
+    let password = "";
+
+    for (let j = 0; j<iteration; j++) {
+        for (let i = 0; i < length; i++) {
+            const randomIndex = Math.floor(Math.random() * charset.length);
+            password += charset.charAt(randomIndex);
+        }
+        if(j<iteration-1) {
+            password+=separator;
+        }
+    }
+
+    document.getElementById('passwordDisplay').value = password;
+
+    // Change the copy button color depending on the length of the code
+    const copyButton = document.getElementById('copyButton');
+    if (password.length < 3) {
+        copyButton.style.backgroundColor = "#8B0000"; // Dark red
+    }
+    else if (password.length < 6) {
+        copyButton.style.backgroundColor = "#FF0000"; // Red
+    }
+    else if (password.length < 8) {
+        copyButton.style.backgroundColor = "#FFFF00"; // Yellow
+    }
+    else if (password.length < 11) {
+        copyButton.style.backgroundColor = "#ADFF2F"; // Green
+    }
+    else {
+        copyButton.style.backgroundColor = "#32CD32"; // Dark green
+    }
+
+}
+
+
+
+function copyPassword() {
+    const passwordDisplay = document.getElementById('passwordDisplay');
+    passwordDisplay.select();
+    document.execCommand('copy');
+    console.log('password copied')
+}
diff --git a/demo/styles.css b/demo/styles.css
@@ -0,0 +1,125 @@
+body, html {
+    height: 100%;
+    margin: 0;
+    font-family: Arial, sans-serif;
+    background-color: #25272a;
+}
+
+
+
+
+.container {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    /**background-color: #f7f7f7;**/
+}
+
+
+
+.display input{
+    margin-top: 1em;
+    margin-bottom: 20px;
+    padding: 20px;
+    width: 300px;
+    text-align: center;
+
+}
+
+.settings{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    width: 100%;
+    align-items: flex-start;
+}
+
+
+.checkbox-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;  
+    margin-bottom: 10px;  
+}
+
+.boxSettings,
+.inputSettings {
+    display: flex;
+    flex-direction: column;
+    padding: 0 20px;
+}
+
+
+
+.boxSettings {
+    align-items: flex-start;
+}
+
+
+
+.boxSettings input,
+.inputSettings input {
+    margin-bottom: 20px;
+    padding: 10px;
+    text-align: center; 
+}
+
+
+
+.boxSettings label {
+    color: #e2e2e2;
+    display: flex;
+    align-items: center;
+    margin-bottom: 5px;
+
+}
+
+
+input[type="checkbox"] {
+    position: relative;
+    top: 5px;
+    /* Size */
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    margin-right: 5px;
+    /* Appearance */
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-color: #fff;
+    border: 2px solid #0075e2;
+    border-radius: 4px;
+    outline: none;
+}
+
+
+input[type="checkbox"]:checked {
+    background-color: #0075e2;
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="%23ffffff" viewBox="0 0 20 20"><path d="M16.7 5.3a1 1 0 00-1.4 0L7.5 13.1 5.2 10.8a1 1 0 10-1.4 1.4l3 3c.4.4 1 .4 1.4 0l8.5-8.5a1 1 0 000-1.4z"/></svg>');
+    background-position: center; 
+}
+
+
+input[type="checkbox"]:hover {
+    filter: brightness(0.95);
+}
+
+
+
+
+button {
+    padding: 20px 20px;
+    font-size: 16px;
+    cursor: pointer;
+    background-color: #0075e2;
+    color: white;
+    border: none;
+    border-radius: 5px;
+}
+
+h1 {
+    color: #e2e2e2;
+}