@micha.bigler/ui-core-micha 1.4.5 → 1.4.7

package/dist/components/LoginForm.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // src/auth/components/LoginForm.jsx
 import React, { useState } from 'react';
 import { Box, TextField, Button, Typography, Divider, } from '@mui/material';
@@ -15,12 +15,9 @@ disabled = false, }) => {
             return;
         onSubmit({ identifier, password });
     };
-    return (_jsxs(Box, { component: "form", onSubmit: handleSubmit, sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [error && (_jsx(Typography, { color: "error", gutterBottom: true, children: error })), _jsx(TextField, { label: t('Auth.LOGIN_EMAIL_LABEL'), type: "email", required: true, fullWidth: true, value: identifier, onChange: (e) => setIdentifier(e.target.value), disabled: disabled }), _jsx(TextField, { label: t('Auth.LOGIN_PASSWORD_LABEL'), type: "password", required: true, fullWidth: true, value: password, onChange: (e) => setPassword(e.target.value), disabled: disabled }), _jsxs(Box, { sx: {
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    mt: 1,
-                    gap: 1,
-                }, children: [_jsxs(Box, { sx: { display: 'flex', gap: 1 }, children: [_jsx(Button, { type: "submit", variant: "contained", disabled: disabled, children: t('Auth.LOGIN_SUBMIT') }), onSignUp && (_jsx(Button, { type: "button", variant: "outlined", onClick: onSignUp, disabled: disabled, children: t('Auth.LOGIN_SIGNUP_BUTTON') }))] }), _jsx(Button, { type: "button", variant: "outlined", onClick: onForgotPassword, disabled: disabled, children: t('Auth.LOGIN_FORGOT_PASSWORD_LINK') })] }), _jsx(Divider, { sx: { my: 2 }, children: t('Auth.LOGIN_OR') }), _jsx(SocialLoginButtons, { onProviderClick: onSocialLogin }), onPasskeyLogin && (_jsxs(_Fragment, { children: [_jsx(Divider, { sx: { my: 2 }, children: t('Auth.LOGIN_OR') }), _jsx(Box, { sx: { mt: 2, textAlign: 'center' }, children: _jsx(Button, { variant: "text", type: "button", onClick: onPasskeyLogin, disabled: disabled || !window.PublicKeyCredential, children: t('Auth.LOGIN_USE_PASSKEY_BUTTON') }) })] }))] }));
+    const supportsPasskey = !!onPasskeyLogin &&
+        typeof window !== 'undefined' &&
+        !!window.PublicKeyCredential;
+    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 3 }, children: [error && (_jsx(Typography, { color: "error", gutterBottom: true, children: error })), supportsPasskey && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "contained", fullWidth: true, type: "button", onClick: onPasskeyLogin, disabled: disabled, children: t('Auth.LOGIN_USE_PASSKEY_BUTTON') }), _jsx(Divider, { sx: { my: 2 }, children: t('Auth.LOGIN_OR') })] })), _jsxs(Box, { component: "form", onSubmit: handleSubmit, sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(TextField, { label: t('Auth.LOGIN_EMAIL_LABEL'), type: "email", required: true, fullWidth: true, value: identifier, onChange: (e) => setIdentifier(e.target.value), disabled: disabled }), _jsx(TextField, { label: t('Auth.LOGIN_PASSWORD_LABEL'), type: "password", required: true, fullWidth: true, value: password, onChange: (e) => setPassword(e.target.value), disabled: disabled }), _jsx(Button, { type: "submit", variant: "contained", fullWidth: true, disabled: disabled, children: t('Auth.LOGIN_SUBMIT') })] }), _jsxs(Box, { children: [_jsx(Typography, { variant: "subtitle2", sx: { mb: 1 }, children: t('Auth.LOGIN_OTHER_METHODS_TITLE') }), _jsx(SocialLoginButtons, { onProviderClick: onSocialLogin })] }), _jsxs(Box, { children: [_jsx(Typography, { variant: "subtitle2", sx: { mb: 1 }, children: t('Auth.LOGIN_ACCOUNT_RECOVERY_TITLE') }), _jsxs(Box, { sx: { display: 'flex', gap: 1, flexWrap: 'wrap' }, children: [onSignUp && (_jsx(Button, { type: "button", variant: "outlined", onClick: onSignUp, disabled: disabled, children: t('Auth.LOGIN_SIGNUP_BUTTON') })), _jsx(Button, { type: "button", variant: "outlined", onClick: onForgotPassword, disabled: disabled, children: t('Auth.LOGIN_FORGOT_PASSWORD_BUTTON') })] })] })] }));
 };
 export default LoginForm;

