feat: password strength bar

package-lock.json

@@ -9,11 +9,13 @@
       "version": "0.1.0",
       "dependencies": {
         "@types/qrcode": "^1.5.6",
+        "@types/zxcvbn": "^4.4.5",
         "qrcode": "^1.5.4",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "react-router-dom": "^6.28.0",
-        "zustand": "^5.0.2"
+        "zustand": "^5.0.2",
+        "zxcvbn": "^4.4.2"
       },
       "devDependencies": {
         "@testing-library/jest-dom": "^6.6.3",
@@ -1886,6 +1888,12 @@
         "@types/react": "^19.2.0"
       }
     },
+    "node_modules/@types/zxcvbn": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/@types/zxcvbn/-/zxcvbn-4.4.5.tgz",
+      "integrity": "sha512-FZJgC5Bxuqg7Rhsm/bx6gAruHHhDQ55r+s0JhDh8CQ16fD7NsJJ+p8YMMQDhSQoIrSmjpqqYWA96oQVMNkjRyA==",
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.66.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.66.0.tgz",
@@ -8032,6 +8040,12 @@
           "optional": true
         }
       }
+    },
+    "node_modules/zxcvbn": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/zxcvbn/-/zxcvbn-4.4.2.tgz",
+      "integrity": "sha512-Bq0B+ixT/DMyG8kgX2xWcI5jUvCwqrMxSFam7m0lAf78nf04hv6lNCsyLYdyYTrCVMqNDY/206K7eExYCeSyUQ==",
+      "license": "MIT"
     }
   }
 }

package.json

