import React, { useState } from 'react';
import useStyles from './styles';
import { Avatar, Button, Paper, Grid, Typography, Container } from
'@material-ui/core';
//import { Component } from 'react';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import Input from './input';
import { GoogleLogin } from 'react-google-login';
import Icon from './icons';
import {useDispatch} from 'react-redux'; //hook
import {signin,signup} from '../../actions/auth';
import {useHistory} from 'react-router-dom';
const
initialState={firstName:'',lastName:'',email:'',password:'',confirmPassword:''};
const Auth = () => {
const classes = useStyles();
const [isSignup, setIsSignup] = useState(false);
const dispatch=useDispatch();
const [showPassword, setShowPassword] = useState(false);
const history=useHistory();
const [formData,setFormData]=useState(initialState);
const handleSubmit = (e) => {
e.preventDefault(); //to avoid form refreshing by browser (happens
by default)
// console.log(formData);
if(isSignup){
dispatch(signup(formData,history))
}
else{
dispatch(signin(formData,history))
}
};
const handleChange = (e) => {
setFormData({...formData,[e.target.name]:e.target.value}); //going to
spread all the other properties but CHANGE only the one
//specific that
your on with the target value
};
const switchMode = () => {
setIsSignup((prevIsSignup) => !prevIsSignup);
setShowPassword(false);
};
const handleShowPassword = () => setShowPassword((prevShowPassword) => !
prevShowPassword);
const googleSuccess= async (res)=>{
const result =res?.profileObj; //in case of . ->'cannot get property
profileObj of undefined'. So use sepcial operator ?. which will word even if we
dont get res due to some issue
const token=res?.tokenId;
try{
dispatch({type:'AUTH',data:{result,token}});
history.push('/');
}
catch(error){
console.log(error);
}
}
const googleFailure=(error)=>{
console.log("Google Sign in was unsuccessful.Try again later");
}
return (
<Container component="main" maxWidth="xs">
<Paper className={classes.paper} elevation={3}>
<Avatar className={classes.avatar}>
<LockOutlinedIcon />
</Avatar>
<Typography variant="h5">{isSignup ? 'Sign up' : 'Sign
in'}</Typography>
<form className={classes.form} onSubmit={handleSubmit}>
<Grid container spacing={2}>
{
isSignup && (
<>
<Input name="firstName" label="First Name"
handleChange={handleChange} autofocus half />
<Input name="lastName" label="Last Name"
handleChange={handleChange} half />
</>
)
}
<Input name="email" label="Email Address"
handleChange={handleChange} type="email" />
<Input name="password" label="Password"
handleChange={handleChange} type={showPassword ? "text" : "password"}
handleShowPassword={handleShowPassword} />
{isSignup && <Input name="confirmPassword" label="Repeat
Password" handleChange={handleChange} type="password" />}
</Grid>
<Button type="submit" fullWidth variant="contained"
color="primary" className={classes.submit}>
{isSignup ? 'Sign up' : 'Sign in'}
</Button>
<GoogleLogin
clientId="130425960788-
gqiutj16llctqdfhs4vu1449to0jnfid.apps.googleusercontent.com"
render={(renderProps) => (
<Button
className={classes.googleButton}
color='primary'
fullWidth
onClick={renderProps.onClick}
disabled={renderProps.disabled}
startIcon={<Icon />}
variant="contained">
Google Sign in
</Button>
)}
onSuccess={googleSuccess}
onFailure={googleFailure}
cookiePolicy="single_host_origin"
/>
<Grid container justify="flex-end">
<Grid item>
<Button onClick={switchMode}>
{isSignup ? 'Already have a account? Sign in' :
"Don't have an account? Sign up"}
</Button>
</Grid>
</Grid>
</form>
</Paper>
</Container>
)
};
export default Auth;
