@micha.bigler/ui-core-micha 2.1.20 → 2.2.1

package/src/pages/LoginPage.jsx

@@ -39,6 +39,24 @@ export function LoginPage() {
     : recoveryTokenRaw;
   // 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';
+    }
+
+    if (requestedNext && requestedNext.startsWith('/')) {
+      return requestedNext;
+    }
+
+    return '/';
+  };
 
   useEffect(() => {
     const socialError = params.get('error') || params.get('social');
@@ -49,28 +67,13 @@ export function LoginPage() {
 
   useEffect(() => {
     if (loading || !user) return;
-
-    const requiresExtra = user.security_state?.requires_additional_security === true;
-    if (requiresExtra) {
-      navigate('/account?tab=security&from=weak_login', { replace: true });
-    } else {
-      navigate('/', { replace: true });
-    }
-  }, [loading, user, navigate]);
+    navigate(getRedirectTarget(user), { replace: true });
+  }, [loading, user, navigate, requestedNext]);
 
   // --- Helper: Central Success Logic ---
   const handleLoginSuccess = (user) => {
     login(user); // Update Context
-
-    // Check if "Strong Security" is enforced/required but not met
-    const requiresExtra = user.security_state?.requires_additional_security === true;
-
-    if (requiresExtra) {
-      navigate('/account?tab=security&from=weak_login');
-    } else {
-      // Standard Redirect (könnte man noch mit ?next=... erweitern)
-      navigate('/');
-    }
+    navigate(getRedirectTarget(user));
   };
 
   // --- Handlers ---
@@ -86,9 +89,12 @@ export function LoginPage() {
           password,
           recoveryToken
         );
-        // Recovery login implies a specific redirect usually, usually straight to security settings
         login(result.user);
-        navigate('/account?tab=security&from=recovery');
+        navigate(
+          getRedirectTarget(result.user, {
+            forceSecurityRedirect: '/account?tab=security&from=recovery',
+          }),
+        );
         return;
       }
 
@@ -131,9 +137,12 @@ export function LoginPage() {
   const handleMfaSuccess = ({ user, method }) => {
     // MFA component should return the user object after verifying code
     if (method === 'recovery_code') {
-      // Recovery codes often trigger a security check prompt
       login(user);
-      navigate('/account?tab=security&from=recovery');
+      navigate(
+        getRedirectTarget(user, {
+          forceSecurityRedirect: '/account?tab=security&from=recovery',
+        }),
+      );
     } else {
       handleLoginSuccess(user);
     }
@@ -151,8 +160,13 @@ export function LoginPage() {
   const passwordLoginEnabled = Boolean(authMethods?.password_login) || Boolean(recoveryToken);
   const socialLoginEnabled = Boolean(authMethods?.social_login) && socialProviders.length > 0;
   const passkeyLoginEnabled = Boolean(authMethods?.passkey_login);
-  const signupEnabled = Boolean(authMethods?.signup);
+  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 ---
 
@@ -177,6 +191,12 @@ export function LoginPage() {
         </Alert>
       )}
 
+      {twoFactorRequired && !recoveryToken && (
+        <Alert severity="info" sx={{ mb: 2 }}>
+          {t('Auth.TWO_FACTOR_REQUIRED_HINT', 'This app requires two authentication factors for full access.')}
+        </Alert>
+      )}
+
       {step === 'credentials' && (
         <LoginForm
           onSubmit={passwordLoginEnabled ? handleSubmitCredentials : null}

package/src/pages/PasswordInvitePage.jsx

@@ -13,6 +13,8 @@ export function PasswordInvitePage() {
   const location = useLocation();
   const navigate = useNavigate();
   const { t } = useTranslation();
+  const searchParams = new URLSearchParams(location.search);
+  const nextPath = searchParams.get('next');
 
   const [submitting, setSubmitting] = useState(false);
   const [errorKey, setErrorKey] = useState(null);
@@ -68,7 +70,10 @@ export function PasswordInvitePage() {
           ? 'Auth.RESET_PASSWORD_SUCCESS_INVITE'
           : 'Auth.RESET_PASSWORD_SUCCESS_RESET',
       );
-      navigate('/login');
+      const target = nextPath
+        ? `/login?next=${encodeURIComponent(nextPath)}`
+        : '/login';
+      navigate(target);
     } catch (err) {
       setErrorKey(err.code || 'Auth.RESET_PASSWORD_FAILED');
     } finally {

package/src/pages/SignUpPage.jsx

@@ -1,27 +1,104 @@
-// src/pages/SignUpPage.jsx
-import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
 import {
+  Alert,
   Box,
-  TextField,
   Button,
+  Stack,
+  TextField,
   Typography,
-  Alert,
 } from '@mui/material';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { NarrowPage } from '../layout/PageLayout';
-import { validateAccessCode, requestInviteWithCode } from '../auth/authApi';
+import { AuthContext } from '../auth/AuthContext';
+import { submitRegistrationRequest } from '../auth/authApi';
+
+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_HINTS = {
+  self_signup_access_code: 'Auth.SIGNUP_ACCESS_CODE_HINT',
+  self_signup_open: 'Auth.SIGNUP_OPEN_HINT',
+  self_signup_email_domain: 'Auth.SIGNUP_EMAIL_DOMAIN_HINT',
+  self_signup_qr: 'Auth.SIGNUP_QR_HINT',
+};
 
 export function SignUpPage() {
   const navigate = useNavigate();
+  const location = useLocation();
   const { t } = 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 [qrHint, setQrHint] = useState('');
+
+  const modeHint = useMemo(() => {
+    if (mode === 'self_signup_access_code') {
+      return t(
+        MODE_HINTS[mode],
+        'Use this option only if you were given an access code for signup.',
+      );
+    }
+    if (mode === 'self_signup_open') {
+      return t(
+        MODE_HINTS[mode],
+        'Use this option for direct signup without an access code.',
+      );
+    }
+    if (mode === 'self_signup_email_domain') {
+      return t(
+        MODE_HINTS[mode],
+        'Use an email address from an allowed domain for this signup flow.',
+      );
+    }
+    if (mode === 'self_signup_qr') {
+      return qrHint || t(MODE_HINTS[mode], 'Use a valid QR signup link to continue.');
+    }
+    return '';
+  }, [mode, qrHint, t]);
+
+  useEffect(() => {
+    setMode(initialMode);
+  }, [initialMode]);
+
+  useEffect(() => {
+    if (!tokenFromUrl || mode !== 'self_signup_qr') {
+      setQrHint('');
+      return undefined;
+    }
+    setQrHint(t('Auth.SIGNUP_QR_READY', 'QR signup token detected. You can complete your signup now.'));
+    return undefined;
+  }, [mode, tokenFromUrl, t]);
 
   const handleSubmit = async (event) => {
     event.preventDefault();
@@ -32,27 +109,27 @@ export function SignUpPage() {
       setErrorKey('Auth.EMAIL_REQUIRED');
       return;
     }
-    if (!accessCode) {
+
+    if (mode === 'self_signup_access_code' && !accessCode) {
       setErrorKey('Auth.SIGNUP_ACCESS_CODE_REQUIRED');
       return;
     }
 
-    setSubmitting(true);
+    if (mode === 'self_signup_qr' && !tokenFromUrl) {
+      setErrorKey('Auth.SIGNUP_QR_INVALID');
+      return;
+    }
 
+    setSubmitting(true);
     try {
-      // 1) Access-Code prüfen
-      const res = await validateAccessCode(accessCode);
-      if (!res?.valid) {
-        setErrorKey('Auth.ACCESS_CODE_INVALID_OR_INACTIVE');
-        return;
-      }
-
-      // 2) Invite anfordern
-      await requestInviteWithCode(email, accessCode);
-
+      await submitRegistrationRequest({
+        email,
+        mode,
+        accessCode,
+        registrationContextToken: mode === 'self_signup_qr' ? tokenFromUrl : null,
+      });
       setSuccessKey('Auth.INVITE_REQUEST_SUCCESS');
     } catch (err) {
-      // validateAccessCode / requestInviteWithCode liefern normalisierte Errors
       setErrorKey(err.code || 'Auth.INVITE_FAILED');
     } finally {
       setSubmitting(false);
@@ -82,15 +159,40 @@ export function SignUpPage() {
 
       {errorKey && (
         <Alert severity="error" sx={{ mb: 2 }}>
-          {t(errorKey)}
+          {t(errorKey, t('Auth.INVITE_FAILED', 'Could not complete signup.'))}
         </Alert>
       )}
 
+      {signupModes.length > 1 && (
+        <Stack spacing={1} sx={{ mb: 2 }}>
+          <Alert severity="info">
+            {t(
+              'Auth.SIGNUP_MODE_SELECTOR_HINT',
+              'Choose the signup option that matches how you want to register.',
+            )}
+          </Alert>
+          <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1} flexWrap="wrap">
+            {signupModes.map((entry) => (
+              <Button
+                key={entry}
+                variant={mode === entry ? 'contained' : 'outlined'}
+                onClick={() => setMode(entry)}
+                disabled={submitting}
+              >
+                {t(MODE_LABELS[entry] || entry, entry)}
+              </Button>
+            ))}
+          </Stack>
+        </Stack>
+      )}
+
       <Box
         component="form"
         onSubmit={handleSubmit}
         sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
       >
+        {modeHint && <Alert severity="info">{modeHint}</Alert>}
+
         <TextField
           label={t('Auth.EMAIL_LABEL')}
           type="email"
@@ -101,20 +203,33 @@ export function SignUpPage() {
           disabled={submitting}
         />
 
-        <TextField
-          label={t('Auth.ACCESS_CODE_LABEL')}
-          type="text"
-          required
-          fullWidth
-          value={accessCode}
-          onChange={(e) => setAccessCode(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}
+          />
+        )}
+
+        {mode === 'self_signup_qr' && (
+          <Stack spacing={1}>
+            <TextField
+              label={t('Auth.SIGNUP_QR_TOKEN_LABEL', 'QR token')}
+              value={tokenFromUrl}
+              fullWidth
+              InputProps={{ readOnly: true }}
+            />
+          </Stack>
+        )}
 
         <Button
           type="submit"
           variant="contained"
-          disabled={submitting}
+          disabled={submitting || signupModes.length === 0}
         >
           {submitting
             ? t('Auth.SIGNUP_SUBMITTING')