Skip to content

Commit

Permalink
Add Feature in Sign In and Sign Up page.
Browse files Browse the repository at this point in the history
  • Loading branch information
GOURAVSINGH19 committed May 13, 2024
1 parent 38a5a52 commit 9595969
Show file tree
Hide file tree
Showing 2 changed files with 415 additions and 308 deletions.
379 changes: 218 additions & 161 deletions src/pages/SignIn/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,177 +1,234 @@
import React, { useState, useContext } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import './style.css';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined';
import { Button,Snackbar } from '@mui/material';
import { getAuth, signInWithEmailAndPassword, GoogleAuthProvider, signInWithPopup, sendPasswordResetEmail } from "firebase/auth";
import { app } from '../../firebase';
import Backdrop from '@mui/material/Backdrop';
import CircularProgress from '@mui/material/CircularProgress';
import { MyContext } from '../../App';
import GoogleImg from '../../assets/images/google.png';
import useLoggedInUserEmail from '../../Hooks/useLoggedInUserEmail';
import React, { useState, useContext } from "react";
import { Link, useNavigate } from "react-router-dom";
import "./style.css";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";
import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined";
import VisibilityOffOutlinedIcon from "@mui/icons-material/VisibilityOffOutlined";
import { Button, Snackbar } from "@mui/material";
import {
getAuth,
signInWithEmailAndPassword,
GoogleAuthProvider,
signInWithPopup,
sendPasswordResetEmail,
} from "firebase/auth";
import { app } from "../../firebase";
import Backdrop from "@mui/material/Backdrop";
import CircularProgress from "@mui/material/CircularProgress";
import { MyContext } from "../../App";
import GoogleImg from "../../assets/images/google.png";
import useLoggedInUserEmail from "../../Hooks/useLoggedInUserEmail";
const auth = getAuth(app);
const googleProvider = new GoogleAuthProvider();

