node-mongo-demo
node.js and mongodb demo
git clone https://9o.is/git/node-mongo-demo.git
Login.js
(4253B)
1 import React, { useState } from "react";
2 import {
3 Avatar,
4 Button,
5 Container,
6 Grid,
7 Paper,
8 Typography,
9 } from "@mui/material";
10 import Input from "./Input";
11 import { jwtDecode } from "jwt-decode";
12 import { useDispatch } from "react-redux";
13 import { useNavigate } from "react-router-dom";
14 import { signup, login } from "../../actions/login";
15 import LockIcon from "@mui/icons-material/LockOutlined";
16 import { styles } from "./styles";
17
18 const formDataInitVal = {
19 firstName: "",
20 lastName: "",
21 email: "",
22 password: "",
23 confirmPassword: "",
24 };
25
26 const Login = () => {
27 const [formData, setFormData] = useState(formDataInitVal);
28 const [showPassword, setShowPassword] = useState(false);
29 const [isLoggedIn, setIsLoggedIn] = useState(true);
30 const user = localStorage.getItem("profile")
31 ? jwtDecode(JSON.parse(localStorage.getItem("profile")).token)
32 : "null";
33
34 const dispatch = useDispatch();
35 const history = useNavigate();
36
37 const handleSubmit = (e) => {
38 e.preventDefault();
39 if (isLoggedIn) {
40 dispatch(login(formData, history));
41 } else {
42 dispatch(signup(formData, history));
43 }
44 };
45
46 const handleChange = (e) => {
47 setFormData({ ...formData, [e.target.name]: e.target.value });
48 };
49
50 const handleShowPassword = (e) => {
51 setShowPassword((prevPassword) => !prevPassword);
52 };
53
54 const switchLogin = (e) => {
55 setIsLoggedIn((prevState) => !prevState);
56 };
57
58 if (user !== "null" && user !== null) {
59 history("/");
60 return null;
61 } else {
62 return (
63 <div>
64 <Container component="main" maxWidth="xs">
65 <Paper sx={styles.paper} elevation={3}>
66 <Avatar sx={styles.avatar}>
67 {" "}
68 <LockIcon />
69 </Avatar>
70 <Typography variant="h5" color="primary">
71 {isLoggedIn ? "Login" : "Logout"}
72 </Typography>
73 <form sx={styles.form} onSubmit={handleSubmit}>
74 <Grid container spacing={2}>
75 {!isLoggedIn && (
76 <>
77 <Input
78 name="firstName"
79 label="First Name"
80 handleChange={handleChange}
81 autoFocus
82 half
83 />
84 <Input
85 name="lastName"
86 label="Last Name"
87 handleChange={handleChange}
88 half
89 />
90 </>
91 )}
92
93 <Input
94 name="email"
95 label="Email Address"
96 handleChange={handleChange}
97 type="email"
98 />
99 <Input
100 name="password"
101 label="Password"
102 handleChange={handleChange}
103 type={showPassword ? "text" : "password"}
104 handleShowPassword={handleShowPassword}
105 half={isLoggedIn ? false : true}
106 showBar={isLoggedIn ? false : true}
107 passValue={formData.password}
108 />
109 {!isLoggedIn && (
110 <>
111 <Input
112 name="confirmPassword"
113 label="Confirm Password"
114 handleChange={handleChange}
115 type="password"
116 half
117 />
118 </>
119 )}
120 </Grid>
121 <Button
122 type="submit"
123 sx={styles.submit}
124 fullWidth
125 variant="contained"
126 color="primary"
127 >
128 {isLoggedIn ? "Login" : "Sign Up"}
129 </Button>
130 <Grid container justifyContent="flex-end">
131 <Grid item>
132 <Button onClick={switchLogin}>
133 {isLoggedIn
134 ? "Don't Have An Account? Sign Up."
135 : "Already Have An Account? Login."}
136 </Button>
137 </Grid>
138 </Grid>
139 </form>
140 </Paper>
141 </Container>
142 </div>
143 );
144 }
145 };
146
147 export default Login;