A random password generator is software program or hardware tool that takes enter from a random or pseudo-random wide variety generator and routinely generates a password. Random passwords can be generated manually, the use of easy sources of randomness consisting of dice or coins, or they may be generated the use of a pc.
Advantages
The advantages of the use of a random password generator are apparent: A sturdy password generated online allow you to shield the safety of your personal and expert electronic mail accounts, social community money owed, WiFi encryption, banking and economic and financial savings money owed.
Disadvantages
The most visible inconvenience regarding this type of software software is which you are nevertheless compelled to duplicate and paste the freshly generated password into its relevant vicinity and there can be no manner the password is going to be saved once it is ready to be used – until it's far stored via your browser.
// This is a simple Password Generator App that will generate random password maybe you can you them to secure your account. // I tried my best to make the code as simple as possible please dont mind the variable names. // Also this idea came in my mind after checking Traversy Media's latest video.
// Clear the concole on every refresh console.clear(); // set the body to full height // document.body.style.height = `${innerHeight}px`
// Range Slider Properties. // Fill : The trailing color that you see when you drag the slider. // background : Default Range Slider Background const sliderProps = { fill: "#0B1EDF", background: "rgba(255, 255, 255, 0.214)", };
// Selecting the Range Slider container which will effect the LENGTH property of the password. const slider = document.querySelector(".range__slider");
// Text which will show the value of the range slider. const sliderValue = document.querySelector(".length__title");
// Using Event Listener to apply the fill and also change the value of the text. slider.querySelector("input").addEventListener("input", event => { sliderValue.setAttribute("data-length", event.target.value); applyFill(event.target); }); // Selecting the range input and passing it in the applyFill func. applyFill(slider.querySelector("input")); // This function is responsible to create the trailing color and setting the fill. function applyFill(slider) { const percentage = (100 * (slider.value - slider.min)) / (slider.max - slider.min); const bg = `linear-gradient(90deg, ${sliderProps.fill} ${percentage}%, ${sliderProps.background} ${percentage + 0.1}%)`; slider.style.background = bg; sliderValue.setAttribute("data-length", slider.value); }
// Object of all the function names that we will use to create random letters of password const randomFunc = { lower: getRandomLower, upper: getRandomUpper, number: getRandomNumber, symbol: getRandomSymbol, };
// Random more secure value function secureMathRandom() { return window.crypto.getRandomValues(new Uint32Array(1))[0] / (Math.pow(2, 32) - 1); }
// Generator Functions // All the functions that are responsible to return a random value that we will use to create password. function getRandomLower() { return String.fromCharCode(Math.floor(Math.random() * 26) + 97); } function getRandomUpper() { return String.fromCharCode(Math.floor(Math.random() * 26) + 65); } function getRandomNumber() { return String.fromCharCode(Math.floor(secureMathRandom() * 10) + 48); } function getRandomSymbol() { const symbols = '~!@#$%^&*()_+{}":?><;.,'; return symbols[Math.floor(Math.random() * symbols.length)]; }
// Selecting all the DOM Elements that are necessary -->
// The Viewbox where the result will be shown const resultEl = document.getElementById("result"); // The input slider, will use to change the length of the password const lengthEl = document.getElementById("slider");
// Checkboxes representing the options that is responsible to create differnt type of password based on user const uppercaseEl = document.getElementById("uppercase"); const lowercaseEl = document.getElementById("lowercase"); const numberEl = document.getElementById("number"); const symbolEl = document.getElementById("symbol");
// Button to generate the password const generateBtn = document.getElementById("generate"); // Button to copy the text const copyBtn = document.getElementById("copy-btn"); // Result viewbox container const resultContainer = document.querySelector(".result"); // Text info showed after generate button is clicked const copyInfo = document.querySelector(".result__info.right"); // Text appear after copy button is clicked const copiedInfo = document.querySelector(".result__info.left");
// if this variable is trye only then the copyBtn will appear, i.e. when the user first click generate the copyBth will interact. let generatedPassword = false;
// Update Css Props of the COPY button // Getting the bounds of the result viewbox container let resultContainerBound = { left: resultContainer.getBoundingClientRect().left, top: resultContainer.getBoundingClientRect().top, }; // This will update the position of the copy button based on mouse Position resultContainer.addEventListener("mousemove", e => { resultContainerBound = { left: resultContainer.getBoundingClientRect().left, top: resultContainer.getBoundingClientRect().top, }; if(generatedPassword){ copyBtn.style.opacity = '1'; copyBtn.style.pointerEvents = 'all'; copyBtn.style.setProperty("--x", `${e.x - resultContainerBound.left}px`); copyBtn.style.setProperty("--y", `${e.y - resultContainerBound.top}px`); }else{ copyBtn.style.opacity = '0'; copyBtn.style.pointerEvents = 'none'; } }); window.addEventListener("resize", e => { resultContainerBound = { left: resultContainer.getBoundingClientRect().left, top: resultContainer.getBoundingClientRect().top, }; });
// Function responsible to generate password and then returning it. function generatePassword(length, lower, upper, number, symbol) { let generatedPassword = ""; const typesCount = lower + upper + number + symbol; const typesArr = [{ lower }, { upper }, { number }, { symbol }].filter(item => Object.values(item)[0]); if (typesCount === 0) { return ""; } for (let i = 0; i < length; i++) { typesArr.forEach(type => { const funcName = Object.keys(type)[0]; generatedPassword += randomFunc[funcName](); }); } return generatedPassword.slice(0, length) .split('').sort(() => Math.random() - 0.5) .join(''); }
// function that handles the checkboxes state, so at least one needs to be selected. The last checkbox will be disabled. function disableOnlyCheckbox(){ let totalChecked = [uppercaseEl, lowercaseEl, numberEl, symbolEl].filter(el => el.checked) totalChecked.forEach(el => { if(totalChecked.length == 1){ el.disabled = true; }else{ el.disabled = false; } }) }
Post a Comment