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
admin/components/instance/setup-form.tsx
View file

@ -69,6 +69,7 @@ export const InstanceSetupForm: FC = (props) => {
const [formData, setFormData] = useState<TFormData>(defaultFromData);
const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false);
const [isRetryPasswordInputFocused, setIsRetryPasswordInputFocused] = useState(false);
const handleFormChange = (key: keyof TFormData, value: string | boolean) =>
setFormData((prev) => ({ ...prev, [key]: value }));
@ -276,6 +277,8 @@ export const InstanceSetupForm: FC = (props) => {
onChange={(e) => handleFormChange("confirm_password", e.target.value)}
placeholder="Confirm password"
className="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 ? (
<button
@ -297,9 +300,9 @@ export const InstanceSetupForm: FC = (props) => {
</button>
)}
</div>
{!!formData.confirm_password && formData.password !== formData.confirm_password && (
<span className="text-sm text-red-500">Passwords don{"'"}t match</span>
)}
{!!formData.confirm_password &&
formData.password !== formData.confirm_password &&
!isRetryPasswordInputFocused && <span className="text-sm text-red-500">Passwords don{"'"}t match</span>}
</div>
<div className="relative flex items-center pt-2 gap-2">