frontend: Add indicator for password strength

fix #104

Author: ffreddow

frontend/package-lock.json

@@ -32,7 +32,8 @@
     "react-bootstrap": "^2.10.10",
     "react-feather": "^2.0.10",
     "react-i18next": "^15.4.1",
-    "wg-webclient": "file:../wg-webclient/pkg"
+    "wg-webclient": "file:../wg-webclient/pkg",
+    "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
     "@playwright/test": "^1.56.1",

frontend/package.json

@@ -2,32 +2,49 @@ import { useState } from "preact/hooks";
 import { Button, Form, InputGroup } from "react-bootstrap";
 import { Eye, EyeOff } from "react-feather";
 import { useTranslation } from "react-i18next";
+import { PasswordStrengthIndicator } from "./PasswordStrengthIndicator";
 
 interface PasswordComponentProps {
     onChange: (e: string) => void,
     isInvalid?: boolean,
     invalidMessage?: string,
+    showStrength?: boolean,
+    value: string,
 }
 
 export function PasswordComponent(props: PasswordComponentProps) {
     const [showPassword, setShowPassword] = useState(false);
     const {t} = useTranslation("", {useSuspense: false, keyPrefix: "login"})
-    return <InputGroup hasValidation>
-        <Form.Control
-            placeholder={t("password")}
-            type={showPassword ? "text" : "password"}
-            onChange={(e) => props.onChange((e.target as HTMLInputElement).value)}
-            isInvalid={props.isInvalid} />
-        <Button
-            variant="outline-primary"
-            onClick={(e: Event) => {
-                e.preventDefault();
-                setShowPassword(!showPassword);
-            }}>
-            {!showPassword ? <Eye /> : <EyeOff />}
-        </Button>
-        <Form.Control.Feedback type="invalid">
-            {props.invalidMessage}
-        </Form.Control.Feedback>
-    </InputGroup>
+
+    const handleChange = (e: Event) => {
+        const value = (e.target as HTMLInputElement).value;
+        props.onChange(value);
+    };
+
+    return <>
+        <InputGroup hasValidation>
+            <Form.Control
+                placeholder={t("password")}
+                type={showPassword ? "text" : "password"}
+                onChange={handleChange}
+                value={props.value}
+                isInvalid={props.isInvalid} />
+            <Button
+                variant="outline-primary"
+                onClick={(e: Event) => {
+                    e.preventDefault();
+                    setShowPassword(!showPassword);
+                }}>
+                {!showPassword ? <Eye /> : <EyeOff />}
+            </Button>
+            <Form.Control.Feedback type="invalid">
+                {props.invalidMessage}
+            </Form.Control.Feedback>
+        </InputGroup>
+        {props.showStrength && (
+            <PasswordStrengthIndicator
+                password={props.value}
+            />
+        )}
+    </>
 }

frontend/src/components/PasswordComponent.tsx

@@ -0,0 +1,64 @@
+import { useTranslation } from "react-i18next";
+import { evaluatePasswordStrength, PasswordStrength } from "../utils/passwordStrength";
+
+interface PasswordStrengthIndicatorProps {
+    password: string;
+    show?: boolean;
+}
+
+export function PasswordStrengthIndicator(props: PasswordStrengthIndicatorProps) {
+    const { t } = useTranslation("", { useSuspense: false, keyPrefix: "password_strength" });
+
+    // Don't show anything if explicitly hidden or password is empty
+    if (props.show === false || !props.password || props.password.length === 0) {
+        return null;
+    }
+
+    const strengthInfo = evaluatePasswordStrength(props.password);
+
+    const getStrengthLabel = (strength: PasswordStrength): string => {
+        switch (strength) {
+            case PasswordStrength.VeryWeak:
+                return t("very_weak");
+            case PasswordStrength.Weak:
+                return t("weak");
+            case PasswordStrength.Fair:
+                return t("fair");
+            case PasswordStrength.Strong:
+                return t("strong");
+            case PasswordStrength.VeryStrong:
+                return t("very_strong");
+            default:
+                return "";
+        }
+    };
+
+    return (
+        <div className="mt-2">
+            <div className="d-flex justify-content-between align-items-center mb-1">
+                <small className="text-muted">
+                    {t("strength")}: <strong style={{ color: strengthInfo.color }}>
+                        {getStrengthLabel(strengthInfo.strength)}
+                    </strong>
+                </small>
+            </div>
+            <div
+                style={{
+                    height: '6px',
+                    backgroundColor: '#e9ecef',
+                    borderRadius: '3px',
+                    overflow: 'hidden'
+                }}
+            >
+                <div
+                    style={{
+                        width: `${strengthInfo.percentage}%`,
+                        height: '100%',
+                        backgroundColor: strengthInfo.color,
+                        transition: 'all 0.3s ease'
+                    }}
+                />
+            </div>
+        </div>
+    );
+}

