how to create password generator in react
//first put this code in your page (for your attention this is not any library) import React, { useState, useEffect } from 'react' const PasswordGenerator = () => { const [password, setPassword] = useState('') const [passwordLength, setPasswordLength] = useState(15) const [uppercase, setUppercase] = useState(true) const [lowercase, setLowercase] = useState(true) const [numbers, setNumbers] = useState(true) const [symbols, setSymbols] = useState(true) const [errors, setErrors] = useState({}) const generatePassword = () => { setErrors({}) if (!uppercase && !lowercase && !numbers && !symbols) { return setErrors('حداقل یک کارکتر باید انتخاب شود') } else if (passwordLength === '0') { return setErrors('کلمه عبور نمیتواند زیر 4 باشد') } else if (passwordLength === '') { return setErrors('اندازه پسور انتخابی درست نمیباشد') } else if (passwordLength > 80) { return setErrors('حداکثر طول پسور نمیتواند بیشتر از 80 کلمه باشد') } let password = '' for (let i = 0; i < passwordLength; i++) { let choice = random(0, 3) if (lowercase && choice === 0) { password += randomLower() } else if (uppercase && choice === 1) { password += randomUpper() } else if (symbols && choice === 2) { password += randomSymbol() } else if (numbers && choice === 3) { password += random(0, 9) } else { i-- } } setPassword(password) } const random = (min = 0, max = 1) => { return Math.floor(Math.random() * (max + 1 - min) + min) } const randomLower = () => { return String.fromCharCode(random(97, 122)) } const randomUpper = () => { return String.fromCharCode(random(65, 90)) } const randomSymbol = () => { const symbols = "~*$%@#^&!?*'-=/,.{}()[]<>" return symbols[random(0, symbols.length - 1)] } useEffect(() => { generatePassword() }, []) return ( <div className='app'> <h3 className='titlepass'>تولید پسورد قدرتمند</h3> <div className='showpass'>{password}</div> <div className='box'> <div className='subContainer'> <div className='option'> <label>طول رمز عبور</label> <input type='number' name='length' min='4' max='50' defaultValue={passwordLength} onChange={(e) => setPasswordLength(e.target.value)} /> </div> <br></br> <div className='option'> <label>شامل حروف بزرگ</label> <input type='checkbox' name='uppercase' defaultChecked={uppercase} onChange={(e) => setUppercase(e.target.checked)} /> </div> <div className='option'> <label>شامل حروف کوچک</label> <input type='checkbox' name='lowercase' defaultChecked={lowercase} onChange={(e) => setLowercase(e.target.checked)} /> </div> <div className='option'> <label>شامل شماره</label> <input type='checkbox' name='numbers' defaultChecked={numbers} onChange={(e) => setNumbers(e.target.checked)} /> </div> <div className='option'> <label>شامل نماد</label> <input type='checkbox' name='symbols' defaultChecked={symbols} onChange={(e) => setSymbols(e.target.checked)} /> </div> {errors.length && <li className='error'>{errors}</li>} <div > <input type='submit' name='generate' value='پسورد رو بساز' onClick={generatePassword} className='passbtn' /> </div> </div> </div> </div> ) } export default PasswordGenerator //you can customized the classes in your app.css