@micha.bigler/ui-core-micha 1.4.23 → 1.4.25

package/dist/auth/authApi.js

@@ -1,6 +1,6 @@
 import apiClient from './apiClient';
 import { HEADLESS_BASE, USERS_BASE, ACCESS_CODES_BASE } from './authConfig';
-import { normaliseApiError } from '../utils/errors'; // Beachte den Pfad zu deiner errors.js
+import { normaliseApiError } from '../utils/auth-errors'; // Beachte den Pfad zu deiner errors.js
 // --- Internal Helper for CSRF ---
 function getCsrfToken() {
     if (typeof document === 'undefined' || !document.cookie)

package/dist/components/PasskeysComponent.js

@@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react';
 import { Box, Typography, Stack, Button, TextField, IconButton, CircularProgress, Alert, List, ListItem, ListItemText, ListItemSecondaryAction, Tooltip, Divider, } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { useTranslation } from 'react-i18next';
-import { fetchPasskeys, registerPasskey, deletePasskey } from '../auth/authApi';
+import { fetchPasskeys, deletePasskey } from '../auth/authApi';
 import { registerPasskey } from '../utils/authService';
 import { FEATURES } from '../auth/authConfig';
 const PasskeysComponent = () => {

package/dist/pages/LoginPage.js

@@ -1,42 +1,61 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import React, { useState, useContext } from 'react';
+import React, { useState, useContext, useEffect } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
-import { Typography, Box, Alert } from '@mui/material';
+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 { loginWithRecoveryPassword, loginWithPassword } from '../auth/authApi';
 import { loginWithPasskey, startSocialLogin } from '../utils/authService';
+// Components
 import LoginForm from '../components/LoginForm';
 import MfaLoginComponent from '../components/MfaLoginComponent';
-import { useTranslation } from 'react-i18next';
 export function LoginPage() {
     const navigate = useNavigate();
     const location = useLocation();
     const { login } = useContext(AuthContext);
+    const { t } = 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: [...] }
-    const { t } = useTranslation();
-    // Read recovery token + prefill email from query params
+    const [mfaState, setMfaState] = useState(null); // { availableTypes: [...], identifier }
+    // URL Params parsing
     const params = new URLSearchParams(location.search);
     const recoveryToken = params.get('recovery');
+    // Auto-fill email if provided in URL (UX improvement)
     const recoveryEmail = params.get('email') || '';
-    const handleSubmitCredentials = async ({ identifier, password }) => {
+    // --- Helper: Central Success Logic ---
+    const handleLoginSuccess = (user) => {
         var _a;
+        login(user); // Update Context
+        // Check if "Strong Security" is enforced/required but not met
+        const requiresExtra = ((_a = user.security_state) === null || _a === void 0 ? void 0 : _a.requires_additional_security) === true;
+        if (requiresExtra) {
+            navigate('/account?tab=security&from=weak_login');
+        }
+        else {
+            // Standard Redirect (könnte man noch mit ?next=... erweitern)
+            navigate('/');
+        }
+    };
+    // --- Handlers ---
+    const handleSubmitCredentials = async ({ identifier, password }) => {
         setErrorKey(null);
         setSubmitting(true);
         try {
-            // Recovery flow: password login via special endpoint, no MFA
+            // A) Recovery Flow
             if (recoveryToken) {
                 const result = await loginWithRecoveryPassword(identifier, password, recoveryToken);
-                const user = result.user;
-                login(user);
+                // Recovery login implies a specific redirect usually, usually straight to security settings
+                login(result.user);
                 navigate('/account?tab=security&from=recovery');
                 return;
             }
-            // Normal login flow via headless allauth
+            // B) Standard Password Login
             const result = await loginWithPassword(identifier, password);
             if (result.needsMfa) {
                 setMfaState({
@@ -46,15 +65,7 @@ export function LoginPage() {
                 setStep('mfa');
             }
             else {
-                const user = result.user;
-                login(user);
-                const requiresExtra = ((_a = user.security_state) === null || _a === void 0 ? void 0 : _a.requires_additional_security) === true;
-                if (requiresExtra) {
-                    navigate('/account?tab=security&from=weak_login');
-                }
-                else {
-                    navigate('/');
-                }
+                handleLoginSuccess(result.user);
             }
         }
         catch (err) {
@@ -65,37 +76,32 @@ export function LoginPage() {
         }
     };
     const handlePasskeyLoginInitial = async () => {
-        var _a;
         setErrorKey(null);
         setSubmitting(true);
         try {
+            // Service handles browser interaction + API calls
             const { user } = await loginWithPasskey();
-            login(user);
-            const requiresExtra = ((_a = user.security_state) === null || _a === void 0 ? void 0 : _a.requires_additional_security) === true;
-            if (requiresExtra) {
-                navigate('/account?tab=security&from=weak_login');
-            }
-            else {
-                navigate('/');
-            }
+            handleLoginSuccess(user);
         }
         catch (err) {
-            setErrorKey(err.code || 'Auth.PASSKEY_FAILED');
+            // 'Auth.PASSKEY_CANCELLED' is generic, maybe ignore visually or show specific hint
+            if (err.code !== 'Auth.PASSKEY_CANCELLED') {
+                setErrorKey(err.code || 'Auth.PASSKEY_FAILED');
+            }
         }
         finally {
             setSubmitting(false);
         }
     };
-    const handleSocialLogin = (provider) => startSocialLogin(provider);
-    const handleSignUp = () => navigate('/signup');
-    const handleForgotPassword = () => navigate('/reset-request-password');
     const handleMfaSuccess = ({ user, method }) => {
-        login(user);
+        // 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');
         }
         else {
-            navigate('/');
+            handleLoginSuccess(user);
         }
     };
     const handleMfaCancel = () => {
@@ -103,6 +109,7 @@ export function LoginPage() {
         setMfaState(null);
         setErrorKey(null);
     };
-    return (_jsxs(NarrowPage, { title: t('Auth.PAGE_LOGIN_TITLE'), subtitle: t('Auth.PAGE_LOGIN_SUBTITLE'), children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('App.NAME'), " \u2013 ", t('Auth.PAGE_LOGIN_TITLE')] }) }), errorKey && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(errorKey) })), recoveryToken && !errorKey && (_jsx(Alert, { severity: "info", sx: { mb: 2 }, children: t('Auth.RECOVERY_LOGIN_WARNING', 'Your recovery link was validated. Please sign in with your password to continue.') })), step === 'credentials' && (_jsx(LoginForm, { onSubmit: handleSubmitCredentials, onForgotPassword: handleForgotPassword, onSocialLogin: handleSocialLogin, onPasskeyLogin: handlePasskeyLoginInitial, onSignUp: handleSignUp, disabled: submitting, initialIdentifier: recoveryEmail })), step === 'mfa' && mfaState && (_jsx(Box, { children: _jsx(MfaLoginComponent, { availableTypes: mfaState.availableTypes, identifier: mfaState.identifier, onSuccess: handleMfaSuccess, onCancel: handleMfaCancel }) }))] }));
+    // --- Render ---
+    return (_jsxs(NarrowPage, { title: t('Auth.PAGE_LOGIN_TITLE'), subtitle: t('Auth.PAGE_LOGIN_SUBTITLE'), children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('App.NAME'), " \u2013 ", t('Auth.PAGE_LOGIN_TITLE')] }) }), errorKey && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(errorKey) })), recoveryToken && !errorKey && (_jsx(Alert, { severity: "info", sx: { mb: 2 }, children: t('Auth.RECOVERY_LOGIN_WARNING', 'Recovery link validated. Please enter your password.') })), step === 'credentials' && (_jsx(LoginForm, { onSubmit: handleSubmitCredentials, onForgotPassword: () => navigate('/reset-request-password'), onSocialLogin: (provider) => startSocialLogin(provider), onPasskeyLogin: handlePasskeyLoginInitial, onSignUp: () => navigate('/signup'), disabled: submitting, initialIdentifier: recoveryEmail })), step === 'mfa' && mfaState && (_jsx(Box, { children: _jsx(MfaLoginComponent, { availableTypes: mfaState.availableTypes, identifier: mfaState.identifier, onSuccess: handleMfaSuccess, onCancel: handleMfaCancel }) }))] }));
 }
 export default LoginPage;

