added error outline when password conditions not met.

This commit is contained in:
Nicholas 2024-03-02 01:44:44 -05:00
parent fb15863b2f
commit 445c8512fb
2 changed files with 3 additions and 2 deletions

View File

@ -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);
}}

View File

@ -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>