@micha.bigler/ui-core-micha 1.2.0 → 1.2.1

package/dist/components/LoginForm.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // src/auth/components/LoginForm.jsx
 import React, { useState } from 'react';
 import { Box, TextField, Button, Typography, Divider, } from '@mui/material';
 import SocialLoginButtons from './SocialLoginButtons';
-const LoginForm = ({ onSubmit, onForgotPassword, onSocialLogin, onSignUp, // <--- NEU
+const LoginForm = ({ onSubmit, onForgotPassword, onSocialLogin, onPasskeyLogin, onSignUp, // <--- NEU
 error, disabled = false, }) => {
     const [identifier, setIdentifier] = useState('');
     const [password, setPassword] = useState('');
@@ -19,6 +19,6 @@ error, disabled = false, }) => {
                     alignItems: 'center',
                     mt: 1,
                     gap: 1,
-                }, children: [_jsxs(Box, { sx: { display: 'flex', gap: 1 }, children: [_jsx(Button, { type: "submit", variant: "contained", disabled: disabled, children: "Login" }), onSignUp && (_jsx(Button, { type: "button", variant: "outlined", onClick: onSignUp, disabled: disabled, children: "Sign up" }))] }), _jsx(Button, { type: "button", variant: "outlined", onClick: onForgotPassword, disabled: disabled, children: "Forgot password?" })] }), _jsx(Divider, { sx: { my: 2 }, children: "or" }), _jsx(SocialLoginButtons, { onProviderClick: onSocialLogin }), _jsx(Divider, { sx: { my: 2 }, children: "or" }), _jsx(Box, { sx: { mt: 2, textAlign: 'center' }, children: _jsx(Button, { variant: "text", onClick: handlePasskeyLogin, disabled: submitting || !window.PublicKeyCredential, children: "Use passkey" }) })] }));
+                }, children: [_jsxs(Box, { sx: { display: 'flex', gap: 1 }, children: [_jsx(Button, { type: "submit", variant: "contained", disabled: disabled, children: "Login" }), onSignUp && (_jsx(Button, { type: "button", variant: "outlined", onClick: onSignUp, disabled: disabled, children: "Sign up" }))] }), _jsx(Button, { type: "button", variant: "outlined", onClick: onForgotPassword, disabled: disabled, children: "Forgot password?" })] }), _jsx(Divider, { sx: { my: 2 }, children: "or" }), _jsx(SocialLoginButtons, { onProviderClick: onSocialLogin }), onPasskeyLogin && (_jsxs(_Fragment, { children: [_jsx(Divider, { sx: { my: 2 }, children: "or" }), _jsx(Box, { sx: { mt: 2, textAlign: 'center' }, children: _jsx(Button, { variant: "text", type: "button", onClick: onPasskeyLogin, disabled: disabled || !window.PublicKeyCredential, children: "Use passkey" }) })] }))] }));
 };
 export default LoginForm;

package/dist/pages/LoginPage.js

@@ -45,9 +45,27 @@ export function LoginPage() {
             setError('Could not start social login.');
         }
     };
+    const handlePasskeyLogin = async () => {
+        var _a, _b;
+        setError('');
+        setSubmitting(true);
+        try {
+            const { user } = await authApi.loginWithPasskey(); // API muss natürlich implementiert sein
+            login(user);
+            navigate('/');
+        }
+        catch (err) {
+            setError(((_b = (_a = err === null || err === void 0 ? void 0 : err.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.detail) ||
+                (err === null || err === void 0 ? void 0 : err.message) ||
+                'Passkey login failed.');
+        }
+        finally {
+            setSubmitting(false);
+        }
+    };
     const handleSignUp = () => {
         navigate('/signup');
     };
-    return (_jsxs(NarrowPage, { title: "Login", children: [_jsx(Helmet, { children: _jsx("title", { children: "PROJECT_NAME \u2013 Login" }) }), error && (_jsx(Typography, { color: "error", gutterBottom: true, children: error })), _jsx(LoginForm, { onSubmit: handleSubmit, onForgotPassword: handleForgotPassword, onSocialLogin: handleSocialLogin, onSignUp: handleSignUp, error: undefined, disabled: submitting })] }));
+    return (_jsxs(NarrowPage, { title: "Login", children: [_jsx(Helmet, { children: _jsx("title", { children: "PROJECT_NAME \u2013 Login" }) }), error && (_jsx(Typography, { color: "error", gutterBottom: true, children: error })), _jsx(LoginForm, { onSubmit: handleSubmit, onForgotPassword: handleForgotPassword, onSocialLogin: handleSocialLogin, onPasskeyLogin: handlePasskeyLogin, onSignUp: handleSignUp, error: undefined, disabled: submitting })] }));
 }
 export default LoginPage;

package/package.json

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

package/src/components/LoginForm.jsx

@@ -13,6 +13,7 @@ const LoginForm = ({
   onSubmit,
   onForgotPassword,
   onSocialLogin,
+  onPasskeyLogin,
   onSignUp,      // <--- NEU
   error,
   disabled = false,
@@ -102,17 +103,22 @@ const LoginForm = ({
 
       <SocialLoginButtons onProviderClick={onSocialLogin} />
 
-      <Divider sx={{ my: 2 }}>or</Divider>
+      {onPasskeyLogin && (
+        <>
+          <Divider sx={{ my: 2 }}>or</Divider>
 
-       <Box sx={{ mt: 2, textAlign: 'center' }}>
-        <Button
-          variant="text"
-          onClick={handlePasskeyLogin}
-          disabled={submitting || !window.PublicKeyCredential}
-        >
-          Use passkey
-        </Button>
-      </Box>
+          <Box sx={{ mt: 2, textAlign: 'center' }}>
+            <Button
+              variant="text"
+              type="button"
+              onClick={onPasskeyLogin}
+              disabled={disabled || !window.PublicKeyCredential}
+            >
+              Use passkey
+            </Button>
+          </Box>
+        </>
+      )}
     </Box>
   );
 };

package/src/pages/LoginPage.jsx

@@ -47,6 +47,24 @@ export function LoginPage() {
     }
   };
 
+  const handlePasskeyLogin = async () => {
+    setError('');
+    setSubmitting(true);
+    try {
+      const { user } = await authApi.loginWithPasskey(); // API muss natürlich implementiert sein
+      login(user);
+      navigate('/');
+    } catch (err) {
+      setError(
+        err?.response?.data?.detail ||
+          err?.message ||
+          'Passkey login failed.',
+      );
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
   const handleSignUp = () => {
     navigate('/signup');
   };
@@ -67,6 +85,7 @@ export function LoginPage() {
         onSubmit={handleSubmit}
         onForgotPassword={handleForgotPassword}
         onSocialLogin={handleSocialLogin}
+        onPasskeyLogin={handlePasskeyLogin}
         onSignUp={handleSignUp}
         error={undefined}
         disabled={submitting}