Refactor and show password

frontend/src/components/ui/AuthModal.test.tsx

@@ -0,0 +1,63 @@
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+vi.mock('../../lib/analytics', () => ({ trackEvent: () => {} }));
+
+vi.mock('react-i18next', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('react-i18next')>()),
+  useTranslation: () => ({ t: (key: string) => key }),
+  Trans: ({ i18nKey }: { i18nKey: string }) => <>{i18nKey}</>,
+}));
+
+import AuthModal from './AuthModal';
+
+const noop = async () => {};
+
+function renderModal(initialTab: 'login' | 'register' = 'login') {
+  return render(
+    <AuthModal
+      onClose={() => {}}
+      onLogin={noop}
+      onRegister={noop}
+      onOAuthLogin={noop}
+      onForgotPassword={noop}
+      loading={false}
+      error={null}
+      onClearError={() => {}}
+      initialTab={initialTab}
+    />
+  );
+}
+
+afterEach(cleanup);
+
+describe('AuthModal password visibility toggle', () => {
+  it('starts hidden and reveals the password when clicked', () => {
+    renderModal('login');
+
+    const input = screen.getByLabelText('auth.password') as HTMLInputElement;
+    expect(input.type).toBe('password');
+
+    // Hidden state exposes a "show" toggle.
+    const toggle = screen.getByRole('button', { name: 'auth.showPassword' });
+    expect(toggle.getAttribute('type')).toBe('button');
+    expect(toggle.getAttribute('aria-pressed')).toBe('false');
+
+    fireEvent.click(toggle);
+
+    expect(input.type).toBe('text');
+    const hideToggle = screen.getByRole('button', { name: 'auth.hidePassword' });
+    expect(hideToggle.getAttribute('aria-pressed')).toBe('true');
+
+    fireEvent.click(hideToggle);
+    expect(input.type).toBe('password');
+  });
+
+  it('offers the toggle on the register tab too', () => {
+    renderModal('register');
+    const input = screen.getByLabelText('auth.password') as HTMLInputElement;
+    expect(input.type).toBe('password');
+    fireEvent.click(screen.getByRole('button', { name: 'auth.showPassword' }));
+    expect(input.type).toBe('text');
+  });
+});