Refactor and show password

frontend/src/components/map/filters/AddFilterPanel.tsx

@@ -32,6 +32,28 @@ import {
   type PoiFilterName,
 } from '../../../lib/poi-distance-filter';
 
+// Each resolver maps a raw pinned feature name to the folded filter card that
+// represents it in the browser, or returns null when it doesn't belong to that fold.
+const FOLDED_FILTER_RESOLVERS: Array<(name: string) => string | null> = [
+  (name) => (isSchoolFilterName(name) ? SCHOOL_FILTER_NAME : null),
+  (name) => (isSpecificCrimeFilterName(name) ? SPECIFIC_CRIMES_FILTER_NAME : null),
+  (name) => (isElectionVoteShareFilterName(name) ? ELECTION_VOTE_SHARE_FILTER_NAME : null),
+  (name) => (isEthnicityFilterName(name) ? ETHNICITIES_FILTER_NAME : null),
+  (name) => (isQualificationFilterName(name) ? QUALIFICATIONS_FILTER_NAME : null),
+  (name) => (isTenureFilterName(name) ? TENURE_FILTER_NAME : null),
+  (name) => (isCouncilFilterName(name) ? COUNCIL_FILTER_NAME : null),
+  (name) => (isPoiDistanceFilterName(name) ? (getPoiFilterName(name) ?? POI_DISTANCE_FILTER_NAME) : null),
+  (name) => (isCrimeSeverityFilterName(name) ? (getCrimeSeverityFilterName(name) ?? name) : null),
+];
+
+function resolveBrowserPinnedFeature(name: string): string {
+  for (const resolve of FOLDED_FILTER_RESOLVERS) {
+    const folded = resolve(name);
+    if (folded) return folded;
+  }
+  return name;
+}
+
 interface AddFilterPanelProps {
   collapsed: boolean;
   isLoggedIn: boolean;
@@ -91,26 +113,7 @@ export function AddFilterPanel({
   const { t } = useTranslation();
   const { setContainer, registerGroup, onToggle: revealGroupOnToggle } = useRevealOnExpand();
 
-  const browserPinnedFeature =
+  const browserPinnedFeature = pinnedFeature && resolveBrowserPinnedFeature(pinnedFeature);
-    pinnedFeature && isSchoolFilterName(pinnedFeature)
-      ? SCHOOL_FILTER_NAME
-      : pinnedFeature && isSpecificCrimeFilterName(pinnedFeature)
-        ? SPECIFIC_CRIMES_FILTER_NAME
-        : pinnedFeature && isElectionVoteShareFilterName(pinnedFeature)
-          ? ELECTION_VOTE_SHARE_FILTER_NAME
-          : pinnedFeature && isEthnicityFilterName(pinnedFeature)
-            ? ETHNICITIES_FILTER_NAME
-            : pinnedFeature && isQualificationFilterName(pinnedFeature)
-              ? QUALIFICATIONS_FILTER_NAME
-              : pinnedFeature && isTenureFilterName(pinnedFeature)
-                ? TENURE_FILTER_NAME
-                : pinnedFeature && isCouncilFilterName(pinnedFeature)
-                  ? COUNCIL_FILTER_NAME
-                  : pinnedFeature && isPoiDistanceFilterName(pinnedFeature)
-                    ? (getPoiFilterName(pinnedFeature) ?? POI_DISTANCE_FILTER_NAME)
-                    : pinnedFeature && isCrimeSeverityFilterName(pinnedFeature)
-                      ? (getCrimeSeverityFilterName(pinnedFeature) ?? pinnedFeature)
-                      : pinnedFeature;
 
   const handleTogglePin = (name: string) => {
     if (name === SCHOOL_FILTER_NAME) {

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');
+  });
+});

frontend/src/components/ui/AuthModal.tsx

@@ -3,6 +3,8 @@ import { Trans, useTranslation } from 'react-i18next';
 import type { ParseKeys } from 'i18next';
 import { CloseIcon } from './icons/CloseIcon';
 import { GoogleIcon } from './icons/GoogleIcon';
+import { EyeIcon } from './icons/EyeIcon';
+import { EyeOffIcon } from './icons/EyeOffIcon';
 import { trackEvent } from '../../lib/analytics';
 import { useModalA11y } from '../../hooks/useModalA11y';
 import type { AuthErrorAction } from '../../lib/auth-errors';
@@ -42,6 +44,7 @@ export default function AuthModal({
   const [view, setView] = useState<View>(initialTab);
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
   const [resetSent, setResetSent] = useState(false);
   const dialogRef = useModalA11y();
   const fieldId = useId();
@@ -232,22 +235,38 @@ export default function AuthModal({
                 >
                   {t('auth.password')}
                 </label>
+                <div className="relative">
                   <input
                     id={passwordInputId}
                     name="password"
-                  type="password"
+                    type={showPassword ? 'text' : 'password'}
                     value={password}
                     onChange={(e) => setPassword(e.target.value)}
                     required
                     minLength={8}
                     autoComplete={view === 'register' ? 'new-password' : 'current-password'}
-                  className="w-full px-3 py-2 text-sm rounded border border-warm-200 dark:border-warm-700 bg-white dark:bg-warm-800 text-navy-950 dark:text-white placeholder-warm-400 dark:placeholder-warm-500 outline-none focus:ring-2 ring-teal-400 dark:ring-teal-500"
+                    className="w-full pl-3 pr-10 py-2 text-sm rounded border border-warm-200 dark:border-warm-700 bg-white dark:bg-warm-800 text-navy-950 dark:text-white placeholder-warm-400 dark:placeholder-warm-500 outline-none focus:ring-2 ring-teal-400 dark:ring-teal-500"
                     placeholder={
                       view === 'register'
                         ? t('auth.passwordPlaceholderRegister')
                         : t('auth.passwordPlaceholderLogin')
                     }
                   />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword((v) => !v)}
+                    aria-label={showPassword ? t('auth.hidePassword') : t('auth.showPassword')}
+                    aria-pressed={showPassword}
+                    title={showPassword ? t('auth.hidePassword') : t('auth.showPassword')}
+                    className="absolute inset-y-0 right-0 flex items-center pr-3 text-warm-400 hover:text-warm-700 dark:text-warm-400 dark:hover:text-warm-200 outline-none focus-visible:text-teal-600 dark:focus-visible:text-teal-400"
+                  >
+                    {showPassword ? (
+                      <EyeOffIcon className="w-5 h-5" />
+                    ) : (
+                      <EyeIcon filled={false} className="w-5 h-5" />
+                    )}
+                  </button>
+                </div>
                 {view === 'login' && (
                   <button
                     type="button"