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

package/src/pages/LoginPage.jsx

@@ -1,343 +0,0 @@
-import React, { useState, useContext, useEffect } from 'react';
-import { useNavigate, useLocation } from 'react-router-dom';
-import { Helmet } from 'react-helmet';
-import { Box, Alert } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-
-// Layout & Context
-import { NarrowPage } from '../layout/PageLayout';
-import { AuthContext } from '../auth/AuthContext';
-
-// API & Services (Clean Architecture)
-import {
-  fetchRecoverySessionToken,
-  loginWithPassword,
-  loginWithRecoveryPassword,
-} from '../auth/authApi';
-import { loginWithPasskey, startSocialLogin } from '../utils/authService';
-
-// Components
-import { LoginForm } from '../components/LoginForm';
-import { MfaLoginComponent } from '../components/MfaLoginComponent';
-import { resolveErrorText } from '../utils/resolveErrorText';
-
-export const LOGIN_PAGE_ALERT_SX = { mb: 2 };
-
-export function LoginPage() {
-  const navigate = useNavigate();
-  const location = useLocation();
-  const { user, loading, login, authMethods } = useContext(AuthContext);
-  const { t, i18n } = useTranslation();
-
-  // State
-  const [step, setStep] = useState('credentials'); // 'credentials' | 'mfa'
-  const [submitting, setSubmitting] = useState(false);
-  const [errorKey, setErrorKey] = useState(null);
-  const [mfaState, setMfaState] = useState(null); // { availableTypes: [...], identifier }
-  // S164: token never travels through the URL/fragment anymore. It is held
-  // in component state only, fetched from the server-side session handoff
-  // endpoint when the redirect lands the SPA here with `#recovery=ok`.
-  const [recoveryToken, setRecoveryToken] = useState(null);
-  const [recoveryFetching, setRecoveryFetching] = useState(false);
-
-  // URL Params parsing
-  const params = new URLSearchParams(location.search);
-  const hashParams = new URLSearchParams(
-    String(location.hash || "").startsWith("#") ? String(location.hash).slice(1) : String(location.hash || ""),
-  );
-  // After S164 the hash carries only a status sentinel: `ok`, `invalid`, or
-  // `expired`. We also accept the same key from query params as a defensive
-  // fallback for proxies that strip fragments.
-  const recoveryStatus = String(
-    hashParams.get('recovery') || params.get('recovery') || '',
-  ).toLowerCase();
-  // Backward-compatible fallback for legacy links using query parameters.
-  const recoveryEmail = hashParams.get('email') || params.get('email') || '';
-  const requestedNext = params.get('next');
-
-  const getRedirectTarget = (currentUser, options = {}) => {
-    if (options.forceSecurityRedirect) {
-      return options.forceSecurityRedirect;
-    }
-
-    const requiresExtra = currentUser?.security_state?.requires_additional_security === true;
-    if (requiresExtra) {
-      return '/account?tab=security&from=weak_login';
-    }
-
-    // Same-origin check via URL parser — `startsWith('/')` alone allows
-    // bypasses like `/\evil.com`, which WHATWG-parses to `https://evil.com/`
-    // for special schemes. Resolve against the current origin and only accept
-    // results whose origin matches.
-    // Require leading-slash absolute path on the raw input (rejects relative
-    // inputs like `account/settings` and protocol-relative `//host` before
-    // they reach the URL parser, which would normalise both into a same-
-    // origin pathname starting with `/`).
-    if (
-      requestedNext &&
-      typeof requestedNext === 'string' &&
-      requestedNext.startsWith('/') &&
-      !requestedNext.startsWith('//')
-    ) {
-      try {
-        const parsed = new URL(requestedNext, window.location.origin);
-        // Catches WHATWG bypasses like `/\evil.com` that resolve to a
-        // different origin even though the raw input started with `/`.
-        if (parsed.origin === window.location.origin) {
-          return parsed.pathname + parsed.search + parsed.hash;
-        }
-      } catch {
-        // fall through to default redirect
-      }
-    }
-
-    return '/';
-  };
-
-  useEffect(() => {
-    const socialError = params.get('error') || params.get('social');
-    if (socialError) {
-      setErrorKey(t('Auth.SOCIAL_LOGIN_FAILED'));
-    }
-  }, [location.search]);
-
-  // S164 handoff: on `#recovery=ok`, pull the plaintext token out of the
-  // server-side session (one-shot). On `invalid`/`expired`, or on any
-  // other non-empty value (legacy pre-S164 email links that carried the
-  // token directly in the hash), surface an invalid-link error so the
-  // user gets feedback instead of a silent login screen.
-  useEffect(() => {
-    if (!recoveryStatus) {
-      return;
-    }
-    // Strip the `recovery=…` sentinel from BOTH hash and query string so a
-    // bookmark or page refresh does not re-trigger this effect against an
-    // already-popped session entry (which would render a confusing
-    // "invalid" error to a user who is mid-login).
-    //
-    // We use `history.replaceState` rather than `navigate(..., {replace})`
-    // intentionally: react-router's `navigate` would trigger an immediate
-    // re-render with an updated `useLocation()`, which would cause this
-    // effect's cleanup to set `cancelled=true` and discard the in-flight
-    // recovery-token fetch result. `replaceState` only mutates the browser
-    // URL bar; `useLocation()` stays at `recovery=ok` for this render, the
-    // fetch resolves, and `recoveryToken` gets set normally. The trade-off
-    // is that `useLocation().hash` is stale for the page lifetime — fine
-    // because nothing else in this component reads it.
-    if (typeof window !== 'undefined' && window.history?.replaceState) {
-      const cleanParams = new URLSearchParams(window.location.search);
-      cleanParams.delete('recovery');
-      const cleanSearch = cleanParams.toString();
-      const cleanUrl =
-        window.location.pathname + (cleanSearch ? `?${cleanSearch}` : '');
-      window.history.replaceState(null, '', cleanUrl);
-    }
-    if (recoveryStatus === 'expired') {
-      setErrorKey(t('Auth.RECOVERY_TOKEN_EXPIRED'));
-      setRecoveryToken(null);
-      return;
-    }
-    if (recoveryStatus !== 'ok') {
-      // Catches `invalid` and any unknown value (including legacy email
-      // links that carried the plaintext token before S164).
-      setErrorKey(t('Auth.RECOVERY_TOKEN_INVALID'));
-      setRecoveryToken(null);
-      return;
-    }
-    let cancelled = false;
-    setRecoveryFetching(true);
-    fetchRecoverySessionToken()
-      .then((token) => {
-        if (cancelled) return;
-        if (!token) {
-          // Session entry missing or already consumed — treat as invalid.
-          setErrorKey(t('Auth.RECOVERY_TOKEN_INVALID'));
-          setRecoveryToken(null);
-          return;
-        }
-        setRecoveryToken(token);
-      })
-      .catch((err) => {
-        if (cancelled) return;
-        setErrorKey(resolveErrorText(i18n, err, 'Auth.RECOVERY_TOKEN_INVALID'));
-        setRecoveryToken(null);
-      })
-      .finally(() => {
-        if (!cancelled) {
-          setRecoveryFetching(false);
-        }
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [recoveryStatus]);
-
-  useEffect(() => {
-    if (loading || !user) return;
-    navigate(getRedirectTarget(user), { replace: true });
-  }, [loading, user, navigate, requestedNext]);
-
-  // --- Helper: Central Success Logic ---
-  const handleLoginSuccess = (user) => {
-    login(user); // Update Context
-    navigate(getRedirectTarget(user));
-  };
-
-  // --- Handlers ---
-
-  const handleSubmitCredentials = async ({ identifier, password }) => {
-    setErrorKey(null);
-    setSubmitting(true);
-    try {
-      // A) Recovery Flow
-      if (recoveryToken) {
-        const result = await loginWithRecoveryPassword(
-          identifier,
-          password,
-          recoveryToken
-        );
-        login(result.user);
-        navigate(
-          getRedirectTarget(result.user, {
-            forceSecurityRedirect: '/account?tab=security&from=recovery',
-          }),
-        );
-        return;
-      }
-
-      // B) Standard Password Login
-      const result = await loginWithPassword(identifier, password);
-
-      if (result.needsMfa) {
-        setMfaState({
-          availableTypes: result.availableTypes || [],
-          identifier,
-        });
-        setStep('mfa');
-      } else {
-        handleLoginSuccess(result.user);
-      }
-    } catch (err) {
-      setErrorKey(resolveErrorText(i18n, err, 'Auth.LOGIN_FAILED'));
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handlePasskeyLoginInitial = async () => {
-    setErrorKey(null);
-    setSubmitting(true);
-    try {
-      // Service handles browser interaction + API calls
-      const user = await loginWithPasskey();
-      handleLoginSuccess(user);
-    } catch (err) {
-      // 'Auth.PASSKEY_CANCELLED' is generic, maybe ignore visually or show specific hint
-      if (err.code !== 'Auth.PASSKEY_CANCELLED') {
-         setErrorKey(resolveErrorText(i18n, err, 'Auth.PASSKEY_FAILED'));
-      }
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handleMfaSuccess = ({ user, method }) => {
-    // MFA component should return the user object after verifying code
-    if (method === 'recovery_code') {
-      login(user);
-      navigate(
-        getRedirectTarget(user, {
-          forceSecurityRedirect: '/account?tab=security&from=recovery',
-        }),
-      );
-    } else {
-      handleLoginSuccess(user);
-    }
-  };
-
-  const handleMfaCancel = () => {
-    setStep('credentials');
-    setMfaState(null);
-    setErrorKey(null);
-  };
-
-  const socialProviders = Array.isArray(authMethods?.social_providers)
-    ? authMethods.social_providers
-    : [];
-  const passwordLoginEnabled = Boolean(authMethods?.password_login) || Boolean(recoveryToken);
-  const socialLoginEnabled = Boolean(authMethods?.social_login) && socialProviders.length > 0;
-  const passkeyLoginEnabled = Boolean(authMethods?.passkey_login);
-  const signupModes = Array.isArray(authMethods?.signup_modes)
-    ? authMethods.signup_modes.filter(Boolean)
-    : [];
-  const signupEnabled = signupModes.length > 0 || Boolean(authMethods?.signup);
-  const passwordResetEnabled = Boolean(authMethods?.password_reset);
-  const twoFactorRequired = Boolean(authMethods?.two_factor_required)
-    || Number(authMethods?.required_auth_factor_count || 1) >= 2;
-
-  // --- Render ---
-
-  return (
-    <NarrowPage
-      title={t('Auth.PAGE_LOGIN_TITLE')}
-      subtitle={t('Auth.PAGE_LOGIN_SUBTITLE')}
-    >
-      <Helmet>
-        <title>{t('App.NAME')} – {t('Auth.PAGE_LOGIN_TITLE')}</title>
-      </Helmet>
-
-      {errorKey && (
-        <Alert severity="error" sx={LOGIN_PAGE_ALERT_SX}>
-          {errorKey}
-        </Alert>
-      )}
-
-      {recoveryFetching && !errorKey && (
-        <Alert severity="info" sx={LOGIN_PAGE_ALERT_SX}>
-          {t('Auth.RECOVERY_LINK_VALIDATING', 'Validating recovery link…')}
-        </Alert>
-      )}
-
-      {recoveryToken && !errorKey && (
-        <Alert severity="info" sx={LOGIN_PAGE_ALERT_SX}>
-          {t('Auth.RECOVERY_LOGIN_WARNING', 'Recovery link validated. Please enter your password.')}
-        </Alert>
-      )}
-
-      {twoFactorRequired && !recoveryToken && !recoveryFetching && (
-        <Alert severity="info" sx={LOGIN_PAGE_ALERT_SX}>
-          {t('Auth.TWO_FACTOR_REQUIRED_HINT', 'This app requires two authentication factors for full access.')}
-        </Alert>
-      )}
-
-      {step === 'credentials' && (
-        <LoginForm
-          onSubmit={passwordLoginEnabled ? handleSubmitCredentials : null}
-          onForgotPassword={
-            passwordResetEnabled ? () => navigate('/reset-request-password') : null
-          }
-          onSocialLogin={socialLoginEnabled ? (provider) => startSocialLogin(provider) : null}
-          socialProviders={socialProviders}
-          onPasskeyLogin={passkeyLoginEnabled ? handlePasskeyLoginInitial : null}
-          onSignUp={signupEnabled ? () => navigate('/signup') : null}
-          // Block submit while the handoff is in flight so the user does not
-          // race the recovery-token fetch with a normal password POST.
-          disabled={submitting || recoveryFetching}
-          initialIdentifier={recoveryEmail}
-        />
-      )}
-
-      {step === 'mfa' && mfaState && (
-        <Box>
-           {/* Assuming MfaLoginComponent handles the API call to authenticateWithMFA */}
-          <MfaLoginComponent
-            availableTypes={mfaState.availableTypes}
-            identifier={mfaState.identifier}
-            onSuccess={handleMfaSuccess}
-            onCancel={handleMfaCancel}
-          />
-        </Box>
-      )}
-    </NarrowPage>
-  );
-}

package/src/pages/PasswordChangePage.jsx

@@ -1,62 +0,0 @@
-// src/auth/pages/PasswordChangePage.jsx
-import React, { useState } from 'react';
-import { Helmet } from 'react-helmet';
-import { Typography } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { NarrowPage } from '../layout/PageLayout';
-import { PasswordChangeForm } from '../components/PasswordChangeForm';
-import { changePassword } from '../auth/authApi';
-import { resolveErrorText } from '../utils/resolveErrorText';
-
-export function PasswordChangePage() {
-  const { t, i18n } = useTranslation();
-
-  const [submitting, setSubmitting] = useState(false);
-  const [successKey, setSuccessKey] = useState(null);
-  const [errorKey, setErrorKey] = useState(null);
-
-  const handleSubmit = async (oldPassword, newPassword) => {
-    setSuccessKey(null);
-    setErrorKey(null);
-    setSubmitting(true);
-
-    try {
-      await changePassword(oldPassword, newPassword);
-      setSuccessKey('Auth.RESET_PASSWORD_SUCCESS');
-    } catch (err) {
-      setErrorKey(resolveErrorText(i18n, err, 'Auth.PASSWORD_CHANGE_FAILED'));
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  return (
-    <NarrowPage
-      title={t('Auth.CHANGE_PASSWORD_BUTTON')}
-      subtitle={t('Auth.PAGE_CHANGE_PASSWORD_SUBTITLE')}
-    >
-      <Helmet>
-        <title>
-          {t('App.NAME')} – {t('Auth.CHANGE_PASSWORD_BUTTON')}
-        </title>
-      </Helmet>
-
-      {successKey && (
-        <Typography color="primary" gutterBottom>
-          {t(successKey)}
-        </Typography>
-      )}
-
-      {errorKey && (
-        <Typography color="error" gutterBottom>
-          {errorKey}
-        </Typography>
-      )}
-
-      <PasswordChangeForm
-        onSubmit={handleSubmit}
-        submitting={submitting}
-      />
-    </NarrowPage>
-  );
-}

package/src/pages/PasswordInvitePage.jsx

@@ -1,177 +0,0 @@
-// src/auth/pages/PasswordInvitePage.jsx
-import React, { useState, useEffect } from 'react';
-import { useNavigate, useParams, useLocation } from 'react-router-dom';
-import { Helmet } from 'react-helmet';
-import { Button, Typography } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { NarrowPage } from '../layout/PageLayout';
-import { PasswordSetForm } from '../components/PasswordSetForm';
-import { verifyResetToken, setNewPassword } from '../auth/authApi';
-import { resolveErrorText } from '../utils/resolveErrorText';
-
-export function PasswordInvitePage() {
-  const { uid, token } = useParams();
-  const location = useLocation();
-  const navigate = useNavigate();
-  const { t, i18n } = useTranslation();
-  const searchParams = new URLSearchParams(location.search);
-  const nextPath = searchParams.get('next');
-
-  const [submitting, setSubmitting] = useState(false);
-  const [errorKey, setErrorKey] = useState(null);
-  const [submitErrorKey, setSubmitErrorKey] = useState(null);
-  const [successKey, setSuccessKey] = useState(null);
-  const [continueTarget, setContinueTarget] = useState(null);
-  const [checked, setChecked] = useState(false);
-
-  // Unterscheidung Invite-Link vs klassischer Reset
-  const isInvite = location.pathname.startsWith('/invite/');
-
-  // Page-Titel/Subtitel-Keys anhand isInvite bestimmen
-  const pageTitleKey = isInvite
-    ? 'Auth.PAGE_INVITE_TITLE'
-    : 'Auth.PAGE_RESET_PASSWORD_TITLE';
-
-  const pageSubtitleKey = isInvite
-    ? 'Auth.PAGE_INVITE_SUBTITLE'
-    : 'Auth.PAGE_RESET_PASSWORD_SUBTITLE';
-
-  useEffect(() => {
-    if (!uid || !token) {
-      setErrorKey(t('Auth.RESET_LINK_INVALID'));
-      setChecked(true);
-      return;
-    }
-
-    const check = async () => {
-      try {
-        await verifyResetToken(uid, token);
-        setChecked(true);
-      } catch (err) {
-        setErrorKey(resolveErrorText(i18n, err, 'Auth.RESET_LINK_INVALID'));
-        setChecked(true);
-      }
-    };
-
-    check();
-  }, [uid, token]);
-
-  const handleSubmit = async (newPassword) => {
-    if (!uid || !token) {
-      return;
-    }
-
-    setSubmitting(true);
-    setSubmitErrorKey(null);
-    setSuccessKey(null);
-
-    try {
-      await setNewPassword(uid, token, newPassword);
-      setSuccessKey(
-        isInvite
-          ? 'Auth.RESET_PASSWORD_SUCCESS_INVITE'
-          : 'Auth.RESET_PASSWORD_SUCCESS_RESET',
-      );
-      // Same-origin check via URL parser — startsWith('/') alone misses
-      // bypasses like `/\evil.com`, which WHATWG-parses to `https://evil.com/`
-      // for special schemes. The parser normalises backslashes and protocol-
-      // relative forms, so any cross-origin result is caught here.
-      let safeNextPath = null;
-      // Require leading-slash absolute path on the raw input (rejects
-      // relative inputs like `account/settings` and protocol-relative `//host`
-      // before they reach the URL parser, which would normalise both into a
-      // same-origin pathname starting with `/`).
-      if (
-        nextPath &&
-        typeof nextPath === 'string' &&
-        nextPath.startsWith('/') &&
-        !nextPath.startsWith('//')
-      ) {
-        try {
-          const parsed = new URL(nextPath, window.location.origin);
-          // Catches WHATWG bypasses like `/\evil.com` that resolve to a
-          // different origin even though the raw input started with `/`.
-          if (parsed.origin === window.location.origin) {
-            safeNextPath = parsed.pathname + parsed.search + parsed.hash;
-          }
-        } catch {
-          // fall through to default redirect
-        }
-      }
-      const target = safeNextPath
-        ? `/login?next=${encodeURIComponent(safeNextPath)}`
-        : '/login';
-      setContinueTarget(target);
-    } catch (err) {
-      // Told apart by CODE, not by the presence of `messages` (a submission
-      // can fail with a link problem too, e.g. the token expires in the gap
-      // between the page's initial verifyResetToken check and this submit) —
-      // only a password rejection keeps the form; a link problem must still
-      // end in the same invalid-link state the initial check produces.
-      if (err.code === 'Auth.RESET_LINK_INVALID') {
-        setErrorKey(resolveErrorText(i18n, err, 'Auth.RESET_LINK_INVALID'));
-      } else {
-        const responseMessages = err.raw?.messages || err.response?.data?.messages;
-        setSubmitErrorKey(
-          Array.isArray(responseMessages) && responseMessages.length > 0
-            ? responseMessages.join(' ')
-            : resolveErrorText(i18n, err, 'Auth.RESET_PASSWORD_FAILED'),
-        );
-      }
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  // Loading/Validierung des Links
-  if (!checked && !errorKey) {
-    return (
-      <NarrowPage title={t('Auth.PAGE_CHECKING_LINK_TITLE')}>
-        <Typography>{t('Auth.PAGE_CHECKING_LINK_TEXT')}</Typography>
-      </NarrowPage>
-    );
-  }
-
-  return (
-    <NarrowPage
-      title={t(pageTitleKey)}
-      subtitle={t(pageSubtitleKey)}
-    >
-      <Helmet>
-        <title>
-          {t('App.NAME')} – {t(pageTitleKey)}
-        </title>
-      </Helmet>
-
-      {errorKey && (
-        <Typography color="error" gutterBottom>
-          {errorKey}
-        </Typography>
-      )}
-
-      {successKey && (
-        <>
-          <Typography color="primary" gutterBottom>
-            {t(successKey)}
-          </Typography>
-          <Button
-            variant="contained"
-            onClick={() => navigate(continueTarget)}
-          >
-            {t('Auth.SIGNUP_GO_TO_LOGIN')}
-          </Button>
-        </>
-      )}
-
-      {submitErrorKey && !successKey && (
-        <Typography color="error" gutterBottom>
-          {submitErrorKey}
-        </Typography>
-      )}
-
-      {!successKey && !errorKey && (
-        <PasswordSetForm onSubmit={handleSubmit} submitting={submitting} />
-      )}
-    </NarrowPage>
-  );
-}

package/src/pages/PasswordResetRequestPage.jsx

@@ -1,68 +0,0 @@
-// src/auth/pages/PasswordResetRequestPage.jsx
-import React, { useState } from 'react';
-import { Helmet } from 'react-helmet';
-import { Typography } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { NarrowPage } from '../layout/PageLayout';
-import { requestPasswordReset } from '../auth/authApi';
-import {PasswordResetRequestForm } from '../components/PasswordResetRequestForm';
-import { resolveErrorText } from '../utils/resolveErrorText';
-
-export function PasswordResetRequestPage() {
-  const { t, i18n } = useTranslation();
-
-  const [submitting, setSubmitting] = useState(false);
-  const [successKey, setSuccessKey] = useState(null);
-  const [errorKey, setErrorKey] = useState(null);
-
-  const handleSubmit = async (email) => {
-    setSuccessKey(null);
-    setErrorKey(null);
-
-    if (!email) {
-      setErrorKey(t('Auth.EMAIL_REQUIRED'));
-      return;
-    }
-
-    setSubmitting(true);
-    try {
-      await requestPasswordReset(email);
-      // Kein User-Leak, immer gleiche Success-Meldung
-      setSuccessKey('Auth.RESET_REQUEST_ACCEPTED');
-    } catch (err) {
-      setErrorKey(resolveErrorText(i18n, err, 'Auth.RESET_REQUEST_FAILED'));
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  return (
-    <NarrowPage
-      title={t('Auth.PAGE_RESET_PASSWORD_TITLE')}
-      subtitle={t('Auth.PAGE_RESET_REQUEST_SUBTITLE')}
-    >
-      <Helmet>
-        <title>
-          {t('App.NAME')} – {t('Auth.PAGE_RESET_PASSWORD_TITLE')}
-        </title>
-      </Helmet>
-
-      {successKey && (
-        <Typography color="primary" gutterBottom>
-          {t(successKey)}
-        </Typography>
-      )}
-
-      {errorKey && (
-        <Typography color="error" gutterBottom>
-          {errorKey}
-        </Typography>
-      )}
-
-      <PasswordResetRequestForm
-        onSubmit={handleSubmit}
-        submitting={submitting}
-      />
-    </NarrowPage>
-  );
-}