Form Validation on Login-Register View #89

PantryNodeReact/src/pages/login.tsx

@@ -3,8 +3,8 @@ import Avatar from '@mui/material/Avatar';
 import Button from '@mui/material/Button';
 import CssBaseline from '@mui/material/CssBaseline';
 import TextField from '@mui/material/TextField';
-// import FormControlLabel from '@mui/material/FormControlLabel';
-// import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
 import Link from '@mui/material/Link';
 import Grid from '@mui/material/Grid';
 import Box from '@mui/material/Box';
@@ -13,21 +13,73 @@ import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
 import Typography from '@mui/material/Typography';
 import Container from '@mui/material/Container';
 import Copyright from '../Components/Copyright';
-
+import { useState } from "react";
 
 
 export default function Login() {
+
+  // validation
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [emailError, setEmailError] = useState("");
+  const [passwordError, setPasswordError] = useState("");
+  const [remember, setRemember] = useState(false);
+
+  const handleRememberChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setRemember(event.target.checked);
+  };
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = event.target;
+    if (name === "email") {
+      setEmail(value);
+      setEmailError("");
+    } else if (name === "password") {
+      setPassword(value);
+      setPasswordError("");
+    }
+  };
+
+
   const navigate = useNavigate();
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     const data = new FormData(event.currentTarget);
-    console.log({
-      email: data.get('email'),
-      password: data.get('password'),
-    });
+
+    const emailValue = data.get("email") as string;
+    const passwordValue = data.get("password") as string;
+
+    // email
+    if (emailValue.trim() === "") {
+      setEmailError("Email is required");
+      return;
+    }
+
+    if (!/\S+@\S+\.\S+/.test(emailValue)) {
+      setEmailError("Email is invalid");
+      return;
+    }
+
+    // password
+    if (passwordValue.trim() === "") {
+      setPasswordError("Password is required");
+      return;
+    }
+    if (passwordValue.length < 8){
+      setPasswordError("Password must be at least 8 characters long");
+      return;
+    }
+    if (!/(?=.*[A-Z])(?=.*[\W_])/.test(passwordValue)) {
+      setPasswordError("Password must contain at least one number and one special character");
+      return;
+    }
+
+    // to do: redirect to success page after built
     navigate("/")
   };
 
