rushilwiz/compass
1
0
Fork 0
mirror of https://github.com/cssgunc/compass.git synced 2025-04-10 06:10:17 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

added error outline when password conditions not met.

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
compass/app/auth/newPassword/page.tsx
View File

@ -44,7 +44,7 @@ export default function Page() {
type="password" type="password"
title="Enter New Password" title="Enter New Password"
value={newPassword} value={newPassword}
valid={isButtonDisabled} valid={!isButtonDisabled || isStrongPassword(newPassword)}
onChange={(e) => { onChange={(e) => {
setNewPassword(e.target.value); setNewPassword(e.target.value);
}} }}
@ -61,6 +61,7 @@ export default function Page() {
type="password" type="password"
title="Confirm Password" title="Confirm Password"
value={confirmPassword} value={confirmPassword}
valid={!isButtonDisabled || (newPassword === confirmPassword && confirmPassword !== '')}
onChange={(e) => { onChange={(e) => {
setConfirmPassword(e.target.value); setConfirmPassword(e.target.value);
}} }}

2
compass/components/Input.tsx
View File

@ -14,7 +14,7 @@ const Input: FunctionComponent<InputProps> = ({ icon, type, title, placeholder,
<div> <div>
<label <label
htmlFor={title} 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> <span className="text-xs font-semibold text-gray-700"> {title} </span>