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

package/dist/components/LoginForm.js

@@ -18,6 +18,6 @@ disabled = false, }) => {
     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') })] })] })] }));
+    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.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, { sx: { display: 'flex', flexDirection: 'column', gap: 3 }, children: [_jsx(Divider, { children: t('Auth.LOGIN_OR') }), _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/components/MfaLoginComponent.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // src/auth/components/MfaLoginComponent.jsx
 import React, { useState } from 'react';
-import { Box, Typography, TextField, Button, Stack, Alert, } from '@mui/material';
+import { Box, Typography, TextField, Button, Stack, Alert, Divider, } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { authApi } from '../auth/authApi';
 const MfaLoginComponent = ({ availableTypes, identifier, onSuccess, onCancel }) => {
@@ -67,6 +67,6 @@ const MfaLoginComponent = ({ availableTypes, identifier, onSuccess, onCancel })
             setSubmitting(false);
         }
     };
-    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.MFA_TITLE', 'Additional verification required') }), _jsx(Typography, { variant: "body2", sx: { mb: 2 }, children: t('Auth.MFA_SUBTITLE', 'Please confirm your login using one of the available methods.') }), errorKey && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(errorKey) })), infoKey && (_jsx(Alert, { severity: "info", sx: { mb: 2 }, children: t(infoKey) })), _jsxs(Stack, { spacing: 2, children: [supportsTotpOrRecovery && (_jsxs(Box, { component: "form", onSubmit: handleSubmitCode, children: [_jsx(TextField, { label: t('Auth.MFA_CODE_LABEL', 'Authenticator code (or recovery code)'), value: code, onChange: (e) => setCode(e.target.value), fullWidth: true, disabled: submitting || helpRequested, autoComplete: "one-time-code", sx: { mb: 2 } }), _jsx(Button, { type: "submit", variant: "contained", fullWidth: true, disabled: submitting || !code.trim() || helpRequested, children: t('Auth.MFA_VERIFY', 'Verify') })] })), supportsWebauthn && (_jsx(Button, { variant: "outlined", fullWidth: true, onClick: handlePasskey, disabled: submitting || helpRequested, children: t('Auth.MFA_USE_PASSKEY', 'Use passkey / security key') })), _jsx(Button, { size: "small", onClick: onCancel, disabled: submitting, children: t('Auth.MFA_BACK_TO_LOGIN', 'Back to login') }), _jsx(Button, { size: "small", color: "secondary", onClick: handleNeedHelp, disabled: submitting || helpRequested, children: t('Auth.MFA_NEED_HELP', "I can't use any of these methods") })] })] }));
+    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "body2", sx: { mb: 2 }, children: t('Auth.MFA_SUBTITLE', 'Please confirm your login using one of the available methods.') }), errorKey && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(errorKey) })), infoKey && (_jsx(Alert, { severity: "info", sx: { mb: 2 }, children: t(infoKey) })), _jsxs(Stack, { spacing: 2, children: [supportsWebauthn && (_jsx(Button, { variant: "contained", fullWidth: true, onClick: handlePasskey, disabled: submitting || helpRequested, children: t('Auth.LOGIN_USE_PASSKEY_BUTTON', 'Use passkey / security key') })), _jsx(Divider, { sx: { my: 2 }, children: t('Auth.LOGIN_OR') }), supportsTotpOrRecovery && (_jsxs(Box, { component: "form", onSubmit: handleSubmitCode, children: [_jsx(TextField, { label: t('Auth.MFA_CODE_LABEL', 'Authenticator code (or recovery code)'), value: code, onChange: (e) => setCode(e.target.value), fullWidth: true, disabled: submitting || helpRequested, autoComplete: "one-time-code", sx: { mb: 2 } }), _jsx(Button, { type: "submit", variant: "contained", fullWidth: true, disabled: submitting || !code.trim() || helpRequested, children: t('Auth.MFA_VERIFY', 'Verify') })] })), _jsx(Divider, { sx: { my: 2 }, children: t('Auth.LOGIN_OR') }), _jsxs(Stack, { direction: "row", spacing: 1, sx: { mt: 1 }, children: [_jsx(Button, { fullWidth: true, size: "small", variant: "outlined", onClick: onCancel, disabled: submitting, children: t('Auth.MFA_BACK_TO_LOGIN', 'Back to login') }), _jsx(Button, { fullWidth: true, size: "small", variant: "outlined", color: "secondary", onClick: handleNeedHelp, disabled: submitting || helpRequested, children: t('Auth.MFA_NEED_HELP', "I can't use any of these methods") })] })] })] }));
 };
 export default MfaLoginComponent;

