From 8d64c53154e93928cfa5460ca3cfe48f477ac774 Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Wed, 1 May 2024 17:34:56 +0530
Subject: [PATCH] chore: update confirm password.

---
 admin/app/setup/components/sign-up-form.tsx | 43 ++++++++++++++-
 web/components/onboarding/profile-setup.tsx |  2 +-
 web/pages/accounts/reset-password.tsx       | 54 +++++++++----------
 web/pages/accounts/set-password.tsx         | 58 ++++++++++-----------
 4 files changed, 96 insertions(+), 61 deletions(-)

diff --git a/admin/app/setup/components/sign-up-form.tsx b/admin/app/setup/components/sign-up-form.tsx
index 2b5195df6..a8bb8982e 100644
--- a/admin/app/setup/components/sign-up-form.tsx
+++ b/admin/app/setup/components/sign-up-form.tsx
@@ -39,6 +39,7 @@ type TFormData = {
   email: string;
   company_name: string;
   password: string;
+  confirm_password?: string;
   is_telemetry_enabled: boolean;
 };
 
@@ -66,6 +67,7 @@ export const InstanceSignUpForm: FC = (props) => {
   const [showPassword, setShowPassword] = useState(false);
   const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
   const [formData, setFormData] = useState<TFormData>(defaultFromData);
+  const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
 
   const handleFormChange = (key: keyof TFormData, value: string | boolean) =>
     setFormData((prev) => ({ ...prev, [key]: value }));
@@ -107,7 +109,11 @@ export const InstanceSignUpForm: FC = (props) => {
 
   const isButtonDisabled = useMemo(
     () =>
-      formData.first_name && formData.email && formData.password && getPasswordStrength(formData.password) >= 3
+      formData.first_name &&
+      formData.email &&
+      formData.password &&
+      getPasswordStrength(formData.password) >= 3 &&
+      formData.password === formData.confirm_password
         ? false
         : true,
     [formData]
@@ -144,6 +150,7 @@ export const InstanceSignUpForm: FC = (props) => {
                 placeholder="Wilber"
                 value={formData.first_name}
                 onChange={(e) => handleFormChange("first_name", e.target.value)}
+                autoFocus
               />
             </div>
             <div className="w-full space-y-1">
@@ -214,6 +221,8 @@ export const InstanceSignUpForm: FC = (props) => {
                 value={formData.password}
                 onChange={(e) => handleFormChange("password", e.target.value)}
                 hasError={errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD ? true : false}
+                onFocus={() => setIsPasswordInputFocused(true)}
+                onBlur={() => setIsPasswordInputFocused(false)}
               />
               {showPassword ? (
                 <button
@@ -236,7 +245,37 @@ export const InstanceSignUpForm: FC = (props) => {
             {errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD && errorData.message && (
               <p className="px-1 text-xs text-red-500">{errorData.message}</p>
             )}
-            <PasswordStrengthMeter password={formData.password} />
+            {isPasswordInputFocused && <PasswordStrengthMeter password={formData.password} />}
+          </div>
+
+          <div className="w-full space-y-1">
+            <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password">
+              Confirm password
+            </label>
+            <div className="relative flex items-center rounded-md bg-onboarding-background-200">
+              <Input
+                type={showPassword ? "text" : "password"}
+                name="confirm_password"
+                value={formData.confirm_password}
+                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"
+              />
+              {showPassword ? (
+                <EyeOff
+                  className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                  onClick={() => setShowPassword(false)}
+                />
+              ) : (
+                <Eye
+                  className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                  onClick={() => setShowPassword(true)}
+                />
+              )}
+            </div>
+            {!!formData.confirm_password && formData.password !== formData.confirm_password && (
+              <span className="text-sm text-red-500">Passwords don{"'"}t match</span>
+            )}
           </div>
 
           <div className="relative flex items-center pt-2 gap-2">
diff --git a/web/components/onboarding/profile-setup.tsx b/web/components/onboarding/profile-setup.tsx
index c8f25e03d..c96651986 100644
--- a/web/components/onboarding/profile-setup.tsx
+++ b/web/components/onboarding/profile-setup.tsx
@@ -437,7 +437,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
                     {errors.password && <span className="text-sm text-red-500">{errors.password.message}</span>}
                   </div>
                 )}
-                {!isPasswordAlreadySetup && password && getPasswordStrength(password) >= 3 && (
+                {!isPasswordAlreadySetup && (
                   <div className="space-y-1">
                     <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password">
                       Confirm password
diff --git a/web/pages/accounts/reset-password.tsx b/web/pages/accounts/reset-password.tsx
index b7bcaedc9..a5740a731 100644
--- a/web/pages/accounts/reset-password.tsx
+++ b/web/pages/accounts/reset-password.tsx
@@ -171,37 +171,35 @@ const ResetPasswordPage: NextPageWithLayout = () => {
                   </div>
                   {isPasswordInputFocused && <PasswordStrengthMeter password={resetFormData.password} />}
                 </div>
-                {getPasswordStrength(resetFormData.password) >= 3 && (
-                  <div className="space-y-1">
-                    <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password">
-                      Confirm password
-                    </label>
-                    <div className="relative flex items-center rounded-md bg-onboarding-background-200">
-                      <Input
-                        type={showPassword ? "text" : "password"}
-                        name="confirm_password"
-                        value={resetFormData.confirm_password}
-                        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"
+                <div className="space-y-1">
+                  <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password">
+                    Confirm password
+                  </label>
+                  <div className="relative flex items-center rounded-md bg-onboarding-background-200">
+                    <Input
+                      type={showPassword ? "text" : "password"}
+                      name="confirm_password"
+                      value={resetFormData.confirm_password}
+                      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"
+                    />
+                    {showPassword ? (
+                      <EyeOff
+                        className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                        onClick={() => setShowPassword(false)}
+                      />
+                    ) : (
+                      <Eye
+                        className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                        onClick={() => setShowPassword(true)}
                       />
-                      {showPassword ? (
-                        <EyeOff
-                          className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
-                          onClick={() => setShowPassword(false)}
-                        />
-                      ) : (
-                        <Eye
-                          className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
-                          onClick={() => setShowPassword(true)}
-                        />
-                      )}
-                    </div>
-                    {!!resetFormData.confirm_password && resetFormData.password !== resetFormData.confirm_password && (
-                      <span className="text-sm text-red-500">Passwords don{"'"}t match</span>
                     )}
                   </div>
-                )}
+                  {!!resetFormData.confirm_password && resetFormData.password !== resetFormData.confirm_password && (
+                    <span className="text-sm text-red-500">Passwords don{"'"}t match</span>
+                  )}
+                </div>
                 <Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
                   Set password
                 </Button>
diff --git a/web/pages/accounts/set-password.tsx b/web/pages/accounts/set-password.tsx
index 0e42b7110..8fc7136e8 100644
--- a/web/pages/accounts/set-password.tsx
+++ b/web/pages/accounts/set-password.tsx
@@ -183,38 +183,36 @@ const SetPasswordPage: NextPageWithLayout = observer(() => {
                   </div>
                   {isPasswordInputFocused && <PasswordStrengthMeter password={passwordFormData.password} />}
                 </div>
-                {getPasswordStrength(passwordFormData.password) >= 3 && (
-                  <div className="space-y-1">
-                    <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password">
-                      Confirm password
-                    </label>
-                    <div className="relative flex items-center rounded-md bg-onboarding-background-200">
-                      <Input
-                        type={showPassword ? "text" : "password"}
-                        name="confirm_password"
-                        value={passwordFormData.confirm_password}
-                        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"
+                <div className="space-y-1">
+                  <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password">
+                    Confirm password
+                  </label>
+                  <div className="relative flex items-center rounded-md bg-onboarding-background-200">
+                    <Input
+                      type={showPassword ? "text" : "password"}
+                      name="confirm_password"
+                      value={passwordFormData.confirm_password}
+                      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"
+                    />
+                    {showPassword ? (
+                      <EyeOff
+                        className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                        onClick={() => setShowPassword(false)}
                       />
-                      {showPassword ? (
-                        <EyeOff
-                          className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
-                          onClick={() => setShowPassword(false)}
-                        />
-                      ) : (
-                        <Eye
-                          className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
-                          onClick={() => setShowPassword(true)}
-                        />
-                      )}
-                    </div>
-                    {!!passwordFormData.confirm_password &&
-                      passwordFormData.password !== passwordFormData.confirm_password && (
-                        <span className="text-sm text-red-500">Passwords don{"'"}t match</span>
-                      )}
+                    ) : (
+                      <Eye
+                        className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                        onClick={() => setShowPassword(true)}
+                      />
+                    )}
                   </div>
-                )}
+                  {!!passwordFormData.confirm_password &&
+                    passwordFormData.password !== passwordFormData.confirm_password && (
+                      <span className="text-sm text-red-500">Passwords don{"'"}t match</span>
+                    )}
+                </div>
                 <Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
                   Continue
                 </Button>