package/dist/utils/{errors.js → auth-errors.js}

@@ -1,4 +1,4 @@
-// src/utils/errors.js
+// src/utils/auth-errors.js
 export function extractErrorInfo(error) {
     var _a, _b, _c, _d;
     const status = (_b = (_a = error.response) === null || _a === void 0 ? void 0 : _a.status) !== null && _b !== void 0 ? _b : null;

package/package.json

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

package/src/auth/authApi.jsx

@@ -1,6 +1,6 @@
 import apiClient from './apiClient';
 import { HEADLESS_BASE, USERS_BASE, ACCESS_CODES_BASE } from './authConfig';
-import { normaliseApiError } from '../utils/errors'; // Beachte den Pfad zu deiner errors.js
+import { normaliseApiError } from '../utils/auth-errors'; // Beachte den Pfad zu deiner errors.js
 
 // --- Internal Helper for CSRF ---
 function getCsrfToken() {

package/src/components/PasskeysComponent.jsx

@@ -18,7 +18,7 @@ import {
 } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { useTranslation } from 'react-i18next';
-import { fetchPasskeys, registerPasskey, deletePasskey } from '../auth/authApi';
+import { fetchPasskeys, deletePasskey } from '../auth/authApi';
 import { registerPasskey } from '../utils/authService';
 import { FEATURES } from '../auth/authConfig';
 

package/src/pages/LoginPage.jsx

@@ -1,51 +1,74 @@
-import React, { useState, useContext } from 'react';
+import React, { useState, useContext, useEffect } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
-import { Typography, Box, Alert } from '@mui/material';
+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 { loginWithRecoveryPassword, loginWithPassword } from '../auth/authApi';
 import { loginWithPasskey, startSocialLogin } from '../utils/authService';
+
+// Components
 import LoginForm from '../components/LoginForm';
 import MfaLoginComponent from '../components/MfaLoginComponent';
-import { useTranslation } from 'react-i18next';
 
 export function LoginPage() {
   const navigate = useNavigate();
   const location = useLocation();
   const { login } = useContext(AuthContext);
+  const { t } = 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: [...] }
-
-  const { t } = useTranslation();
+  const [mfaState, setMfaState] = useState(null); // { availableTypes: [...], identifier }
 
-  // Read recovery token + prefill email from query params
+  // URL Params parsing
   const params = new URLSearchParams(location.search);
   const recoveryToken = params.get('recovery');
+  // Auto-fill email if provided in URL (UX improvement)
   const recoveryEmail = params.get('email') || '';
 
+  // --- 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('/');
+    }
+  };
+
+  // --- Handlers ---
+
   const handleSubmitCredentials = async ({ identifier, password }) => {
     setErrorKey(null);
     setSubmitting(true);
     try {
-      // Recovery flow: password login via special endpoint, no MFA
+      // A) Recovery Flow
       if (recoveryToken) {
         const result = await loginWithRecoveryPassword(
           identifier,
           password,
-          recoveryToken,
+          recoveryToken
         );
-
-        const user = result.user;
-        login(user);
+        // Recovery login implies a specific redirect usually, usually straight to security settings
+        login(result.user);
         navigate('/account?tab=security&from=recovery');
         return;
       }
 
-      // Normal login flow via headless allauth
+      // B) Standard Password Login
       const result = await loginWithPassword(identifier, password);
 
       if (result.needsMfa) {
@@ -55,17 +78,7 @@ export function LoginPage() {
         });
         setStep('mfa');
       } else {
-        const user = result.user;
-        login(user);
-
-        const requiresExtra =
-          user.security_state?.requires_additional_security === true;
-
-        if (requiresExtra) {
-          navigate('/account?tab=security&from=weak_login');
-        } else {
-          navigate('/');
-        }
+        handleLoginSuccess(result.user);
       }
     } catch (err) {
       setErrorKey(err.code || 'Auth.LOGIN_FAILED');
@@ -78,35 +91,27 @@ export function LoginPage() {
     setErrorKey(null);
     setSubmitting(true);
     try {
+      // Service handles browser interaction + API calls
       const { user } = await loginWithPasskey();
-      login(user);
-
-      const requiresExtra =
-        user.security_state?.requires_additional_security === true;
-
-      if (requiresExtra) {
-        navigate('/account?tab=security&from=weak_login');
-      } else {
-        navigate('/');
-      }
+      handleLoginSuccess(user);
     } catch (err) {
-      setErrorKey(err.code || 'Auth.PASSKEY_FAILED');
+      // 'Auth.PASSKEY_CANCELLED' is generic, maybe ignore visually or show specific hint
+      if (err.code !== 'Auth.PASSKEY_CANCELLED') {
+         setErrorKey(err.code || 'Auth.PASSKEY_FAILED');
+      }
     } finally {
       setSubmitting(false);
     }
   };
 
-  const handleSocialLogin = (provider) => startSocialLogin(provider);
-  const handleSignUp = () => navigate('/signup');
-  const handleForgotPassword = () => navigate('/reset-request-password');
-
   const handleMfaSuccess = ({ user, method }) => {
-    login(user);
-
+    // 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');
     } else {
-      navigate('/');
+      handleLoginSuccess(user);
     }
   };
 