package/dist/components/PasswordSetForm.js

@@ -27,7 +27,7 @@ const PasswordSetForm = ({ onSubmit, submitting = false }) => {
             onSubmit(password1);
         }
     };
-    return (_jsxs(Box, { component: "form", onSubmit: handleSubmit, sx: { display: 'flex', flexDirection: 'column', gap: 2, mt: 2 }, children: [localErrorKey && (_jsx(Box, { sx: { color: 'error.main', fontSize: 14 }, children: t(localErrorKey) })), _jsx(TextField, { label: t('Auth.PASSWORD_NEW_LABEL'), type: "password", fullWidth: true, autoComplete: "new-password", value: password1, onChange: (e) => setPassword1(e.target.value), disabled: submitting }), _jsx(TextField, { label: t('Auth.PASSWORD_CONFIRM_LABEL'), type: "password", fullWidth: true, autoComplete: "new-password", value: password2, onChange: (e) => setPassword2(e.target.value), disabled: submitting }), _jsx(Button, { type: "submit", variant: "contained", disabled: submitting, children: submitting
+    return (_jsxs(Box, { component: "form", onSubmit: handleSubmit, sx: { display: 'flex', flexDirection: 'column', gap: 2, mt: 2 }, children: [localErrorKey && (_jsx(Box, { sx: { color: 'error.main', fontSize: 14 }, children: t(localErrorKey) })), _jsx(TextField, { label: t('Auth.NEW_PASSWORD_LABEL'), type: "password", fullWidth: true, autoComplete: "new-password", value: password1, onChange: (e) => setPassword1(e.target.value), disabled: submitting }), _jsx(TextField, { label: t('Auth.PASSWORD_CONFIRM_LABEL'), type: "password", fullWidth: true, autoComplete: "new-password", value: password2, onChange: (e) => setPassword2(e.target.value), disabled: submitting }), _jsx(Button, { type: "submit", variant: "contained", disabled: submitting, children: submitting
                     ? t('Auth.PASSWORD_SET_BUTTON_LOADING')
                     : t('Auth.PASSWORD_SET_BUTTON') })] }));
 };

package/dist/components/ProfileComponent.js

@@ -104,6 +104,6 @@ showName = true, showPrivacy = true, showCookies = true, }) {
     // - Sonst i18n-Schlüssel verwenden
     const submitLabel = submitText || t('Profile.SAVE_BUTTON');
     const submitLabelLoading = t('Profile.SAVE_BUTTON_LOADING');
-    return (_jsxs(Box, { component: "form", onSubmit: handleSubmit, sx: { maxWidth: 600, display: 'flex', flexDirection: 'column', gap: 2 }, children: [errorKey && (_jsx(Alert, { severity: "error", children: t(errorKey) })), successKey && (_jsx(Alert, { severity: "success", children: t(successKey) })), _jsxs(Stack, { spacing: 2, children: [_jsx(TextField, { label: t('Profile.USERNAME_LABEL'), value: username, fullWidth: true, disabled: true }), _jsx(TextField, { label: t('Profile.EMAIL_LABEL'), type: "email", value: email, fullWidth: true, disabled: true })] }), showName && (_jsxs(Stack, { spacing: 2, direction: { xs: 'column', sm: 'row' }, children: [_jsx(TextField, { label: t('Profile.FIRST_NAME_LABEL'), value: firstName, onChange: (e) => setFirstName(e.target.value), fullWidth: true }), _jsx(TextField, { label: t('Profile.LAST_NAME_LABEL'), value: lastName, onChange: (e) => setLastName(e.target.value), fullWidth: true })] })), (showPrivacy || showCookies) && (_jsxs(Box, { sx: { mt: 1 }, children: [_jsx(Typography, { variant: "subtitle1", gutterBottom: true, children: t('Profile.PRIVACY_SECTION_TITLE') }), _jsxs(Stack, { spacing: 1, children: [showPrivacy && (_jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: acceptedPrivacy, onChange: (e) => setAcceptedPrivacy(e.target.checked) }), label: t('Profile.ACCEPT_PRIVACY_LABEL') })), showCookies && (_jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: acceptedCookies, onChange: (e) => setAcceptedCookies(e.target.checked) }), label: t('Profile.ACCEPT_COOKIES_LABEL') }))] })] })), _jsx(Box, { sx: { mt: 2 }, children: _jsx(Button, { type: "submit", variant: "contained", disabled: saving, children: saving ? submitLabelLoading : submitLabel }) })] }));
+    return (_jsxs(Box, { component: "form", onSubmit: handleSubmit, sx: { maxWidth: 600, display: 'flex', flexDirection: 'column', gap: 2 }, children: [errorKey && (_jsx(Alert, { severity: "error", children: t(errorKey) })), successKey && (_jsx(Alert, { severity: "success", children: t(successKey) })), _jsxs(Stack, { spacing: 2, children: [_jsx(TextField, { label: t('Profile.USERNAME_LABEL'), value: username, fullWidth: true, disabled: true }), _jsx(TextField, { label: t('Auth.EMAIL_LABEL'), type: "email", value: email, fullWidth: true, disabled: true })] }), showName && (_jsxs(Stack, { spacing: 2, direction: { xs: 'column', sm: 'row' }, children: [_jsx(TextField, { label: t('Profile.FIRST_NAME_LABEL'), value: firstName, onChange: (e) => setFirstName(e.target.value), fullWidth: true }), _jsx(TextField, { label: t('Profile.LAST_NAME_LABEL'), value: lastName, onChange: (e) => setLastName(e.target.value), fullWidth: true })] })), (showPrivacy || showCookies) && (_jsxs(Box, { sx: { mt: 1 }, children: [_jsx(Typography, { variant: "subtitle1", gutterBottom: true, children: t('Profile.PRIVACY_SECTION_TITLE') }), _jsxs(Stack, { spacing: 1, children: [showPrivacy && (_jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: acceptedPrivacy, onChange: (e) => setAcceptedPrivacy(e.target.checked) }), label: t('Profile.ACCEPT_PRIVACY_LABEL') })), showCookies && (_jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: acceptedCookies, onChange: (e) => setAcceptedCookies(e.target.checked) }), label: t('Profile.ACCEPT_COOKIES_LABEL') }))] })] })), _jsx(Box, { sx: { mt: 2 }, children: _jsx(Button, { type: "submit", variant: "contained", disabled: saving, children: saving ? submitLabelLoading : submitLabel }) })] }));
 }
 export default ProfileComponent;

