122 lines
3.6 KiB
JavaScript
122 lines
3.6 KiB
JavaScript
import React, { useState, useEffect } from 'react'
|
|
|
|
// import { useSelector, useDispatch } from 'react-redux'
|
|
|
|
// import { userAuthSelector } from '../../../redux/slices/userAuthSlice'
|
|
// import userAuthAsyncThunk from '../../../redux/asyncThunks/userAuthAsyncThunk'
|
|
|
|
import FormGenerator from '../formGenerator'
|
|
|
|
|
|
const UserLoginForm = () => {
|
|
|
|
const usernameInput = React.createRef()
|
|
const passwordInput = React.createRef()
|
|
|
|
const emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
|
|
const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/
|
|
|
|
const [usernameValidationInfo, setUsernameValidationInfo] = useState("Empty")
|
|
const [passwordValidationInfo, setPasswordValidationInfo] = useState("Empty")
|
|
|
|
const [password, setPassword] = useState("")
|
|
|
|
const [allowButtonAction, setAllowButtonAction] = useState(false)
|
|
|
|
const usernameValidation = (event) => {
|
|
|
|
if (event.target.value === "") {
|
|
setUsernameValidationInfo("Email is required.")
|
|
} else if(!emailRegex.test(event.target.value)) {
|
|
setUsernameValidationInfo("Please provide correct email")
|
|
} else {
|
|
setUsernameValidationInfo("Success")
|
|
}
|
|
}
|
|
|
|
const passwordValidation = (event) => {
|
|
|
|
setPassword(event.target.value)
|
|
|
|
if (event.target.value === "") {
|
|
setPasswordValidationInfo("Password is required.")
|
|
} else if(!passwordRegex.test(event.target.value)) {
|
|
setPasswordValidationInfo("Password require:\n - At least 8 characters,\n - At least one uppercase letter,\n - At least one lowercase letter,\n - At least one digit,\n - At least one special character.")
|
|
} else {
|
|
setPasswordValidationInfo("Success")
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
setAllowButtonAction(
|
|
usernameValidationInfo === "Success"
|
|
&& passwordValidationInfo === "Success"
|
|
)
|
|
}, [
|
|
allowButtonAction,
|
|
usernameValidationInfo,
|
|
passwordValidationInfo
|
|
]
|
|
)
|
|
|
|
// const dispatch = useDispatch()
|
|
// const { info } = useSelector( userAuthSelector )
|
|
const info = "" // if redux is integrated - delete this line
|
|
|
|
let refList = [
|
|
usernameInput,
|
|
passwordInput
|
|
]
|
|
|
|
let inputList = [
|
|
{
|
|
type: 'info',
|
|
action: 'Create',
|
|
endpint: 'user/auth',
|
|
button_value: 'SIGN IN'
|
|
},
|
|
{
|
|
type: 'text',
|
|
name: 'EMAIL',
|
|
ref: usernameInput,
|
|
onChange: usernameValidation,
|
|
validationInfo: usernameValidationInfo
|
|
},
|
|
{
|
|
type: 'password',
|
|
name: 'PASSWORD',
|
|
ref: passwordInput,
|
|
onChange: passwordValidation,
|
|
validationInfo: passwordValidationInfo
|
|
}
|
|
]
|
|
|
|
const login = async ( refs ) => {
|
|
let pass = {
|
|
username: refs[0].current.value,
|
|
password: refs[1].current.value
|
|
}
|
|
// dispatch(
|
|
// userAuthAsyncThunk.fetchLogin(
|
|
// pass
|
|
// )
|
|
// )
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<FormGenerator
|
|
inputList={ inputList }
|
|
refList={ refList }
|
|
action={ login }
|
|
/>
|
|
<div className='form_info'>
|
|
{ info }
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
}
|
|
|
|
export default UserLoginForm
|