mirror of
https://github.com/cssgunc/compass.git
synced 2025-04-06 20:50:17 -04:00
added error outline when password conditions not met.
This commit is contained in:
parent
fb15863b2f
commit
445c8512fb
|
@ -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);
|
||||
}}
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
Loading…
Reference in New Issue
Block a user