package/dist/components/SocialLoginButtons.js

@@ -15,7 +15,7 @@ const SocialLoginButtons = ({ onProviderClick }) => {
             onProviderClick(provider);
         }
     };
-    return (_jsxs(Stack, { spacing: 1.5, sx: { mt: 1 }, children: [_jsx(Button, { variant: "outlined", fullWidth: true, onClick: () => handleClick(SOCIAL_PROVIDERS.google), startIcon: _jsx(Box, { sx: {
+    return (_jsxs(Stack, { spacing: 1.5, children: [_jsx(Button, { variant: "outlined", fullWidth: true, onClick: () => handleClick(SOCIAL_PROVIDERS.google), startIcon: _jsx(Box, { sx: {
                         width: 24,
                         height: 24,
                         borderRadius: '50%',

package/dist/i18n/authTranslations.js

@@ -281,7 +281,7 @@ export const authTranslations = {
         "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."
     },
-    "Auth.SIGNUP_EMAIL_LABEL": {
+    "Auth.EMAIL_LABEL": {
         "de": "E-Mail-Adresse",
         "fr": "Adresse e-mail",
         "en": "Email address"
@@ -406,11 +406,6 @@ export const authTranslations = {
         "fr": "Impossible de supprimer le code d'accès.",
         "en": "Could not delete access code."
     },
-    "Auth.LOGIN_EMAIL_LABEL": {
-        "de": "E-Mail-Adresse",
-        "fr": "Adresse e-mail",
-        "en": "Email address"
-    },
     "Auth.LOGIN_PASSWORD_LABEL": {
         "de": "Passwort",
         "fr": "Mot de passe",
@@ -706,11 +701,6 @@ export const authTranslations = {
         "fr": "Nom d’utilisateur",
         "en": "Username"
     },
-    "Profile.EMAIL_LABEL": {
-        "de": "E-Mail",
-        "fr": "E-mail",
-        "en": "Email"
-    },
     "Profile.FIRST_NAME_LABEL": {
         "de": "Vorname",
         "fr": "Prénom",

package/dist/pages/AccountPage.js

@@ -30,6 +30,6 @@ export function AccountPage() {
         const updatedUser = await authApi.updateUserProfile(payload);
         login(updatedUser);
     };
-    return (_jsxs(WidePage, { title: "Account", children: [_jsx(Helmet, { children: _jsx("title", { children: "PROJECT_NAME \u2013 Account" }) }), _jsxs(Tabs, { value: tab, onChange: handleTabChange, sx: { mb: 3 }, children: [_jsx(Tab, { label: "Account", value: "account" }), _jsx(Tab, { label: "Security", value: "security" }), _jsx(Tab, { label: "Support", value: "support" })] }), tab === 'account' && (_jsx(Box, { sx: { mt: 1 }, children: _jsx(ProfileComponent, { onLoad: () => { }, onSubmit: handleProfileSubmit, submitText: "Save", showName: true, showPrivacy: true, showCookies: true }) })), tab === 'security' && (_jsx(Box, { sx: { mt: 1 }, children: _jsx(SecurityComponent, { fromRecovery: fromRecovery, fromWeakLogin: fromWeakLogin }) })), tab === 'support' && (_jsx(Box, { sx: { mt: 1 }, children: _jsx(SupportRecoveryRequestsTab, {}) }))] }));
+    return (_jsxs(WidePage, { title: "Account", children: [_jsx(Helmet, { children: _jsx("title", { children: "PROJECT_NAME \u2013 Account" }) }), _jsxs(Tabs, { value: tab, onChange: handleTabChange, sx: { mb: 3 }, children: [_jsx(Tab, { label: "Security", value: "security" }), _jsx(Tab, { label: "Account", value: "account" }), _jsx(Tab, { label: "Support", value: "support" })] }), tab === 'security' && (_jsx(Box, { sx: { mt: 1 }, children: _jsx(SecurityComponent, { fromRecovery: fromRecovery, fromWeakLogin: fromWeakLogin }) })), tab === 'account' && (_jsx(Box, { sx: { mt: 1 }, children: _jsx(ProfileComponent, { onLoad: () => { }, onSubmit: handleProfileSubmit, submitText: "Save", showName: true, showPrivacy: true, showCookies: true }) })), tab === 'support' && (_jsx(Box, { sx: { mt: 1 }, children: _jsx(SupportRecoveryRequestsTab, {}) }))] }));
 }
 export default AccountPage;

package/dist/pages/SignUpPage.js

@@ -50,7 +50,7 @@ export function SignUpPage() {
     const handleGoToLogin = () => {
         navigate('/login');
     };
-    return (_jsxs(NarrowPage, { title: t('Auth.PAGE_SIGNUP_TITLE'), subtitle: t('Auth.PAGE_SIGNUP_SUBTITLE'), children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('App.NAME'), " \u2013 ", t('Auth.PAGE_SIGNUP_TITLE')] }) }), successKey && (_jsx(Alert, { severity: "success", sx: { mb: 2 }, children: t(successKey, { email }) })), errorKey && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(errorKey) })), _jsxs(Box, { component: "form", onSubmit: handleSubmit, sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(TextField, { label: t('Auth.SIGNUP_EMAIL_LABEL'), type: "email", required: true, fullWidth: true, value: email, onChange: (e) => setEmail(e.target.value), disabled: submitting }), _jsx(TextField, { label: t('Auth.SIGNUP_ACCESS_CODE_LABEL'), type: "text", required: true, fullWidth: true, value: accessCode, onChange: (e) => setAccessCode(e.target.value), disabled: submitting }), _jsx(Button, { type: "submit", variant: "contained", disabled: submitting, children: submitting
+    return (_jsxs(NarrowPage, { title: t('Auth.PAGE_SIGNUP_TITLE'), subtitle: t('Auth.PAGE_SIGNUP_SUBTITLE'), children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('App.NAME'), " \u2013 ", t('Auth.PAGE_SIGNUP_TITLE')] }) }), successKey && (_jsx(Alert, { severity: "success", sx: { mb: 2 }, children: t(successKey, { email }) })), errorKey && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(errorKey) })), _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 }), _jsx(TextField, { label: t('Auth.SIGNUP_ACCESS_CODE_LABEL'), type: "text", required: true, fullWidth: true, value: accessCode, onChange: (e) => setAccessCode(e.target.value), disabled: submitting }), _jsx(Button, { type: "submit", variant: "contained", disabled: submitting, 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": "1.4.7",
+  "version": "1.4.9",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "private": false,

package/src/components/LoginForm.jsx

@@ -69,7 +69,7 @@ const LoginForm = ({
         sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
       >
         <TextField
-          label={t('Auth.LOGIN_EMAIL_LABEL')}
+          label={t('Auth.EMAIL_LABEL')}
           type="email"
           required
           fullWidth
@@ -96,13 +96,15 @@ const LoginForm = ({
         >
           {t('Auth.LOGIN_SUBMIT')}
         </Button>
+
+
       </Box>
 
       {/* Other ways to sign in */}
-      <Box>
-        <Typography variant="subtitle2" sx={{ mb: 1 }}>
-          {t('Auth.LOGIN_OTHER_METHODS_TITLE')}
-        </Typography>
+       <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+        <Divider>
+          {t('Auth.LOGIN_OR')}
+        </Divider>
         <SocialLoginButtons onProviderClick={onSocialLogin} />
       </Box>
 

package/src/components/MfaLoginComponent.jsx

@@ -7,6 +7,7 @@ import {
   Button,
   Stack,
   Alert,
+  Divider,
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { authApi } from '../auth/authApi';
@@ -79,9 +80,6 @@ const MfaLoginComponent = ({ availableTypes, identifier, onSuccess, onCancel })
 
   return (
     <Box>
-      <Typography variant="h6" gutterBottom>
-        {t('Auth.MFA_TITLE', 'Additional verification required')}
-      </Typography>
       <Typography variant="body2" sx={{ mb: 2 }}>
         {t(
           'Auth.MFA_SUBTITLE',
@@ -102,6 +100,21 @@ const MfaLoginComponent = ({ availableTypes, identifier, onSuccess, onCancel })
       )}
 
       <Stack spacing={2}>
+        {supportsWebauthn && (
+          <Button
+            variant="contained"
+            fullWidth
+            onClick={handlePasskey}
+            disabled={submitting || helpRequested}
+          >
+            {t('Auth.LOGIN_USE_PASSKEY_BUTTON', 'Use passkey / security key')}
+          </Button>
+        )}
+
+        <Divider sx={{ my: 2 }}>
+          {t('Auth.LOGIN_OR')}
+        </Divider>
+
         {supportsTotpOrRecovery && (
           <Box component="form" onSubmit={handleSubmitCode}>
             <TextField
@@ -127,36 +140,37 @@ const MfaLoginComponent = ({ availableTypes, identifier, onSuccess, onCancel })
           </Box>
         )}
 
-        {supportsWebauthn && (
+        <Divider sx={{ my: 2 }}>
+          {t('Auth.LOGIN_OR')}
+        </Divider>
+
+        
+
+        <Stack direction="row" spacing={1} sx={{ mt: 1 }}>
           <Button
+            fullWidth
+            size="small"
             variant="outlined"
+            onClick={onCancel}
+            disabled={submitting}
+          >
+            {t('Auth.MFA_BACK_TO_LOGIN', 'Back to login')}
+          </Button>
+
+          <Button
             fullWidth
-            onClick={handlePasskey}
+            size="small"
+            variant="outlined"
+            color="secondary"
+            onClick={handleNeedHelp}
             disabled={submitting || helpRequested}
           >
-            {t('Auth.MFA_USE_PASSKEY', 'Use passkey / security key')}
+            {t(
+              'Auth.MFA_NEED_HELP',
+              "I can't use any of these methods",
+            )}
           </Button>
-        )}
-
-        <Button
-          size="small"
-          onClick={onCancel}
-          disabled={submitting}
-        >
-          {t('Auth.MFA_BACK_TO_LOGIN', 'Back to login')}
-        </Button>
-
-        <Button
-          size="small"
-          color="secondary"
-          onClick={handleNeedHelp}
-          disabled={submitting || helpRequested}
-        >
-          {t(
-            'Auth.MFA_NEED_HELP',
-            "I can't use any of these methods",
-          )}
-        </Button>
+        </Stack>
       </Stack>
     </Box>
   );

package/src/components/PasswordSetForm.jsx

@@ -46,7 +46,7 @@ const PasswordSetForm = ({ onSubmit, submitting = false }) => {
       )}
 
       <TextField
-        label={t('Auth.PASSWORD_NEW_LABEL')}
+        label={t('Auth.NEW_PASSWORD_LABEL')}
         type="password"
         fullWidth
         autoComplete="new-password"

package/src/components/ProfileComponent.jsx

@@ -159,7 +159,7 @@ export function ProfileComponent({
           disabled
         />
         <TextField
-          label={t('Profile.EMAIL_LABEL')}
+          label={t('Auth.EMAIL_LABEL')}
           type="email"
           value={email}
           fullWidth

package/src/components/SocialLoginButtons.jsx

@@ -18,7 +18,7 @@ const SocialLoginButtons = ({ onProviderClick }) => {
   };
 
   return (
-    <Stack spacing={1.5} sx={{ mt: 1 }}>
+    <Stack spacing={1.5}>
       <Button
         variant="outlined"
         fullWidth

package/src/i18n/authTranslations.js

@@ -320,7 +320,7 @@ export const authTranslations = {
     "en": "Enter your email address and access code to request an invitation."
   },
 
-  "Auth.SIGNUP_EMAIL_LABEL": {
+  "Auth.EMAIL_LABEL": {
     "de": "E-Mail-Adresse",
     "fr": "Adresse e-mail",
     "en": "Email address"
@@ -449,11 +449,6 @@ export const authTranslations = {
     "fr": "Impossible de supprimer le code d'accès.",
     "en": "Could not delete access code."
   },
-  "Auth.LOGIN_EMAIL_LABEL": {
-    "de": "E-Mail-Adresse",
-    "fr": "Adresse e-mail",
-    "en": "Email address"
-  },
   "Auth.LOGIN_PASSWORD_LABEL": {
     "de": "Passwort",
     "fr": "Mot de passe",
@@ -753,11 +748,6 @@ export const authTranslations = {
     "fr": "Nom d’utilisateur",
     "en": "Username"
   },
-  "Profile.EMAIL_LABEL": {
-    "de": "E-Mail",
-    "fr": "E-mail",
-    "en": "Email"
-  },
   "Profile.FIRST_NAME_LABEL": {
     "de": "Vorname",
     "fr": "Prénom",

package/src/pages/AccountPage.jsx

@@ -48,11 +48,20 @@ export function AccountPage() {
         onChange={handleTabChange}
         sx={{ mb: 3 }}
       >
-        <Tab label="Account" value="account" />
         <Tab label="Security" value="security" />
+        <Tab label="Account" value="account" />
         <Tab label="Support" value="support" />
       </Tabs>
 
+      {tab === 'security' && (
+        <Box sx={{ mt: 1 }}>
+          <SecurityComponent
+            fromRecovery={fromRecovery}
+            fromWeakLogin={fromWeakLogin}
+          />
+        </Box>
+      )}
+
       {tab === 'account' && (
         <Box sx={{ mt: 1 }}>
           <ProfileComponent
@@ -66,14 +75,7 @@ export function AccountPage() {
         </Box>
       )}
 
-      {tab === 'security' && (
-        <Box sx={{ mt: 1 }}>
-          <SecurityComponent
-            fromRecovery={fromRecovery}
-            fromWeakLogin={fromWeakLogin}
-          />
-        </Box>
-      )}
+      
 
       {tab === 'support' && (
         <Box sx={{ mt: 1 }}>

package/src/pages/SignUpPage.jsx

@@ -92,7 +92,7 @@ export function SignUpPage() {
         sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
       >
         <TextField
-          label={t('Auth.SIGNUP_EMAIL_LABEL')}
+          label={t('Auth.EMAIL_LABEL')}
           type="email"
           required
           fullWidth