binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-1324] chore: change password page improvement (#4462)

Browse source 
* chore: change password page improvement

* chore: confirm password input improvement
This commit is contained in:
Anmol Singh Bhatia 2024-05-15 19:11:31 +05:30 • committed by GitHub
parent 061d52727e
commit 5ccb4f7d19
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 37 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

9
space/components/accounts/auth-forms/password.tsx
View file

@ -44,6 +44,7 @@ export const PasswordForm: React.FC<Props> = (props) => {
const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false);
const [isRetryPasswordInputFocused, setIsRetryPasswordInputFocused] = useState(false);
// hooks
const { data: instance, config: instanceConfig } = useInstance();
// router
@ -170,6 +171,8 @@ export const PasswordForm: React.FC<Props> = (props) => {
onChange={(e) => handleFormChange("confirm_password", e.target.value)}
placeholder="Confirm password"
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
onFocus={() => setIsRetryPasswordInputFocused(true)}
onBlur={() => setIsRetryPasswordInputFocused(false)}
/>
{showPassword ? (
<EyeOff
@ -183,9 +186,9 @@ export const PasswordForm: React.FC<Props> = (props) => {
/>
)}
</div>
{!!passwordFormData.confirm_password && passwordFormData.password !== passwordFormData.confirm_password && (
<span className="text-sm text-red-500">Passwords don{"'"}t match</span>
)}
{!!passwordFormData.confirm_password &&
passwordFormData.password !== passwordFormData.confirm_password &&
!isRetryPasswordInputFocused && <span className="text-sm text-red-500">Passwords don{"'"}t match</span>}
</div>
)}
<div className="space-y-2.5">