[WEB-4513] refactor: consolidate password strength meter into shared ui package (#7462)

* refactor: consolidate password strength indicator into shared UI package

* chore: remove old password strength meter implementations

* chore: update package dependencies for password strength refactor

* chore: code refactor

* fix: lock file

---------

Co-authored-by: sriramveeraghanta <[email protected]>

Author: anmolsinghbhatia

apps/admin/core/components/common/password-strength-meter.tsx

@@ -7,11 +7,10 @@ import { Eye, EyeOff } from "lucide-react";
 // plane internal packages
 import { API_BASE_URL, E_PASSWORD_STRENGTH } from "@plane/constants";
 import { AuthService } from "@plane/services";
-import { Button, Checkbox, Input, Spinner } from "@plane/ui";
+import { Button, Checkbox, Input, PasswordStrengthIndicator, Spinner } from "@plane/ui";
 import { getPasswordStrength } from "@plane/utils";
 // components
 import { Banner } from "@/components/common/banner";
-import { PasswordStrengthMeter } from "@/components/common/password-strength-meter";
 
 // service initialization
 const authService = new AuthService();
@@ -274,7 +273,7 @@ export const InstanceSetupForm: 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} isFocused={isPasswordInputFocused} />
+            <PasswordStrengthIndicator password={formData.password} isFocused={isPasswordInputFocused} />
           </div>
 
           <div className="w-full space-y-1">

apps/admin/core/components/instance/setup-form.tsx

@@ -40,8 +40,7 @@
     "react-dom": "^18.3.1",
     "react-hook-form": "7.51.5",
     "swr": "^2.2.4",
-    "uuid": "^9.0.1",
-    "zxcvbn": "^4.4.2"
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@plane/eslint-config": "*",
@@ -51,7 +50,6 @@
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.2.18",
     "@types/uuid": "^9.0.8",
-    "@types/zxcvbn": "^4.4.4",
     "typescript": "5.8.3"
   }
 }

apps/admin/package.json

@@ -4,13 +4,10 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { Eye, EyeOff, XCircle } from "lucide-react";
 // plane imports
-import { API_BASE_URL } from "@plane/constants";
+import { API_BASE_URL, E_PASSWORD_STRENGTH } from "@plane/constants";
 import { AuthService } from "@plane/services";
-import { Button, Input, Spinner } from "@plane/ui";
-// components
-import { PasswordStrengthMeter } from "@/components/account";
-// helpers
-import { E_PASSWORD_STRENGTH, getPasswordStrength } from "@/helpers/password.helper";
+import { Button, Input, Spinner, PasswordStrengthIndicator } from "@plane/ui";
+import { getPasswordStrength } from "@plane/utils";
 // types
 import { EAuthModes, EAuthSteps } from "@/types/auth";
 
@@ -72,7 +69,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
   const passwordSupport = passwordFormData.password.length > 0 &&
     mode === EAuthModes.SIGN_UP &&
     getPasswordStrength(passwordFormData.password) != E_PASSWORD_STRENGTH.STRENGTH_VALID && (
-      <PasswordStrengthMeter password={passwordFormData.password} isFocused={isPasswordInputFocused} />
+      <PasswordStrengthIndicator password={passwordFormData.password} isFocused={isPasswordInputFocused} />
     );
 
   const isButtonDisabled = useMemo(

apps/space/core/components/account/auth-forms/password.tsx

@@ -1,5 +1,4 @@
 export * from "./auth-forms";
 export * from "./oauth";
 export * from "./terms-and-conditions";
-export * from "./helpers";
 export * from "./user-logged-in";

apps/space/core/components/account/helpers/index.ts

@@ -49,8 +49,7 @@
     "react-popper": "^2.3.0",
     "swr": "^2.2.2",
     "tailwind-merge": "^2.0.0",
-    "uuid": "^9.0.0",
-    "zxcvbn": "^4.4.2"
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@plane/eslint-config": "*",
@@ -63,7 +62,6 @@
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.2.18",
     "@types/uuid": "^9.0.1",
-    "@types/zxcvbn": "^4.4.4",
     "@typescript-eslint/eslint-plugin": "^8.36.0",
     "typescript": "5.8.3"
   }

apps/space/core/components/account/helpers/password-strength-meter.tsx

@@ -7,10 +7,9 @@ import { Eye, EyeOff } from "lucide-react";
 // plane imports
 import { E_PASSWORD_STRENGTH } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
+import { Button, Input, PasswordStrengthIndicator, TOAST_TYPE, setToast } from "@plane/ui";
 import { getPasswordStrength } from "@plane/utils";
 // components
-import { PasswordStrengthMeter } from "@/components/account";
 import { PageHead } from "@/components/core";
 import { ProfileSettingContentHeader } from "@/components/profile";
 // helpers
@@ -114,7 +113,7 @@ const SecurityPage = observer(() => {
 
   const passwordSupport = password.length > 0 &&
     getPasswordStrength(password) != E_PASSWORD_STRENGTH.STRENGTH_VALID && (
-      <PasswordStrengthMeter password={password} isFocused={isPasswordInputFocused} />
+      <PasswordStrengthIndicator password={password} isFocused={isPasswordInputFocused} />
     );
 
   const renderPasswordMatchError = !isRetryPasswordInputFocused || confirmPassword.length >= password.length;