From 9ab9b8576c77dcd77e414d9c82454176fd4cd976 Mon Sep 17 00:00:00 2001
From: Alex Neo <alexneo2003@gmail.com>
Date: Tue, 28 Apr 2026 15:39:33 +0300
Subject: [PATCH] fix(ui): Enhance password requirements: update minimum length
 to 12 characters and add checks for uppercase letters, digits, and special
 characters

---
 web/public/locales/en/views/settings.json     |  5 ++-
 .../components/overlay/SetPasswordDialog.tsx  | 44 ++++++++++++-------
 web/src/utils/passwordUtil.ts                 |  5 ++-
 3 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/web/public/locales/en/views/settings.json b/web/public/locales/en/views/settings.json
index 7dfd0ea98a..bed80d1b0b 100644
--- a/web/public/locales/en/views/settings.json
+++ b/web/public/locales/en/views/settings.json
@@ -899,7 +899,10 @@
           },
           "requirements": {
             "title": "Password requirements:",
-            "length": "At least 12 characters"
+            "length": "At least 12 characters",
+            "uppercase": "At least one uppercase letter",
+            "digit": "At least one digit",
+            "special": "At least one special character (!@#$%^&*(),.?\":{}|<>)"
           },
           "match": "Passwords match",
           "notMatch": "Passwords don't match"
diff --git a/web/src/components/overlay/SetPasswordDialog.tsx b/web/src/components/overlay/SetPasswordDialog.tsx
index 96c29ffdbc..b4ff959425 100644
--- a/web/src/components/overlay/SetPasswordDialog.tsx
+++ b/web/src/components/overlay/SetPasswordDialog.tsx
@@ -354,24 +354,36 @@ export default function SetPasswordDialog({
                           {t("users.dialog.form.password.requirements.title")}
                         </p>
                         <ul className="space-y-1">
-                          <li className="flex items-center gap-2 text-xs">
-                            {requirements.length ? (
-                              <LuCheck className="size-3.5 text-green-500" />
-                            ) : (
-                              <LuX className="size-3.5 text-red-500" />
-                            )}
-                            <span
-                              className={
-                                requirements.length
-                                  ? "text-green-600"
-                                  : "text-red-600"
-                              }
+                          {(
+                            [
+                              "length",
+                              "uppercase",
+                              "digit",
+                              "special",
+                            ] as const
+                          ).map((req) => (
+                            <li
+                              key={req}
+                              className="flex items-center gap-2 text-xs"
                             >
-                              {t(
-                                "users.dialog.form.password.requirements.length",
+                              {requirements[req] ? (
+                                <LuCheck className="size-3.5 text-green-500" />
+                              ) : (
+                                <LuX className="size-3.5 text-red-500" />
                               )}
-                            </span>
-                          </li>
+                              <span
+                                className={
+                                  requirements[req]
+                                    ? "text-green-600"
+                                    : "text-red-600"
+                                }
+                              >
+                                {t(
+                                  `users.dialog.form.password.requirements.${req}`,
+                                )}
+                              </span>
+                            </li>
+                          ))}
                         </ul>
                       </div>
                     </div>
diff --git a/web/src/utils/passwordUtil.ts b/web/src/utils/passwordUtil.ts
index 4ab97fdd7d..ecf899a068 100644
--- a/web/src/utils/passwordUtil.ts
+++ b/web/src/utils/passwordUtil.ts
@@ -4,7 +4,7 @@ export const calculatePasswordStrength = (password: string): number => {
   if (!password) return 0;
 
   let strength = 0;
-  if (password.length >= 8) strength += 1;
+  if (password.length >= 12) strength += 1;
   if (/\d/.test(password)) strength += 1;
   if (/[!@#$%^&*(),.?":{}|<>]/.test(password)) strength += 1;
   if (/[A-Z]/.test(password)) strength += 1;
@@ -14,6 +14,9 @@ export const calculatePasswordStrength = (password: string): number => {
 
 export const getPasswordRequirements = (password: string) => ({
   length: password?.length >= 12,
+  uppercase: /[A-Z]/.test(password),
+  digit: /\d/.test(password),
+  special: /[!@#$%^&*(),.?":{}|<>]/.test(password),
 });
 
 export const getPasswordStrengthLabel = (