@@ -116,15 +121,15 @@ export function LoginPage() {
     setErrorKey(null);
   };
 
+  // --- 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>
+        <title>{t('App.NAME')} – {t('Auth.PAGE_LOGIN_TITLE')}</title>
       </Helmet>
 
       {errorKey && (
@@ -135,20 +140,17 @@ export function LoginPage() {
 
       {recoveryToken && !errorKey && (
         <Alert severity="info" sx={{ mb: 2 }}>
-          {t(
-            'Auth.RECOVERY_LOGIN_WARNING',
-            'Your recovery link was validated. Please sign in with your password to continue.',
-          )}
+          {t('Auth.RECOVERY_LOGIN_WARNING', 'Recovery link validated. Please enter your password.')}
         </Alert>
       )}
 
       {step === 'credentials' && (
         <LoginForm
           onSubmit={handleSubmitCredentials}
-          onForgotPassword={handleForgotPassword}
-          onSocialLogin={handleSocialLogin}
-          onPasskeyLogin={handlePasskeyLoginInitial} // Passkey as first factor
-          onSignUp={handleSignUp}
+          onForgotPassword={() => navigate('/reset-request-password')}
+          onSocialLogin={(provider) => startSocialLogin(provider)}
+          onPasskeyLogin={handlePasskeyLoginInitial}
+          onSignUp={() => navigate('/signup')}
           disabled={submitting}
           initialIdentifier={recoveryEmail}
         />
@@ -156,6 +158,7 @@ export function LoginPage() {
 
       {step === 'mfa' && mfaState && (
         <Box>
+           {/* Assuming MfaLoginComponent handles the API call to authenticateWithMFA */}
           <MfaLoginComponent
             availableTypes={mfaState.availableTypes}
             identifier={mfaState.identifier}
@@ -168,4 +171,4 @@ export function LoginPage() {
   );
 }
 
-export default LoginPage;
+export default LoginPage;

package/src/utils/{errors.js → auth-errors.js}

@@ -1,4 +1,4 @@
-// src/utils/errors.js
+// src/utils/auth-errors.js
 export function extractErrorInfo(error) {
   const status = error.response?.status ?? null;
   const data = error.response?.data ?? null;

package/dist/auth/webauthnClient.js

@@ -1,10 +0,0 @@
-//src/auth/webauthnclient.jsx
-export async function registerPasskeyStart() {
-    const res = await apiClient.post(`${HEADLESS_BASE}/mfa/webauthn/register/start`, {}, { withCredentials: true });
-    return res.data; // enthält challenge, rpId etc.
-}
-export async function registerPasskeyComplete(publicKeyCredential) {
-    const payload = serializePublicKeyCredential(publicKeyCredential);
-    const res = await apiClient.post(`${HEADLESS_BASE}/mfa/webauthn/register/complete`, payload, { withCredentials: true });
-    return res.data;
-}

package/src/auth/webauthnClient.jsx

@@ -1,19 +0,0 @@
-//src/auth/webauthnclient.jsx
-export async function registerPasskeyStart() {
-  const res = await apiClient.post(
-    `${HEADLESS_BASE}/mfa/webauthn/register/start`,
-    {},
-    { withCredentials: true },
-  );
-  return res.data; // enthält challenge, rpId etc.
-}
-
-export async function registerPasskeyComplete(publicKeyCredential) {
-  const payload = serializePublicKeyCredential(publicKeyCredential);
-  const res = await apiClient.post(
-    `${HEADLESS_BASE}/mfa/webauthn/register/complete`,
-    payload,
-    { withCredentials: true },
-  );
-  return res.data;
-}