@micha.bigler/ui-core-micha 1.4.4 → 1.4.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/components/LoginForm.js +5 -8
  2. package/package.json +1 -1
  3. package/src/components/LoginForm.jsx +78 -70
package/dist/components/LoginForm.js CHANGED
@@ -1,4 +1,4 @@
1
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
1
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  // src/auth/components/LoginForm.jsx
3
3
  import React, { useState } from 'react';
4
4
  import { Box, TextField, Button, Typography, Divider, } from '@mui/material';
@@ -15,12 +15,9 @@ disabled = false, }) => {
15
15
  return;
16
16
  onSubmit({ identifier, password });
17
17
  };
18
- 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: {
19
- display: 'flex',
20
- justifyContent: 'space-between',
21
- alignItems: 'center',
22
- mt: 1,
23
- gap: 1,
24
- }, 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') }) })] }))] }));
18
+ const supportsPasskey = !!onPasskeyLogin &&
19
+ typeof window !== 'undefined' &&
20
+ !!window.PublicKeyCredential;
21
+ 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_PRIMARY') }), _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') })] })] })] }));
25
22
  };
26
23
  export default LoginForm;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micha.bigler/ui-core-micha",
3
- "version": "1.4.4",
3
+ "version": "1.4.6",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.js",
6
6
  "private": false,
package/src/components/LoginForm.jsx CHANGED
@@ -30,102 +30,110 @@ const LoginForm = ({
30
30
  onSubmit({ identifier, password });
31
31
  };
32
32
 
33
+ const supportsPasskey =
34
+ !!onPasskeyLogin &&
35
+ typeof window !== 'undefined' &&
36
+ !!window.PublicKeyCredential;
37
+
33
38
  return (
34
- <Box
35
- component="form"
36
- onSubmit={handleSubmit}
37
- sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
38
- >
39
+ <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
39
40
  {error && (
40
41
  <Typography color="error" gutterBottom>
41
42
  {error}
42
43
  </Typography>
43
44
  )}
44
45
 
45
- <TextField
46
- label={t('Auth.LOGIN_EMAIL_LABEL')}
47
- type="email"
48
- required
49
- fullWidth
50
- value={identifier}
51
- onChange={(e) => setIdentifier(e.target.value)}
52
- disabled={disabled}
53
- />
54
-
55
- <TextField
56
- label={t('Auth.LOGIN_PASSWORD_LABEL')}
57
- type="password"
58
- required
59
- fullWidth
60
- value={password}
61
- onChange={(e) => setPassword(e.target.value)}
62
- disabled={disabled}
63
- />
64
-
65
- <Box
66
- sx={{
67
- display: 'flex',
68
- justifyContent: 'space-between',
69
- alignItems: 'center',
70
- mt: 1,
71
- gap: 1,
72
- }}
73
- >
74
- <Box sx={{ display: 'flex', gap: 1 }}>
46
+ {/* Sign in: Passkey zuerst, falls verfügbar */}
47
+ {supportsPasskey && (
48
+ <>
75
49
  <Button
76
- type="submit"
77
50
  variant="contained"
51
+ fullWidth
52
+ type="button"
53
+ onClick={onPasskeyLogin}
78
54
  disabled={disabled}
79
55
  >
80
- {t('Auth.LOGIN_SUBMIT')}
56
+ {t('Auth.LOGIN_USE_PASSKEY_PRIMARY')}
81
57
  </Button>
82
58
 
83
- {onSignUp && (
84
- <Button
85
- type="button"
86
- variant="outlined"
87
- onClick={onSignUp}
88
- disabled={disabled}
89
- >
90
- {t('Auth.LOGIN_SIGNUP_BUTTON')}
91
- </Button>
92
- )}
93
- </Box>
59
+ <Divider sx={{ my: 2 }}>
60
+ {t('Auth.LOGIN_OR')}
61
+ </Divider>
62
+ </>
63
+ )}
64
+
65
+ {/* Sign in: E-Mail + Passwort */}
66
+ <Box
67
+ component="form"
68
+ onSubmit={handleSubmit}
69
+ sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
70
+ >
71
+ <TextField
72
+ label={t('Auth.LOGIN_EMAIL_LABEL')}
73
+ type="email"
74
+ required
75
+ fullWidth
76
+ value={identifier}
77
+ onChange={(e) => setIdentifier(e.target.value)}
78
+ disabled={disabled}
79
+ />
80
+
81
+ <TextField
82
+ label={t('Auth.LOGIN_PASSWORD_LABEL')}
83
+ type="password"
84
+ required
85
+ fullWidth
86
+ value={password}
87
+ onChange={(e) => setPassword(e.target.value)}
88
+ disabled={disabled}
89
+ />
94
90
 
95
91
  <Button
96
- type="button"
97
- variant="outlined"
98
- onClick={onForgotPassword}
92
+ type="submit"
93
+ variant="contained"
94
+ fullWidth
99
95
  disabled={disabled}
100
96
  >
101
- {t('Auth.LOGIN_FORGOT_PASSWORD_LINK')}
97
+ {t('Auth.LOGIN_SUBMIT')}
102
98
  </Button>
103
99
  </Box>
104
100
 
105
- <Divider sx={{ my: 2 }}>
106
- {t('Auth.LOGIN_OR')}
107
- </Divider>
108
-
109
- <SocialLoginButtons onProviderClick={onSocialLogin} />
101
+ {/* Other ways to sign in */}
102
+ <Box>
103
+ <Typography variant="subtitle2" sx={{ mb: 1 }}>
104
+ {t('Auth.LOGIN_OTHER_METHODS_TITLE')}
105
+ </Typography>
106
+ <SocialLoginButtons onProviderClick={onSocialLogin} />
107
+ </Box>
110
108
 
111
- {onPasskeyLogin && (
112
- <>
113
- <Divider sx={{ my: 2 }}>
114
- {t('Auth.LOGIN_OR')}
115
- </Divider>
109
+ {/* Account & Recovery */}
110
+ <Box>
111
+ <Typography variant="subtitle2" sx={{ mb: 1 }}>
112
+ {t('Auth.LOGIN_ACCOUNT_RECOVERY_TITLE')}
113
+ </Typography>
116
114
 
117
- <Box sx={{ mt: 2, textAlign: 'center' }}>
115
+ <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
116
+ {onSignUp && (
118
117
  <Button
119
- variant="text"
120
118
  type="button"
121
- onClick={onPasskeyLogin}
122
- disabled={disabled || !window.PublicKeyCredential}
119
+ variant="outlined"
120
+ onClick={onSignUp}
121
+ disabled={disabled}
123
122
  >
124
- {t('Auth.LOGIN_USE_PASSKEY_BUTTON')}
123
+ {t('Auth.LOGIN_SIGNUP_BUTTON')}
125
124
  </Button>
126
- </Box>
127
- </>
128
- )}
125
+ )}
126
+
127
+ <Button
128
+ type="button"
129
+ variant="outlined"
130
+ onClick={onForgotPassword}
131
+ disabled={disabled}
132
+ >
133
+ {t('Auth.LOGIN_FORGOT_PASSWORD_BUTTON')}
134
+ </Button>
135
+ </Box>
136
+ </Box>
129
137
  </Box>
130
138
  );
131
139
  };