From 445c8512fb371ccf34389d8ed3e29d6ffb81ef2b Mon Sep 17 00:00:00 2001
From: Nicholas <nsanaie@unc.edu>
Date: Sat, 2 Mar 2024 01:44:44 -0500
Subject: [PATCH] added error outline when password conditions not met.

---
 compass/app/auth/newPassword/page.tsx | 3 ++-
 compass/components/Input.tsx          | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/compass/app/auth/newPassword/page.tsx b/compass/app/auth/newPassword/page.tsx
index 1b626ab..12d4faa 100644
--- a/compass/app/auth/newPassword/page.tsx
+++ b/compass/app/auth/newPassword/page.tsx
@@ -44,7 +44,7 @@ export default function Page() {
                type="password"
                title="Enter New Password"
                value={newPassword}
-               valid={isButtonDisabled}
+               valid={!isButtonDisabled || isStrongPassword(newPassword)}
                onChange={(e) => {
                setNewPassword(e.target.value);
                }}
@@ -61,6 +61,7 @@ export default function Page() {
                type="password"
                title="Confirm Password"
                value={confirmPassword}
+               valid={!isButtonDisabled || (newPassword === confirmPassword && confirmPassword !== '')}
                onChange={(e) => {
                setConfirmPassword(e.target.value);
                }}
diff --git a/compass/components/Input.tsx b/compass/components/Input.tsx
index 07c4d16..3eced0a 100644
--- a/compass/components/Input.tsx
+++ b/compass/components/Input.tsx
@@ -14,7 +14,7 @@ const Input: FunctionComponent<InputProps> = ({ icon, type, title, placeholder,
     <div>
       <label
   htmlFor={title}
-  className="block overflow-hidden rounded-md border border-gray-200 px-3 py-2 shadow-sm focus-within:border-red-600 focus-within:ring-1 focus-within:ring-red-600"
+  className={valid ? "block overflow-hidden rounded-md border border-gray-200 px-3 py-2 shadow-sm focus-within:border-purple-600 focus-within:ring-1 focus-within:ring-purple-600" : "block overflow-hidden rounded-md border border-gray-200 px-3 py-2 shadow-sm focus-within:border-red-600 focus-within:ring-1 focus-within:ring-red-600"}
 >
   <span className="text-xs font-semibold text-gray-700"> {title} </span>