When I am proceeding to SignUp, LocalStorage is not working. When I look in the console, there is no error. When I check the network request, it is showing Pending. The backend is working properly, but still SignUp is not working.
My auth.js file code is :
const authReducer = (state= {data :null}, action) => {
switch (action.type) {
case 'AUTH':
localStorage.setItem('Profile', JSON.stringify({...action?.data}));
return { ...state, data: action?.data }
default:
return state;
}
}
export default authReducer
My Auth.jsx file is where I am connecting everything. But when I call dispatch, it is not working. I am not even getting any errors in the console.
import React, {useState} from 'react'
import { useDispatch } from 'react-redux'
import {useNavigate} from 'react-router-dom'
import './Auth.css'
import icon from '../../assets/logo.svg'
import AboutAuth from './AboutAuth'
import { signup, login } from '../../actions/auth'
const Auth = () => {
const [isSignup, setIsSignup] = useState(false)
const [name, setName] = useState('')
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const dispatch = useDispatch()
const navigate = useNavigate()
const handleSwitch = () => {
setIsSignup(!isSignup)
}
const handleSubmit = (e) => {
e.preventDefault()
if(!email && !password){
alert('Enter Email and Password')
}
if(isSignup){
if(!name){
alert("Enter A Name To Continue")
}
dispatch(signup({name, email, password}, navigate))
}else{
dispatch(login({email, password}, navigate))
}
}
return (
<div>
<section className='auth-section'>
{
isSignup && <AboutAuth />
}
<div className='auth-container'>
{ !isSignup && <img src={icon} width='50px' alt='stack overflow' className='login-logo' /> }
<form onSubmit={handleSubmit}>
{
isSignup && (
<label htmlFor='name'>
<h4>Display Name</h4>
<input type="text" id='name' name='name' onChange={(e) => {setName(e.target.value)}} />
</label>
)
}
<label htmlFor="email">
<h4> Email </h4>
<input type="email" name='email' id='email' onChange={(e) => {setEmail(e.target.value)}} />
</label>
<label htmlFor="password">
<div style={{display:"flex", justifyContent:"space-between"}}>
<h4> Password </h4>
{ !isSignup && <p style= {{color: "#007ac6", fontSize: '13px' }} >Forget Password</p> }
</div>
<input type="password" name='password' id='password' onChange={(e) => {setPassword(e.target.value)}}/>
{ !isSignup && <p style = {{color: "#666767", fontSize:"13px"}}>The password must contain at least eight <br />
character categories among the following: <br />
Uppercase characters (A-Z)</p>}
</label>
{
isSignup && (
<label htmlFor='check'>
<input type = "checkbox" id='check'/>
<p style={{fontSize:"13"}}>
opt-in to receive occasional <br />
product updates, user research invitation, <br/>
company announcment, and digests.
</p>
</label>
)
}
<button type='submit' className='auth-btn'>{ isSignup ? 'Signup' : 'Log In'}</button>
{
isSignup && (
<p style = {{color: "#666767", fontSize:"13px"}}>
By Clicking "Sign Up", You Agree To Our <span style={{color: "#007ac6"}}>
Terms Of <br />Services
</span>,<span style= {{color: "#007ac6"}}> Privacy Policy </span> And <span style= {{color: "#007ac6"}}>Cookie Policy</span>
</p>
)
}
<p>
{isSignup ? 'Already have an account?' : "Don't Have An Account ?"}
<button type='button' className ='handle-switch-btn' onClick={handleSwitch}>{isSignup ? "Log In" : 'signup' }</button>
</p>
</form>
</div>
</section>
</div>
)
}
export default Auth