From 93104c41d022bea4b7d30a167620f5079660233f Mon Sep 17 00:00:00 2001 From: Clemoucloum Date: Mon, 10 Jun 2024 17:59:16 +0300 Subject: [PATCH 1/6] demo folder created --- demo/README.md | 11 +++++++++++ demo/demo.html | 0 demo/style.css | 0 3 files changed, 11 insertions(+) create mode 100644 demo/README.md create mode 100644 demo/demo.html create mode 100644 demo/style.css diff --git a/demo/README.md b/demo/README.md new file mode 100644 index 0000000..a87e2d0 --- /dev/null +++ b/demo/README.md @@ -0,0 +1,11 @@ +# 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](). We've created this fork to specifically address an enhancement outlined in Issue #9. + +## Purpose +The purpose of this update is to enhance the user interface and add functionality as requested in the issue. We aim to make the password generator more intuitive and user-friendly by refining the frontend design and interaction model. + +## What's New +Demo Directory: We have added at the moment a new directory named demo which includes: +A basic HTML file to demonstrate the changes. +A CSS file that contains new styling to improve visual layout and responsiveness. \ No newline at end of file diff --git a/demo/demo.html b/demo/demo.html new file mode 100644 index 0000000..e69de29 diff --git a/demo/style.css b/demo/style.css new file mode 100644 index 0000000..e69de29 From 346acdaa2d6cc5297fcc94dccf97da161c690d26 Mon Sep 17 00:00:00 2001 From: Clemoucloum Date: Mon, 10 Jun 2024 22:11:10 +0300 Subject: [PATCH 2/6] basic webpage with randomly generated password of 12-15 characters without special characters --- demo/README.md | 4 ++-- demo/demo.html | 17 +++++++++++++++++ demo/script.js | 14 ++++++++++++++ demo/style.css | 0 demo/styles.css | 36 ++++++++++++++++++++++++++++++++++++ 5 files changed, 69 insertions(+), 2 deletions(-) create mode 100644 demo/script.js delete mode 100644 demo/style.css create mode 100644 demo/styles.css diff --git a/demo/README.md b/demo/README.md index a87e2d0..3bd3ab6 100644 --- a/demo/README.md +++ b/demo/README.md @@ -1,9 +1,9 @@ # 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](). We've created this fork to specifically address an enhancement outlined in Issue #9. +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 enhance the user interface and add functionality as requested in the issue. We aim to make the password generator more intuitive and user-friendly by refining the frontend design and interaction model. +The purpose of this update is to create a web-based user interface and add functionality as requested in the issue. ## What's New Demo Directory: We have added at the moment a new directory named demo which includes: diff --git a/demo/demo.html b/demo/demo.html index e69de29..8ebaf28 100644 --- a/demo/demo.html +++ b/demo/demo.html @@ -0,0 +1,17 @@ + + + + + + Password Generator + + + +
+

Password Generator

