@main12/auth-login 0.1.0 → 0.1.1
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/components/pages/ForgotPasswordPage.d.ts +1 -1
- package/dist/components/pages/ForgotPasswordPage.js +9 -42
- package/dist/components/pages/ForgotPasswordPageHero.d.ts +5 -0
- package/dist/components/pages/ForgotPasswordPageHero.js +69 -0
- package/dist/components/pages/ForgotPasswordPageTailwind.d.ts +5 -0
- package/dist/components/pages/ForgotPasswordPageTailwind.js +45 -0
- package/dist/components/pages/LoginPage.js +8 -218
- package/dist/components/pages/LoginPageHero.d.ts +11 -0
- package/dist/components/pages/LoginPageHero.js +298 -0
- package/dist/components/pages/LoginPageTailwind.d.ts +11 -0
- package/dist/components/pages/LoginPageTailwind.js +222 -0
- package/dist/components/pages/SetPasswordPage.d.ts +1 -1
- package/dist/components/pages/SetPasswordPage.js +9 -71
- package/dist/components/pages/SetPasswordPageHero.d.ts +5 -0
- package/dist/components/pages/SetPasswordPageHero.js +93 -0
- package/dist/components/pages/SetPasswordPageTailwind.d.ts +5 -0
- package/dist/components/pages/SetPasswordPageTailwind.js +74 -0
- package/dist/components/pages/SignupPage.d.ts +1 -1
- package/dist/components/pages/SignupPage.js +9 -126
- package/dist/components/pages/SignupPageHero.d.ts +10 -0
- package/dist/components/pages/SignupPageHero.js +150 -0
- package/dist/components/pages/SignupPageTailwind.d.ts +10 -0
- package/dist/components/pages/SignupPageTailwind.js +129 -0
- package/dist/components/pages/VerifyOtpPage.js +8 -83
- package/dist/components/pages/VerifyOtpPageHero.d.ts +5 -0
- package/dist/components/pages/VerifyOtpPageHero.js +104 -0
- package/dist/components/pages/VerifyOtpPageTailwind.d.ts +5 -0
- package/dist/components/pages/VerifyOtpPageTailwind.js +87 -0
- package/dist/config.d.ts +8 -0
- package/dist/config.js +6 -0
- package/dist/index.d.ts +4 -4
- package/dist/index.js +5 -1
- package/package.json +5 -2
|
@@ -0,0 +1,298 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
+
import React, { Suspense } from 'react';
|
|
4
|
+
import { useSearchParams } from 'next/navigation';
|
|
5
|
+
import { Button, Input, Divider, Spinner as HSpinner } from '@heroui/react';
|
|
6
|
+
import { motion, AnimatePresence } from 'framer-motion';
|
|
7
|
+
import { Icon } from '@iconify/react';
|
|
8
|
+
import { useLoginFlow } from '../../auth/application/hooks/useLoginFlow.js';
|
|
9
|
+
import { AuthLayout } from '../AuthLayout.js';
|
|
10
|
+
function LoginHeroContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth = true, signupUrl = '/signup', logo, poweredBy, cardClassName, backgroundClass }) {
|
|
11
|
+
const searchParams = useSearchParams();
|
|
12
|
+
const resolvedRedirect = searchParams.get('redirect') || redirectTo;
|
|
13
|
+
const { step, email, password, error, isLoading, isSendingOtp, showPassword, setEmail, setPassword, setShowPassword, handleEmailSubmit, handlePasswordSubmit, handleSendOtp, handleEditEmail, handleGoogleLogin } = useLoginFlow({
|
|
14
|
+
redirectTo: resolvedRedirect,
|
|
15
|
+
onPasswordLogin
|
|
16
|
+
});
|
|
17
|
+
const stepTitle = step === 'otp-prompt' ? 'Verify Identity' : step === 'email' ? 'Welcome Back' : 'Enter Password';
|
|
18
|
+
const stepSubtitle = step === 'otp-prompt' ? "We need to verify it's you." : step === 'email' ? 'Sign in with your email to continue.' : 'Enter your password to sign in.';
|
|
19
|
+
return /*#__PURE__*/ _jsx(AuthLayout, {
|
|
20
|
+
logo: logo,
|
|
21
|
+
title: stepTitle,
|
|
22
|
+
subtitle: stepSubtitle,
|
|
23
|
+
poweredBy: poweredBy,
|
|
24
|
+
cardClassName: cardClassName,
|
|
25
|
+
backgroundClass: backgroundClass,
|
|
26
|
+
footer: /*#__PURE__*/ _jsxs("p", {
|
|
27
|
+
className: "text-center text-gray-600 text-sm",
|
|
28
|
+
children: [
|
|
29
|
+
"Don't have an account?",
|
|
30
|
+
' ',
|
|
31
|
+
/*#__PURE__*/ _jsx("a", {
|
|
32
|
+
href: signupUrl,
|
|
33
|
+
className: "text-gray-900 font-medium hover:underline",
|
|
34
|
+
children: "Sign up"
|
|
35
|
+
})
|
|
36
|
+
]
|
|
37
|
+
}),
|
|
38
|
+
children: /*#__PURE__*/ _jsxs(AnimatePresence, {
|
|
39
|
+
mode: "wait",
|
|
40
|
+
children: [
|
|
41
|
+
step === 'email' && /*#__PURE__*/ _jsxs(motion.div, {
|
|
42
|
+
initial: {
|
|
43
|
+
opacity: 0,
|
|
44
|
+
x: -20
|
|
45
|
+
},
|
|
46
|
+
animate: {
|
|
47
|
+
opacity: 1,
|
|
48
|
+
x: 0
|
|
49
|
+
},
|
|
50
|
+
exit: {
|
|
51
|
+
opacity: 0,
|
|
52
|
+
x: 20
|
|
53
|
+
},
|
|
54
|
+
transition: {
|
|
55
|
+
duration: 0.3
|
|
56
|
+
},
|
|
57
|
+
children: [
|
|
58
|
+
showGoogleOAuth && /*#__PURE__*/ _jsxs(_Fragment, {
|
|
59
|
+
children: [
|
|
60
|
+
/*#__PURE__*/ _jsx(Button, {
|
|
61
|
+
fullWidth: true,
|
|
62
|
+
variant: "bordered",
|
|
63
|
+
size: "lg",
|
|
64
|
+
className: "mb-4 h-12 border-gray-300 rounded-full text-gray-700 hover:bg-gray-50",
|
|
65
|
+
startContent: /*#__PURE__*/ _jsx(Icon, {
|
|
66
|
+
icon: "flat-color-icons:google",
|
|
67
|
+
width: 20
|
|
68
|
+
}),
|
|
69
|
+
onPress: handleGoogleLogin,
|
|
70
|
+
children: "Continue with Google"
|
|
71
|
+
}),
|
|
72
|
+
/*#__PURE__*/ _jsxs("div", {
|
|
73
|
+
className: "flex items-center gap-4 my-4",
|
|
74
|
+
children: [
|
|
75
|
+
/*#__PURE__*/ _jsx(Divider, {
|
|
76
|
+
className: "flex-1"
|
|
77
|
+
}),
|
|
78
|
+
/*#__PURE__*/ _jsx("span", {
|
|
79
|
+
className: "text-gray-500 text-sm",
|
|
80
|
+
children: "or"
|
|
81
|
+
}),
|
|
82
|
+
/*#__PURE__*/ _jsx(Divider, {
|
|
83
|
+
className: "flex-1"
|
|
84
|
+
})
|
|
85
|
+
]
|
|
86
|
+
})
|
|
87
|
+
]
|
|
88
|
+
}),
|
|
89
|
+
/*#__PURE__*/ _jsxs("form", {
|
|
90
|
+
onSubmit: handleEmailSubmit,
|
|
91
|
+
className: "space-y-4",
|
|
92
|
+
children: [
|
|
93
|
+
error && /*#__PURE__*/ _jsx(motion.div, {
|
|
94
|
+
className: "bg-red-50 text-red-600 border border-red-200 rounded-lg p-3 text-sm",
|
|
95
|
+
initial: {
|
|
96
|
+
opacity: 0
|
|
97
|
+
},
|
|
98
|
+
animate: {
|
|
99
|
+
opacity: 1
|
|
100
|
+
},
|
|
101
|
+
children: error
|
|
102
|
+
}),
|
|
103
|
+
/*#__PURE__*/ _jsx(Input, {
|
|
104
|
+
type: "email",
|
|
105
|
+
label: "Email",
|
|
106
|
+
value: email,
|
|
107
|
+
onValueChange: setEmail,
|
|
108
|
+
variant: "bordered",
|
|
109
|
+
size: "lg",
|
|
110
|
+
isRequired: true,
|
|
111
|
+
classNames: {
|
|
112
|
+
input: 'text-gray-900',
|
|
113
|
+
label: 'text-gray-600',
|
|
114
|
+
inputWrapper: 'border-gray-300 hover:border-gray-400 bg-white'
|
|
115
|
+
}
|
|
116
|
+
}),
|
|
117
|
+
/*#__PURE__*/ _jsx(Button, {
|
|
118
|
+
type: "submit",
|
|
119
|
+
fullWidth: true,
|
|
120
|
+
size: "lg",
|
|
121
|
+
color: "primary",
|
|
122
|
+
isLoading: isLoading,
|
|
123
|
+
className: "h-12 font-semibold",
|
|
124
|
+
children: "Continue"
|
|
125
|
+
})
|
|
126
|
+
]
|
|
127
|
+
})
|
|
128
|
+
]
|
|
129
|
+
}, "email"),
|
|
130
|
+
step === 'password' && /*#__PURE__*/ _jsxs(motion.div, {
|
|
131
|
+
initial: {
|
|
132
|
+
opacity: 0,
|
|
133
|
+
x: 20
|
|
134
|
+
},
|
|
135
|
+
animate: {
|
|
136
|
+
opacity: 1,
|
|
137
|
+
x: 0
|
|
138
|
+
},
|
|
139
|
+
exit: {
|
|
140
|
+
opacity: 0,
|
|
141
|
+
x: -20
|
|
142
|
+
},
|
|
143
|
+
transition: {
|
|
144
|
+
duration: 0.3
|
|
145
|
+
},
|
|
146
|
+
children: [
|
|
147
|
+
/*#__PURE__*/ _jsxs("div", {
|
|
148
|
+
className: "flex items-center justify-between border border-gray-300 rounded-xl px-4 py-3 mb-4",
|
|
149
|
+
children: [
|
|
150
|
+
/*#__PURE__*/ _jsx("span", {
|
|
151
|
+
className: "text-gray-900 text-sm",
|
|
152
|
+
children: email
|
|
153
|
+
}),
|
|
154
|
+
/*#__PURE__*/ _jsx("button", {
|
|
155
|
+
type: "button",
|
|
156
|
+
onClick: handleEditEmail,
|
|
157
|
+
className: "text-gray-600 text-sm font-medium hover:text-gray-900",
|
|
158
|
+
children: "Edit"
|
|
159
|
+
})
|
|
160
|
+
]
|
|
161
|
+
}),
|
|
162
|
+
/*#__PURE__*/ _jsxs("form", {
|
|
163
|
+
onSubmit: handlePasswordSubmit,
|
|
164
|
+
className: "space-y-4",
|
|
165
|
+
children: [
|
|
166
|
+
error && /*#__PURE__*/ _jsx(motion.div, {
|
|
167
|
+
className: "bg-red-50 text-red-600 border border-red-200 rounded-lg p-3 text-sm",
|
|
168
|
+
initial: {
|
|
169
|
+
opacity: 0
|
|
170
|
+
},
|
|
171
|
+
animate: {
|
|
172
|
+
opacity: 1
|
|
173
|
+
},
|
|
174
|
+
children: error
|
|
175
|
+
}),
|
|
176
|
+
/*#__PURE__*/ _jsx(Input, {
|
|
177
|
+
type: showPassword ? 'text' : 'password',
|
|
178
|
+
label: "Password",
|
|
179
|
+
value: password,
|
|
180
|
+
onValueChange: setPassword,
|
|
181
|
+
variant: "bordered",
|
|
182
|
+
size: "lg",
|
|
183
|
+
isRequired: true,
|
|
184
|
+
autoFocus: true,
|
|
185
|
+
classNames: {
|
|
186
|
+
input: 'text-gray-900',
|
|
187
|
+
label: 'text-gray-600',
|
|
188
|
+
inputWrapper: 'border-gray-300 hover:border-gray-400 bg-white'
|
|
189
|
+
},
|
|
190
|
+
endContent: /*#__PURE__*/ _jsx("button", {
|
|
191
|
+
type: "button",
|
|
192
|
+
onClick: ()=>setShowPassword(!showPassword),
|
|
193
|
+
children: /*#__PURE__*/ _jsx(Icon, {
|
|
194
|
+
icon: showPassword ? 'lucide:eye-off' : 'lucide:eye',
|
|
195
|
+
className: "text-gray-400",
|
|
196
|
+
width: 20
|
|
197
|
+
})
|
|
198
|
+
})
|
|
199
|
+
}),
|
|
200
|
+
/*#__PURE__*/ _jsx("div", {
|
|
201
|
+
className: "text-left",
|
|
202
|
+
children: /*#__PURE__*/ _jsx("a", {
|
|
203
|
+
href: "/forgot-password",
|
|
204
|
+
className: "text-sm text-gray-700 hover:underline",
|
|
205
|
+
children: "Forgot password?"
|
|
206
|
+
})
|
|
207
|
+
}),
|
|
208
|
+
/*#__PURE__*/ _jsx(Button, {
|
|
209
|
+
type: "submit",
|
|
210
|
+
fullWidth: true,
|
|
211
|
+
size: "lg",
|
|
212
|
+
color: "primary",
|
|
213
|
+
isLoading: isLoading,
|
|
214
|
+
className: "h-12 font-semibold",
|
|
215
|
+
children: "Continue"
|
|
216
|
+
})
|
|
217
|
+
]
|
|
218
|
+
})
|
|
219
|
+
]
|
|
220
|
+
}, "password"),
|
|
221
|
+
step === 'otp-prompt' && /*#__PURE__*/ _jsxs(motion.div, {
|
|
222
|
+
initial: {
|
|
223
|
+
opacity: 0,
|
|
224
|
+
x: 20
|
|
225
|
+
},
|
|
226
|
+
animate: {
|
|
227
|
+
opacity: 1,
|
|
228
|
+
x: 0
|
|
229
|
+
},
|
|
230
|
+
exit: {
|
|
231
|
+
opacity: 0,
|
|
232
|
+
x: -20
|
|
233
|
+
},
|
|
234
|
+
transition: {
|
|
235
|
+
duration: 0.3
|
|
236
|
+
},
|
|
237
|
+
children: [
|
|
238
|
+
/*#__PURE__*/ _jsxs("div", {
|
|
239
|
+
className: "flex items-center justify-between border border-gray-300 rounded-xl px-4 py-3 mb-4",
|
|
240
|
+
children: [
|
|
241
|
+
/*#__PURE__*/ _jsx("span", {
|
|
242
|
+
className: "text-gray-900 text-sm",
|
|
243
|
+
children: email
|
|
244
|
+
}),
|
|
245
|
+
/*#__PURE__*/ _jsx("button", {
|
|
246
|
+
type: "button",
|
|
247
|
+
onClick: handleEditEmail,
|
|
248
|
+
className: "text-gray-600 text-sm font-medium hover:text-gray-900",
|
|
249
|
+
children: "Edit"
|
|
250
|
+
})
|
|
251
|
+
]
|
|
252
|
+
}),
|
|
253
|
+
error && /*#__PURE__*/ _jsx("div", {
|
|
254
|
+
className: "bg-red-50 text-red-600 border border-red-200 rounded-lg p-3 text-sm mb-4",
|
|
255
|
+
children: error
|
|
256
|
+
}),
|
|
257
|
+
/*#__PURE__*/ _jsxs("div", {
|
|
258
|
+
className: "bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4 flex gap-3",
|
|
259
|
+
children: [
|
|
260
|
+
/*#__PURE__*/ _jsx(Icon, {
|
|
261
|
+
icon: "lucide:mail",
|
|
262
|
+
className: "text-blue-500 mt-0.5",
|
|
263
|
+
width: 20
|
|
264
|
+
}),
|
|
265
|
+
/*#__PURE__*/ _jsx("p", {
|
|
266
|
+
className: "text-sm text-blue-700",
|
|
267
|
+
children: "We'll send a verification code to this email."
|
|
268
|
+
})
|
|
269
|
+
]
|
|
270
|
+
}),
|
|
271
|
+
/*#__PURE__*/ _jsx(Button, {
|
|
272
|
+
fullWidth: true,
|
|
273
|
+
size: "lg",
|
|
274
|
+
color: "primary",
|
|
275
|
+
isLoading: isSendingOtp,
|
|
276
|
+
onPress: handleSendOtp,
|
|
277
|
+
className: "h-12 font-semibold",
|
|
278
|
+
children: isSendingOtp ? 'Sending...' : 'Send Code'
|
|
279
|
+
})
|
|
280
|
+
]
|
|
281
|
+
}, "otp-prompt")
|
|
282
|
+
]
|
|
283
|
+
})
|
|
284
|
+
});
|
|
285
|
+
}
|
|
286
|
+
export default function LoginPageHero(props) {
|
|
287
|
+
return /*#__PURE__*/ _jsx(Suspense, {
|
|
288
|
+
fallback: /*#__PURE__*/ _jsx("div", {
|
|
289
|
+
className: "min-h-screen flex items-center justify-center",
|
|
290
|
+
children: /*#__PURE__*/ _jsx(HSpinner, {
|
|
291
|
+
size: "lg"
|
|
292
|
+
})
|
|
293
|
+
}),
|
|
294
|
+
children: /*#__PURE__*/ _jsx(LoginHeroContent, {
|
|
295
|
+
...props
|
|
296
|
+
})
|
|
297
|
+
});
|
|
298
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { AuthLayoutConfig } from '../AuthLayout.js';
|
|
2
|
+
export interface LoginPageProps extends AuthLayoutConfig {
|
|
3
|
+
onPasswordLogin: (credentials: {
|
|
4
|
+
email: string;
|
|
5
|
+
password: string;
|
|
6
|
+
}) => Promise<void>;
|
|
7
|
+
redirectTo?: string;
|
|
8
|
+
showGoogleOAuth?: boolean;
|
|
9
|
+
signupUrl?: string;
|
|
10
|
+
}
|
|
11
|
+
export default function LoginPage(props: LoginPageProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,222 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
+
import React, { Suspense } from 'react';
|
|
4
|
+
import { useSearchParams } from 'next/navigation';
|
|
5
|
+
import { Button, Input, Divider, Spinner } from '../ui/index.js';
|
|
6
|
+
import { useLoginFlow } from '../../auth/application/hooks/useLoginFlow.js';
|
|
7
|
+
import { AuthLayout } from '../AuthLayout.js';
|
|
8
|
+
function LoginContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth = true, signupUrl = '/signup', logo, poweredBy, cardClassName, backgroundClass }) {
|
|
9
|
+
const searchParams = useSearchParams();
|
|
10
|
+
const resolvedRedirect = searchParams.get('redirect') || redirectTo;
|
|
11
|
+
const { step, email, password, error, isLoading, isSendingOtp, showPassword, setEmail, setPassword, setShowPassword, handleEmailSubmit, handlePasswordSubmit, handleSendOtp, handleEditEmail, handleGoogleLogin } = useLoginFlow({
|
|
12
|
+
redirectTo: resolvedRedirect,
|
|
13
|
+
onPasswordLogin
|
|
14
|
+
});
|
|
15
|
+
const stepTitle = step === 'otp-prompt' ? 'Verify Identity' : step === 'email' ? 'Welcome Back' : 'Enter Password';
|
|
16
|
+
const stepSubtitle = step === 'otp-prompt' ? "We need to verify it's you." : step === 'email' ? 'Sign in with your email to continue.' : 'Enter your password to sign in.';
|
|
17
|
+
return /*#__PURE__*/ _jsxs(AuthLayout, {
|
|
18
|
+
logo: logo,
|
|
19
|
+
title: stepTitle,
|
|
20
|
+
subtitle: stepSubtitle,
|
|
21
|
+
poweredBy: poweredBy,
|
|
22
|
+
cardClassName: cardClassName,
|
|
23
|
+
backgroundClass: backgroundClass,
|
|
24
|
+
footer: /*#__PURE__*/ _jsxs("p", {
|
|
25
|
+
className: "text-center text-gray-600 text-sm",
|
|
26
|
+
children: [
|
|
27
|
+
"Don't have an account?",
|
|
28
|
+
' ',
|
|
29
|
+
/*#__PURE__*/ _jsx("a", {
|
|
30
|
+
href: signupUrl,
|
|
31
|
+
className: "text-gray-900 font-medium hover:underline",
|
|
32
|
+
children: "Sign up"
|
|
33
|
+
})
|
|
34
|
+
]
|
|
35
|
+
}),
|
|
36
|
+
children: [
|
|
37
|
+
step === 'email' && /*#__PURE__*/ _jsxs("div", {
|
|
38
|
+
className: "animate-[fadeIn_0.3s_ease-out]",
|
|
39
|
+
children: [
|
|
40
|
+
showGoogleOAuth && /*#__PURE__*/ _jsxs(_Fragment, {
|
|
41
|
+
children: [
|
|
42
|
+
/*#__PURE__*/ _jsxs(Button, {
|
|
43
|
+
fullWidth: true,
|
|
44
|
+
variant: "bordered",
|
|
45
|
+
size: "lg",
|
|
46
|
+
className: "mb-4",
|
|
47
|
+
onPress: handleGoogleLogin,
|
|
48
|
+
children: [
|
|
49
|
+
/*#__PURE__*/ _jsx("span", {
|
|
50
|
+
className: "text-lg",
|
|
51
|
+
children: "G"
|
|
52
|
+
}),
|
|
53
|
+
" Continue with Google"
|
|
54
|
+
]
|
|
55
|
+
}),
|
|
56
|
+
/*#__PURE__*/ _jsxs("div", {
|
|
57
|
+
className: "flex items-center gap-4 my-4",
|
|
58
|
+
children: [
|
|
59
|
+
/*#__PURE__*/ _jsx(Divider, {
|
|
60
|
+
className: "flex-1"
|
|
61
|
+
}),
|
|
62
|
+
/*#__PURE__*/ _jsx("span", {
|
|
63
|
+
className: "text-gray-500 text-sm",
|
|
64
|
+
children: "or"
|
|
65
|
+
}),
|
|
66
|
+
/*#__PURE__*/ _jsx(Divider, {
|
|
67
|
+
className: "flex-1"
|
|
68
|
+
})
|
|
69
|
+
]
|
|
70
|
+
})
|
|
71
|
+
]
|
|
72
|
+
}),
|
|
73
|
+
/*#__PURE__*/ _jsxs("form", {
|
|
74
|
+
onSubmit: handleEmailSubmit,
|
|
75
|
+
className: "space-y-4",
|
|
76
|
+
children: [
|
|
77
|
+
error && /*#__PURE__*/ _jsx("div", {
|
|
78
|
+
className: "bg-red-50 text-red-600 border border-red-200 rounded-lg p-3 text-sm",
|
|
79
|
+
children: error
|
|
80
|
+
}),
|
|
81
|
+
/*#__PURE__*/ _jsx(Input, {
|
|
82
|
+
type: "email",
|
|
83
|
+
label: "Email",
|
|
84
|
+
value: email,
|
|
85
|
+
onValueChange: setEmail,
|
|
86
|
+
isRequired: true
|
|
87
|
+
}),
|
|
88
|
+
/*#__PURE__*/ _jsx(Button, {
|
|
89
|
+
type: "submit",
|
|
90
|
+
variant: "primary",
|
|
91
|
+
isLoading: isLoading,
|
|
92
|
+
children: "Continue"
|
|
93
|
+
})
|
|
94
|
+
]
|
|
95
|
+
})
|
|
96
|
+
]
|
|
97
|
+
}),
|
|
98
|
+
step === 'password' && /*#__PURE__*/ _jsxs("div", {
|
|
99
|
+
className: "animate-[fadeIn_0.3s_ease-out]",
|
|
100
|
+
children: [
|
|
101
|
+
/*#__PURE__*/ _jsxs("div", {
|
|
102
|
+
className: "flex items-center justify-between border border-gray-300 rounded-xl px-4 py-3 mb-4",
|
|
103
|
+
children: [
|
|
104
|
+
/*#__PURE__*/ _jsx("span", {
|
|
105
|
+
className: "text-gray-900 text-sm",
|
|
106
|
+
children: email
|
|
107
|
+
}),
|
|
108
|
+
/*#__PURE__*/ _jsx("button", {
|
|
109
|
+
type: "button",
|
|
110
|
+
onClick: handleEditEmail,
|
|
111
|
+
className: "text-gray-600 text-sm font-medium hover:text-gray-900",
|
|
112
|
+
children: "Edit"
|
|
113
|
+
})
|
|
114
|
+
]
|
|
115
|
+
}),
|
|
116
|
+
/*#__PURE__*/ _jsxs("form", {
|
|
117
|
+
onSubmit: handlePasswordSubmit,
|
|
118
|
+
className: "space-y-4",
|
|
119
|
+
children: [
|
|
120
|
+
error && /*#__PURE__*/ _jsx("div", {
|
|
121
|
+
className: "bg-red-50 text-red-600 border border-red-200 rounded-lg p-3 text-sm",
|
|
122
|
+
children: error
|
|
123
|
+
}),
|
|
124
|
+
/*#__PURE__*/ _jsxs("div", {
|
|
125
|
+
className: "relative",
|
|
126
|
+
children: [
|
|
127
|
+
/*#__PURE__*/ _jsx(Input, {
|
|
128
|
+
type: showPassword ? 'text' : 'password',
|
|
129
|
+
label: "Password",
|
|
130
|
+
value: password,
|
|
131
|
+
onValueChange: setPassword,
|
|
132
|
+
isRequired: true,
|
|
133
|
+
autoFocus: true
|
|
134
|
+
}),
|
|
135
|
+
/*#__PURE__*/ _jsx("button", {
|
|
136
|
+
type: "button",
|
|
137
|
+
onClick: ()=>setShowPassword(!showPassword),
|
|
138
|
+
className: "absolute right-4 top-9 text-gray-400 hover:text-gray-600",
|
|
139
|
+
children: showPassword ? '🙈' : '👁'
|
|
140
|
+
})
|
|
141
|
+
]
|
|
142
|
+
}),
|
|
143
|
+
/*#__PURE__*/ _jsx("div", {
|
|
144
|
+
className: "text-left",
|
|
145
|
+
children: /*#__PURE__*/ _jsx("a", {
|
|
146
|
+
href: "/forgot-password",
|
|
147
|
+
className: "text-sm text-gray-700 hover:text-gray-900 hover:underline",
|
|
148
|
+
children: "Forgot password?"
|
|
149
|
+
})
|
|
150
|
+
}),
|
|
151
|
+
/*#__PURE__*/ _jsx(Button, {
|
|
152
|
+
type: "submit",
|
|
153
|
+
variant: "primary",
|
|
154
|
+
isLoading: isLoading,
|
|
155
|
+
children: "Continue"
|
|
156
|
+
})
|
|
157
|
+
]
|
|
158
|
+
})
|
|
159
|
+
]
|
|
160
|
+
}),
|
|
161
|
+
step === 'otp-prompt' && /*#__PURE__*/ _jsxs("div", {
|
|
162
|
+
className: "animate-[fadeIn_0.3s_ease-out]",
|
|
163
|
+
children: [
|
|
164
|
+
/*#__PURE__*/ _jsxs("div", {
|
|
165
|
+
className: "flex items-center justify-between border border-gray-300 rounded-xl px-4 py-3 mb-4",
|
|
166
|
+
children: [
|
|
167
|
+
/*#__PURE__*/ _jsx("span", {
|
|
168
|
+
className: "text-gray-900 text-sm",
|
|
169
|
+
children: email
|
|
170
|
+
}),
|
|
171
|
+
/*#__PURE__*/ _jsx("button", {
|
|
172
|
+
type: "button",
|
|
173
|
+
onClick: handleEditEmail,
|
|
174
|
+
className: "text-gray-600 text-sm font-medium hover:text-gray-900",
|
|
175
|
+
children: "Edit"
|
|
176
|
+
})
|
|
177
|
+
]
|
|
178
|
+
}),
|
|
179
|
+
error && /*#__PURE__*/ _jsx("div", {
|
|
180
|
+
className: "bg-red-50 text-red-600 border border-red-200 rounded-lg p-3 text-sm mb-4",
|
|
181
|
+
children: error
|
|
182
|
+
}),
|
|
183
|
+
/*#__PURE__*/ _jsx("div", {
|
|
184
|
+
className: "bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4",
|
|
185
|
+
children: /*#__PURE__*/ _jsxs("div", {
|
|
186
|
+
className: "flex gap-3",
|
|
187
|
+
children: [
|
|
188
|
+
/*#__PURE__*/ _jsx("span", {
|
|
189
|
+
className: "text-blue-500 text-lg",
|
|
190
|
+
children: "✉"
|
|
191
|
+
}),
|
|
192
|
+
/*#__PURE__*/ _jsx("p", {
|
|
193
|
+
className: "text-sm text-blue-700",
|
|
194
|
+
children: "We'll send a verification code to this email."
|
|
195
|
+
})
|
|
196
|
+
]
|
|
197
|
+
})
|
|
198
|
+
}),
|
|
199
|
+
/*#__PURE__*/ _jsx(Button, {
|
|
200
|
+
variant: "primary",
|
|
201
|
+
isLoading: isSendingOtp,
|
|
202
|
+
onPress: handleSendOtp,
|
|
203
|
+
children: isSendingOtp ? 'Sending...' : 'Send Code'
|
|
204
|
+
})
|
|
205
|
+
]
|
|
206
|
+
})
|
|
207
|
+
]
|
|
208
|
+
});
|
|
209
|
+
}
|
|
210
|
+
export default function LoginPage(props) {
|
|
211
|
+
return /*#__PURE__*/ _jsx(Suspense, {
|
|
212
|
+
fallback: /*#__PURE__*/ _jsx("div", {
|
|
213
|
+
className: "min-h-screen flex items-center justify-center",
|
|
214
|
+
children: /*#__PURE__*/ _jsx(Spinner, {
|
|
215
|
+
size: "lg"
|
|
216
|
+
})
|
|
217
|
+
}),
|
|
218
|
+
children: /*#__PURE__*/ _jsx(LoginContent, {
|
|
219
|
+
...props
|
|
220
|
+
})
|
|
221
|
+
});
|
|
222
|
+
}
|
|
@@ -2,4 +2,4 @@ import type { AuthLayoutConfig } from '../AuthLayout.js';
|
|
|
2
2
|
export interface SetPasswordPageProps extends AuthLayoutConfig {
|
|
3
3
|
redirectTo?: string;
|
|
4
4
|
}
|
|
5
|
-
export default function SetPasswordPage(
|
|
5
|
+
export default function SetPasswordPage(props: SetPasswordPageProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,74 +1,12 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { jsx as _jsx
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
const strengthBars = Array.from({
|
|
12
|
-
length: 5
|
|
13
|
-
}, (_, i)=>i < strength.score);
|
|
14
|
-
return /*#__PURE__*/ _jsx(AuthLayout, {
|
|
15
|
-
logo: logo,
|
|
16
|
-
title: "Set Your Password",
|
|
17
|
-
subtitle: "Create a secure password for your account",
|
|
18
|
-
poweredBy: poweredBy,
|
|
19
|
-
cardClassName: cardClassName,
|
|
20
|
-
backgroundClass: backgroundClass,
|
|
21
|
-
children: /*#__PURE__*/ _jsxs("form", {
|
|
22
|
-
onSubmit: handleSubmit,
|
|
23
|
-
className: "space-y-4",
|
|
24
|
-
children: [
|
|
25
|
-
error && /*#__PURE__*/ _jsx("div", {
|
|
26
|
-
className: "bg-red-50 text-red-600 border border-red-200 rounded-lg p-3 text-sm animate-[fadeIn_0.2s_ease-out]",
|
|
27
|
-
children: error
|
|
28
|
-
}),
|
|
29
|
-
/*#__PURE__*/ _jsxs("div", {
|
|
30
|
-
className: "relative",
|
|
31
|
-
children: [
|
|
32
|
-
/*#__PURE__*/ _jsx(Input, {
|
|
33
|
-
type: showPassword ? 'text' : 'password',
|
|
34
|
-
label: "New Password",
|
|
35
|
-
value: password,
|
|
36
|
-
onValueChange: setPassword,
|
|
37
|
-
isRequired: true,
|
|
38
|
-
autoFocus: true
|
|
39
|
-
}),
|
|
40
|
-
/*#__PURE__*/ _jsx("button", {
|
|
41
|
-
type: "button",
|
|
42
|
-
onClick: ()=>setShowPassword(!showPassword),
|
|
43
|
-
className: "absolute right-4 top-9 text-gray-400 hover:text-gray-600",
|
|
44
|
-
children: showPassword ? '🙈' : '👁'
|
|
45
|
-
})
|
|
46
|
-
]
|
|
47
|
-
}),
|
|
48
|
-
password.length > 0 && /*#__PURE__*/ _jsx("div", {
|
|
49
|
-
className: "flex gap-1",
|
|
50
|
-
children: strengthBars.map((active, i)=>/*#__PURE__*/ _jsx("div", {
|
|
51
|
-
className: `h-1 flex-1 rounded-full ${active ? 'bg-[#D5E855]' : 'bg-gray-200'}`
|
|
52
|
-
}, i))
|
|
53
|
-
}),
|
|
54
|
-
password.length > 0 && !strength.isValid && /*#__PURE__*/ _jsx("p", {
|
|
55
|
-
className: "text-xs text-gray-500",
|
|
56
|
-
children: "At least 8 chars with 3 of: uppercase, lowercase, number, special character"
|
|
57
|
-
}),
|
|
58
|
-
/*#__PURE__*/ _jsx(Input, {
|
|
59
|
-
type: showPassword ? 'text' : 'password',
|
|
60
|
-
label: "Confirm Password",
|
|
61
|
-
value: confirmPassword,
|
|
62
|
-
onValueChange: setConfirmPassword,
|
|
63
|
-
isRequired: true
|
|
64
|
-
}),
|
|
65
|
-
/*#__PURE__*/ _jsx(Button, {
|
|
66
|
-
type: "submit",
|
|
67
|
-
variant: "primary",
|
|
68
|
-
isLoading: isLoading,
|
|
69
|
-
children: "Set Password"
|
|
70
|
-
})
|
|
71
|
-
]
|
|
72
|
-
})
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { pluginConfig } from '../../config.js';
|
|
4
|
+
import SetPasswordPageTailwind from './SetPasswordPageTailwind.js';
|
|
5
|
+
import SetPasswordPageHero from './SetPasswordPageHero.js';
|
|
6
|
+
export default function SetPasswordPage(props) {
|
|
7
|
+
return pluginConfig.style === 'hero-ui' ? /*#__PURE__*/ _jsx(SetPasswordPageHero, {
|
|
8
|
+
...props
|
|
9
|
+
}) : /*#__PURE__*/ _jsx(SetPasswordPageTailwind, {
|
|
10
|
+
...props
|
|
73
11
|
});
|
|
74
12
|
}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import type { AuthLayoutConfig } from '../AuthLayout.js';
|
|
2
|
+
export interface SetPasswordPageHeroProps extends AuthLayoutConfig {
|
|
3
|
+
redirectTo?: string;
|
|
4
|
+
}
|
|
5
|
+
export default function SetPasswordPageHero({ redirectTo, logo, poweredBy, cardClassName, backgroundClass }: SetPasswordPageHeroProps): import("react/jsx-runtime").JSX.Element;
|