frontend/src/components/PasswordStrengthIndicator.tsx

@@ -1,7 +1,7 @@
 import { Component } from "preact";
 import { Button, Form } from "react-bootstrap"
 import { showAlert } from "./Alert";
-import { PASSWORD_PATTERN, fetchClient, generate_hash, generate_random_bytes, get_salt } from "../utils";
+import { fetchClient, generate_hash, generate_random_bytes, get_salt } from "../utils";
 import sodium from "libsodium-wrappers";
 import { Trans, useTranslation } from "react-i18next";
 import i18n from "../i18n";
@@ -24,7 +24,6 @@ interface RegisterSchema {
 interface RegisterState {
     accepted: boolean,
     password: string,
-    passwordValid: boolean,
     confirmPassword: string,
     confirmPasswordValid: boolean,
     name: string,
@@ -47,7 +46,6 @@ export class Register extends Component<{}, RegisterState> {
         this.state = {
             accepted: false,
             password: "",
-            passwordValid: true,
             confirmPassword: "",
             confirmPasswordValid: true,
             name: "",
@@ -73,13 +71,6 @@ export class Register extends Component<{}, RegisterState> {
         let res = true;
 
         const state = this.state as RegisterState;
-        const passwordPatternValid = PASSWORD_PATTERN.test(this.state.password);
-        if (!passwordPatternValid) {
-            state.passwordValid = false;
-            res = false;
-        } else {
-            state.passwordValid = true;
-        }
 
         const passwordsMatch = this.state.password === this.state.confirmPassword;
         if (!passwordsMatch) {
@@ -237,20 +228,24 @@ export class Register extends Component<{}, RegisterState> {
                 </Form.Group>
                 <Form.Group className="mb-3" controlId="registerPassword">
                     <Form.Label>{t("password")}</Form.Label>
-                    <PasswordComponent isInvalid={!this.state.passwordValid} onChange={(e) => {
-                        this.setState({password: e}, async () => {
-                            if (!this.state.confirmPasswordValid || !this.state.passwordValid) {
-                                await this.checkPassword();
-                            }
-                        });
-                    }}
-                    invalidMessage={t("password_error_message")} />
+                    <PasswordComponent
+                        value={this.state.password}
+                        showStrength={true}
+                        onChange={(e) => {
+                            this.setState({password: e}, async () => {
+                                if (!this.state.confirmPasswordValid) {
+                                    await this.checkPassword();
+                                }
+                            });
+                        }}
+                        isInvalid={this.state.password.length < 8}
+                        invalidMessage={t("password_error_message")} />
                 </Form.Group>
                 <Form.Group className="mb-3" controlId="registerConfirmPassword">
                     <Form.Label>{t("confirm_password")}</Form.Label>
-                    <PasswordComponent isInvalid={!this.state.confirmPasswordValid} onChange={(e) => {
+                    <PasswordComponent value={this.state.confirmPassword} isInvalid={!this.state.confirmPasswordValid} onChange={(e) => {
                         this.setState({confirmPassword: e}, () => {
-                            if (!this.state.confirmPasswordValid || !this.state.passwordValid) {
+                            if (!this.state.confirmPasswordValid) {
                                 this.checkPassword();
                             }
                         });

frontend/src/components/Register.tsx

@@ -0,0 +1,60 @@
+import { beforeAll, describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/preact';
+
+let PasswordStrengthIndicator: any;
+
+// Mock react-i18next
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        'strength': 'Strength',
+        'entropy': 'Entropy',
+        'bits': 'bits',
+        'very_weak': 'Very Weak',
+        'weak': 'Weak',
+        'fair': 'Fair',
+        'strong': 'Strong',
+        'very_strong': 'Very Strong',
+      };
+      return translations[key] || key;
+    },
+  }),
+}));
+
+beforeAll(async () => {
+  // Bypass the global mock and import the real component
+  ({ PasswordStrengthIndicator } = await vi.importActual<typeof import('../PasswordStrengthIndicator')>('../PasswordStrengthIndicator'));
+});
+
+describe('PasswordStrengthIndicator', () => {
+  it('does not render when password is empty', () => {
+    const { container } = render(<PasswordStrengthIndicator password="" />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('does not render when show is false', () => {
+    const { container } = render(<PasswordStrengthIndicator password="test123" show={false} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders strength indicator for weak password', () => {
+    render(<PasswordStrengthIndicator password="abc123" />);
+
+    expect(screen.getByText('Strength:')).toBeInTheDocument();
+    expect(screen.getByText('Very Weak')).toBeInTheDocument();
+  });
+
+  it('renders strength indicator for strong password', () => {
+    render(<PasswordStrengthIndicator password="MyP@ssw0rd!2024" />);
+
+    expect(screen.getByText('Strength:')).toBeInTheDocument();
+    expect(screen.getByText('Strong')).toBeInTheDocument();
+  });
+
+  it('shows very strong for complex passwords', () => {
+    render(<PasswordStrengthIndicator password="MyVery$ecureP@ssw0rd!WithM@nyChar$2024" />);
+
+    expect(screen.getByText('Very Strong')).toBeInTheDocument();
+  });
+});

frontend/src/components/__tests__/PasswordStrengthIndicator.test.tsx

@@ -1,72 +1,8 @@
 import { render, fireEvent, waitFor, screen } from '@testing-library/preact';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { h } from 'preact';
-
-// Mock utils before importing component to avoid side effects
-vi.mock('../../utils', () => ({
-  fetchClient: { POST: vi.fn(), GET: vi.fn() },
-  get_salt_for_user: vi.fn(),
-  generate_hash: vi.fn(),
-  storeSecretKeyInServiceWorker: vi.fn(),
-  AppState: { Loading: 0, LoggedIn: 1, LoggedOut: 2, Recovery: 3 },
-  loggedIn: { value: 0 },
-  bc: { postMessage: vi.fn() },
-}));
-
-// Subpath mock for Form used as default import replicating global test-setup structure
-vi.mock('react-bootstrap/Form', () => {
-  const Form = ({ children, onSubmit }: { children?: any; onSubmit?: (e: Event) => void }) =>
-    h('form', { onSubmit }, children as any);
-  Form.Group = ({ children, controlId }: { children?: any; controlId?: string }) => {
-    if (children && Array.isArray(children)) {
-      children = children.map((child) => {
-        if (typeof child !== 'object') return child;
-        child.props = { ...child.props, controlId };
-        return child;
-      });
-    }
-    return h('div', {}, children as any);
-  };
-  Form.Label = ({ children, controlId }: { children?: any; controlId?: string }) =>
-    h('label', { htmlFor: controlId }, children as any);
-  Form.Control = ({
-    type,
-    value,
-    onChange,
-    isInvalid,
-    controlId,
-  }: {
-    type: string;
-    value?: string;
-    onChange?: (e: Event) => void;
-    isInvalid?: boolean;
-    controlId?: string;
-  }) =>
-    h('input', {
-      id: controlId,
-      type,
-      value,
-      onChange,
-      'data-testid': `${type}-input`,
-      className: isInvalid ? 'invalid' : '',
-    } as any);
-  return { default: Form };
-});
 
 import { Login } from '../Login';
 
-// Mock Alert directly to capture calls (in addition to global test-setup mock)
-vi.mock('../Alert', () => ({
-  showAlert: vi.fn(),
-}));
-
-// i18n mock
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}));
-
 
 describe('Login Component', () => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

frontend/src/components/__tests__/login.test.tsx

@@ -9,7 +9,6 @@ vi.mock('../Alert', () => ({
 }));
 
 vi.mock('../../utils', () => ({
-  PASSWORD_PATTERN: /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}/,
   fetchClient: {
   POST: vi.fn(),
 },