package/dist/i18n/authTranslations.js

@@ -426,7 +426,7 @@ export const authTranslations = {
         "fr": "Créer un compte",
         "en": "Sign up"
     },
-    "Auth.LOGIN_FORGOT_PASSWORD_LINK": {
+    "Auth.LOGIN_FORGOT_PASSWORD_BUTTON": {
         "de": "Passwort vergessen?",
         "fr": "Mot de passe oublié ?",
         "en": "Forgot password?"
@@ -825,6 +825,16 @@ export const authTranslations = {
         "de": "Die Support-Anfrage konnte nicht gesendet werden. Bitte versuche es später erneut oder kontaktiere den Support direkt.",
         "fr": "La demande d'assistance n'a pas pu être envoyée. Veuillez réessayer plus tard ou contacter le support directement.",
         "en": "Could not send the support request. Please try again later or contact support directly."
-    }
+    },
+    "Auth.LOGIN_OTHER_METHODS_TITLE": {
+        "de": "Andere Anmeldemethoden",
+        "fr": "Autres méthodes de connexion",
+        "en": "Other sign-in methods"
+    },
+    "Auth.LOGIN_ACCOUNT_RECOVERY_TITLE": {
+        "de": "Konto-Wiederherstellung",
+        "fr": "Récupération de compte",
+        "en": "Account recovery"
+    },
     // ...
 };

package/package.json

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

package/src/components/LoginForm.jsx

