@native-systems/ui 1.0.5 → 1.0.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.
- package/dist/index.cjs +74 -62
- package/dist/index.d.ts +9 -4
- package/dist/index.d.ts.map +1 -1
- package/dist/index.esm.js +74 -62
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -112,6 +112,7 @@ const ForwardRef$4 = /*#__PURE__*/ React__namespace.forwardRef(EyeIcon);
|
|
|
112
112
|
function InputField({
|
|
113
113
|
id,
|
|
114
114
|
label,
|
|
115
|
+
hideLabel = false,
|
|
115
116
|
register,
|
|
116
117
|
type,
|
|
117
118
|
required,
|
|
@@ -122,12 +123,14 @@ function InputField({
|
|
|
122
123
|
return jsxRuntime.jsxs('div', {
|
|
123
124
|
className: 'flex flex-col space-y-2',
|
|
124
125
|
children: [
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
126
|
+
!hideLabel
|
|
127
|
+
? jsxRuntime.jsx('label', {
|
|
128
|
+
htmlFor: id,
|
|
129
|
+
className:
|
|
130
|
+
'block ml-1 text-sm font-medium text-gray-700 dark:text-white',
|
|
131
|
+
children: label,
|
|
132
|
+
})
|
|
133
|
+
: null,
|
|
131
134
|
isPasswordField
|
|
132
135
|
? jsxRuntime.jsxs('div', {
|
|
133
136
|
className: 'relative w-full',
|
|
@@ -138,12 +141,12 @@ function InputField({
|
|
|
138
141
|
type: isPasswordVisible ? 'text' : 'password',
|
|
139
142
|
autoComplete: autoCompleteId,
|
|
140
143
|
placeholder: label,
|
|
141
|
-
className: `w-full block py-3 pr-
|
|
144
|
+
className: `relative w-full block py-3 pr-10 pl-3 text-sm text-font-950 bg-base-0 border rounded-lg border-base-500/15 appearance-none focus:outline-none focus:ring-primary-500 placeholder-font-400 dark:text-font-0 dark:text-font-100 dark:bg-base-950 dark:placeholder-font-600 ${type === 'number' ? 'text-right' : ''}`,
|
|
142
145
|
...register,
|
|
143
146
|
}),
|
|
144
147
|
jsxRuntime.jsx('div', {
|
|
145
148
|
className:
|
|
146
|
-
'absolute top-1/2 right-2
|
|
149
|
+
'size-5 absolute top-1/2 right-2 -translate-y-1/2 text-font-400 transition-colors cursor-pointer hover:text-font-300 dark:text-font-600 dark:hover:text-font-500',
|
|
147
150
|
children: isPasswordVisible
|
|
148
151
|
? jsxRuntime.jsx(ForwardRef$5, {
|
|
149
152
|
onClick: () => {
|
|
@@ -164,14 +167,20 @@ function InputField({
|
|
|
164
167
|
type: type,
|
|
165
168
|
autoComplete: autoCompleteId,
|
|
166
169
|
placeholder: label,
|
|
167
|
-
className: `relative w-full block py-3 pr-10 pl-3 text-
|
|
170
|
+
className: `relative w-full block py-3 pr-10 pl-3 text-sm text-font-950 bg-base-0 border rounded-lg border-base-500/15 appearance-none focus:outline-none focus:ring-primary-500 placeholder-font-400 dark:text-font-0 dark:text-font-100 dark:bg-base-950 dark:placeholder-font-600 ${type === 'number' ? 'text-right' : ''}`,
|
|
168
171
|
...register,
|
|
169
172
|
}),
|
|
170
173
|
],
|
|
171
174
|
});
|
|
172
175
|
}
|
|
173
176
|
|
|
174
|
-
const SigninForm = ({
|
|
177
|
+
const SigninForm = ({
|
|
178
|
+
mapText,
|
|
179
|
+
onSubmit,
|
|
180
|
+
errorMessage,
|
|
181
|
+
hideLabels,
|
|
182
|
+
onForgotPassword,
|
|
183
|
+
}) => {
|
|
175
184
|
const { register, handleSubmit } = reactHookForm.useForm({
|
|
176
185
|
shouldUseNativeValidation: true,
|
|
177
186
|
});
|
|
@@ -183,38 +192,38 @@ const SigninForm = ({ mapText, onSubmit, errorMessage, onForgotPassword }) => {
|
|
|
183
192
|
id: 'email',
|
|
184
193
|
label: mapText('auth:form.email.label'),
|
|
185
194
|
type: 'text',
|
|
195
|
+
hideLabel: hideLabels,
|
|
186
196
|
required: true,
|
|
187
197
|
autoCompleteId: 'email',
|
|
188
198
|
register: register('email', {
|
|
189
199
|
required: mapText('form.email.validations.required'),
|
|
190
200
|
}),
|
|
191
201
|
}),
|
|
192
|
-
jsxRuntime.jsx(
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
required: mapText('form.password.validations.required'),
|
|
202
|
-
}),
|
|
203
|
-
isPasswordField: true,
|
|
202
|
+
jsxRuntime.jsx(InputField, {
|
|
203
|
+
id: 'password',
|
|
204
|
+
label: mapText('auth:form.password.label'),
|
|
205
|
+
type: 'password',
|
|
206
|
+
hideLabel: hideLabels,
|
|
207
|
+
required: true,
|
|
208
|
+
autoCompleteId: 'password',
|
|
209
|
+
register: register('password', {
|
|
210
|
+
required: mapText('form.password.validations.required'),
|
|
204
211
|
}),
|
|
212
|
+
isPasswordField: true,
|
|
205
213
|
}),
|
|
206
214
|
jsxRuntime.jsxs('div', {
|
|
207
215
|
children: [
|
|
208
|
-
jsxRuntime.jsx('
|
|
216
|
+
jsxRuntime.jsx('input', {
|
|
209
217
|
type: 'submit',
|
|
218
|
+
value: mapText('auth:form.submit.text'),
|
|
210
219
|
className:
|
|
211
|
-
'w-full flex justify-center px-4 py-3 text-sm
|
|
212
|
-
children: mapText('auth:form.submit.text'),
|
|
213
|
-
}),
|
|
214
|
-
jsxRuntime.jsx('span', {
|
|
215
|
-
className: 'block mt-2 text-sm font-medium text-red-500',
|
|
216
|
-
children: errorMessage,
|
|
220
|
+
'w-full flex justify-center px-4 py-3 text-sm text-white bg-[length:200%_200%] bg-primary-shimmer border-none border rounded-lg shadow-sm transition-transform animate-shimmerdelayed cursor-pointer hover:scale-105 focus:outline-none focus:ring-1 focus:ring-base-600/20 focus:ring-offset-0 dark:focus:ring-base-500',
|
|
217
221
|
}),
|
|
222
|
+
errorMessage &&
|
|
223
|
+
jsxRuntime.jsx('span', {
|
|
224
|
+
className: 'block mt-2.5 text-sm text-red-600',
|
|
225
|
+
children: errorMessage,
|
|
226
|
+
}),
|
|
218
227
|
],
|
|
219
228
|
}),
|
|
220
229
|
jsxRuntime.jsx('div', {
|
|
@@ -238,42 +247,45 @@ const SigninForm = ({ mapText, onSubmit, errorMessage, onForgotPassword }) => {
|
|
|
238
247
|
});
|
|
239
248
|
};
|
|
240
249
|
|
|
241
|
-
function SigninLayout({
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
+
function SigninLayout({
|
|
251
|
+
mapText,
|
|
252
|
+
onSubmit,
|
|
253
|
+
errorMessage,
|
|
254
|
+
logoSrc,
|
|
255
|
+
hideLabels,
|
|
256
|
+
onForgotPassword,
|
|
257
|
+
}) {
|
|
258
|
+
return jsxRuntime.jsx('div', {
|
|
259
|
+
className:
|
|
260
|
+
'sign-in-layout-container size-full z-10 relative flex justify-end items-center p-5 sm:p-10',
|
|
261
|
+
children: jsxRuntime.jsx('div', {
|
|
262
|
+
className: 'w-full flex flex-row justify-center items-stretch max-w-xl',
|
|
263
|
+
children: jsxRuntime.jsxs('div', {
|
|
250
264
|
className:
|
|
251
|
-
'
|
|
252
|
-
children:
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
children: [
|
|
258
|
-
jsxRuntime.jsx('h2', {
|
|
259
|
-
className:
|
|
260
|
-
'mt-6 text-3xl font-extrabold text-gray-900 select-none dark:text-white',
|
|
261
|
-
children: mapText('auth:page.title'),
|
|
262
|
-
}),
|
|
263
|
-
jsxRuntime.jsx('div', {
|
|
264
|
-
className: 'mt-10',
|
|
265
|
-
children: jsxRuntime.jsx(SigninForm, {
|
|
266
|
-
mapText: mapText,
|
|
267
|
-
onSubmit: (values) => onSubmit(values.email, values.password),
|
|
268
|
-
errorMessage: errorMessage,
|
|
269
|
-
onForgotPassword: onForgotPassword,
|
|
270
|
-
}),
|
|
271
|
-
}),
|
|
272
|
-
],
|
|
265
|
+
'sign-in-dialog w-full p-5 bg-base-0/70 rounded-lg sm:p-10 dark:bg-base-950/70',
|
|
266
|
+
children: [
|
|
267
|
+
jsxRuntime.jsx('img', {
|
|
268
|
+
className: 'w-auto h-10 mb-20 object-cover',
|
|
269
|
+
src: logoSrc,
|
|
270
|
+
alt: '',
|
|
273
271
|
}),
|
|
274
|
-
|
|
272
|
+
jsxRuntime.jsx('h2', {
|
|
273
|
+
className: '',
|
|
274
|
+
children: mapText('auth:form.submit.text'),
|
|
275
|
+
}),
|
|
276
|
+
jsxRuntime.jsx('div', {
|
|
277
|
+
className: 'mt-5',
|
|
278
|
+
children: jsxRuntime.jsx(SigninForm, {
|
|
279
|
+
mapText: mapText,
|
|
280
|
+
onSubmit: (values) => onSubmit(values.email, values.password),
|
|
281
|
+
errorMessage: errorMessage,
|
|
282
|
+
hideLabels: hideLabels,
|
|
283
|
+
onForgotPassword: onForgotPassword,
|
|
284
|
+
}),
|
|
285
|
+
}),
|
|
286
|
+
],
|
|
275
287
|
}),
|
|
276
|
-
|
|
288
|
+
}),
|
|
277
289
|
});
|
|
278
290
|
}
|
|
279
291
|
|
package/dist/index.d.ts
CHANGED
|
@@ -2,13 +2,14 @@ declare module "@native-systems/ui" {
|
|
|
2
2
|
type InputFieldProps = {
|
|
3
3
|
id: string;
|
|
4
4
|
label: string;
|
|
5
|
+
hideLabel?: boolean;
|
|
5
6
|
register: any;
|
|
6
7
|
type: string;
|
|
7
8
|
required: boolean;
|
|
8
9
|
autoCompleteId?: string;
|
|
9
10
|
isPasswordField?: boolean;
|
|
10
11
|
};
|
|
11
|
-
export function InputField({ id, label, register, type, required, autoCompleteId, isPasswordField, }: InputFieldProps): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export function InputField({ id, label, hideLabel, register, type, required, autoCompleteId, isPasswordField, }: InputFieldProps): import("react/jsx-runtime").JSX.Element;
|
|
12
13
|
}
|
|
13
14
|
|
|
14
15
|
declare module "@native-systems/ui" {
|
|
@@ -20,9 +21,10 @@ declare module "@native-systems/ui" {
|
|
|
20
21
|
mapText: (key: string) => string;
|
|
21
22
|
onSubmit: (values: any) => void;
|
|
22
23
|
errorMessage: string | null;
|
|
24
|
+
hideLabels?: boolean;
|
|
23
25
|
onForgotPassword?: () => void;
|
|
24
26
|
};
|
|
25
|
-
export const SigninForm: ({ mapText, onSubmit, errorMessage, onForgotPassword }: ISigninFormProps) => import("react/jsx-runtime").JSX.Element;
|
|
27
|
+
export const SigninForm: ({ mapText, onSubmit, errorMessage, hideLabels, onForgotPassword }: ISigninFormProps) => import("react/jsx-runtime").JSX.Element;
|
|
26
28
|
}
|
|
27
29
|
|
|
28
30
|
declare module "@native-systems/ui" {
|
|
@@ -34,9 +36,11 @@ declare module "@native-systems/ui" {
|
|
|
34
36
|
mapText: (key: string) => string;
|
|
35
37
|
onSubmit: (email: string, password: string) => void;
|
|
36
38
|
errorMessage: string | null;
|
|
39
|
+
logoSrc?: string;
|
|
40
|
+
hideLabels?: boolean;
|
|
37
41
|
onForgotPassword?: () => {};
|
|
38
42
|
}
|
|
39
|
-
export function SigninLayout({ mapText, onSubmit, errorMessage, onForgotPassword, }: SigninLayoutProps): import("react/jsx-runtime").JSX.Element;
|
|
43
|
+
export function SigninLayout({ mapText, onSubmit, errorMessage, logoSrc, hideLabels, onForgotPassword, }: SigninLayoutProps): import("react/jsx-runtime").JSX.Element;
|
|
40
44
|
}
|
|
41
45
|
|
|
42
46
|
declare module "@native-systems/ui" {
|
|
@@ -147,10 +151,11 @@ declare module "@native-systems/ui" {
|
|
|
147
151
|
SaveButton: typeof Util.SaveButton;
|
|
148
152
|
Textarea: typeof Util.Textarea;
|
|
149
153
|
SigninLayout: typeof UI.SigninLayout;
|
|
150
|
-
SigninForm: ({ mapText, onSubmit, errorMessage, onForgotPassword }: {
|
|
154
|
+
SigninForm: ({ mapText, onSubmit, errorMessage, hideLabels, onForgotPassword }: {
|
|
151
155
|
mapText: (key: string) => string;
|
|
152
156
|
onSubmit: (values: any) => void;
|
|
153
157
|
errorMessage: string | null;
|
|
158
|
+
hideLabels?: boolean;
|
|
154
159
|
onForgotPassword?: () => void;
|
|
155
160
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
156
161
|
};
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["src/components/util/views/Input.tsx","src/components/auth/widgets/SigninForm.tsx","src/components/auth/layout/SigninLayout.tsx","src/components/util/layout/MainContentFrame.tsx","src/components/util/widgets/Pagination.tsx","src/components/util/views/CancelButton.tsx","src/components/util/views/ErrorDisplay.tsx","src/components/util/views/HowToCloseText.tsx","src/components/util/views/LoadingSpinner.tsx","src/components/util/views/SaveButton.tsx","src/components/util/views/Textarea.tsx","src/context/TemplateParserContext.tsx","src/index.ts"],"names":[],"mappings":";IAIA,KAAK,eAAe,GAAG;QACrB,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,GAAG,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,OAAO,CAAC;QAClB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,eAAe,CAAC,EAAE,OAAO,CAAC;KAC3B,CAAC;IAEF,MAAM,UAAU,UAAU,CAAC,EACzB,EAAE,EACF,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,cAAsB,EACtB,eAAuB,GACxB,EAAE,eAAe,GAAA,OAAA,mBAAA,EAAA,GAAA,CAAA,OAAA,CAuDjB;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["src/components/util/views/Input.tsx","src/components/auth/widgets/SigninForm.tsx","src/components/auth/layout/SigninLayout.tsx","src/components/util/layout/MainContentFrame.tsx","src/components/util/widgets/Pagination.tsx","src/components/util/views/CancelButton.tsx","src/components/util/views/ErrorDisplay.tsx","src/components/util/views/HowToCloseText.tsx","src/components/util/views/LoadingSpinner.tsx","src/components/util/views/SaveButton.tsx","src/components/util/views/Textarea.tsx","src/context/TemplateParserContext.tsx","src/index.ts"],"names":[],"mappings":"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","file":"index.d.ts","sourceRoot":".."}
|
package/dist/index.esm.js
CHANGED
|
@@ -89,6 +89,7 @@ const ForwardRef$4 = /*#__PURE__*/ React.forwardRef(EyeIcon);
|
|
|
89
89
|
function InputField({
|
|
90
90
|
id,
|
|
91
91
|
label,
|
|
92
|
+
hideLabel = false,
|
|
92
93
|
register,
|
|
93
94
|
type,
|
|
94
95
|
required,
|
|
@@ -99,12 +100,14 @@ function InputField({
|
|
|
99
100
|
return jsxs('div', {
|
|
100
101
|
className: 'flex flex-col space-y-2',
|
|
101
102
|
children: [
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
103
|
+
!hideLabel
|
|
104
|
+
? jsx('label', {
|
|
105
|
+
htmlFor: id,
|
|
106
|
+
className:
|
|
107
|
+
'block ml-1 text-sm font-medium text-gray-700 dark:text-white',
|
|
108
|
+
children: label,
|
|
109
|
+
})
|
|
110
|
+
: null,
|
|
108
111
|
isPasswordField
|
|
109
112
|
? jsxs('div', {
|
|
110
113
|
className: 'relative w-full',
|
|
@@ -115,12 +118,12 @@ function InputField({
|
|
|
115
118
|
type: isPasswordVisible ? 'text' : 'password',
|
|
116
119
|
autoComplete: autoCompleteId,
|
|
117
120
|
placeholder: label,
|
|
118
|
-
className: `w-full block py-3 pr-
|
|
121
|
+
className: `relative w-full block py-3 pr-10 pl-3 text-sm text-font-950 bg-base-0 border rounded-lg border-base-500/15 appearance-none focus:outline-none focus:ring-primary-500 placeholder-font-400 dark:text-font-0 dark:text-font-100 dark:bg-base-950 dark:placeholder-font-600 ${type === 'number' ? 'text-right' : ''}`,
|
|
119
122
|
...register,
|
|
120
123
|
}),
|
|
121
124
|
jsx('div', {
|
|
122
125
|
className:
|
|
123
|
-
'absolute top-1/2 right-2
|
|
126
|
+
'size-5 absolute top-1/2 right-2 -translate-y-1/2 text-font-400 transition-colors cursor-pointer hover:text-font-300 dark:text-font-600 dark:hover:text-font-500',
|
|
124
127
|
children: isPasswordVisible
|
|
125
128
|
? jsx(ForwardRef$5, {
|
|
126
129
|
onClick: () => {
|
|
@@ -141,14 +144,20 @@ function InputField({
|
|
|
141
144
|
type: type,
|
|
142
145
|
autoComplete: autoCompleteId,
|
|
143
146
|
placeholder: label,
|
|
144
|
-
className: `relative w-full block py-3 pr-10 pl-3 text-
|
|
147
|
+
className: `relative w-full block py-3 pr-10 pl-3 text-sm text-font-950 bg-base-0 border rounded-lg border-base-500/15 appearance-none focus:outline-none focus:ring-primary-500 placeholder-font-400 dark:text-font-0 dark:text-font-100 dark:bg-base-950 dark:placeholder-font-600 ${type === 'number' ? 'text-right' : ''}`,
|
|
145
148
|
...register,
|
|
146
149
|
}),
|
|
147
150
|
],
|
|
148
151
|
});
|
|
149
152
|
}
|
|
150
153
|
|
|
151
|
-
const SigninForm = ({
|
|
154
|
+
const SigninForm = ({
|
|
155
|
+
mapText,
|
|
156
|
+
onSubmit,
|
|
157
|
+
errorMessage,
|
|
158
|
+
hideLabels,
|
|
159
|
+
onForgotPassword,
|
|
160
|
+
}) => {
|
|
152
161
|
const { register, handleSubmit } = useForm({
|
|
153
162
|
shouldUseNativeValidation: true,
|
|
154
163
|
});
|
|
@@ -160,38 +169,38 @@ const SigninForm = ({ mapText, onSubmit, errorMessage, onForgotPassword }) => {
|
|
|
160
169
|
id: 'email',
|
|
161
170
|
label: mapText('auth:form.email.label'),
|
|
162
171
|
type: 'text',
|
|
172
|
+
hideLabel: hideLabels,
|
|
163
173
|
required: true,
|
|
164
174
|
autoCompleteId: 'email',
|
|
165
175
|
register: register('email', {
|
|
166
176
|
required: mapText('form.email.validations.required'),
|
|
167
177
|
}),
|
|
168
178
|
}),
|
|
169
|
-
jsx(
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
required: mapText('form.password.validations.required'),
|
|
179
|
-
}),
|
|
180
|
-
isPasswordField: true,
|
|
179
|
+
jsx(InputField, {
|
|
180
|
+
id: 'password',
|
|
181
|
+
label: mapText('auth:form.password.label'),
|
|
182
|
+
type: 'password',
|
|
183
|
+
hideLabel: hideLabels,
|
|
184
|
+
required: true,
|
|
185
|
+
autoCompleteId: 'password',
|
|
186
|
+
register: register('password', {
|
|
187
|
+
required: mapText('form.password.validations.required'),
|
|
181
188
|
}),
|
|
189
|
+
isPasswordField: true,
|
|
182
190
|
}),
|
|
183
191
|
jsxs('div', {
|
|
184
192
|
children: [
|
|
185
|
-
jsx('
|
|
193
|
+
jsx('input', {
|
|
186
194
|
type: 'submit',
|
|
195
|
+
value: mapText('auth:form.submit.text'),
|
|
187
196
|
className:
|
|
188
|
-
'w-full flex justify-center px-4 py-3 text-sm
|
|
189
|
-
children: mapText('auth:form.submit.text'),
|
|
190
|
-
}),
|
|
191
|
-
jsx('span', {
|
|
192
|
-
className: 'block mt-2 text-sm font-medium text-red-500',
|
|
193
|
-
children: errorMessage,
|
|
197
|
+
'w-full flex justify-center px-4 py-3 text-sm text-white bg-[length:200%_200%] bg-primary-shimmer border-none border rounded-lg shadow-sm transition-transform animate-shimmerdelayed cursor-pointer hover:scale-105 focus:outline-none focus:ring-1 focus:ring-base-600/20 focus:ring-offset-0 dark:focus:ring-base-500',
|
|
194
198
|
}),
|
|
199
|
+
errorMessage &&
|
|
200
|
+
jsx('span', {
|
|
201
|
+
className: 'block mt-2.5 text-sm text-red-600',
|
|
202
|
+
children: errorMessage,
|
|
203
|
+
}),
|
|
195
204
|
],
|
|
196
205
|
}),
|
|
197
206
|
jsx('div', {
|
|
@@ -215,42 +224,45 @@ const SigninForm = ({ mapText, onSubmit, errorMessage, onForgotPassword }) => {
|
|
|
215
224
|
});
|
|
216
225
|
};
|
|
217
226
|
|
|
218
|
-
function SigninLayout({
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
+
function SigninLayout({
|
|
228
|
+
mapText,
|
|
229
|
+
onSubmit,
|
|
230
|
+
errorMessage,
|
|
231
|
+
logoSrc,
|
|
232
|
+
hideLabels,
|
|
233
|
+
onForgotPassword,
|
|
234
|
+
}) {
|
|
235
|
+
return jsx('div', {
|
|
236
|
+
className:
|
|
237
|
+
'sign-in-layout-container size-full z-10 relative flex justify-end items-center p-5 sm:p-10',
|
|
238
|
+
children: jsx('div', {
|
|
239
|
+
className: 'w-full flex flex-row justify-center items-stretch max-w-xl',
|
|
240
|
+
children: jsxs('div', {
|
|
227
241
|
className:
|
|
228
|
-
'
|
|
229
|
-
children:
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
children: [
|
|
235
|
-
jsx('h2', {
|
|
236
|
-
className:
|
|
237
|
-
'mt-6 text-3xl font-extrabold text-gray-900 select-none dark:text-white',
|
|
238
|
-
children: mapText('auth:page.title'),
|
|
239
|
-
}),
|
|
240
|
-
jsx('div', {
|
|
241
|
-
className: 'mt-10',
|
|
242
|
-
children: jsx(SigninForm, {
|
|
243
|
-
mapText: mapText,
|
|
244
|
-
onSubmit: (values) => onSubmit(values.email, values.password),
|
|
245
|
-
errorMessage: errorMessage,
|
|
246
|
-
onForgotPassword: onForgotPassword,
|
|
247
|
-
}),
|
|
248
|
-
}),
|
|
249
|
-
],
|
|
242
|
+
'sign-in-dialog w-full p-5 bg-base-0/70 rounded-lg sm:p-10 dark:bg-base-950/70',
|
|
243
|
+
children: [
|
|
244
|
+
jsx('img', {
|
|
245
|
+
className: 'w-auto h-10 mb-20 object-cover',
|
|
246
|
+
src: logoSrc,
|
|
247
|
+
alt: '',
|
|
250
248
|
}),
|
|
251
|
-
|
|
249
|
+
jsx('h2', {
|
|
250
|
+
className: '',
|
|
251
|
+
children: mapText('auth:form.submit.text'),
|
|
252
|
+
}),
|
|
253
|
+
jsx('div', {
|
|
254
|
+
className: 'mt-5',
|
|
255
|
+
children: jsx(SigninForm, {
|
|
256
|
+
mapText: mapText,
|
|
257
|
+
onSubmit: (values) => onSubmit(values.email, values.password),
|
|
258
|
+
errorMessage: errorMessage,
|
|
259
|
+
hideLabels: hideLabels,
|
|
260
|
+
onForgotPassword: onForgotPassword,
|
|
261
|
+
}),
|
|
262
|
+
}),
|
|
263
|
+
],
|
|
252
264
|
}),
|
|
253
|
-
|
|
265
|
+
}),
|
|
254
266
|
});
|
|
255
267
|
}
|
|
256
268
|
|