+ + +
+ + + \ No newline at end of file diff --git a/demo/script.js b/demo/script.js new file mode 100644 index 0000000..c1708ee --- /dev/null +++ b/demo/script.js @@ -0,0 +1,14 @@ +function generatePassword() { + //const length = 12; + const length = Math.random() * (15 - 12) + 12; // length of the password based on french governmental recommandations >=12 + const charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; // character list taken randomly for each index of the password + let password = ""; // + + for (let i = 0; i < length; i++) { + const randomIndex = Math.floor(Math.random() * charset.length); // Get a random index + password += charset.charAt(randomIndex); // Append the character at the random index to the password + } + + document.getElementById('passwordDisplay').value = password; +} + diff --git a/demo/style.css b/demo/style.css deleted file mode 100644 index e69de29..0000000 diff --git a/demo/styles.css b/demo/styles.css new file mode 100644 index 0000000..7b61ae6 --- /dev/null +++ b/demo/styles.css @@ -0,0 +1,36 @@ +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;**/ +} + +input[type="text"] { + margin-bottom: 20px; + padding: 10px; + width: 300px; + text-align: center; +} + +button { + padding: 20px 20px; + font-size: 16px; + cursor: pointer; + background-color: #0075e2; + color: white; + border: none; + border-radius: 5px; +} + +h1 { + color: #e2e2e2; +} From d50f1ba9111d63d482fe566c9ae317cd64c65c0b Mon Sep 17 00:00:00 2001 From: Clemoucloum Date: Tue, 11 Jun 2024 02:03:16 +0300 Subject: [PATCH 3/6] corrected interval 12-15 --- demo/script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demo/script.js b/demo/script.js index c1708ee..5fdaea8 100644 --- a/demo/script.js +++ b/demo/script.js @@ -1,6 +1,6 @@ function generatePassword() { //const length = 12; - const length = Math.random() * (15 - 12) + 12; // length of the password based on french governmental recommandations >=12 + const length = Math.random() * (3) + 12; // length of the password based on french governmental recommandations >=12 const charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; // character list taken randomly for each index of the password let password = ""; // From ff510f20ab12914bae5fda6b9b3aa01a808ee7f2 Mon Sep 17 00:00:00 2001 From: Clemoucloum Date: Tue, 11 Jun 2024 17:51:08 +0300 Subject: [PATCH 4/6] password length selection, base64, copy button added --- demo/demo.html | 10 ++++++++-- demo/script.js | 20 +++++++++++++------- demo/styles.css | 7 +++++++ 3 files changed, 28 insertions(+), 9 deletions(-) diff --git a/demo/demo.html b/demo/demo.html index 8ebaf28..7730d4f 100644 --- a/demo/demo.html +++ b/demo/demo.html @@ -9,9 +9,15 @@

Password Generator

- +
+ + +
+ +
+ - \ No newline at end of file + diff --git a/demo/script.js b/demo/script.js index 5fdaea8..bda747c 100644 --- a/demo/script.js +++ b/demo/script.js @@ -1,14 +1,20 @@ function generatePassword() { - //const length = 12; - const length = Math.random() * (3) + 12; // length of the password based on french governmental recommandations >=12 - const charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; // character list taken randomly for each index of the password - let password = ""; // + const lengthInput = document.getElementById('passwordLength'); + const length = parseInt(lengthInput.value); // Parse the input value as an integer + + const base64charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/"; + let password = ""; for (let i = 0; i < length; i++) { - const randomIndex = Math.floor(Math.random() * charset.length); // Get a random index - password += charset.charAt(randomIndex); // Append the character at the random index to the password + const randomIndex = Math.floor(Math.random() * base64charset.length); + password += base64charset.charAt(randomIndex); } - document.getElementById('passwordDisplay').value = password; + document.getElementById('passwordDisplay').value = password; } +function copyPassword() { + const passwordDisplay = document.getElementById('passwordDisplay'); + passwordDisplay.select(); + document.execCommand('copy'); +} \ No newline at end of file diff --git a/demo/styles.css b/demo/styles.css index 7b61ae6..282a4fe 100644 --- a/demo/styles.css +++ b/demo/styles.css @@ -21,6 +21,13 @@ input[type="text"] { text-align: center; } +input[type="number"] { + margin-bottom: 20px; + padding: 10px; + width: 200px; + text-align: center; +} + button { padding: 20px 20px; font-size: 16px; From bf9bd4ba7d5974dc4bb2628e3e745d4ceaf7ee5b Mon Sep 17 00:00:00 2001 From: Clemoucloum Date: Tue, 11 Jun 2024 19:05:03 +0300 Subject: [PATCH 5/6] Iteration and separator input added, length term define iteration --- demo/demo.html | 10 +++++++--- demo/script.js | 23 ++++++++++++++++++----- demo/styles.css | 15 +++++++++------ 3 files changed, 34 insertions(+), 14 deletions(-) diff --git a/demo/demo.html b/demo/demo.html index 7730d4f..2b7eb92 100644 --- a/demo/demo.html +++ b/demo/demo.html @@ -9,12 +9,16 @@

Password Generator

-
+
- - +
+ + + + +
diff --git a/demo/script.js b/demo/script.js index bda747c..e83c270 100644 --- a/demo/script.js +++ b/demo/script.js @@ -1,13 +1,25 @@ function generatePassword() { - const lengthInput = document.getElementById('passwordLength'); - const length = parseInt(lengthInput.value); // Parse the input value as an integer + // Getting input data from html + const lengthInput = document.getElementById('iterationLength'); + const separatorInput = document.getElementById('separator') + const iterationInput = document.getElementById('iteration') + + // Parsing input + const length = parseInt(lengthInput.value); + const iteration = parseInt(iterationInput.value); + const separator = separatorInput.value; const base64charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/"; let password = ""; - for (let i = 0; i < length; i++) { - const randomIndex = Math.floor(Math.random() * base64charset.length); - password += base64charset.charAt(randomIndex); + for (let j = 0; j Date: Wed, 12 Jun 2024 06:40:59 +0300 Subject: [PATCH 6/6] Implementing various features for a Demo website --- demo/README.md | 19 +++++++--- demo/demo.html | 24 ++++++++++--- demo/script.js | 41 +++++++++++++++++++-- demo/styles.css | 95 ++++++++++++++++++++++++++++++++++++++++++++----- 4 files changed, 158 insertions(+), 21 deletions(-) diff --git a/demo/README.md b/demo/README.md index 3bd3ab6..1b26914 100644 --- a/demo/README.md +++ b/demo/README.md @@ -3,9 +3,18 @@ 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 interface and add functionality as requested in the issue. +The purpose of this update is to create a web-based user demo interface of a password generator. -## What's New -Demo Directory: We have added at the moment a new directory named demo which includes: -A basic HTML file to demonstrate the changes. -A CSS file that contains new styling to improve visual layout and responsiveness. \ No newline at end of file +## 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. \ No newline at end of file diff --git a/demo/demo.html b/demo/demo.html index 2b7eb92..5a91298 100644 --- a/demo/demo.html +++ b/demo/demo.html @@ -11,12 +11,26 @@

Password Generator

- + +
-
- - - +
+
+
+ + +
+
+ + +
+ +
+
+ + + +
diff --git a/demo/script.js b/demo/script.js index e83c270..e27322e 100644 --- a/demo/script.js +++ b/demo/script.js @@ -3,19 +3,33 @@ function generatePassword() { 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 base64charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/"; + 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'); + background-position: center; +} + + +input[type="checkbox"]:hover { + filter: brightness(0.95); } + + button { padding: 20px 20px; font-size: 16px;