@@ -30,102 +30,110 @@ const LoginForm = ({
     onSubmit({ identifier, password });
   };
 
+  const supportsPasskey =
+    !!onPasskeyLogin &&
+    typeof window !== 'undefined' &&
+    !!window.PublicKeyCredential;
+
   return (
-    <Box
-      component="form"
-      onSubmit={handleSubmit}
-      sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
-    >
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
       {error && (
         <Typography color="error" gutterBottom>
           {error}
         </Typography>
       )}
 
-      <TextField
-        label={t('Auth.LOGIN_EMAIL_LABEL')}
-        type="email"
-        required
-        fullWidth
-        value={identifier}
-        onChange={(e) => setIdentifier(e.target.value)}
-        disabled={disabled}
-      />
-
-      <TextField
-        label={t('Auth.LOGIN_PASSWORD_LABEL')}
-        type="password"
-        required
-        fullWidth
-        value={password}
-        onChange={(e) => setPassword(e.target.value)}
-        disabled={disabled}
-      />
-
-      <Box
-        sx={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          mt: 1,
-          gap: 1,
-        }}
-      >
-        <Box sx={{ display: 'flex', gap: 1 }}>
+      {/* Sign in: Passkey zuerst, falls verfügbar */}
+      {supportsPasskey && (
+        <>
           <Button
-            type="submit"
             variant="contained"
+            fullWidth
+            type="button"
+            onClick={onPasskeyLogin}
             disabled={disabled}
           >
-            {t('Auth.LOGIN_SUBMIT')}
+            {t('Auth.LOGIN_USE_PASSKEY_BUTTON')}
           </Button>
 
-          {onSignUp && (
-            <Button
-              type="button"
-              variant="outlined"
-              onClick={onSignUp}
-              disabled={disabled}
-            >
-              {t('Auth.LOGIN_SIGNUP_BUTTON')}
-            </Button>
-          )}
-        </Box>
+          <Divider sx={{ my: 2 }}>
+            {t('Auth.LOGIN_OR')}
+          </Divider>
+        </>
+      )}
+
+      {/* Sign in: E-Mail + Passwort */}
+      <Box
+        component="form"
+        onSubmit={handleSubmit}
+        sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
+      >
+        <TextField
+          label={t('Auth.LOGIN_EMAIL_LABEL')}
+          type="email"
+          required
+          fullWidth
+          value={identifier}
+          onChange={(e) => setIdentifier(e.target.value)}
+          disabled={disabled}
+        />
+
+        <TextField
+          label={t('Auth.LOGIN_PASSWORD_LABEL')}
+          type="password"
+          required
+          fullWidth
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          disabled={disabled}
+        />
 
         <Button
-          type="button"
-          variant="outlined"
-          onClick={onForgotPassword}
+          type="submit"
+          variant="contained"
+          fullWidth
           disabled={disabled}
         >
-          {t('Auth.LOGIN_FORGOT_PASSWORD_LINK')}
+          {t('Auth.LOGIN_SUBMIT')}
         </Button>
       </Box>
 
-      <Divider sx={{ my: 2 }}>
-        {t('Auth.LOGIN_OR')}
-      </Divider>
-
-      <SocialLoginButtons onProviderClick={onSocialLogin} />
+      {/* Other ways to sign in */}
+      <Box>
+        <Typography variant="subtitle2" sx={{ mb: 1 }}>
+          {t('Auth.LOGIN_OTHER_METHODS_TITLE')}
+        </Typography>
+        <SocialLoginButtons onProviderClick={onSocialLogin} />
+      </Box>
 
-      {onPasskeyLogin && (
-        <>
-          <Divider sx={{ my: 2 }}>
-            {t('Auth.LOGIN_OR')}
-          </Divider>
+      {/* Account & Recovery */}
+      <Box>
+        <Typography variant="subtitle2" sx={{ mb: 1 }}>
+          {t('Auth.LOGIN_ACCOUNT_RECOVERY_TITLE')}
+        </Typography>
 
-          <Box sx={{ mt: 2, textAlign: 'center' }}>
+        <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
+          {onSignUp && (
             <Button
-              variant="text"
               type="button"
-              onClick={onPasskeyLogin}
-              disabled={disabled || !window.PublicKeyCredential}
+              variant="outlined"
+              onClick={onSignUp}
+              disabled={disabled}
             >
-              {t('Auth.LOGIN_USE_PASSKEY_BUTTON')}
+              {t('Auth.LOGIN_SIGNUP_BUTTON')}
             </Button>
-          </Box>
-        </>
-      )}
+          )}
+
+          <Button
+            type="button"
+            variant="outlined"
+            onClick={onForgotPassword}
+            disabled={disabled}
+          >
+            {t('Auth.LOGIN_FORGOT_PASSWORD_BUTTON')}
+          </Button>
+        </Box>
+      </Box>
     </Box>
   );
 };

package/src/i18n/authTranslations.js

@@ -469,7 +469,7 @@ export const authTranslations = {
     "fr": "Créer un compte",
     "en": "Sign up"
   },
-  "Auth.LOGIN_FORGOT_PASSWORD_LINK": {
+  "Auth.LOGIN_FORGOT_PASSWORD_BUTTON": {
     "de": "Passwort vergessen?",
     "fr": "Mot de passe oublié ?",
     "en": "Forgot password?"
@@ -872,7 +872,17 @@ export const authTranslations = {
   "de": "Die Support-Anfrage konnte nicht gesendet werden. Bitte versuche es später erneut oder kontaktiere den Support direkt.",
   "fr": "La demande d'assistance n'a pas pu être envoyée. Veuillez réessayer plus tard ou contacter le support directement.",
   "en": "Could not send the support request. Please try again later or contact support directly."
-}
+},
+"Auth.LOGIN_OTHER_METHODS_TITLE": {
+  "de": "Andere Anmeldemethoden",
+  "fr": "Autres méthodes de connexion",
+  "en": "Other sign-in methods"
+},
+"Auth.LOGIN_ACCOUNT_RECOVERY_TITLE": {
+  "de": "Konto-Wiederherstellung",
+  "fr": "Récupération de compte",
+  "en": "Account recovery"
+},