@@ -15,11 +15,13 @@
   },
   "dependencies": {
     "@types/qrcode": "^1.5.6",
+    "@types/zxcvbn": "^4.4.5",
     "qrcode": "^1.5.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^6.28.0",
-    "zustand": "^5.0.2"
+    "zustand": "^5.0.2",
+    "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",

src/lib/password.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'vitest';
+import { getPasswordStrength, isPasswordStrong } from './password';
+
+describe('isPasswordStrong', () => {
+  it('rejects passwords shorter than eight characters', () => {
+    expect(isPasswordStrong('A1!abcd')).toBe(false);
+  });
+
+  it('rejects obvious passwords with a zxcvbn score of two or below', () => {
+    expect(isPasswordStrong('password1')).toBe(false);
+  });
+
+  it('accepts passwords with a zxcvbn score above two', () => {
+    expect(isPasswordStrong('correct horse battery staple')).toBe(true);
+  });
+
+  it('returns a display label and the zxcvbn score', () => {
+    expect(getPasswordStrength('password1')).toMatchObject({ score: 0, isStrong: false });
+  });
+});

src/lib/password.ts

@@ -0,0 +1,31 @@
+import zxcvbn from 'zxcvbn';
+
+const MIN_PASSWORD_LENGTH = 8;
+const MIN_PASSWORD_SCORE = 3;
+
+export interface PasswordStrength {
+  score: number;
+  isStrong: boolean;
+  label: string;
+}
+
+const strengthLabels = ['Слишком слабый', 'Слабый', 'Ненадёжный', 'Надёжный', 'Очень надёжный'];
+
+export function getPasswordStrength(password: string): PasswordStrength | null {
+  if (!password) return null;
+
+  const score = zxcvbn(password).score;
+  return {
+    score,
+    isStrong: password.length >= MIN_PASSWORD_LENGTH && score >= MIN_PASSWORD_SCORE,
+    label:
+      password.length < MIN_PASSWORD_LENGTH ? 'Минимум 8 символов' : (strengthLabels[score] ?? 'Слишком слабый'),
+  };
+}
+
+export function isPasswordStrong(password: string): boolean {
+  return getPasswordStrength(password)?.isStrong ?? false;
+}
+
+export const passwordStrengthMessage =
+  'Пароль должен быть не короче 8 символов и не состоять из очевидных сочетаний.';

src/pages/LoginPage.test.tsx

@@ -99,19 +99,43 @@ describe('LoginPage', () => {
     renderLogin();
     await user.click(screen.getByRole('tab', { name: /Регистрация/i }));
     await user.type(screen.getByLabelText('Имя пользователя'), 'alice');
-    await user.type(screen.getByLabelText('Пароль'), 'secret');
+    await user.type(screen.getByLabelText('Пароль'), 'correct horse battery staple');
     await user.click(screen.getByRole('button', { name: /создать аккаунт/i }));
 
     await waitFor(() =>
       expect(api.signup).toHaveBeenCalledWith({
         provider: 'credentials',
         username: 'alice',
-        password: 'secret',
+        password: 'correct horse battery staple',
         referal_code: 'friend-code',
       }),
     );
   });
 
+  it('does not submit a weak password during signup', async () => {
+    const user = userEvent.setup();
+    renderLogin();
+    await user.click(screen.getByRole('tab', { name: /Регистрация/i }));
+    await user.type(screen.getByLabelText('Имя пользователя'), 'alice');
+    await user.type(screen.getByLabelText('Пароль'), 'password1');
+    await user.click(screen.getByRole('button', { name: /создать аккаунт/i }));
+
+    expect(await screen.findByText(/не короче 8 символов/i)).toBeInTheDocument();
+    expect(api.signup).not.toHaveBeenCalled();
+  });
+
+  it('shows a dynamic password strength meter during signup', async () => {
+    const user = userEvent.setup();
+    renderLogin();
+    await user.click(screen.getByRole('tab', { name: /Регистрация/i }));
+    await user.type(screen.getByLabelText('Пароль'), 'password1');
+
+    expect(screen.getByRole('progressbar', { name: /надёжность пароля/i })).toHaveAttribute(
+      'aria-valuetext',
+      'Слишком слабый',
+    );
+  });
+
   it('shows backend error on login failure', async () => {
     const user = userEvent.setup();
     vi.mocked(api.login).mockRejectedValue(new ApiError('неверные данные', 401));

src/pages/LoginPage.tsx

@@ -7,6 +7,7 @@ import { Emblem } from '../components/Emblem';
 import { Logo } from '../components/Logo';
 import { Reveal } from '../components/Reveal';
 import { getReferralCode } from '../lib/referral';
+import { getPasswordStrength, isPasswordStrong, passwordStrengthMessage } from '../lib/password';
 
 type Mode = 'signin' | 'signup';
 
@@ -53,6 +54,7 @@ export function LoginPage() {
   const queryReturnTo = new URLSearchParams(location.search).get('returnTo');
   const returnTo =
     returnPath(queryReturnTo) ?? returnPath((location.state as LocationState | null)?.returnTo) ?? '/account';
+  const passwordStrength = mode === 'signup' ? getPasswordStrength(password) : null;
 
   useEffect(() => {
     if (isAuthenticated) navigate(returnTo, { replace: true });
@@ -75,8 +77,8 @@ export function LoginPage() {
       setStatusMsg('Имя пользователя и пароль обязательны.', 'error');
       return;
     }
-    if (mode === 'signup' && password.length < 4) {
-      setStatusMsg('Пароль слишком короткий (минимум 4 символа).', 'error');
+    if (mode === 'signup' && !isPasswordStrong(password)) {
+      setStatusMsg(passwordStrengthMessage, 'error');
       return;
     }
     setSubmitting(true);
@@ -204,6 +206,28 @@ export function LoginPage() {
               </button>
             </div>
 
+            {mode === 'signup' && passwordStrength && (
+              <div className="password-strength" aria-live="polite">
+                <div
+                  className={`password-strength-meter ${passwordStrength.isStrong ? 'is-strong' : ''}`.trim()}
+                  role="progressbar"
+                  aria-label="Надёжность пароля"
+                  aria-valuemin={0}
+                  aria-valuemax={4}
+                  aria-valuenow={passwordStrength.score}
+                  aria-valuetext={passwordStrength.label}
+                >
+                  {[0, 1, 2, 3].map((segment) => (
+                    <span
+                      key={segment}
+                      className={segment < passwordStrength.score ? 'is-filled' : undefined}
+                    />
+                  ))}
+                </div>
+                <span className="password-strength-label">{passwordStrength.label}</span>
+              </div>
+            )}
+
             {mode === 'signin' && (
               <div className="auth-row">
                 <label className="check">

src/styles/pages.css

@@ -227,6 +227,37 @@
   margin-top: 4px;
   font-size: 13px;
 }
+.password-strength {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: -10px;
+  color: var(--fg-muted);
+  font-size: 10px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+.password-strength-meter {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  flex: 1;
+  gap: 3px;
+  height: 3px;
+}
+.password-strength-meter span {
+  background: var(--hairline-strong);
+  transition: background 0.25s;
+}
+.password-strength-meter.is-strong span.is-filled {
+  background: var(--accent);
+}
+.password-strength-meter:not(.is-strong) span.is-filled {
+  background: var(--muted);
+}
+.password-strength-label {
+  min-width: 138px;
+  text-align: right;
+}
 .auth-divider {
   display: flex;
   align-items: center;

tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/App.tsx","./src/main.tsx","./src/types.ts","./src/api/client.test.ts","./src/api/client.ts","./src/components/AddonList.tsx","./src/components/Breakdown.tsx","./src/components/ClientLinksModal.tsx","./src/components/Cursor.tsx","./src/components/DeviceCard.tsx","./src/components/DeviceSlider.tsx","./src/components/DurationSelect.tsx","./src/components/Emblem.tsx","./src/components/Logo.tsx","./src/components/Modal.tsx","./src/components/Reveal.tsx","./src/components/Shell.tsx","./src/components/Skeleton.tsx","./src/components/StatStrip.tsx","./src/components/SubscriptionQrModal.tsx","./src/components/Toast.tsx","./src/components/TopBar.tsx","./src/hooks/useAuth.ts","./src/hooks/useDevices.ts","./src/hooks/useLocalStorage.ts","./src/hooks/usePlans.ts","./src/lib/format.test.ts","./src/lib/format.ts","./src/lib/planConfig.test.ts","./src/lib/planConfig.ts","./src/lib/redirect.ts","./src/lib/referral.ts","./src/pages/AccountPage.test.tsx","./src/pages/AccountPage.tsx","./src/pages/Landing.test.tsx","./src/pages/Landing.tsx","./src/pages/LoginPage.test.tsx","./src/pages/LoginPage.tsx","./src/pages/PlanPage.test.tsx","./src/pages/PlanPage.tsx","./src/store/useStore.ts","./src/store/useToast.ts","./src/test/setup.ts"],"version":"5.9.3"}
+{"root":["./src/App.tsx","./src/main.tsx","./src/types.ts","./src/api/client.test.ts","./src/api/client.ts","./src/components/AddonList.tsx","./src/components/Breakdown.tsx","./src/components/ClientLinksModal.tsx","./src/components/Cursor.tsx","./src/components/DeviceCard.tsx","./src/components/DeviceSlider.tsx","./src/components/DurationSelect.tsx","./src/components/Emblem.tsx","./src/components/Logo.tsx","./src/components/Modal.tsx","./src/components/Reveal.tsx","./src/components/Shell.tsx","./src/components/Skeleton.tsx","./src/components/StatStrip.tsx","./src/components/SubscriptionQrModal.tsx","./src/components/Toast.tsx","./src/components/TopBar.tsx","./src/hooks/useAuth.ts","./src/hooks/useDevices.ts","./src/hooks/useLocalStorage.ts","./src/hooks/usePlans.ts","./src/lib/format.test.ts","./src/lib/format.ts","./src/lib/password.test.ts","./src/lib/password.ts","./src/lib/planConfig.test.ts","./src/lib/planConfig.ts","./src/lib/redirect.ts","./src/lib/referral.ts","./src/pages/AccountPage.test.tsx","./src/pages/AccountPage.tsx","./src/pages/Landing.test.tsx","./src/pages/Landing.tsx","./src/pages/LoginPage.test.tsx","./src/pages/LoginPage.tsx","./src/pages/PlanPage.test.tsx","./src/pages/PlanPage.tsx","./src/store/useStore.ts","./src/store/useToast.ts","./src/test/setup.ts"],"version":"5.9.3"}