register.js

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