PHPIndex

This page lists files in the current directory. You can view content, get download/execute commands for Wget, Curl, or PowerShell, or filter the list using wildcards (e.g., `*.sh`).

index.html
wget 'https://lists2.roe3.org/mdrone/PasswordGenerator/index.html'
View Content
<!DOCTYPE html>
<html lang="en-gb">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>JS Password Generator</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="wrapper">
      <header>
        <h1>JS Password Generator</h1>
      </header>
      <div class="card">
        
        <div class="card-header">
          <h2>Generate a silicone micro-chip powered password</h2>
        </div>
        <div class="card-body">
          <textarea
            readonly
            id="password"
            placeholder="Input conditions to generate super safey password"
            aria-label="Generated Password"
          ></textarea>
        </div>
        <div class="card-footer">
          <button id="conditions" class="btn">Choose types of characters</button>
          <button id="generate" class="btn">Generate password</button>
        </div>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>
script.js
wget 'https://lists2.roe3.org/mdrone/PasswordGenerator/script.js'
View Content
// Array of special characters to be included in password
var specialCharacters = [
  '@',
  '%',
  '+',
  '\\',
  '/',
  "'",
  '!',
  '#',
  '$',
  '^',
  '?',
  ':',
  ',',
  ')',
  '(',
  '}',
  '{',
  ']',
  '[',
  '~',
  '-',
  '_',
  '.'
];

// Array of numeric characters to be included in password
var numericCharacters = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];

// Array of lowercase characters to be included in password
var lowerCasedCharacters = [
  'a',
  'b',
  'c',
  'd',
  'e',
  'f',
  'g',
  'h',
  'i',
  'j',
  'k',
  'l',
  'm',
  'n',
  'o',
  'p',
  'q',
  'r',
  's',
  't',
  'u',
  'v',
  'w',
  'x',
  'y',
  'z'
];

// Array of uppercase characters to be included in password
var upperCasedCharacters = [
  'A',
  'B',
  'C',
  'D',
  'E',
  'F',
  'G',
  'H',
  'I',
  'J',
  'K',
  'L',
  'M',
  'N',
  'O',
  'P',
  'Q',
  'R',
  'S',
  'T',
  'U',
  'V',
  'W',
  'X',
  'Y',
  'Z'
];

// Declaring variables
let lowerCaseCharacters = false
let upperCaseCharacters = false
let numberCharacters = false
let oddCharacters = false
let passwordLength = 0
let randomArray = []
let randomNumbers = []
let randomPassword = []



alert("Welcome to web's safest password generator")
// Welcome alert

// Function to prompt user for password options
function getPasswordOptions() {

  i = 0
  while (i < 1) {
// while loop to include break property in case of non-accepted input
   
passwordLength = prompt("How many characters-long do you want your password to be?")

if (passwordLength < 10 || passwordLength > 64 || passwordLength % 1 !== 0) {
  alert("You have to choose a number between 10 and 64. Please try again.")
  break;
};

// convert input to integer
    passwordLength = parseInt(passwordLength)
 

  lowerCaseCharacters = confirm("Do you want include lower-case characters in your password?")
  upperCaseCharacters = confirm("Do you want include upper-case characters in your password?")
  numberCharacters = confirm("Do you want include numbers in your password?")
  oddCharacters = confirm("Do you want include special characters in your password?")
// Type of characters confirm notifications

  if (lowerCaseCharacters === false &&
      upperCaseCharacters === false &&
      numberCharacters === false &&
      oddCharacters === false) {
        alert("You have to choose at least one type of character to make-up the password. Please try again.")
        break;
      };
// Non-accepted conditions for type of characters where it breaks to start again
  i++ 
  }
}


// Function for getting a random element from an array
function getRandom(arr) {
  let allArrays = []; //included allArrays locally (instead of globally) so we don't have to reload the page to generate another password
  i = 0
  while (i < 1) {
//randomizes arrays
                     specialCharacters.sort(() => Math.random() - 0.5);
                     randomNumbers = numericCharacters.sort(() => Math.random() - 0.5);
                     lowerCasedCharacters.sort(() => Math.random() - 0.5);
                     upperCasedCharacters.sort(() => Math.random() - 0.5);

// checking user's input if true will utilise the above math.random arrays + brings all arrays together in one array if true
if (lowerCaseCharacters === true) {
  allArrays = allArrays.concat(lowerCasedCharacters);
}

if (upperCaseCharacters === true) {
  allArrays = allArrays.concat(upperCasedCharacters);
}

if (numberCharacters === true) {
  allArrays = allArrays.concat(randomNumbers);
}

if (oddCharacters === true) {
  allArrays = allArrays.concat(specialCharacters);
}

// randomizes the array
    randomArray = allArrays.sort(() => Math.random() - 0.5);

//sets array length based on passwordLength input

    randomPassword = randomArray.slice(0,passwordLength) 
      
i++
  }
  return randomPassword
};

// Function to generate password with user input
function generatePassword() {
    let finalPassword = getRandom();
    finalPassword = finalPassword.join("")
    return finalPassword

}


let conditionsBtn = document.querySelector('#conditions')
// Reference to #condition element

let generateBtn = document.querySelector('#generate');
// Get references to the #generate element

function generateConditions() {
  let conditions = getPasswordOptions()
  let conditionsText = document.querySelector('#conditions');

  conditionsText = conditions;
}
// add button for conditions, eliminating the first automatic alert when visiting page


function writePassword() {
  let password = generatePassword();
  let passwordText = document.querySelector('#password');

  passwordText.value = password;
}
// Write password to the #password input


conditionsBtn.addEventListener('click', generateConditions);
generateBtn.addEventListener('click', writePassword);
// Add event listener to generate button
style.css
wget 'https://lists2.roe3.org/mdrone/PasswordGenerator/style.css'
View Content
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
.wrapper {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
  background-color: #f5f5ed;
}

.wrapper {
  padding-top: 30px;
  padding-left: 20px;
  padding-right: 20px;
}

header {
  text-align: center;
  padding: 20px;
  padding-top: 0px;
  color: hsl(206, 17%, 28%);
}

.card {
  /*background-color: hsl(0, 0%, 100%);*/
  border-radius: 5px;
  border-width: 10px;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px 0px;
  color: hsl(206, 17%, 28%);
  font-size: 18px;
  margin: 0 auto;
  max-width: 800px;
  padding: 30px 40px;
  
  

  background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
}

#password {
  background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
}

.card-header::after {
  content: " ";
  display: block;
  width: 100%;
  background: #e7e9eb;
  height: 2px;
}

.card-body {
  min-height: 100px;
}

.card-footer {
  text-align: center;
}

.card-footer::before {
  content: " ";
  display: block;
  width: 100%;
  background: #e7e9eb;
  height: 2px;
}

.card-footer::after {
  content: " ";
  display: block;
  clear: both;
}

.btn {
  border: none;
  /*background-color: hsl(360, 91%, 36%);*/
  border-radius: 25px;
 /* box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 6px 0px rgba(0, 0, 0, 0.2) 0px 1px 1px 0px; */
  color: hsl(0, 0%, 100%);
  display: inline-block;
  font-size: 20px;
  line-height: 15px;
  margin: 16px 16px 16px 20px;
  padding: 14px 20px;
  text-align: center;
  cursor: pointer;

    background-image: linear-gradient(to right, #16222A 0%, #3A6073  51%, #16222A  100%);
    margin: 10px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;            
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px 0px;
    border-radius: 10px;
    display: inline;
  }

  .btn:hover {
    background-position: right center; /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
  }
 
  
 


button[disabled] {
  cursor: default;
  background: #c0c7cf;
}

.float-right {
  float: right;
}

#password {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  display: block;
  width: 100%;
  padding-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 85px;
  font-size: 1.2rem;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
  border: 2px dashed #c0c7cf;
  border-radius: 6px;
  resize: none;
  overflow: hidden;
  background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
}

@media (max-width: 690px) {
  .btn {
    font-size: 1rem;
    margin: 16px 0px 0px 0px;
    padding: 10px 15px;
  }

  #password {
    font-size: 1rem;
  }
}

@media (max-width: 500px) {
  .btn {
    font-size: 0.8rem;
  }
}

.card {
  
  background: rgb(223, 225, 235);
  border-radius: 50px;
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
 }