From 8eba3c2bc4e017216f1a48bb4aaf50ab4afa835f Mon Sep 17 00:00:00 2001
From: Joshkovu <joashkuteesa223@gmail.com>
Date: Sun, 17 May 2026 11:00:29 +0300
Subject: [PATCH 1/2] feat: add PasswordInput component and integrate it into
 signup and login pages

---
 .../src/components/ui/PasswordInput.jsx       | 66 +++++++++++++++++++
 logify-frontend/src/pages/AdminSignupPage.jsx | 53 +++++----------
 logify-frontend/src/pages/LoginPage.jsx       | 25 +++----
 .../src/pages/StudentSignupPage.jsx           | 55 +++++-----------
 .../src/pages/SupervisorSignupPage.jsx        | 53 +++++----------
 5 files changed, 126 insertions(+), 126 deletions(-)
 create mode 100644 logify-frontend/src/components/ui/PasswordInput.jsx

diff --git a/logify-frontend/src/components/ui/PasswordInput.jsx b/logify-frontend/src/components/ui/PasswordInput.jsx
new file mode 100644
index 0000000..18bf04e
--- /dev/null
+++ b/logify-frontend/src/components/ui/PasswordInput.jsx
@@ -0,0 +1,66 @@
+import { useState } from "react";
+import { Eye, EyeOff } from "lucide-react";
+import PropTypes from "prop-types";
+
+function PasswordInput({
+  label,
+  name,
+  value,
+  onChange,
+  placeholder = "Enter your password",
+  error,
+  className = "",
+  ...props
+}) {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const toggleVisibility = () => {
+    setIsVisible(!isVisible);
+  };
+
+  return (
+    <div>
+      {label && (
+        <label className="text-xs font-black uppercase tracking-widest text-maroon-dark dark:text-gold">
+          {label}
+        </label>
+      )}
+      <div className="relative mt-2">
+        <input
+          type={isVisible ? "text" : "password"}
+          name={name}
+          value={value}
+          onChange={onChange}
+          placeholder={placeholder}
+          className={`w-full rounded-xl border border-border bg-white px-4 py-3 pr-10 text-sm outline-none transition focus:border-gold dark:border-slate-700 dark:bg-slate-800 ${className}`}
+          {...props}
+        />
+        <button
+          type="button"
+          onClick={toggleVisibility}
+          className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 transition-colors"
+          aria-label={isVisible ? "Hide password" : "Show password"}
+        >
+          {isVisible ? (
+            <EyeOff size={18} />
+          ) : (
+            <Eye size={18} />
+          )}
+        </button>
+      </div>
+      {error && <p className="mt-1 text-xs text-red-600">{error}</p>}
+    </div>
+  );
+}
+
+PasswordInput.propTypes = {
+  label: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  placeholder: PropTypes.string,
+  error: PropTypes.string,
+  className: PropTypes.string,
+};
+
+export default PasswordInput;
diff --git a/logify-frontend/src/pages/AdminSignupPage.jsx b/logify-frontend/src/pages/AdminSignupPage.jsx
index 6de8074..c031f79 100644
--- a/logify-frontend/src/pages/AdminSignupPage.jsx
+++ b/logify-frontend/src/pages/AdminSignupPage.jsx
@@ -4,6 +4,7 @@ import { Link, useNavigate } from "react-router-dom";
 import { api } from "../config/api.js";
 import { AuthContext } from "../contexts/AuthContext";
 import Loading from "../components/ui/Loading";
+import PasswordInput from "../components/ui/PasswordInput";
 import AuthActionButton from "../components/ui/AuthActionButton";
 import AuthLayout from "./auth/AuthLayout";
 import GuestOnlyRoute from "./auth/GuestOnlyRoute";
@@ -307,43 +308,23 @@ const AdminSignupPage = () => {
             )}
           </div>
 
