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

package/dist/i18n/authTranslations.js

@@ -295,10 +295,76 @@ export const authTranslations = {
         "sw": "Tafadhali ingiza anwani ya barua pepe."
     },
     "Auth.PAGE_SIGNUP_SUBTITLE": {
-        "de": "Geben Sie Ihre E-Mail-Adresse und den Zugangscode ein, um eine Einladung anzufordern.",
-        "fr": "Saisissez votre adresse e-mail et le code d'accès pour demander une invitation.",
-        "en": "Enter your email address and access code to request an invitation.",
-        "sw": "Ingiza barua pepe yako na msimbo wa ufikiaji ili kuomba mwaliko."
+        "de": "Wählen Sie eine Registrierungsart und geben Sie die benötigten Angaben ein.",
+        "fr": "Choisissez une méthode d'inscription et saisissez les informations requises.",
+        "en": "Choose a sign-up method and enter the required details.",
+        "sw": "Chagua njia ya kujisajili na uingize taarifa zinazohitajika."
+    },
+    "Auth.PAGE_SIGNUP_SUBTITLE_ACCESS_CODE": {
+        "de": "Geben Sie Ihre E-Mail-Adresse und den erhaltenen Zugangscode ein.",
+        "fr": "Saisissez votre adresse e-mail et le code d'accès reçu.",
+        "en": "Enter your email address and the access code you received.",
+        "sw": "Ingiza anwani yako ya barua pepe na msimbo wa ufikiaji uliopokea."
+    },
+    "Auth.PAGE_SIGNUP_SUBTITLE_OPEN": {
+        "de": "Geben Sie Ihre E-Mail-Adresse ein, um sich direkt zu registrieren.",
+        "fr": "Saisissez votre adresse e-mail pour vous inscrire directement.",
+        "en": "Enter your email address to sign up directly.",
+        "sw": "Ingiza anwani yako ya barua pepe ili kujisajili moja kwa moja."
+    },
+    "Auth.PAGE_SIGNUP_SUBTITLE_EMAIL_DOMAIN": {
+        "de": "Verwenden Sie eine E-Mail-Adresse aus einer freigegebenen Domain.",
+        "fr": "Utilisez une adresse e-mail provenant d'un domaine autorisé.",
+        "en": "Use an email address from an approved domain.",
+        "sw": "Tumia anwani ya barua pepe kutoka kwenye domeni iliyoidhinishwa."
+    },
+    "Auth.PAGE_SIGNUP_SUBTITLE_QR": {
+        "de": "Öffnen Sie diese Seite über einen gültigen QR-Link und geben Sie dann Ihre E-Mail-Adresse ein.",
+        "fr": "Ouvrez cette page via un lien QR valide, puis saisissez votre adresse e-mail.",
+        "en": "Open this page from a valid QR link, then enter your email address.",
+        "sw": "Fungua ukurasa huu kupitia kiungo halali cha QR, kisha ingiza anwani yako ya barua pepe."
+    },
+    "Auth.PAGE_SIGNUP_SUBTITLE_QR_READY": {
+        "de": "Geben Sie Ihre E-Mail-Adresse ein, um die Registrierung mit diesem QR-Link abzuschließen.",
+        "fr": "Saisissez votre adresse e-mail pour terminer l'inscription avec ce lien QR.",
+        "en": "Enter your email address to complete sign-up with this QR link.",
+        "sw": "Ingiza anwani yako ya barua pepe ili kukamilisha kujisajili kwa kutumia kiungo hiki cha QR."
+    },
+    "Auth.SIGNUP_ACCESS_CODE_TAB": {
+        "de": "Mit Zugangscode",
+        "fr": "Avec code d'accès",
+        "en": "With access code",
+        "sw": "Kwa msimbo wa ufikiaji"
+    },
+    "Auth.SIGNUP_OPEN_TAB": {
+        "de": "Direkte Registrierung",
+        "fr": "Inscription directe",
+        "en": "Direct sign-up",
+        "sw": "Kujisajili moja kwa moja"
+    },
+    "Auth.SIGNUP_EMAIL_DOMAIN_TAB": {
+        "de": "Mit E-Mail-Domain",
+        "fr": "Avec domaine e-mail",
+        "en": "With email domain",
+        "sw": "Kwa domeni ya barua pepe"
+    },
+    "Auth.SIGNUP_QR_TAB": {
+        "de": "Mit QR-Link",
+        "fr": "Avec lien QR",
+        "en": "With QR link",
+        "sw": "Kwa kiungo cha QR"
+    },
+    "Auth.SIGNUP_QR_INVALID": {
+        "de": "Dieser QR-Link ist ungültig oder fehlt.",
+        "fr": "Ce lien QR est invalide ou manquant.",
+        "en": "This QR link is invalid or missing.",
+        "sw": "Kiungo hiki cha QR si sahihi au hakipo."
+    },
+    "Auth.SIGNUP_QR_TOKEN_LABEL": {
+        "de": "QR-Token",
+        "fr": "Jeton QR",
+        "en": "QR token",
+        "sw": "Tokeni ya QR"
     },
     "Auth.EMAIL_LABEL": {
         "de": "E-Mail-Adresse",

package/dist/pages/SignUpPage.js

@@ -13,11 +13,11 @@ const MODE_LABELS = {
     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',
+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();
@@ -47,33 +47,15 @@ export function SignUpPage() {
     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.');
+    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.');
         }
-        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]);
+        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(() => {
-        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();
         setSuccessKey(null);
@@ -110,7 +92,7 @@ export function SignUpPage() {
     const handleGoToLogin = () => {
         navigate('/login');
     };
-    return (_jsxs(NarrowPage, { title: t('Auth.LOGIN_SIGNUP_BUTTON'), subtitle: t('Auth.PAGE_SIGNUP_SUBTITLE'), children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('App.NAME'), " \u2013 ", t('Auth.LOGIN_SIGNUP_BUTTON')] }) }), successKey && (_jsx(Alert, { severity: "success", sx: { mb: 2 }, children: t(successKey, { email }) })), errorKey && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(errorKey, t('Auth.INVITE_FAILED', 'Could not complete signup.')) })), signupModes.length > 1 && (_jsxs(Stack, { spacing: 1, sx: { mb: 2 }, children: [_jsx(Alert, { severity: "info", children: t('Auth.SIGNUP_MODE_SELECTOR_HINT', 'Choose the signup option that matches how you want to register.') }), _jsx(Stack, { direction: { xs: 'column', sm: 'row' }, spacing: 1, flexWrap: "wrap", children: signupModes.map((entry) => (_jsx(Button, { variant: mode === entry ? 'contained' : 'outlined', onClick: () => setMode(entry), disabled: submitting, children: t(MODE_LABELS[entry] || entry, entry) }, entry))) })] })), _jsxs(Box, { component: "form", onSubmit: handleSubmit, sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [modeHint && _jsx(Alert, { severity: "info", children: modeHint }), _jsx(TextField, { label: t('Auth.EMAIL_LABEL'), type: "email", required: true, fullWidth: true, value: email, onChange: (e) => setEmail(e.target.value), disabled: submitting }), mode === 'self_signup_access_code' && (_jsx(TextField, { label: t('Auth.ACCESS_CODE_LABEL'), type: "text", required: true, fullWidth: true, value: accessCode, onChange: (e) => setAccessCode(e.target.value), disabled: submitting })), mode === 'self_signup_qr' && (_jsx(Stack, { spacing: 1, children: _jsx(TextField, { label: t('Auth.SIGNUP_QR_TOKEN_LABEL', 'QR token'), value: tokenFromUrl, fullWidth: true, InputProps: { readOnly: true } }) })), _jsx(Button, { type: "submit", variant: "contained", disabled: submitting || signupModes.length === 0, children: submitting
+    return (_jsxs(NarrowPage, { title: t('Auth.LOGIN_SIGNUP_BUTTON'), subtitle: pageSubtitle, children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('App.NAME'), " \u2013 ", t('Auth.LOGIN_SIGNUP_BUTTON')] }) }), successKey && (_jsx(Alert, { severity: "success", sx: { mb: 2 }, children: t(successKey, { email }) })), errorKey && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(errorKey, t('Auth.INVITE_FAILED', 'Could not complete signup.')) })), signupModes.length > 1 && (_jsx(Stack, { spacing: 1, sx: { mb: 2 }, children: _jsx(Stack, { spacing: 1, children: signupModes.map((entry) => (_jsx(Button, { variant: mode === entry ? 'contained' : 'outlined', onClick: () => setMode(entry), disabled: submitting, fullWidth: true, children: t(MODE_LABELS[entry] || entry, entry) }, entry))) }) })), _jsxs(Box, { component: "form", onSubmit: handleSubmit, sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(TextField, { label: t('Auth.EMAIL_LABEL'), type: "email", required: true, fullWidth: true, value: email, onChange: (e) => setEmail(e.target.value), disabled: submitting }), mode === 'self_signup_access_code' && (_jsx(TextField, { label: t('Auth.ACCESS_CODE_LABEL'), type: "text", required: true, fullWidth: true, value: accessCode, onChange: (e) => setAccessCode(e.target.value), disabled: submitting })), mode === 'self_signup_qr' && (_jsx(Stack, { spacing: 1, children: _jsx(TextField, { label: t('Auth.SIGNUP_QR_TOKEN_LABEL', 'QR token'), value: tokenFromUrl, fullWidth: true, InputProps: { readOnly: true } }) })), _jsx(Button, { type: "submit", variant: "contained", disabled: submitting || signupModes.length === 0, children: submitting
                             ? t('Auth.SIGNUP_SUBMITTING')
                             : t('Auth.SIGNUP_SUBMIT') })] }), _jsx(Box, { sx: { mt: 3 }, children: _jsxs(Typography, { variant: "body2", children: [t('Auth.SIGNUP_ALREADY_HAVE_ACCOUNT'), ' ', _jsx(Button, { onClick: handleGoToLogin, variant: "text", size: "small", children: t('Auth.SIGNUP_GO_TO_LOGIN') })] }) })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "private": false,

