Belinda_NextJS_Sprint_1_166_Password_Toggle (#191)

* Added Show/Hide Password Input Field * Text Color Changed To Black * Implemented password visibility toggle with MUI --------- Co-authored-by: Muhammadou Drammeh <[email protected]> Co-authored-by: cshimm <[email protected]>
SeattleColleges · Feb 13, 2024 · e37f102 · e37f102
1 parent 9f20a1a
commit e37f102
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 21 deletions.
diff --git a/app/auth/sign-up/page.tsx b/app/auth/sign-up/page.tsx
@@ -3,7 +3,9 @@ import InputField from "@/components/InputFields";
 import Link from "next/link";
 import { ChangeEventHandler, FormEventHandler, useState } from "react";
 import styles from './signup-page.module.css';
-
+import Visibility from "@mui/icons-material/Visibility";
+import VisibilityOff from "@mui/icons-material/VisibilityOff";
+import {IconButton, InputAdornment, TextField} from "@mui/material";
 const SignUp = () => {
   // handling user's incoming info
   const [userInfo, setUserInfo] = useState({
@@ -13,9 +15,24 @@ const SignUp = () => {
     password: "",
     confirmPassword: "",
   });
-
+  // Set initial state for errors
+    const [errors, setErrors] = useState({
+        firstName: "",
+        lastName: "",
+        email: "",
+        password: "",
+        confirmPassword: "",
+    });
   const { firstName, lastName, email, password, confirmPassword } = userInfo;
 
+  // State to track whether the password is visible or not
+ const [showPassword, setShowPassword] = useState(false);
+
+ // Function to toggle password visibility
+ const togglePasswordVisibility = () => {
+   setShowPassword(!showPassword);
+ };
+
   const handleChange: ChangeEventHandler<HTMLInputElement> = ({ target }) => {
     const { name, value } = target;
     // updating user's info 
@@ -32,7 +49,7 @@ const SignUp = () => {
     console.error("Passwords do not match");
     return;
   }
-
+  
     // send request to backend api then log the response
     const res = await fetch("/api/auth/users", {
       method: "POST",
@@ -53,41 +70,88 @@ const SignUp = () => {
     <div className={styles.container}>
       <form className={styles.formContainer} onSubmit={handleSubmit}>
         <h1 className={styles.title}>Sign Up</h1>
-        <InputField
+        <TextField
+            fullWidth
+            margin="normal"
           label="First Name"
           type="text"
           name="firstName"
           value={firstName}
           onChange={handleChange}
         />
-        <InputField
+        <TextField
+            fullWidth
+            margin="normal"
           label="Last Name"
           type="text"
           name="lastName"
           value={lastName}
           onChange={handleChange}
         />
-        <InputField
+        <TextField
+            fullWidth
+            margin="normal"
           label="Email"
           type="email"
           name="email"
           value={email}
           onChange={handleChange}
         />
-        <InputField
-          label="Password"
-          type="password"
-          name="password"
-          value={password}
-          onChange={handleChange}
-        />
-        <InputField
-          label="Confirm Password"
-          type="password"
-          name="confirmPassword"
-          value={confirmPassword}
-          onChange={handleChange}
-        />
+      {/* Password input with toggle button */}
+          <TextField
+              fullWidth
+              margin="normal"
+              label="Password"
+              name="password"
+              value={password}
+              type={showPassword ? "text" : "password"}
+              onChange={handleChange}
+              error={Boolean(errors.password)}
+              helperText={errors.password}
+              InputProps={{
+                  endAdornment: (
+                      <InputAdornment position="end">
+                          {/* Toggle button to control password visibility */}
+                          <IconButton
+                              onClick={togglePasswordVisibility}
+                          >
+                              {showPassword ? <VisibilityOff /> : <Visibility />}
+                          </IconButton>
+                      </InputAdornment>
+                  ),
+              }}
+          />
+          {/* Confirm Password input with toggle button */}
+          <TextField
+              fullWidth
+              margin="normal"
+              label="Confirm Password"
+              name="confirmPassword"
+              value={confirmPassword}
+              type={showPassword ? "text" : "password"}
+              onChange={handleChange}
+              error={Boolean(errors.confirmPassword)}
+              helperText={errors.confirmPassword}
+              InputProps={{
+                  endAdornment: (
+                      <InputAdornment position="end">
+                          {/* Toggle button to control password visibility */}
+                          <IconButton
+                              onClick={togglePasswordVisibility}
+                          >
+                              {showPassword ? <VisibilityOff /> : <Visibility />}
+                          </IconButton>
+                      </InputAdornment>
+                  ),
+              }}
+          />
+        {/*<button*/}
+        {/*  type="button"*/}
+        {/*  onClick={togglePasswordVisibility}*/}
+        {/*  className={styles.toggleButton}*/}
+        {/*>*/}
+        {/*  {showPassword ? "Hide Password" : "Show Password"}*/}
+        {/*</button>*/}
         <button className={styles.submitButton} type="submit">
           Sign Up
         </button>

diff --git a/components/InputFields.tsx b/components/InputFields.tsx
@@ -13,7 +13,7 @@ const InputField: React.FC<InputFieldProps> = ({ label, type, name, value, onCha
     <div className="mb-4">
       <label className="block mb-1 font-semibold">{label}</label>
       <input
-        className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500"
+        className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500 text-black"
         type={type}
         name={name}
         value={value}