Provide demo website for password-generator (Issue #9)

[Clemoucloum]

We have created a demo site of a password generation tool that implement various features such as :

• Customizable password length
• Char inclusion options
• Copy functionnality
• Password strength indicator

HTML, CSS and Javascript files can be found in the demo directory alongside a readme file detailling a little bit more some features.

[sebastienrousseau]

@Clemoucloum I would advise here to update the README.md to further describe something like:

Introduction

This is a demonstration of the Password Generator application. This web-based interface is meticulously designed for developers and cybersecurity professionals, providing a robust tool to instantly generate secure, random passwords tailored to specific requirements.

Purpose

The objective of this update is to deliver a comprehensive, user-centric web demo for the password generator application. This interface enables seamless creation and customisation of secure passwords, ensuring they meet the highest security standards.

Features

Customisable Password Length

The password generator offers granular control over password length, allowing users to specify the exact number of characters. Additionally, it supports multiple iterations of varying lengths, ensuring flexibility and adherence to different security policies.

Character Inclusion Options

To cater to diverse security needs and compliance requirements, the application includes:

• Digits: Users can opt to include or exclude numeric characters (0-9), enhancing the password's complexity as needed.
• Special Characters: For increased security, users can toggle the inclusion of special characters (e.g., +/), ensuring the generated passwords meet stringent security criteria.

Copy Functionality

The application features an efficient copy-to-clipboard functionality, allowing users to transfer generated passwords with a single click. This streamlines the process of updating and managing passwords across different platforms and applications.

Password Strength Indicator

To provide immediate feedback on the security level of the generated passwords, the application includes a colour-coded strength indicator integrated into the copy button. This indicator evaluates the password's strength based on its length and complexity, ensuring users create highly secure passwords.

Explore the demo to experience how our password generator can enhance your security practices, offering an intuitive and powerful tool for creating, customising, and managing secure passwords with ease.

[sebastienrousseau]

Just a few comments for you to review:

1. Your code uses document.execCommand('copy') to copy the password to the clipboard, which is deprecated and may not work in all browsers. Consider using the newer Clipboard API instead.

2. Your code doesn't have any error handling or validation for user input. It assumes that the user will provide valid input values. I would advise you adding validation checks to handle cases where the user enters invalid or unexpected values.

3. The color scheme for the copy button is hardcoded. I would advise you to consider making it more flexible or customisable maybe via CSS?

4. Might be worth adding JSDoc to the user or developer?

Maybe something like this?

/**

• Generates a password based on user input.

• @function

• @name generatePassword

• @returns {void}
  */
  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;

  // Validate input
  if (isNaN(length) || isNaN(iteration) || length <= 0 || iteration <= 0) {
  alert('Please enter valid numeric values for length and iteration.');
  return;
  }

  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');
  const colorScheme = [
  { length: 3, color: "#8B0000" },
  { length: 6, color: "#FF0000" },
  { length: 8, color: "#FFFF00" },
  { length: 11, color: "#ADFF2F" },
  { length: Infinity, color: "#32CD32" }
  ];

  const buttonColor = colorScheme.find(scheme => password.length < scheme.length).color;
  copyButton.style.backgroundColor = buttonColor;
  }

/**

• Copies the generated password to the clipboard.
• @function
• @name copyPassword
• @returns {Promise}
  */
  async function copyPassword() {
  const passwordDisplay = document.getElementById('passwordDisplay');
  try {
  await navigator.clipboard.writeText(passwordDisplay.value);
  console.log('Password copied to clipboard');
  } catch (err) {
  console.error('Failed to copy password: ', err);
  }
  }

[sebastienrousseau]

Similarly, might be worth enhancing your code maybe something like this?

/* Reset default margin and set global styles */
body, html {
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: #25272a;
}

/* Main container styles */
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}

/* Password display input styles */
.display input {
width: 100%;
max-width: 50vw;
padding: 2vh;
margin-top: 1vh;
margin-bottom: 2vh;
text-align: center;
font-size: 2vw;
}

/* Settings container styles */
.settings {
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
width: 100%;
}

/* Checkbox container styles */
.checkbox-container {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 1vh;
}

/* Box and input settings container styles */
.boxSettings,
.inputSettings {
display: flex;
flex-direction: column;
padding: 0 2vw;
}

/* Box settings alignment */
.boxSettings {
align-items: flex-start;
}

/* Input styles for box and input settings */
.boxSettings input,
.inputSettings input {
padding: 1vh;
margin-bottom: 2vh;
text-align: center;
font-size: 1.5vw;
}

/* Label styles for box settings */
.boxSettings label {
display: flex;
align-items: center;
margin-bottom: 0.5vh;
color: #e2e2e2;
font-size: 1.5vw;
}

/* Checkbox styles */
input[type="checkbox"] {
position: relative;
top: 0.5vh;
width: 2vw;
height: 2vw;
margin-right: 0.5vw;
cursor: pointer;
appearance: none;
background-color: #fff;
border: 0.2vw solid #0075e2;
border-radius: 0.4vw;
outline: none;
}

/* Checkbox checked styles */
input[type="checkbox"]:checked {
background-color: #0075e2;
background-image: url('data:image/svg+xml;utf8,');
background-position: center;
}

/* Checkbox hover styles */
input[type="checkbox"]:hover {
filter: brightness(0.95);
}

/* Button styles */
button {
padding: 2vh 2vw;
font-size: 1.5vw;
color: white;
background-color: #0075e2;
border: none;
border-radius: 0.5vw;
cursor: pointer;
}

/* Heading styles */
h1 {
color: #e2e2e2;
font-size: 3vw;
}

1. Updated the font family to font-family: Arial, Helvetica, sans-serif; for better font support and fallback options.
2. Converted pixel values to vw and vh units for responsive scaling based on the viewport width and height.
3. Added font sizes in vw units for the password display input, input settings, labels, and heading to ensure they scale proportionally with the viewport width.