-          <div>
-            <label className="text-xs font-black uppercase tracking-widest text-maroon-dark dark:text-gold">
-              Password
-            </label>
-            <input
-              name="password"
-              type="password"
-              value={formData.password}
-              onChange={onChange}
-              className="mt-2 w-full rounded-xl border border-border bg-white px-4 py-3 text-sm outline-none transition focus:border-gold dark:border-slate-700 dark:bg-slate-800"
-              placeholder="At least 8 characters"
-            />
-            {fieldErrors.password && (
-              <p className="mt-1 text-xs text-red-600">
-                {fieldErrors.password}
-              </p>
-            )}
-          </div>
+          <PasswordInput
+            label="Password"
+            name="password"
+            value={formData.password}
+            onChange={onChange}
+            placeholder="At least 8 characters"
+            error={fieldErrors.password}
+          />
 
-          <div>
-            <label className="text-xs font-black uppercase tracking-widest text-maroon-dark dark:text-gold">
-              Confirm Password
-            </label>
-            <input
-              name="confirmPassword"
-              type="password"
-              value={formData.confirmPassword}
-              onChange={onChange}
-              className="mt-2 w-full rounded-xl border border-border bg-white px-4 py-3 text-sm outline-none transition focus:border-gold dark:border-slate-700 dark:bg-slate-800"
-              placeholder="Re-enter password"
-            />
-            {fieldErrors.confirmPassword && (
-              <p className="mt-1 text-xs text-red-600">
-                {fieldErrors.confirmPassword}
-              </p>
-            )}
-          </div>
+          <PasswordInput
+            label="Confirm Password"
+            name="confirmPassword"
+            value={formData.confirmPassword}
+            onChange={onChange}
+            placeholder="Re-enter password"
+            error={fieldErrors.confirmPassword}
+          />
 
           {error && (
             <div className="rounded-xl border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-900/70 dark:bg-red-950/40 dark:text-red-300">
diff --git a/logify-frontend/src/pages/LoginPage.jsx b/logify-frontend/src/pages/LoginPage.jsx
index 82ae31b..81ed922 100644
--- a/logify-frontend/src/pages/LoginPage.jsx
+++ b/logify-frontend/src/pages/LoginPage.jsx
@@ -3,6 +3,7 @@ import { Link, useLocation } from "react-router-dom";
 
 import { AuthContext } from "../contexts/AuthContext";
 import Loading from "../components/ui/Loading";
+import PasswordInput from "../components/ui/PasswordInput";
 import AuthLayout from "./auth/AuthLayout";
 import GuestOnlyRoute from "./auth/GuestOnlyRoute";
 
@@ -76,23 +77,13 @@ const LoginPage = () => {
             />
           </div>
 
-          <div>
-            <label
-              htmlFor="password"
-              className="text-xs font-black uppercase tracking-widest text-maroon-dark dark:text-gold"
-            >
-              Password
-            </label>
-            <input
-              id="password"
-              name="password"
-              type="password"
-              value={formData.password}
-              onChange={onChange}
-              placeholder="Enter your password"
-              className="mt-2 w-full rounded-xl border border-border bg-white px-4 py-3 text-sm outline-none ring-0 transition focus:border-gold dark:border-slate-700 dark:bg-slate-800"
-            />
-          </div>
+          <PasswordInput
+            label="Password"
+            name="password"
+            value={formData.password}
+            onChange={onChange}
+            placeholder="Enter your password"
+          />
 
           {error && (
             <div className="rounded-xl border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-900/70 dark:bg-red-950/40 dark:text-red-300">
diff --git a/logify-frontend/src/pages/StudentSignupPage.jsx b/logify-frontend/src/pages/StudentSignupPage.jsx
index 06fab2c..4259edc 100644
--- a/logify-frontend/src/pages/StudentSignupPage.jsx
+++ b/logify-frontend/src/pages/StudentSignupPage.jsx
@@ -1,6 +1,7 @@
 import { useContext, useEffect, useState } from "react";
 import { AuthContext } from "../contexts/AuthContext";
 import Loading from "../components/ui/Loading";
+import PasswordInput from "../components/ui/PasswordInput";
 import AuthLayout from "./auth/AuthLayout";
 import GuestOnlyRoute from "./auth/GuestOnlyRoute";
 import { api } from "../config/api.js";
@@ -442,43 +443,23 @@ const StudentSignupPage = () => {
             )}
           </div>
 
-          <div>
-            <label className="text-xs font-black uppercase tracking-widest text-maroon-dark dark:text-gold">
-              Password
-            </label>
-            <input
-              type="password"
-              name="password"
-              value={formData.password}
-              onChange={onChange}
-              className="mt-2 w-full rounded-xl border border-border bg-white px-4 py-3 text-sm outline-none transition focus:border-gold dark:border-slate-700 dark:bg-slate-800"
-              placeholder="At least 8 characters"
-            />
-            {fieldErrors.password && (
-              <p className="mt-1 text-xs text-red-600">
-                {fieldErrors.password}
-              </p>
-            )}
-          </div>
-
-          <div>
-            <label className="text-xs font-black uppercase tracking-widest text-maroon-dark dark:text-gold">
-              Confirm Password
-            </label>
-            <input
-              type="password"
-              name="confirmPassword"
-              value={formData.confirmPassword}
-              onChange={onChange}
-              className="mt-2 w-full rounded-xl border border-border bg-white px-4 py-3 text-sm outline-none transition focus:border-gold dark:border-slate-700 dark:bg-slate-800"
-              placeholder="Re-enter password"
-            />
-            {fieldErrors.confirmPassword && (
-              <p className="mt-1 text-xs text-red-600">
-                {fieldErrors.confirmPassword}
-              </p>
-            )}
-          </div>
+          <PasswordInput
+            label="Password"
+            name="password"
+            value={formData.password}
+            onChange={onChange}
+            placeholder="At least 8 characters"
+            error={fieldErrors.password}
+          />
+
+          <PasswordInput
+            label="Confirm Password"
+            name="confirmPassword"
+            value={formData.confirmPassword}
+            onChange={onChange}
+            placeholder="Re-enter password"
+            error={fieldErrors.confirmPassword}
+          />
 
           {error && (
             <div className="my-4 rounded-xl border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-900/70 dark:bg-red-950/40 dark:text-red-300">
diff --git a/logify-frontend/src/pages/SupervisorSignupPage.jsx b/logify-frontend/src/pages/SupervisorSignupPage.jsx
index fc21d8a..0d72bd4 100644
--- a/logify-frontend/src/pages/SupervisorSignupPage.jsx
+++ b/logify-frontend/src/pages/SupervisorSignupPage.jsx
@@ -4,6 +4,7 @@ import { Link, useNavigate, useLocation } from "react-router-dom";
 import { api } from "../config/api.js";
 import { AuthContext } from "../contexts/AuthContext";
 import Loading from "../components/ui/Loading";
+import PasswordInput from "../components/ui/PasswordInput";
 import AuthActionButton from "../components/ui/AuthActionButton";
 import AuthLayout from "./auth/AuthLayout";
 import GuestOnlyRoute from "./auth/GuestOnlyRoute";
@@ -400,43 +401,23 @@ const SupervisorSignupPage = () => {
             </div>
           )}
 
-          <div>
-            <label className="text-xs font-black uppercase tracking-widest text-maroon-dark dark:text-gold">
-              Password
-            </label>
-            <input
-              name="password"
-              type="password"
-              value={formData.password}
-              onChange={onChange}
-              className="mt-2 w-full rounded-xl border border-border bg-white px-4 py-3 text-sm outline-none transition focus:border-gold dark:border-slate-700 dark:bg-slate-800"
-              placeholder="At least 8 characters"
-            />
-            {fieldErrors.password && (
-              <p className="mt-1 text-xs text-red-600">
-                {fieldErrors.password}
-              </p>
-            )}
-          </div>
+          <PasswordInput
+            label="Password"
+            name="password"
+            value={formData.password}
+            onChange={onChange}
+            placeholder="At least 8 characters"
+            error={fieldErrors.password}
+          />
 
-          <div>
-            <label className="text-xs font-black uppercase tracking-widest text-maroon-dark dark:text-gold">
-              Confirm Password
-            </label>
-            <input
-              name="confirmPassword"
-              type="password"
-              value={formData.confirmPassword}
-              onChange={onChange}
-              className="mt-2 w-full rounded-xl border border-border bg-white px-4 py-3 text-sm outline-none transition focus:border-gold dark:border-slate-700 dark:bg-slate-800"
-              placeholder="Re-enter password"
-            />
-            {fieldErrors.confirmPassword && (
-              <p className="mt-1 text-xs text-red-600">
-                {fieldErrors.confirmPassword}
-              </p>
-            )}
-          </div>
+          <PasswordInput
+            label="Confirm Password"
+            name="confirmPassword"
+            value={formData.confirmPassword}
+            onChange={onChange}
+            placeholder="Re-enter password"
+            error={fieldErrors.confirmPassword}
+          />
 
           {error && (
             <div className="rounded-xl border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-900/70 dark:bg-red-950/40 dark:text-red-300">

From 121a4dd53494b92e2a8dae21d0bc356ac237cc23 Mon Sep 17 00:00:00 2001
From: Joshkovu <joashkuteesa223@gmail.com>
Date: Sun, 17 May 2026 11:04:41 +0300
Subject: [PATCH 2/2] fix: update PasswordInput component to use dynamic input
 ID and improve label association; adjust test for password field
 accessibility

---
 logify-frontend/src/components/ui/PasswordInput.jsx | 9 ++++++++-
 logify-frontend/src/tests/authRoutes.test.jsx       | 2 +-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/logify-frontend/src/components/ui/PasswordInput.jsx b/logify-frontend/src/components/ui/PasswordInput.jsx
index 18bf04e..7c4ede8 100644
--- a/logify-frontend/src/components/ui/PasswordInput.jsx
+++ b/logify-frontend/src/components/ui/PasswordInput.jsx
@@ -10,9 +10,11 @@ function PasswordInput({
   placeholder = "Enter your password",
   error,
   className = "",
+  id,
   ...props
 }) {
   const [isVisible, setIsVisible] = useState(false);
+  const inputId = id || `password-input-${name}`;
 
   const toggleVisibility = () => {
     setIsVisible(!isVisible);
@@ -21,12 +23,16 @@ function PasswordInput({
   return (
     <div>
       {label && (
-        <label className="text-xs font-black uppercase tracking-widest text-maroon-dark dark:text-gold">
+        <label
+          htmlFor={inputId}
+          className="text-xs font-black uppercase tracking-widest text-maroon-dark dark:text-gold"
+        >
           {label}
         </label>
       )}
       <div className="relative mt-2">
         <input
+          id={inputId}
           type={isVisible ? "text" : "password"}
           name={name}
           value={value}
@@ -61,6 +67,7 @@ PasswordInput.propTypes = {
   placeholder: PropTypes.string,
   error: PropTypes.string,
   className: PropTypes.string,
+  id: PropTypes.string,
 };
 
 export default PasswordInput;
diff --git a/logify-frontend/src/tests/authRoutes.test.jsx b/logify-frontend/src/tests/authRoutes.test.jsx
index 0368dc5..b8fa197 100644
--- a/logify-frontend/src/tests/authRoutes.test.jsx
+++ b/logify-frontend/src/tests/authRoutes.test.jsx
@@ -151,7 +151,7 @@ test("login page forwards the original destination to the login action", async (
   fireEvent.change(screen.getByLabelText(/email \/ webmail/i), {
     target: { value: "student@example.com" },
   });
-  fireEvent.change(screen.getByLabelText(/password/i), {
+  fireEvent.change(screen.getByLabelText(/^password$/i), {
     target: { value: "password123" },
   });
   fireEvent.click(screen.getByRole("button", { name: /login/i }));