+
+
   return (
 
       <Container component="main" maxWidth="xs">
@@ -56,6 +108,10 @@ export default function Login() {
               name="email"
               autoComplete="email"
               autoFocus
+              value={email}
+              onChange={handleChange}
+              error={Boolean(emailError)}
+              helperText={emailError}
             />
             <TextField
               margin="normal"
@@ -66,11 +122,15 @@ export default function Login() {
               type="password"
               id="password"
               autoComplete="current-password"
+              value={password}
+              onChange={handleChange}
+              error={Boolean(passwordError)}
+              helperText={passwordError}
             />
-            {/* <FormControlLabel
-              control={<Checkbox value="remember" color="primary" />}
+            <FormControlLabel
+              control={<Checkbox checked={remember} onChange={handleRememberChange} color="primary" />}
               label="Remember me"
-            /> */}
+            />
             <Button
               type="submit"
               fullWidth
@@ -99,4 +159,4 @@ export default function Login() {
         <Copyright sx={{ mt: 8, mb: 4 }} />
       </Container>
   );
-}
+}

PantryNodeReact/src/pages/register.tsx

@@ -13,19 +13,82 @@ import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
 import Typography from '@mui/material/Typography';
 import Container from '@mui/material/Container';
 import Copyright from '../Components/Copyright';
+import { useState } from "react";
 
 
 
 export default function SignUp() {
-     const navigate = useNavigate();
+
+  // validation
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [emailError, setEmailError] = useState("");
+  const [passwordError, setPasswordError] = useState("");
+  const [phoneNumber, setPhoneNumber] = useState("");
+  const [phoneNumberError, setPhoneNumberError] = useState("");
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = event.target;
+    if (name === "email") {
+      setEmail(value);
+      setEmailError("");
+    } else if (name === "password") {
+      setPassword(value);
+      setPasswordError("");
+    } else if (name === "phoneNumber") {
+      setPhoneNumber(value);
+      setPhoneNumberError("");
+    }
+  };
+
+  const navigate = useNavigate();
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     const data = new FormData(event.currentTarget);
-    console.log({
-      email: data.get('email'),
-      password: data.get('password'),
-    });
-    console.log("trying to navigate")
+
+    const emailValue = data.get("email") as string;
+    const passwordValue = data.get("password") as string;
+    const phoneNumberValue = data.get("phoneNumber") as string;
+
+    // email
+    if (emailValue.trim() === "") {
+      setEmailError("Email is required");
+      return;
+    }
+    if (!/\S+@\S+\.\S+/.test(emailValue)) {
+      setEmailError("Email is invalid");
+      return;
+    }
+
+    // password
+    if (passwordValue.trim() === "") {
+      setPasswordError("Password is required");
+      return;
+    }
+    if (passwordValue.length < 8){
+      setPasswordError("Password must be at least 8 characters long");
+      return;
+    }
+    if (!/(?=.*[A-Z])(?=.*[\W_])/.test(passwordValue)) {
+      setPasswordError("Password must contain at least one number and one special character");
+      return;
+    }
+
+    // phoneNumber
+    if (phoneNumberValue.trim() === "") {
+      setPhoneNumberError("Please enter your phone number");
+      return;
+    }
+    if (!/^[0-9]+$/.test(phoneNumberValue)) {
+      setPhoneNumberError("Please enter a valid phone number");
+      return;
+    }
+    if (phoneNumberValue.length !==10){
+      setPhoneNumberError("Phone number must be 10 Digits");
+      return;
+    }
+
+    // to do: redirect to success page after built
     navigate("/")
   };
 
@@ -49,14 +112,25 @@ export default function SignUp() {
           </Typography>
           <Box component="form" onSubmit={handleSubmit} sx={{ mt: 3 }}>
             <Grid container spacing={2}>
-              <Grid item xs={12} >
+              <Grid item xs={6} >
+                <TextField
+                  autoComplete="given-name"
+                  name="First Name"
+                  required
+                  fullWidth
+                  id="FirstName"
+                  label="FirstName"
+                  autoFocus
+                />
+              </Grid>
+              <Grid item xs={6} >
                 <TextField
                   autoComplete="given-name"
-                  name="Name"
+                  name="Last Name"
                   required
                   fullWidth
-                  id="Name"
-                  label="Name"
+                  id="LastName"
+                  label="LastName"
                   autoFocus
                 />
               </Grid>
@@ -68,6 +142,10 @@ export default function SignUp() {
                   label="Phone Number"
                   name="phoneNumber"
                   autoComplete="phone-number"
+                  value={phoneNumber}
+                  onChange={handleChange}
+                  error={Boolean(phoneNumberError)}
+                  helperText={phoneNumberError}
                 />
               </Grid>
               <Grid item xs={12}>
@@ -78,6 +156,10 @@ export default function SignUp() {
                   label="Email Address"
                   name="email"
                   autoComplete="email"
+                  value={email}
+                  onChange={handleChange}
+                  error={Boolean(emailError)}
+                  helperText={emailError}
                 />
               </Grid>
               <Grid item xs={12}>
@@ -89,6 +171,10 @@ export default function SignUp() {
                   type="password"
                   id="password"
                   autoComplete="new-password"
+                  value={password}
+                  onChange={handleChange}
+                  error={Boolean(passwordError)}
+                  helperText={passwordError}
                 />
               </Grid>
 
@@ -117,4 +203,4 @@ export default function SignUp() {
         <Copyright sx={{ mt: 5 }} />
       </Container>
   );
-}
+}