Breaking News: Grepper is joining You.com. Read the official announcement!

how to create password generator in react

hussein asadi answered on June 11, 2022 Popularity 9/10 Helpfulness 5/10

answer how to create password generator in react

how to create password generator in react

Comment

//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

Popularity 9/10 Helpfulness 5/10 Language javascript

Source: Grepper

Tags: javascript password-generator

Link to this answer
Share Copy Link

Contributed on Jun 11 2022

hussein asadi

0 Answers Avg Quality 2/10

how to create password generator in react

Contents

More Related Answers

how to create password generator in react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.