@micha.bigler/ui-core-micha 3.14.3 → 4.0.0

package/src/pages/SignUpPage.jsx

@@ -1,268 +0,0 @@
-import React, {
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { useNavigate, useLocation } from 'react-router-dom';
-import {
-  Alert,
-  Box,
-  Button,
-  Stack,
-  TextField,
-  Typography,
-} from '@mui/material';
-import { Helmet } from 'react-helmet';
-import { useTranslation } from 'react-i18next';
-import { NarrowPage } from '../layout/PageLayout';
-import { AuthContext } from '../auth/AuthContext';
-import { submitRegistrationRequest } from '../auth/authApi';
-import { TurnstileWidget } from '../components/TurnstileWidget';
-import { resolveErrorText } from '../utils/resolveErrorText';
-
-export const SIGN_UP_PAGE_ALERT_SX = { mb: 2 };
-
-const TURNSTILE_SIGNUP_MODES = new Set([
-  'self_signup_open',
-  'self_signup_email_domain',
-]);
-
-const MODE_LABELS = {
-  self_signup_access_code: 'Auth.SIGNUP_ACCESS_CODE_TAB',
-  self_signup_open: 'Auth.SIGNUP_OPEN_TAB',
-  self_signup_email_domain: 'Auth.SIGNUP_EMAIL_DOMAIN_TAB',
-  self_signup_qr: 'Auth.SIGNUP_QR_TAB',
-};
-
-const MODE_SUBTITLES = {
-  self_signup_access_code: 'Auth.PAGE_SIGNUP_SUBTITLE_ACCESS_CODE',
-  self_signup_open: 'Auth.PAGE_SIGNUP_SUBTITLE_OPEN',
-  self_signup_email_domain: 'Auth.PAGE_SIGNUP_SUBTITLE_EMAIL_DOMAIN',
-  self_signup_qr: 'Auth.PAGE_SIGNUP_SUBTITLE_QR',
-};
-
-export function SignUpPage() {
-  const navigate = useNavigate();
-  const location = useLocation();
-  const { t, i18n } = useTranslation();
-  const { authMethods } = useContext(AuthContext);
-
-  const signupModes = useMemo(() => {
-    const configured = Array.isArray(authMethods?.signup_modes)
-      ? authMethods.signup_modes.filter(Boolean)
-      : [];
-    if (configured.length > 0) {
-      return configured;
-    }
-    return authMethods?.signup ? ['self_signup_access_code'] : [];
-  }, [authMethods]);
-
-  const query = new URLSearchParams(location.search);
-  const tokenFromUrl = query.get('rt') || '';
-
-  const initialMode = useMemo(() => {
-    if (tokenFromUrl && signupModes.includes('self_signup_qr')) {
-      return 'self_signup_qr';
-    }
-    return signupModes[0] || 'self_signup_access_code';
-  }, [signupModes, tokenFromUrl]);
-
-  const [mode, setMode] = useState(initialMode);
-  const [email, setEmail] = useState('');
-  const [accessCode, setAccessCode] = useState('');
-  const [submitting, setSubmitting] = useState(false);
-  const [successKey, setSuccessKey] = useState(null);
-  const [errorKey, setErrorKey] = useState(null);
-  const [turnstileToken, setTurnstileToken] = useState('');
-  const turnstileWidgetRef = useRef(null);
-
-  const turnstileRequired = Boolean(authMethods?.turnstile_site_key)
-    && TURNSTILE_SIGNUP_MODES.has(mode);
-
-  const pageSubtitle = useMemo(() => {
-    if (mode === 'self_signup_qr' && tokenFromUrl) {
-      return t(
-        'Auth.PAGE_SIGNUP_SUBTITLE_QR_READY',
-        'Enter your email address to complete sign-up with the QR link you opened.',
-      );
-    }
-    return t(
-      MODE_SUBTITLES[mode] || 'Auth.PAGE_SIGNUP_SUBTITLE',
-      'Choose a sign-up method and enter the required details.',
-    );
-  }, [mode, t, tokenFromUrl]);
-
-  useEffect(() => {
-    setMode(initialMode);
-  }, [initialMode]);
-
-  useEffect(() => {
-    setTurnstileToken('');
-  }, [mode, authMethods?.turnstile_site_key]);
-
-  const handleSubmit = async (event) => {
-    event.preventDefault();
-    setSuccessKey(null);
-    setErrorKey(null);
-
-    if (!email) {
-      setErrorKey(t('Auth.EMAIL_REQUIRED'));
-      return;
-    }
-
-    if (mode === 'self_signup_access_code' && !accessCode) {
-      setErrorKey(t('Auth.SIGNUP_ACCESS_CODE_REQUIRED'));
-      return;
-    }
-
-    if (mode === 'self_signup_qr' && !tokenFromUrl) {
-      setErrorKey(t('Auth.SIGNUP_QR_INVALID'));
-      return;
-    }
-
-    if (turnstileRequired && !turnstileToken) return;
-
-    setSubmitting(true);
-    try {
-      const res = await submitRegistrationRequest({
-        email,
-        mode,
-        accessCode,
-        registrationContextToken: mode === 'self_signup_qr' ? tokenFromUrl : null,
-        turnstileToken: turnstileRequired ? turnstileToken : undefined,
-      });
-      // The backend's own response code is already mode-agnostic and accurate
-      // (Auth.INVITE_SENT). Falling back to the access-code-specific "if valid,
-      // an invite was sent" wording here was wrong for open/email-domain/QR
-      // signup, which have no code whose validity needs hiding.
-      setSuccessKey(res?.code || 'Auth.INVITE_SENT');
-    } catch (err) {
-      setErrorKey(resolveErrorText(i18n, err, 'Auth.INVITE_FAILED'));
-      if (turnstileRequired) {
-        setTurnstileToken('');
-        turnstileWidgetRef.current?.reset();
-      }
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handleGoToLogin = () => {
-    navigate('/login');
-  };
-
-  return (
-    <NarrowPage
-      title={t('Auth.LOGIN_SIGNUP_BUTTON')}
-      subtitle={pageSubtitle}
-    >
-      <Helmet>
-        <title>
-          {t('App.NAME')} – {t('Auth.LOGIN_SIGNUP_BUTTON')}
-        </title>
-      </Helmet>
-
-      {signupModes.length === 0 ? (
-        <Alert severity="info" sx={SIGN_UP_PAGE_ALERT_SX}>
-          {t('Auth.SELF_SIGNUP_DISABLED', 'Self sign-up is currently disabled.')}
-        </Alert>
-      ) : (
-        <>
-          {successKey && (
-            <Alert severity="success" sx={SIGN_UP_PAGE_ALERT_SX}>
-              {t(successKey, { email })}
-            </Alert>
-          )}
-
-          {errorKey && (
-            <Alert severity="error" sx={SIGN_UP_PAGE_ALERT_SX}>
-              {errorKey}
-            </Alert>
-          )}
-
-          {signupModes.length > 1 && (
-            <Stack spacing={1} sx={{ mb: 2 }}>
-              <Stack spacing={1}>
-                {signupModes.map((entry) => (
-                  <Button
-                    key={entry}
-                    variant={mode === entry ? 'contained' : 'outlined'}
-                    onClick={() => setMode(entry)}
-                    disabled={submitting}
-                    fullWidth
-                  >
-                    {t(MODE_LABELS[entry] || entry, entry)}
-                  </Button>
-                ))}
-              </Stack>
-            </Stack>
-          )}
-
-          <Box
-            component="form"
-            onSubmit={handleSubmit}
-            sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
-          >
-            <TextField
-              label={t('Auth.EMAIL_LABEL')}
-              type="email"
-              required
-              fullWidth
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              disabled={submitting}
-            />
-
-            {mode === 'self_signup_access_code' && (
-              <TextField
-                label={t('Auth.ACCESS_CODE_LABEL')}
-                type="text"
-                required
-                fullWidth
-                value={accessCode}
-                onChange={(e) => setAccessCode(e.target.value)}
-                disabled={submitting}
-              />
-            )}
-
-            {turnstileRequired && (
-              <TurnstileWidget
-                ref={turnstileWidgetRef}
-                siteKey={authMethods.turnstile_site_key}
-                onToken={setTurnstileToken}
-              />
-            )}
-
-            <Button
-              type="submit"
-              variant="contained"
-              disabled={submitting || (turnstileRequired && !turnstileToken)}
-            >
-              {submitting
-                ? t('Auth.SIGNUP_SUBMITTING')
-                : t('Auth.SIGNUP_SUBMIT')}
-            </Button>
-          </Box>
-        </>
-      )}
-
-      {/* Always rendered, closed or open — a closed signup page must still
-          leave the person a way forward (the Envelope's own Goal), not just
-          say why the form is missing. */}
-      <Box sx={{ mt: 3 }}>
-        <Typography variant="body2">
-          {t('Auth.SIGNUP_ALREADY_HAVE_ACCOUNT')}{' '}
-          <Button
-            onClick={handleGoToLogin}
-            variant="text"
-            size="small"
-          >
-            {t('Auth.SIGNUP_GO_TO_LOGIN')}
-          </Button>
-        </Typography>
-      </Box>
-    </NarrowPage>
-  );
-}

package/src/pages/SignupConfirmPage.jsx

@@ -1,155 +0,0 @@
-// src/pages/SignupConfirmPage.jsx
-//
-// S13: Completes a pending registration. Reads the signed pending-token from
-// the URL (`?token=...`), asks the user for a password, and POSTs to
-// `register_confirm`. On success, the user is sent to /login to sign in
-// explicitly — matches the existing invite/password-reset pattern and
-// preserves any MFA / login-event flow the app may enforce.
-import React, { useMemo, useState } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
-import {
-  Alert,
-  Box,
-  Button,
-  Stack,
-  TextField,
-  Typography,
-} from '@mui/material';
-import { Helmet } from 'react-helmet';
-import { useTranslation } from 'react-i18next';
-import { NarrowPage } from '../layout/PageLayout';
-import { confirmRegistration } from '../auth/authApi';
-import { resolveErrorText } from '../utils/resolveErrorText';
-
-export const SIGNUP_CONFIRM_PAGE_ALERT_SX = { mb: 2 };
-
-export function SignupConfirmPage() {
-  const { t, i18n } = useTranslation();
-  const location = useLocation();
-  const navigate = useNavigate();
-
-  const tokenFromUrl = useMemo(() => {
-    const query = new URLSearchParams(location.search);
-    return query.get('token') || '';
-  }, [location.search]);
-
-  const [password, setPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
-  const [submitting, setSubmitting] = useState(false);
-  const [errorKey, setErrorKey] = useState(null);
-
-  const handleSubmit = async (event) => {
-    event.preventDefault();
-    setErrorKey(null);
-
-    if (!tokenFromUrl) {
-      setErrorKey(t('Auth.PENDING_TOKEN_INVALID'));
-      return;
-    }
-    if (!password || password.length < 8) {
-      setErrorKey(t('Auth.PASSWORD_TOO_SHORT'));
-      return;
-    }
-    if (password !== confirmPassword) {
-      setErrorKey(t('Auth.PASSWORD_MISMATCH'));
-      return;
-    }
-
-    setSubmitting(true);
-    try {
-      await confirmRegistration({ token: tokenFromUrl, password });
-      // Send the user to /login. Aligned with PasswordInvitePage; no implicit
-      // session that would bypass MFA challenges or skip the explicit login
-      // event in audit logs.
-      navigate('/login', { replace: true });
-      return;
-    } catch (err) {
-      setErrorKey(resolveErrorText(i18n, err, 'Auth.PENDING_TOKEN_INVALID'));
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const tokenMissing = !tokenFromUrl;
-
-  return (
-    <NarrowPage
-      title={t('Auth.SIGNUP_CONFIRM_TITLE', 'Confirm your registration')}
-      subtitle={t(
-        'Auth.SIGNUP_CONFIRM_SUBTITLE',
-        'Choose a password to finish creating your account.',
-      )}
-    >
-      <Helmet>
-        <title>
-          {t('App.NAME')} – {t('Auth.SIGNUP_CONFIRM_TITLE', 'Confirm your registration')}
-        </title>
-      </Helmet>
-
-      {tokenMissing ? (
-        <>
-          <Alert severity="error" sx={SIGNUP_CONFIRM_PAGE_ALERT_SX}>
-            {t('Auth.PENDING_TOKEN_INVALID', 'This confirmation link is invalid or expired.')}
-          </Alert>
-          <Stack direction="row" spacing={1} sx={{ mt: 1 }}>
-            <Button onClick={() => navigate('/signup')} variant="contained">
-              {t('Auth.SIGNUP_REQUEST_NEW', 'Request a new invitation')}
-            </Button>
-            <Button onClick={() => navigate('/login')} variant="text">
-              {t('Auth.SIGNUP_GO_TO_LOGIN', 'Go to login')}
-            </Button>
-          </Stack>
-        </>
-      ) : (
-        <>
-          {errorKey && (
-            <Alert severity="error" sx={SIGNUP_CONFIRM_PAGE_ALERT_SX}>
-              {errorKey}
-            </Alert>
-          )}
-
-          <Box
-            component="form"
-            onSubmit={handleSubmit}
-            sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
-          >
-            <TextField
-              label={t('Auth.NEW_PASSWORD_LABEL', 'New password')}
-              type="password"
-              required
-              fullWidth
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              disabled={submitting}
-              autoComplete="new-password"
-            />
-            <TextField
-              label={t('Auth.PASSWORD_CONFIRM_LABEL', 'Confirm new password')}
-              type="password"
-              required
-              fullWidth
-              value={confirmPassword}
-              onChange={(e) => setConfirmPassword(e.target.value)}
-              disabled={submitting}
-              autoComplete="new-password"
-            />
-            <Button type="submit" variant="contained" disabled={submitting}>
-              {submitting
-                ? t('Auth.SIGNUP_CONFIRM_SUBMITTING', 'Confirming…')
-                : t('Auth.SIGNUP_CONFIRM_SUBMIT', 'Confirm registration')}
-            </Button>
-          </Box>
-
-          <Stack direction="row" spacing={1} sx={{ mt: 3 }}>
-            <Typography variant="body2">
-              {t('Auth.SIGNUP_ALREADY_HAVE_ACCOUNT', 'Already have an account?')}
-            </Typography>
-            <Button onClick={() => navigate('/login')} variant="text" size="small">
-              {t('Auth.SIGNUP_GO_TO_LOGIN', 'Go to login')}
-            </Button>
-          </Stack>
-        </>
-      )}
-    </NarrowPage>
-  );
-}

package/src/testing/checkKitIntegration.js

@@ -1,233 +0,0 @@
-import React, { act } from 'react';
-import { createRoot } from 'react-dom/client';
-import { MemoryRouter } from 'react-router-dom';
-import i18next from 'i18next';
-
-import apiClient from '../auth/apiClient';
-import { LoginPage } from '../pages/LoginPage';
-import { SignUpPage } from '../pages/SignUpPage';
-import { PasswordInvitePage } from '../pages/PasswordInvitePage';
-import { uiCoreTranslations } from '../i18n/uiCoreTranslations';
-
-const KIT_LANGUAGES = ['de', 'en', 'fr', 'sw'];
-const LOGIN_PATH = '/api/auth/browser/v1/auth/login';
-const RAW_CODE = /^[a-z][a-z0-9_]*$/;
-
-function pageName(Page) {
-  return Page?.displayName || Page?.name || 'page';
-}
-
-function appLanguages(i18n) {
-  const candidates = [
-    i18n?.options?.supportedLngs,
-    Object.keys(i18n?.options?.resources || {}),
-    i18n?.languages,
-  ];
-
-  for (const candidate of candidates) {
-    const languages = Array.isArray(candidate)
-      ? candidate.filter((language) => language && language !== 'cimode')
-      : [];
-    if (languages.length > 0) return languages;
-  }
-  return [];
-}
-
-function textNodes(container) {
-  const result = [];
-  const document = container.ownerDocument;
-  const filter = document.defaultView?.NodeFilter || NodeFilter;
-  const walker = document.createTreeWalker(container, filter.SHOW_TEXT);
-  let node;
-  while ((node = walker.nextNode())) {
-    const text = node.textContent.trim();
-    if (text) result.push(text);
-  }
-  return result;
-}
-
-const KIT_KEYS = new Set(Object.keys(uiCoreTranslations));
-// Every legitimate string the kit itself ships, across all locales -- a short,
-// all-lowercase, no-space word can still be entirely legitimate rendered prose
-// (e.g. `Auth.LOGIN_OR`'s German value is literally "oder", which the bare
-// RAW_CODE shape below would otherwise flag as a raw backend code). Exempting
-// anything that IS one of the kit's own translated values keeps the check
-// looking for text that is NEITHER a key NOR a real translation -- which is
-// exactly what a leaked backend code is, and a legitimate short word never is.
-const KIT_VALUES = new Set(
-  Object.values(uiCoreTranslations).flatMap((entry) => Object.values(entry)),
-);
-
-function scanPage(container, name) {
-  return textNodes(container)
-    .filter((text) => (
-      KIT_KEYS.has(text)
-      || (!KIT_VALUES.has(text) && text.length > 2 && RAW_CODE.test(text))
-    ))
-    .map((text) => ({
-      check: 'render',
-      reason: `${name} rendered raw kit key or backend code: ${text}`,
-    }));
-}
-
-async function renderPage(Page, wrapper, initialEntries = ['/']) {
-  const container = document.createElement('div');
-  const root = createRoot(container);
-  try {
-    await act(async () => {
-      root.render(React.createElement(
-        MemoryRouter,
-        { initialEntries },
-        React.createElement(wrapper, null, React.createElement(Page)),
-      ));
-      await Promise.resolve();
-    });
-    return { container, findings: scanPage(container, pageName(Page)) };
-  } finally {
-    await act(async () => {
-      root.unmount();
-    });
-  }
-}
-
-function transportFailure(config) {
-  return Promise.reject(new Error(`checkKitIntegration blocked request: ${config?.url || 'unknown'}`));
-}
-
-function loginFailure() {
-  return Promise.reject({
-    response: {
-      status: 400,
-      data: {
-        errors: [{
-          code: 'invalid',
-          param: 'email',
-          message: 'The email address is invalid.',
-        }],
-      },
-    },
-  });
-}
-
-async function renderFindings(Page, wrapper, initialEntries) {
-  try {
-    const rendered = await renderPage(Page, wrapper, initialEntries);
-    return rendered.findings;
-  } catch (error) {
-    return [{
-      check: 'render',
-      reason: `${pageName(Page)} threw while rendering: ${error?.message || String(error)}`,
-    }];
-  }
-}
-
-async function errorTextFindings(i18n, wrapper) {
-  const Page = LoginPage;
-  const name = pageName(Page);
-  const container = document.createElement('div');
-  const root = createRoot(container);
-  try {
-    await act(async () => {
-      root.render(React.createElement(
-        MemoryRouter,
-        { initialEntries: ['/login'] },
-        React.createElement(wrapper, null, React.createElement(Page)),
-      ));
-      await Promise.resolve();
-    });
-
-    const inputs = Array.from(container.querySelectorAll('input'));
-    const email = inputs.find((input) => input.type === 'email');
-    const password = inputs.find((input) => input.type === 'password');
-    const form = container.querySelector('form');
-    if (!email || !password || !form) {
-      return [{ check: 'error-text', reason: `${name} did not render its login form.` }];
-    }
-
-    const setValue = (input, value) => {
-      const setter = Object.getOwnPropertyDescriptor(
-        input.ownerDocument.defaultView.HTMLInputElement.prototype,
-        'value',
-      ).set;
-      setter.call(input, value);
-      input.dispatchEvent(new Event('input', { bubbles: true }));
-      input.dispatchEvent(new Event('change', { bubbles: true }));
-    };
-
-    await act(async () => {
-      setValue(email, 'not-an-email@example.com');
-      setValue(password, 'password');
-      form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    const expected = i18n.t('Auth.field.email.invalid');
-    const renderedTexts = textNodes(container);
-    if (renderedTexts.includes(expected)) return [];
-    return [{
-      check: 'error-text',
-      reason: `${name} did not show ${expected} for the allauth invalid-email response.`,
-    }];
-  } catch (error) {
-    return [{
-      check: 'error-text',
-      reason: `${name} error flow failed: ${error?.message || String(error)}`,
-    }];
-  } finally {
-    await act(async () => {
-      root.unmount();
-    });
-  }
-}
-
-/** Check that an app's i18n instance and providers wire the kit pages correctly. */
-export async function checkKitIntegration({
-  i18n,
-  wrapper,
-  pages = [LoginPage, SignUpPage, PasswordInvitePage],
-}) {
-  const findings = [];
-  const languages = appLanguages(i18n);
-  const sharedLanguages = KIT_LANGUAGES.filter((language) => languages.includes(language));
-
-  for (const [key] of Object.entries(uiCoreTranslations)) {
-    for (const language of sharedLanguages) {
-      // fallbackLng: false forces a true per-language check -- without it, a
-      // consumer's own fallbackLng config (e.g. "en") would let a key missing
-      // in "fr" silently resolve through the fallback and read as present.
-      if (!i18n?.exists(key, { lng: language, fallbackLng: false })) {
-        findings.push({
-          check: 'catalogue',
-          reason: `Missing kit translation key ${key} for language ${language}.`,
-        });
-      }
-    }
-  }
-
-  if (!i18next.isInitialized || i18n !== i18next) {
-    findings.push({
-      check: 'instance',
-      reason: 'The app i18n is not the initialized kit default instance; Accept-Language will be missing or wrong.',
-    });
-  }
-
-  const originalAdapter = apiClient.defaults.adapter;
-  apiClient.defaults.adapter = async (config) => {
-    if (config?.url === LOGIN_PATH || String(config?.url || '').endsWith(LOGIN_PATH)) {
-      return loginFailure();
-    }
-    return transportFailure(config);
-  };
-
-  try {
-    for (const Page of pages) {
-      findings.push(...await renderFindings(Page, wrapper));
-    }
-    findings.push(...await errorTextFindings(i18n, wrapper));
-  } finally {
-    apiClient.defaults.adapter = originalAdapter;
-  }
-
-  return { findings };
-}