Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { useState, useRef, useEffect } from 'react'
- import { Link, useNavigate } from 'react-router-dom'
- //import { userRegister } from '../api'
- //import { passwordCheck } from '../modules'
- export const passwordCheck = (password) => {
- const upperChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')
- const lowerChars = 'abcdefghijklmnopqrstuvwxyz'.split('')
- const number = '0123456789'.split('')
- const upper = []
- const lower = []
- const num = []
- password.split('').forEach((i) => {
- if(upperChars.includes(i)){
- upper.push(i)
- }else if(lowerChars.includes(i)){
- lower.push(i)
- }else if(number.includes(i)){
- num.push(i)
- }
- })
- if(upper.length > 0 && lower.length > 0 && num.length > 0) {
- return true
- }
- return false
- }
- //const url = 'http://127.0.0.1:8000/register/'
- function UserRegister() {
- const [data, setData] = useState({username: '', password: '', confirm: ''})
- const [validated, setValidated] = useState(null)
- const [submitBtnText, setSubmitBtnText] = useState('Register')
- const [passwordMatch, setPasswordMatch] = useState(true)
- //const [backendAuthError, setBackendAuthError] = useState('')
- const [passwordContains, setPasswordContains] = useState(true)
- const userName = useRef()
- const navigate = useNavigate()
- async function handleFormSubmit(e) {
- e.preventDefault()
- setValidated(null)
- //setBackendAuthError('')
- setPasswordMatch(true)
- setPasswordContains(true)
- if(data.username && data.password && data.confirm){
- if(data.password === data.confirm){
- // call passwordCheck function see if the password contains upper + lower + number
- if(passwordCheck(data.password)){
- setSubmitBtnText('Registering...')
- const body = {username:data.username, password:data.password}
- console.log(body)
- /* const response = await userRegister(url, body)
- if(response.message && response.message === 'successfully registered') {
- navigate(`/login/?message=${response.message}`, {replace:true})
- }else{
- const error = response[Object.keys(response).join('')]
- setBackendAuthError(error.join(''))
- }
- */
- }else {
- setPasswordContains(false)
- }
- setSubmitBtnText('Register')
- }else{
- setPasswordMatch(false)
- }
- }else {
- setValidated(
- {
- username:!data.username ? false : true,
- password:!data.password ? false : true,
- confirm:!data.confirm ? false : true
- }
- )
- }
- }
- function handleChange(e) {
- const { name, value } = e.target
- setData((prev) => ({...prev, [name]:value}))
- }
- useEffect(() => {
- userName.current.focus()
- }, [])
- return (
- <div className="main-container">
- <div className='register-form-container' onSubmit={handleFormSubmit}>
- <h2 className='register-form-header'>Please Register</h2>
- { !passwordContains && <p className='form-register-input-error'>Password must contain upper and lower characters plus number</p>}
- { backendAuthError && <p className='form-register-input-error'>{backendAuthError}</p>}
- { !passwordMatch && <p className='form-register-input-error'>Password did not match</p>}
- <form className='register-form' action="">
- {validated && !validated.username && <p className='form-register-input-error'>This field is required!</p>}
- <input
- onChange={handleChange}
- className='register-form-input'
- type="text"
- value={data.username.replaceAll(' ', '')}
- name='username'
- placeholder='Username'
- ref={userName}
- />
- {validated && !validated.password && <p className='form-register-input-error'>This field is required!</p>}
- <input
- onChange={handleChange}
- className='register-form-input'
- type="password"
- value={data.password}
- name='password'
- placeholder='Password'
- />
- {validated && !validated.confirm && <p className='form-register-input-error'>This field is required!</p>}
- <input
- onChange={handleChange}
- className='register-form-input'
- type="password"
- value={data.confirm}
- name='confirm'
- placeholder='Password Confirmation'
- />
- <button className='register-form-submit-btn' disabled={submitBtnText==='Register'?false:true} type='submit'>{submitBtnText}</button>
- </form>
- <p className='register-form-already-registered'>Already Registered? <Link to='/login'>Login</Link></p>
- </div>
- </div>
- )
- }
- export default UserRegister
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement