Dfunder · ayshadogo · Mar 26, 2026 · Mar 25, 2026 · Mar 26, 2026 · Mar 26, 2026
diff --git a/app/auth/forgot-password/ForgotPasswordForm.tsx b/app/auth/forgot-password/ForgotPasswordForm.tsx
@@ -43,12 +43,12 @@ export default function ForgotPasswordForm() {
       await authApi.forgotPassword({
         email: data.email,
       });
-      
+
       // Show success message regardless of whether email exists
       setIsSubmitted(true);
     } catch (err) {
       const apiError = err as ApiError;
-      
+
       // Still show success message for security (don't reveal if email exists)
       if (apiError.status === 404) {
         setIsSubmitted(true);
@@ -114,7 +114,7 @@ export default function ForgotPasswordForm() {
               Return to Sign In
             </Button>
           </Link>
-          
+
           <p className="text-center text-sm text-gray-500">
             Didn&apos;t receive the email? Check your spam folder or{' '}
             <button
@@ -212,4 +212,4 @@ export default function ForgotPasswordForm() {
       </p>
     </Card>
   );
-}
+}
diff --git a/app/auth/reset-password/ResetPasswordForm.tsx b/app/auth/reset-password/ResetPasswordForm.tsx
@@ -96,11 +96,11 @@ export default function ResetPasswordForm() {
         token,
         password: data.password,
       });
