import React, { useState, useContext } from 'react'; import styles from './../../common/styles/formStyles.module.css'; import commonStyle from './../../common/styles/styles.module.css'; import { firebaseApp } from '../../firebase/init'; import { getAuth } from 'firebase/auth'; import { Navigate, Link, useNavigate } from 'react-router-dom'; import { AuthContext } from '../../context/Auth'; import { Alert } from '../../common/alert/Alert'; const Login = () => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [error, setError] = useState(null); const [isLogging, setIsLogging] = useState(false); let navigate = useNavigate(); function handleLogin() { if (!email || !password) { return setError('All fields are required'); } setIsLogging(true); firebaseApp .auth() .signInWithEmailAndPassword(email, password) .then(() => { setIsLogging(false); navigate('/'); }) .catch((err) => { setError('Something wrong with your email or Password. Try again!'); setIsLogging(false); }); } function handleAlertClose() { setError(''); } const { currentUser } = useContext(AuthContext); const handleGuestLogin = () => { setIsLogging(true); const auth = getAuth(); firebaseApp .auth(auth) .signInAnonymously() .then(() => { setIsLogging(false); navigate('/'); }) .catch((err) => { setError('Something wrong with your email or Password. Try again!'); setIsLogging(false); }); }; if (currentUser) { return <Navigate to="/" />; } return ( <div className={styles.formContainer}> <div className={styles.formHeader}>Login</div> {error && ( <Alert type="error" canClose={handleAlertClose}> {error} </Alert> )} <div className={styles.formGroup}> <label htmlFor="email">Email</label> <input type="email" name="email" id="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="[email protected]" /> </div> <div className={styles.formGroup}> <label htmlFor="password">Password</label> <input type="password" name="password" id="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="******" /> </div> <div className={styles.formGroup}> <button className={commonStyle.info} disabled={isLogging} onClick={handleLogin} > {isLogging ? 'Logging in..' : 'Login'} </button> </div> <div className={styles.meta}> Dont have an account? <Link to="/signup">Sign up</Link>. </div> <div className={styles.meta}> Just want to check the website?{' '} <button onClick={handleGuestLogin}>Continue as guest</button> </div> </div> ); }; export default Login;