yes the truth i doubt its a problem from the front end because the normal input fields works and i see the sent data in the server and database here s the code of front :
import React ,{useState}from ‘react’
import { Avatar,Button, Paper,Grid, Typography, Container,TextField} from ‘@material-ui/core’
import { useDispatch } from ‘react-redux’;
import { useHistory } from ‘react-router-dom’;
import LockOutlinedIcon from ‘@material-ui/icons/LockOutlined’
import useStyles from ‘./styles’
import Input from “./Input”
import Radio from"./Radio"
import Select1 from “./Select”
import CustomizedHook from “./MultipleSelect”;
import { signin, signup } from ‘…/…/actions/auth’;
const initialState={Nom:"",Prenom:"", Age:"", Gouvernorat:"",Gender:"",Cinteret:"",Email:"", Password:"",confirmPassword:"",Photo:""}
function Auth() {
const [form, setFormData] = useState(initialState);
const [isSignup, setIsSignup] = useState(false);
const dispatch = useDispatch();
const history = useHistory()
const classes = useStyles();
const [ShowPassword, setShowPassword] = useState(false);
const handleShowPassword = () => setShowPassword((prevShowPassword)=>!prevShowPassword)
const switchMode = () => {
setFormData(initialState);
setIsSignup((prevIsSignup) => !prevIsSignup);
setShowPassword(false);
};
const handleSubmit = async (e) => {
e.preventDefault();
if (isSignup) {
dispatch(signup(form,history));
} else {
dispatch(signin(form, history));
}
};
const handleChange=(e)=>{
setFormData({…form,[e.target.name]:e.target.value})
}
return (
<Container component="main" maxWidth="xs">
<Paper className={classes.paper} elevation={3}>
<Avatar className={classes.avatar}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant='h6' >{ isSignup ? "inscription" : "connexion"} </Typography>
<form className={classes.form} onSubmit={handleSubmit}>
<Grid container spacing={2}>
{
isSignup &&(
<>
<Input name="Nom" label="Nom" handleChange={handleChange} fullWidth ></Input>
<Input name="Prenom" label="Prenom" handleChange={handleChange} fullWidth></Input>
<Input name="Age" label="age" type="Number" handleChange={handleChange } fullWidth />
< Select1 name="Gouvernorat" fullWidth />/*this a select menu where the user can chosse one option (one state from 24)*/
<Radio />//this a select menu for gender
/* this is a multiple select where the user can choose many options*/
</>
)
}
<Input name="Password" label="mot de passe" handleChange={handleChange} fullWidth type={ShowPassword ? "text": "password"} handleShowPassword={handleShowPassword}/>
{isSignup && <Input name="confirmPassword" label="Confirmer mot de passe" handleChange={handleChange} type="password"/>}
</Grid>
<Button type="submit" fullWidth variant="contained" className={classes.submit}>{isSignup ?'Sign up': "Sign in"}</Button>
<Grid container justify='flex-end'>
<Button onClick={switchMode}>{isSignup? "already have an account":"register"}</Button>
</form>
</Paper>
)}
export default Auth