-      
+
       setIsSuccess(true);
     } catch (err) {
       const apiError = err as ApiError;
-      
+
       if (apiError.status === 400 && apiError.message?.includes('expired')) {
         setTokenError('This reset link has expired. Please request a new password reset.');
       } else if (apiError.status === 400 && apiError.message?.includes('invalid')) {
@@ -197,7 +197,7 @@ export default function ResetPasswordForm() {
               Request New Reset Link
             </Button>
           </Link>
-          
+
           <Link href="/auth/login" className="block">
             <Button variant="secondary" fullWidth>
               Return to Sign In
@@ -270,6 +270,7 @@ export default function ResetPasswordForm() {
                 Password must contain:
               </p>
               <div className="space-y-1">
+                {/* Length check */}
                 <div className="flex items-center gap-2 text-xs">
                   <div
                     className={`w-4 h-4 rounded-full flex items-center justify-center ${
@@ -300,6 +301,8 @@ export default function ResetPasswordForm() {
                     At least {passwordRequirements.minLength} characters
                   </span>
                 </div>
+
+                {/* Uppercase check */}
                 <div className="flex items-center gap-2 text-xs">
                   <div
                     className={`w-4 h-4 rounded-full flex items-center justify-center ${
@@ -330,6 +333,8 @@ export default function ResetPasswordForm() {
                     One uppercase letter
                   </span>
                 </div>
+
+                {/* Lowercase check */}
                 <div className="flex items-center gap-2 text-xs">
                   <div
                     className={`w-4 h-4 rounded-full flex items-center justify-center ${
@@ -360,6 +365,8 @@ export default function ResetPasswordForm() {
                     One lowercase letter
                   </span>
                 </div>
+
+                {/* Number check */}
                 <div className="flex items-center gap-2 text-xs">
                   <div
                     className={`w-4 h-4 rounded-full flex items-center justify-center ${
@@ -390,6 +397,8 @@ export default function ResetPasswordForm() {
                     One number
                   </span>
                 </div>
+
+                {/* Special character check */}
                 <div className="flex items-center gap-2 text-xs">
                   <div
                     className={`w-4 h-4 rounded-full flex items-center justify-center ${
@@ -477,4 +486,4 @@ export default function ResetPasswordForm() {
       </p>
     </Card>
   );
-}
+}
diff --git a/app/auth/reset-password/page.tsx b/app/auth/reset-password/page.tsx
@@ -3,10 +3,9 @@ import ResetPasswordForm from './ResetPasswordForm';
 
 export const metadata: Metadata = {
   title: 'Reset Password | StellarAid',
-  description:
-    'Create a new password for your StellarAid account.',
+  description: 'Create a new password for your StellarAid account.',
 };
 
 export default function ResetPasswordPage() {
   return <ResetPasswordForm />;
-}
+}
diff --git a/components/passwordInput.tsx b/components/passwordInput.tsx
@@ -1,5 +1,4 @@
 import { useState, forwardRef, InputHTMLAttributes } from "react";
-// import { FiEye, FiEyeOff } from "react-icons/fi";
 import PasswordStrengthBar from "./passwordStrengthBar";
 
 interface PasswordInputProps extends InputHTMLAttributes<HTMLInputElement> {
@@ -11,67 +10,130 @@ interface PasswordInputProps extends InputHTMLAttributes<HTMLInputElement> {
   autoComplete?: string;
 }
 
-const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(function PasswordInput({ label, id, value, onChange, showStrength = false, autoComplete, ...props }, ref) {
-  const [focused, setFocused] = useState(false);
-  const [visible, setVisible] = useState(false);
-  return (
-    <div style={{ display: "flex", flexDirection: "column", gap: "6px", width: "100%" }}>
-      <label
-        htmlFor={id}
-        style={{ fontSize: "13px", fontWeight: "700", color: "#374151", fontFamily: "'Outfit', sans-serif" }}
+const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
+  function PasswordInput(
+    {
+      label,
+      id,
+      value,
+      onChange,
+      showStrength = false,
+      autoComplete,
+      ...props
+    },
+    ref,
+  ) {
+    const [focused, setFocused] = useState(false);
+    const [visible, setVisible] = useState(false);
+
+    return (
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "6px",
+          width: "100%",
+        }}
       >
-        {label}
-      </label>
-      <div style={{ position: "relative" }}>
-        <input
-          ref={ref}
-          id={id}
-          type={visible ? "text" : "password"}
-          value={value}
-          onChange={onChange}
-          autoComplete={autoComplete}
-          onFocus={() => setFocused(true)}
-          onBlur={() => setFocused(false)}
+        <label
+          htmlFor={id}
           style={{
-            width: "100%",
-            padding: "10px 13px",
-            fontSize: "14px",
+            fontSize: "13px",
+            fontWeight: "700",
+            color: "#374151",
             fontFamily: "'Outfit', sans-serif",
-            color: "#1e293b",
-            background: focused ? "#fff" : "#f8fafc",
-            border: focused ? "1.5px solid #1e3a8a" : "1.5px solid #e2e8f0",
-            borderRadius: "8px",
-            outline: "none",
-            boxSizing: "border-box",
-            transition: "border-color 0.18s, background 0.18s, box-shadow 0.18s",
-            boxShadow: focused ? "0 0 0 3px rgba(30,58,138,0.10)" : "none",
-            letterSpacing: "0.12em",
-          }}
-          onMouseEnter={(e) => { if (!focused) e.currentTarget.style.borderColor = "#94a3b8"; }}
-          onMouseLeave={(e) => { if (!focused) e.currentTarget.style.borderColor = "#e2e8f0"; }}
-          {...props}
-        />
-        <button
-          type="button"
-          onClick={() => setVisible((v) => !v)}
-          style={{
-            position: "absolute",
-            right: "10px",
-            top: "50%",
-            transform: "translateY(-50%)",
-            background: "transparent",
-            border: "none",
-            padding: 0,
-            cursor: "pointer",
-            color: "#6b7280",
           }}
         >
-          {/* {visible ? <FiEyeOff size={20} /> : <FiEye size={20} />} */}
-        </button>
+          {label}
+        </label>
+        <div style={{ position: "relative" }}>
+          <input
+            ref={ref}
+            id={id}
+            type={visible ? "text" : "password"}
+            value={value}
+            onChange={onChange}
+            autoComplete={autoComplete}
+            onFocus={() => setFocused(true)}
+            onBlur={() => setFocused(false)}
+            style={{
+              width: "100%",
+              padding: "10px 13px",
+              fontSize: "14px",
+              fontFamily: "'Outfit', sans-serif",
+              color: "#1e293b",
+              background: focused ? "#fff" : "#f8fafc",
+              border: focused ? "1.5px solid #1e3a8a" : "1.5px solid #e2e8f0",
+              borderRadius: "8px",
+              outline: "none",
+              boxSizing: "border-box",
+              transition:
+                "border-color 0.18s, background 0.18s, box-shadow 0.18s",
+              boxShadow: focused ? "0 0 0 3px rgba(30,58,138,0.10)" : "none",
+              letterSpacing: "0.12em",
+            }}
+            onMouseEnter={(e) => {
+              if (!focused) e.currentTarget.style.borderColor = "#94a3b8";
+            }}
+            onMouseLeave={(e) => {
+              if (!focused) e.currentTarget.style.borderColor = "#e2e8f0";
+            }}
+            {...props}
+          />
+          <button
+            type="button"
+            onClick={() => setVisible((v) => !v)}
+            aria-label={visible ? "Hide password" : "Show password"}
+            style={{
+              position: "absolute",
+              right: "10px",
+              top: "50%",
+              transform: "translateY(-50%)",
+              background: "transparent",
+              border: "none",
+              padding: 0,
+              cursor: "pointer",
+              color: "#6b7280",
+            }}
+          >
+            {visible ? (
+              // Eye-off icon (hide password)
+              <svg
+                width={20}
+                height={20}
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+              >
+                <path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94" />
+                <path d="M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19" />
+                <line x1="1" y1="1" x2="23" y2="23" />
+              </svg>
+            ) : (
+              // Eye icon (show password)
+              <svg
+                width={20}
+                height={20}
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+              >
+                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                <circle cx="12" cy="12" r="3" />
+              </svg>
+            )}
+          </button>
+        </div>
+        {showStrength && <PasswordStrengthBar password={value} />}
       </div>
-      {showStrength && <PasswordStrengthBar password={value} />}
-    </div>
-  );
-});
+    );
+  },
+);
 
 export default PasswordInput;
diff --git a/components/ui/Toast.tsx b/components/ui/Toast.tsx
@@ -7,7 +7,6 @@ import React, {
   createContext,
   useContext,
   HTMLAttributes,
-  ForwardRefRenderFunction,
   forwardRef,
 } from "react";
 
@@ -177,10 +176,6 @@ export const ToastProvider: React.FC<ToastProviderProps> = ({
     setToasts((prev) => prev.filter((toast) => toast.id !== id));
   }, []);
 
-  // const removeToast = useCallback((id: string) => {
-  //   setToasts((prev) => prev.filter((toast) => toast.id !== id));
-  // }, []);
-
   const addToast = useCallback(
     (toast: Omit<ToastProps, "id" | "onClose">): string => {
       const id = generateId();
@@ -283,12 +278,12 @@ const ToastItem = forwardRef<HTMLDivElement, ToastProps>(function ToastItem(
   const [isVisible, setIsVisible] = useState(false);
   const [isLeaving, setIsLeaving] = useState(false);
 
-  // const handleClose = useCallback(() => {
-  //   setIsLeaving(true);
-  //   setTimeout(() => {
-  //     onClose(id);
-  //   }, 300);
-  // }, [id, onClose]);
+  const handleClose = useCallback(() => {
+    setIsLeaving(true);
+    setTimeout(() => {
+      onClose(id);
+    }, 300);
+  }, [id, onClose]);
 
   // Handle animation on mount
   useEffect(() => {
@@ -297,13 +292,6 @@ const ToastItem = forwardRef<HTMLDivElement, ToastProps>(function ToastItem(
     });
   }, []);
 
-  const handleClose = useCallback(() => {
-    setIsLeaving(true);
-    setTimeout(() => {
-      onClose(id);
-    }, 300);
-  }, [id, onClose]);
-
   // Handle auto-dismiss
   useEffect(() => {
     const dismissTime = durationMap[duration];
@@ -430,4 +418,4 @@ export const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(
 
 Toast.displayName = "Toast";
 
-export default Toast;
+export default Toast;