From 1d438b288a0f9909e5b7cdad4cea5d106936f1bf Mon Sep 17 00:00:00 2001 From: Son Nguyen Date: Fri, 1 Nov 2024 11:36:08 -0400 Subject: [PATCH] Update: Added nodemon and SwaggerJS --- public/index.html | 2 +- src/pages/ForgotPassword.jsx | 3 +- src/pages/Login.jsx | 41 +++++++++++++++++-- src/pages/Register.jsx | 77 ++++++++++++++++++++++++++++++++++-- src/pages/ResetPassword.jsx | 53 +++++++++++++++++++++++-- 5 files changed, 163 insertions(+), 13 deletions(-) diff --git a/public/index.html b/public/index.html index 3cd5992..89895e6 100644 --- a/public/index.html +++ b/public/index.html @@ -9,7 +9,7 @@ - Fusion Electronics + Fusion Electronics - MERN E-commerce Website diff --git a/src/pages/ForgotPassword.jsx b/src/pages/ForgotPassword.jsx index f25266f..6c8bb4a 100644 --- a/src/pages/ForgotPassword.jsx +++ b/src/pages/ForgotPassword.jsx @@ -34,7 +34,7 @@ function ForgotPassword() { {error && ( - + {error} )} @@ -46,6 +46,7 @@ function ForgotPassword() { fullWidth margin="normal" value={email} + type={'email'} onChange={(e) => setEmail(e.target.value)} required /> diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx index fbf592e..924d3c0 100644 --- a/src/pages/Login.jsx +++ b/src/pages/Login.jsx @@ -1,10 +1,22 @@ import React, { useState } from 'react'; -import { Box, Container, TextField, Typography, Button, CircularProgress, Paper } from '@mui/material'; +import { + Box, + Container, + TextField, + Typography, + Button, + CircularProgress, + Paper, + IconButton, + InputAdornment, +} from '@mui/material'; +import { Visibility, VisibilityOff } from '@mui/icons-material'; import axios from 'axios'; function Login() { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); + const [showPassword, setShowPassword] = useState(false); // State to toggle password visibility const [loading, setLoading] = useState(false); const [error, setError] = useState(null); @@ -14,7 +26,10 @@ function Login() { setError(null); try { - const response = await axios.post('https://mern-stack-ecommerce-app-h5wb.onrender.com/api/auth/login', { email, password }); + const response = await axios.post( + 'https://mern-stack-ecommerce-app-h5wb.onrender.com/api/auth/login', + { email, password } + ); const token = response.data.token; // Store token in localStorage or sessionStorage localStorage.setItem('MERNEcommerceToken', token); @@ -27,6 +42,11 @@ function Login() { } }; + // Toggle password visibility + const handleTogglePasswordVisibility = () => { + setShowPassword((prev) => !prev); + }; + return ( @@ -35,7 +55,7 @@ function Login() { {error && ( - + {error} )} @@ -52,13 +72,26 @@ function Login() { /> setPassword(e.target.value)} required + InputProps={{ + endAdornment: ( + + + {showPassword ? : } + + + ), + }} /> diff --git a/src/pages/Register.jsx b/src/pages/Register.jsx index 87690fc..a4163f6 100644 --- a/src/pages/Register.jsx +++ b/src/pages/Register.jsx @@ -1,11 +1,25 @@ import React, { useState } from 'react'; -import { Box, Container, TextField, Typography, Button, CircularProgress, Paper } from '@mui/material'; +import { + Box, + Container, + TextField, + Typography, + Button, + CircularProgress, + Paper, + IconButton, + InputAdornment, +} from '@mui/material'; +import { Visibility, VisibilityOff } from '@mui/icons-material'; import axios from 'axios'; // For making API calls function Register() { const [name, setName] = useState(''); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); + const [confirmPassword, setConfirmPassword] = useState(''); // New state for confirming password + const [showPassword, setShowPassword] = useState(false); // State for password visibility toggle + const [showConfirmPassword, setShowConfirmPassword] = useState(false); // State for confirm password visibility toggle const [loading, setLoading] = useState(false); const [error, setError] = useState(null); @@ -14,8 +28,17 @@ function Register() { setLoading(true); setError(null); + if (password !== confirmPassword) { + setError("Passwords do not match"); + setLoading(false); + return; + } + try { - const response = await axios.post('https://mern-stack-ecommerce-app-h5wb.onrender.com/api/auth/register', { name, email, password }); + const response = await axios.post( + 'https://mern-stack-ecommerce-app-h5wb.onrender.com/api/auth/register', + { name, email, password } + ); const token = response.data.token; // Store token in localStorage or sessionStorage localStorage.setItem('token', token); @@ -28,6 +51,16 @@ function Register() { } }; + // Toggle password visibility + const handleTogglePasswordVisibility = () => { + setShowPassword((prev) => !prev); + }; + + // Toggle confirm password visibility + const handleToggleConfirmPasswordVisibility = () => { + setShowConfirmPassword((prev) => !prev); + }; + return ( @@ -36,7 +69,7 @@ function Register() { {error && ( - + {error} )} @@ -62,13 +95,49 @@ function Register() { /> setPassword(e.target.value)} required + InputProps={{ + endAdornment: ( + + + {showPassword ? : } + + + ), + }} + /> + setConfirmPassword(e.target.value)} + required + InputProps={{ + endAdornment: ( + + + {showConfirmPassword ? : } + + + ), + }} /> diff --git a/src/pages/ResetPassword.jsx b/src/pages/ResetPassword.jsx index f6272ad..3df10bc 100644 --- a/src/pages/ResetPassword.jsx +++ b/src/pages/ResetPassword.jsx @@ -1,11 +1,24 @@ import React, { useState } from 'react'; -import { Box, Container, TextField, Typography, Button, CircularProgress, Paper } from '@mui/material'; +import { + Box, + Container, + TextField, + Typography, + Button, + CircularProgress, + Paper, + IconButton, + InputAdornment, +} from '@mui/material'; +import { Visibility, VisibilityOff } from '@mui/icons-material'; import axios from 'axios'; function ResetPassword() { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [confirmPassword, setConfirmPassword] = useState(''); + const [showPassword, setShowPassword] = useState(false); + const [showConfirmPassword, setShowConfirmPassword] = useState(false); const [loading, setLoading] = useState(false); const [success, setSuccess] = useState(null); const [error, setError] = useState(null); @@ -33,6 +46,14 @@ function ResetPassword() { } }; + const handleTogglePasswordVisibility = () => { + setShowPassword((prev) => !prev); + }; + + const handleToggleConfirmPasswordVisibility = () => { + setShowConfirmPassword((prev) => !prev); + }; + return ( @@ -64,23 +85,49 @@ function ResetPassword() { /> setPassword(e.target.value)} required + InputProps={{ + endAdornment: ( + + + {showPassword ? : } + + + ), + }} /> setConfirmPassword(e.target.value)} required + InputProps={{ + endAdornment: ( + + + {showConfirmPassword ? : } + + + ), + }} />