Skip to content

Instantly share code, notes, and snippets.

@gregfenton
Created May 20, 2021
Embed
What would you like to do?
import React from "react";
import Login from "../components/Login";
import Landing from "../Pages/Landing";
function Home(props) {
const [user, setUser] = useState();
return (
<div>
{user ?
<Landing {...props user={user} /> {/* only needs `user` */}
:
<Login {...props setUser={setUser} /> {/* only needs `setUser` */}
}
</div>
);
}
export default Home;
const Login = (props) => {
const [email, setEmail] = useState(); // << avoid forcing no value to be "" ; embrace `null` as the initial value!
const [password, setPassword] = useState();
const [emailError, setEmailError] = useState();
const [passwordError, setPasswordError] = useState();
const [hasAccount, setHasAccount] = useState(false);
let { user, setUser } = props; // copies props.user and props.setUser into local variables
const clearInputs = () => {
setEmail(null);
setPassword(null);
};
const clearErrors = () => {
setEmailError(null);
setPasswordError(null);
};
const handleLogin = () => {
clearErrors();
fb.auth()
.signInWithEmailAndPassword(email, password)
.then((user) => {
console.log("user", user);
props.navigation.push("/Landing"); // << recommend making this a
// CONSTANT declared in a globally-accessible file. Otherwise
// you'll have "/Landing" all over your code and if you change the
// path you'll have to search/replace everywhere.
})
.catch((error) => {
switch (error.code) {
case "auth/invalid-email":
case "auth/user-disabled":
case "auth/user-not-found":
setEmailError(error.message);
break;
case "auth/wrong-password":
setPasswordError(error.message);
break;
}
});
};
const handleSignup = () => {
clearErrors();
fb.auth()
.createUserWithEmailAndPassword(email, password)
.catch((error) => {
switch (error.code) {
case "auth/email-already-in-use":
case "auth/invalid-email":
setEmailError(error.message);
break;
case "auth/weak-password":
setPasswordError(error.message);
break;
}
});
};
const authListener = () => {
fb.auth().onAuthStateChanged((user) => {
if (user) {
clearInputs();
setUser(user);
} else {
setUser(null);
}
});
};
useEffect(() => {
authListener();
}, []);
return (
<div className='login'>
<div className='loginContainer'>
<label>Username</label>
<input
type='text'
value={email}
autoFocus
required
onChange={(e) => setEmail(e.target.value)}
/>
<p className='errorMsg'>{emailError}</p>
<label>Password</label>
<input
type='password'
value={password}
required
onChange={(e) => setPassword(e.target.value)}
/>
<p className='errorMsg'>{passwordError}</p>
<div className='btnContainer'>
{hasAccount ? (
<span>
<button onClick={handleLogin} type='submit'>
Sign In
</button>
<p>
Don't have an account?
<span
onClick={() => {
// Avoid `setX(!x)` ... it is a bad pattern!
// See https://reactjs.org/docs/hooks-reference.html#functional-updates
// Instead use the following:
setHasAccount((currentValue) => !currentValue);
}}
>
Sign up
</span>
</p>
</span>
) : (
<>
<button onClick={handleSignup} type='submit'>
Sign Up
</button>
<p>
Have an account?
<span
onClick={() => {
// Avoid `setX(!x)` ... it is a bad pattern!
// See https://reactjs.org/docs/hooks-reference.html#functional-updates
// Instead use the following:
setHasAccount((currentValue) => !currentValue);
}}
>
Sign in
</span>
</p>
</>
)}
</div>
</div>
</div>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment