@micha.bigler/ui-core-micha 2.1.19 → 2.2.0

package/src/pages/SignUpPage.jsx

@@ -1,27 +1,74 @@
-// 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,
+  Tab,
+  Tabs,
+  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',
+};
 
 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('');
+
+  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 +79,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,10 +129,28 @@ 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 && (
+        <Tabs
+          value={mode}
+          onChange={(_event, next) => setMode(next)}
+          variant="scrollable"
+          scrollButtons="auto"
+          sx={{ mb: 2 }}
+        >
+          {signupModes.map((entry) => (
+            <Tab
+              key={entry}
+              value={entry}
+              label={t(MODE_LABELS[entry] || entry, entry)}
+            />
+          ))}
+        </Tabs>
+      )}
+
       <Box
         component="form"
         onSubmit={handleSubmit}
@@ -101,20 +166,45 @@ 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_email_domain' && (
+          <Alert severity="info">
+            {t(
+              'Auth.SIGNUP_EMAIL_DOMAIN_HINT',
+              'Only addresses from configured email domains are allowed for this signup flow.',
+            )}
+          </Alert>
+        )}
+
+        {mode === 'self_signup_qr' && (
+          <Stack spacing={1}>
+            <Alert severity="info">
+              {qrHint || t('Auth.SIGNUP_QR_HINT', 'Use a valid QR signup link to continue.')}
+            </Alert>
+            <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')