const SignIn = () => {
const [showPassword, setShowPassword] = useState(false);
const [showLoader, setShowLoader] = useState(false);
const [formFields, setFormFields] = useState({
email: '',
password: '',
});
const [error, setError] = useState('');
const context = useContext(MyContext);
const history = useNavigate();
const [snackbarOpen, setSnackbarOpen] = useState(false);
const [loggedInUserEmail,setLoggedInUseEmail]=useLoggedInUserEmail(); //get_email hook
function replaceSpecialCharacters(inputString) {
// Use a regular expression to replace special characters with underscore _
const replacedString = inputString.replace(/[#$\[\].]/g, '_');

return replacedString;
}

const [showPassword, setShowPassword] = useState(false);
const [showLoader, setShowLoader] = useState(false);
const [isButtonDisabled, setIsButtonDisabled] = useState(true);
const [formFields, setFormFields] = useState({
email: "",
password: "",
});
const [error, setError] = useState("");
const context = useContext(MyContext);
const history = useNavigate();
const [snackbarOpen, setSnackbarOpen] = useState(false);
const [loggedInUserEmail, setLoggedInUseEmail] = useLoggedInUserEmail(); //get_email hook
function replaceSpecialCharacters(inputString) {
// Use a regular expression to replace special characters with underscore _
const replacedString = inputString.replace(/[#$\[\].]/g, "_");

const onChangeField = (e) => {
const name = e.target.name;
const value = e.target.value;
return replacedString;
}

setFormFields(() => ({
...formFields,
[name]: value,
}));
const toggleSignInButton = (username, password) => {
if (username.trim() !== "" && password.trim() !== "") {
setIsButtonDisabled(false);
} else {
setIsButtonDisabled(true);
}
};

const signIn = () => {
setShowLoader(true);
signInWithEmailAndPassword(auth, formFields.email, formFields.password)
.then((userCredential) => {
const user = userCredential.user;
setShowLoader(false);
setFormFields({
email: '',
password: '',
});
localStorage.setItem('isLogin', true);
const udata=replaceSpecialCharacters(user.email)
localStorage.setItem('user',udata)
context.signIn();
setLoggedInUseEmail(user.email)
//console.log(loggedInUserEmail);
history('/');
})
.catch((error) => {
setShowLoader(false);
setError(error.message);
});
}
const onChangeField = (e) => {
const name = e.target.name;
const value = e.target.value;

const signInWithGoogle = () => {
//console.log('hi sign in');
setShowLoader(true);
signInWithPopup(auth, googleProvider)
.then((result) => {
setShowLoader(false);
localStorage.setItem('isLogin', true);
const udata=replaceSpecialCharacters(result.user.email)
localStorage.setItem('user',udata)
context.signIn();
setLoggedInUseEmail(udata)
//console.log(loggedInUserEmail);
history('/');
})
.catch((error) => {
setShowLoader(false);
setError(error.message);
});
}
setFormFields(() => ({
...formFields,
[name]: value,
}));
toggleSignInButton(formFields.email, formFields.password);
};

const forgotPassword = () => {
const email = formFields.email;
sendPasswordResetEmail(auth, email)
.then(() => {
setSnackbarOpen(true);
})
.catch((error) => {
setError(error.message);
});
}
const handleCloseSnackbar = () => {
setSnackbarOpen(false);
}
const signIn = () => {
setShowLoader(true);
signInWithEmailAndPassword(auth, formFields.email, formFields.password)
.then((userCredential) => {
const user = userCredential.user;
setShowLoader(false);
setFormFields({
email: "",
password: "",
});
localStorage.setItem("isLogin", true);
const udata = replaceSpecialCharacters(user.email);
localStorage.setItem("user", udata);
context.signIn();
setLoggedInUseEmail(user.email);
//console.log(loggedInUserEmail);
history("/");
})
.catch((error) => {
setShowLoader(false);
setError(error.message);
});
};

const signInWithGoogle = () => {
//console.log('hi sign in');
setShowLoader(true);
signInWithPopup(auth, googleProvider)
.then((result) => {
setShowLoader(false);
localStorage.setItem("isLogin", true);
const udata = replaceSpecialCharacters(result.user.email);
localStorage.setItem("user", udata);
context.signIn();
setLoggedInUseEmail(udata);
//console.log(loggedInUserEmail);
history("/");
})
.catch((error) => {
setShowLoader(false);
setError(error.message);
});
};

const forgotPassword = () => {
const email = formFields.email;
sendPasswordResetEmail(auth, email)
.then(() => {
setSnackbarOpen(true);
})
.catch((error) => {
setError(error.message);
});
};
const handleCloseSnackbar = () => {
setSnackbarOpen(false);
};

return (
<>
<section className='signIn mb-5'>
<div className="breadcrumbWrapper">
<div className="container-fluid">
<ul className="breadcrumb breadcrumb2 mb-0">
<li><Link to="/">Home</Link></li>
<li>Sign In</li>
</ul>
</div>
return (
<>
<section className="signIn mb-5">
<div className="breadcrumbWrapper">
<div className="container-fluid">
<ul className="breadcrumb breadcrumb2 mb-0">
<li>
<Link to="/">Home</Link>
</li>
<li>Sign In</li>
</ul>
</div>
</div>

<div className="loginWrapper">
<div className="card shadow">
<Backdrop
sx={{ color: "#000", zIndex: (theme) => theme.zIndex.drawer + 1 }}
open={showLoader}
className="formLoader"
>
<CircularProgress color="inherit" />
</Backdrop>

<h3>Sign In</h3>
<form className="mt-4">
<div className="form-group mb-4 w-100">
<TextField
id="email"
type="email"
name="email"
label="Email"
className="w-100"
onChange={onChangeField}
value={formFields.email}
autoComplete="email"
/>
</div>
<div className="form-group mb-4 w-100">
<div className="position-relative">
<TextField
id="password"
type={showPassword === false ? "password" : "text"}
name="password"
label="Password"
className="w-100"
onChange={onChangeField}
value={formFields.password}
autoComplete="current-password"
/>
<Button
className="icon"
onClick={() => setShowPassword(!showPassword)}
>
{showPassword === false ? (
<VisibilityOffOutlinedIcon />
) : (
<VisibilityOutlinedIcon />
)}
</Button>
</div>
</div>

<div className='loginWrapper'>
<div className='card shadow'>
<Backdrop
sx={{ color: '#000', zIndex: (theme) => theme.zIndex.drawer + 1 }}
open={showLoader}
className="formLoader"
>
<CircularProgress color="inherit" />
</Backdrop>

<h3>Sign In</h3>
<form className='mt-4'>
<div className='form-group mb-4 w-100'>
<TextField id="email" type="email" name='email' label="Email" className='w-100'
onChange={onChangeField} value={formFields.email} autoComplete='email' />
</div>
<div className='form-group mb-4 w-100'>
<div className='position-relative'>
<TextField id="password" type={showPassword === false ? 'password' : 'text'} name='password' label="Password" className='w-100'
onChange={onChangeField} value={formFields.password} autoComplete='current-password' />
<Button className='icon' onClick={() => setShowPassword(!showPassword)}>
{showPassword === false ? <VisibilityOffOutlinedIcon /> : <VisibilityOutlinedIcon />}
</Button>
</div>
</div>

{error && <div className="alert alert-danger" role="alert">Invalid Email or Password</div>}

<div className='form-group mt-5 mb-4 w-100'>
<Button className='btn btn-g btn-lg w-100' onClick={signIn}>Sign In</Button>
</div>

<div className='form-group mt-5 mb-4 w-100 signInOr'>
<p className='text-center'>OR</p>
<Button className='w-100' variant="outlined" onClick={signInWithGoogle}>
<img src={GoogleImg} alt="Google Logo" /> Sign In with Google
</Button>
</div>

<div className='form-group mt-3 mb-4 w-100'>
<Button className='btn btn-link' onClick={forgotPassword}>Forgot Password?</Button>
</div>

<p className='text-center'>Don't have an account? <b><Link to="/signup">Sign Up</Link></b></p>
</form>
</div>
{error && (
<div className="alert alert-danger" role="alert">
Invalid Email or Password
</div>
</section>
<Snackbar
open={snackbarOpen}
autoHideDuration={6000}
onClose={handleCloseSnackbar}
message="Password reset email sent!"
/>
</>
);
}
)}

<div className="form-group mt-5 mb-4 w-100">
<Button className="btn btn-g btn-lg w-100" onClick={signIn} disabled={isButtonDisabled}>
Sign In
</Button>
</div>

<div className="form-group mt-5 mb-4 w-100 signInOr">
<p className="text-center">OR</p>
<Button
className="w-100"
variant="outlined"
onClick={signInWithGoogle}
>
<img src={GoogleImg} alt="Google Logo" /> Sign In with Google
</Button>
</div>

<div className="form-group mt-3 mb-4 w-100">
<Button className="btn btn-link" onClick={forgotPassword}>
Forgot Password?
</Button>
</div>

<p className="text-center">
Don't have an account?{" "}
<b>
<Link to="/signup">Sign Up</Link>
</b>
</p>
</form>
</div>
</div>
</section>
<Snackbar
open={snackbarOpen}
autoHideDuration={6000}
onClose={handleCloseSnackbar}
message="Password reset email sent!"
/>
</>
);
};

export default SignIn;
Loading

0 comments on commit 9595969

Please sign in to comment.