package/src/i18n/authTranslations.ts

@@ -333,10 +333,76 @@ export const authTranslations = {
     "sw": "Tafadhali ingiza anwani ya barua pepe."
   },
   "Auth.PAGE_SIGNUP_SUBTITLE": {
-    "de": "Geben Sie Ihre E-Mail-Adresse und den Zugangscode ein, um eine Einladung anzufordern.",
-    "fr": "Saisissez votre adresse e-mail et le code d'accès pour demander une invitation.",
-    "en": "Enter your email address and access code to request an invitation.",
-    "sw": "Ingiza barua pepe yako na msimbo wa ufikiaji ili kuomba mwaliko."
+    "de": "Wählen Sie eine Registrierungsart und geben Sie die benötigten Angaben ein.",
+    "fr": "Choisissez une méthode d'inscription et saisissez les informations requises.",
+    "en": "Choose a sign-up method and enter the required details.",
+    "sw": "Chagua njia ya kujisajili na uingize taarifa zinazohitajika."
+  },
+  "Auth.PAGE_SIGNUP_SUBTITLE_ACCESS_CODE": {
+    "de": "Geben Sie Ihre E-Mail-Adresse und den erhaltenen Zugangscode ein.",
+    "fr": "Saisissez votre adresse e-mail et le code d'accès reçu.",
+    "en": "Enter your email address and the access code you received.",
+    "sw": "Ingiza anwani yako ya barua pepe na msimbo wa ufikiaji uliopokea."
+  },
+  "Auth.PAGE_SIGNUP_SUBTITLE_OPEN": {
+    "de": "Geben Sie Ihre E-Mail-Adresse ein, um sich direkt zu registrieren.",
+    "fr": "Saisissez votre adresse e-mail pour vous inscrire directement.",
+    "en": "Enter your email address to sign up directly.",
+    "sw": "Ingiza anwani yako ya barua pepe ili kujisajili moja kwa moja."
+  },
+  "Auth.PAGE_SIGNUP_SUBTITLE_EMAIL_DOMAIN": {
+    "de": "Verwenden Sie eine E-Mail-Adresse aus einer freigegebenen Domain.",
+    "fr": "Utilisez une adresse e-mail provenant d'un domaine autorisé.",
+    "en": "Use an email address from an approved domain.",
+    "sw": "Tumia anwani ya barua pepe kutoka kwenye domeni iliyoidhinishwa."
+  },
+  "Auth.PAGE_SIGNUP_SUBTITLE_QR": {
+    "de": "Öffnen Sie diese Seite über einen gültigen QR-Link und geben Sie dann Ihre E-Mail-Adresse ein.",
+    "fr": "Ouvrez cette page via un lien QR valide, puis saisissez votre adresse e-mail.",
+    "en": "Open this page from a valid QR link, then enter your email address.",
+    "sw": "Fungua ukurasa huu kupitia kiungo halali cha QR, kisha ingiza anwani yako ya barua pepe."
+  },
+  "Auth.PAGE_SIGNUP_SUBTITLE_QR_READY": {
+    "de": "Geben Sie Ihre E-Mail-Adresse ein, um die Registrierung mit diesem QR-Link abzuschließen.",
+    "fr": "Saisissez votre adresse e-mail pour terminer l'inscription avec ce lien QR.",
+    "en": "Enter your email address to complete sign-up with this QR link.",
+    "sw": "Ingiza anwani yako ya barua pepe ili kukamilisha kujisajili kwa kutumia kiungo hiki cha QR."
+  },
+  "Auth.SIGNUP_ACCESS_CODE_TAB": {
+    "de": "Mit Zugangscode",
+    "fr": "Avec code d'accès",
+    "en": "With access code",
+    "sw": "Kwa msimbo wa ufikiaji"
+  },
+  "Auth.SIGNUP_OPEN_TAB": {
+    "de": "Direkte Registrierung",
+    "fr": "Inscription directe",
+    "en": "Direct sign-up",
+    "sw": "Kujisajili moja kwa moja"
+  },
+  "Auth.SIGNUP_EMAIL_DOMAIN_TAB": {
+    "de": "Mit E-Mail-Domain",
+    "fr": "Avec domaine e-mail",
+    "en": "With email domain",
+    "sw": "Kwa domeni ya barua pepe"
+  },
+  "Auth.SIGNUP_QR_TAB": {
+    "de": "Mit QR-Link",
+    "fr": "Avec lien QR",
+    "en": "With QR link",
+    "sw": "Kwa kiungo cha QR"
+  },
+  "Auth.SIGNUP_QR_INVALID": {
+    "de": "Dieser QR-Link ist ungültig oder fehlt.",
+    "fr": "Ce lien QR est invalide ou manquant.",
+    "en": "This QR link is invalid or missing.",
+    "sw": "Kiungo hiki cha QR si sahihi au hakipo."
+  },
+  "Auth.SIGNUP_QR_TOKEN_LABEL": {
+    "de": "QR-Token",
+    "fr": "Jeton QR",
+    "en": "QR token",
+    "sw": "Tokeni ya QR"
   },
 
   "Auth.EMAIL_LABEL": {

package/src/pages/SignUpPage.jsx

@@ -21,11 +21,11 @@ const MODE_LABELS = {
   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',
+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() {
@@ -60,46 +60,24 @@ export function SignUpPage() {
   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') {
+  const pageSubtitle = useMemo(() => {
+    if (mode === 'self_signup_qr' && tokenFromUrl) {
       return t(
-        MODE_HINTS[mode],
-        'Use this option only if you were given an access code for signup.',
+        'Auth.PAGE_SIGNUP_SUBTITLE_QR_READY',
+        'Enter your email address to complete sign-up with the QR link you opened.',
       );
     }
-    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]);
+    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(() => {
-    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();
     setSuccessKey(null);
@@ -143,7 +121,7 @@ export function SignUpPage() {
   return (
     <NarrowPage
       title={t('Auth.LOGIN_SIGNUP_BUTTON')}
-      subtitle={t('Auth.PAGE_SIGNUP_SUBTITLE')}
+      subtitle={pageSubtitle}
     >
       <Helmet>
         <title>
@@ -165,19 +143,14 @@ export function SignUpPage() {
 
       {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">
+          <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>
@@ -191,8 +164,6 @@ export function SignUpPage() {
         onSubmit={handleSubmit}
         sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
       >
-        {modeHint && <Alert severity="info">{modeHint}</Alert>}
-
         <TextField
           label={t('Auth.EMAIL_LABEL')}
           type="email"