@pixpilot/shadcn-auth 0.0.14 → 0.0.16
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/AuthForms.cjs +47 -1
- package/dist/AuthForms.js +44 -1
- package/dist/GoogleSignIn.cjs +46 -1
- package/dist/GoogleSignIn.js +42 -1
- package/dist/ResetPasswordForm.cjs +106 -1
- package/dist/ResetPasswordForm.js +100 -1
- package/dist/SignInForm.cjs +164 -1
- package/dist/SignInForm.js +159 -1
- package/dist/SignUpForm.cjs +154 -1
- package/dist/SignUpForm.js +149 -1
- package/dist/_virtual/rolldown_runtime.cjs +25 -1
- package/dist/index.cjs +11 -1
- package/dist/index.d.cts +0 -1
- package/dist/index.d.ts +0 -1
- package/dist/index.js +7 -1
- package/package.json +6 -6
- package/dist/index copy.cjs +0 -1
- package/dist/index copy.d.cts +0 -5
- package/dist/index copy.d.ts +0 -5
- package/dist/index copy.js +0 -1
package/dist/AuthForms.cjs
CHANGED
|
@@ -1 +1,47 @@
|
|
|
1
|
-
const
|
|
1
|
+
const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
|
|
2
|
+
const require_ResetPasswordForm = require('./ResetPasswordForm.cjs');
|
|
3
|
+
const require_SignInForm = require('./SignInForm.cjs');
|
|
4
|
+
const require_SignUpForm = require('./SignUpForm.cjs');
|
|
5
|
+
let react = require("react");
|
|
6
|
+
react = require_rolldown_runtime.__toESM(react);
|
|
7
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
8
|
+
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
|
|
9
|
+
|
|
10
|
+
//#region src/AuthForms.tsx
|
|
11
|
+
function AuthForms({ handleSignIn, handleSignUp, handleResetPassword, authLoadingState, authErrorData }) {
|
|
12
|
+
const [authMode, setAuthMode] = (0, react.useState)("signin");
|
|
13
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
14
|
+
className: "flex min-h-screen items-center justify-center p-4",
|
|
15
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
16
|
+
className: "w-full max-w-md",
|
|
17
|
+
children: [
|
|
18
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
|
|
19
|
+
className: "mb-6 text-center text-3xl font-bold",
|
|
20
|
+
children: "Job Hunter"
|
|
21
|
+
}),
|
|
22
|
+
authMode === "signin" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SignInForm.SignInForm, {
|
|
23
|
+
onSignIn: handleSignIn,
|
|
24
|
+
isLoading: authLoadingState.isLoading,
|
|
25
|
+
error: authErrorData?.error ?? null,
|
|
26
|
+
onSwitchToSignUp: () => setAuthMode("signup"),
|
|
27
|
+
onSwitchToReset: () => setAuthMode("reset")
|
|
28
|
+
}),
|
|
29
|
+
authMode === "signup" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SignUpForm.SignUpForm, {
|
|
30
|
+
onSignUp: handleSignUp,
|
|
31
|
+
isLoading: authLoadingState.isLoading,
|
|
32
|
+
error: authErrorData?.error ?? null,
|
|
33
|
+
onSwitchToSignIn: () => setAuthMode("signin")
|
|
34
|
+
}),
|
|
35
|
+
authMode === "reset" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ResetPasswordForm.ResetPasswordForm, {
|
|
36
|
+
onResetPassword: handleResetPassword,
|
|
37
|
+
isLoading: authLoadingState.isLoading,
|
|
38
|
+
error: authErrorData?.error ?? null,
|
|
39
|
+
onSwitchToSignIn: () => setAuthMode("signin")
|
|
40
|
+
})
|
|
41
|
+
]
|
|
42
|
+
})
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
//#endregion
|
|
47
|
+
exports.AuthForms = AuthForms;
|
package/dist/AuthForms.js
CHANGED
|
@@ -1 +1,44 @@
|
|
|
1
|
-
import{ResetPasswordForm
|
|
1
|
+
import { ResetPasswordForm } from "./ResetPasswordForm.js";
|
|
2
|
+
import { SignInForm } from "./SignInForm.js";
|
|
3
|
+
import { SignUpForm } from "./SignUpForm.js";
|
|
4
|
+
import React, { useState } from "react";
|
|
5
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
|
|
7
|
+
//#region src/AuthForms.tsx
|
|
8
|
+
function AuthForms({ handleSignIn, handleSignUp, handleResetPassword, authLoadingState, authErrorData }) {
|
|
9
|
+
const [authMode, setAuthMode] = useState("signin");
|
|
10
|
+
return /* @__PURE__ */ jsx("div", {
|
|
11
|
+
className: "flex min-h-screen items-center justify-center p-4",
|
|
12
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
13
|
+
className: "w-full max-w-md",
|
|
14
|
+
children: [
|
|
15
|
+
/* @__PURE__ */ jsx("h1", {
|
|
16
|
+
className: "mb-6 text-center text-3xl font-bold",
|
|
17
|
+
children: "Job Hunter"
|
|
18
|
+
}),
|
|
19
|
+
authMode === "signin" && /* @__PURE__ */ jsx(SignInForm, {
|
|
20
|
+
onSignIn: handleSignIn,
|
|
21
|
+
isLoading: authLoadingState.isLoading,
|
|
22
|
+
error: authErrorData?.error ?? null,
|
|
23
|
+
onSwitchToSignUp: () => setAuthMode("signup"),
|
|
24
|
+
onSwitchToReset: () => setAuthMode("reset")
|
|
25
|
+
}),
|
|
26
|
+
authMode === "signup" && /* @__PURE__ */ jsx(SignUpForm, {
|
|
27
|
+
onSignUp: handleSignUp,
|
|
28
|
+
isLoading: authLoadingState.isLoading,
|
|
29
|
+
error: authErrorData?.error ?? null,
|
|
30
|
+
onSwitchToSignIn: () => setAuthMode("signin")
|
|
31
|
+
}),
|
|
32
|
+
authMode === "reset" && /* @__PURE__ */ jsx(ResetPasswordForm, {
|
|
33
|
+
onResetPassword: handleResetPassword,
|
|
34
|
+
isLoading: authLoadingState.isLoading,
|
|
35
|
+
error: authErrorData?.error ?? null,
|
|
36
|
+
onSwitchToSignIn: () => setAuthMode("signin")
|
|
37
|
+
})
|
|
38
|
+
]
|
|
39
|
+
})
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
//#endregion
|
|
44
|
+
export { AuthForms };
|
package/dist/GoogleSignIn.cjs
CHANGED
|
@@ -1 +1,46 @@
|
|
|
1
|
-
const
|
|
1
|
+
const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
|
|
2
|
+
let react = require("react");
|
|
3
|
+
react = require_rolldown_runtime.__toESM(react);
|
|
4
|
+
let __pixpilot_shadcn_ui = require("@pixpilot/shadcn-ui");
|
|
5
|
+
__pixpilot_shadcn_ui = require_rolldown_runtime.__toESM(__pixpilot_shadcn_ui);
|
|
6
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
7
|
+
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
|
|
8
|
+
|
|
9
|
+
//#region src/GoogleSignIn.tsx
|
|
10
|
+
const GoogleSignIn = ({ onGoogleSignIn, isLoading }) => {
|
|
11
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn_ui.Button, {
|
|
12
|
+
type: "button",
|
|
13
|
+
variant: "outline",
|
|
14
|
+
className: "w-full",
|
|
15
|
+
disabled: isLoading,
|
|
16
|
+
onClick: () => {
|
|
17
|
+
onGoogleSignIn().catch(console.error);
|
|
18
|
+
},
|
|
19
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
|
|
20
|
+
className: "mr-2 h-4 w-4",
|
|
21
|
+
viewBox: "0 0 24 24",
|
|
22
|
+
children: [
|
|
23
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
|
|
24
|
+
fill: "currentColor",
|
|
25
|
+
d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
|
|
26
|
+
}),
|
|
27
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
|
|
28
|
+
fill: "currentColor",
|
|
29
|
+
d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
|
|
30
|
+
}),
|
|
31
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
|
|
32
|
+
fill: "currentColor",
|
|
33
|
+
d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
|
|
34
|
+
}),
|
|
35
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
|
|
36
|
+
fill: "currentColor",
|
|
37
|
+
d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
|
|
38
|
+
})
|
|
39
|
+
]
|
|
40
|
+
}), "Sign in with Google"]
|
|
41
|
+
});
|
|
42
|
+
};
|
|
43
|
+
GoogleSignIn.displayName = "GoogleSignIn";
|
|
44
|
+
|
|
45
|
+
//#endregion
|
|
46
|
+
exports.GoogleSignIn = GoogleSignIn;
|
package/dist/GoogleSignIn.js
CHANGED
|
@@ -1 +1,42 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Button } from "@pixpilot/shadcn-ui";
|
|
3
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
|
|
5
|
+
//#region src/GoogleSignIn.tsx
|
|
6
|
+
const GoogleSignIn = ({ onGoogleSignIn, isLoading }) => {
|
|
7
|
+
return /* @__PURE__ */ jsxs(Button, {
|
|
8
|
+
type: "button",
|
|
9
|
+
variant: "outline",
|
|
10
|
+
className: "w-full",
|
|
11
|
+
disabled: isLoading,
|
|
12
|
+
onClick: () => {
|
|
13
|
+
onGoogleSignIn().catch(console.error);
|
|
14
|
+
},
|
|
15
|
+
children: [/* @__PURE__ */ jsxs("svg", {
|
|
16
|
+
className: "mr-2 h-4 w-4",
|
|
17
|
+
viewBox: "0 0 24 24",
|
|
18
|
+
children: [
|
|
19
|
+
/* @__PURE__ */ jsx("path", {
|
|
20
|
+
fill: "currentColor",
|
|
21
|
+
d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
|
|
22
|
+
}),
|
|
23
|
+
/* @__PURE__ */ jsx("path", {
|
|
24
|
+
fill: "currentColor",
|
|
25
|
+
d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
|
|
26
|
+
}),
|
|
27
|
+
/* @__PURE__ */ jsx("path", {
|
|
28
|
+
fill: "currentColor",
|
|
29
|
+
d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
|
|
30
|
+
}),
|
|
31
|
+
/* @__PURE__ */ jsx("path", {
|
|
32
|
+
fill: "currentColor",
|
|
33
|
+
d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
|
|
34
|
+
})
|
|
35
|
+
]
|
|
36
|
+
}), "Sign in with Google"]
|
|
37
|
+
});
|
|
38
|
+
};
|
|
39
|
+
GoogleSignIn.displayName = "GoogleSignIn";
|
|
40
|
+
|
|
41
|
+
//#endregion
|
|
42
|
+
export { GoogleSignIn };
|
|
@@ -1 +1,106 @@
|
|
|
1
|
-
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
|
|
5
|
+
let react = require("react");
|
|
6
|
+
react = require_rolldown_runtime.__toESM(react);
|
|
7
|
+
let __pixpilot_shadcn = require("@pixpilot/shadcn");
|
|
8
|
+
__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
|
|
9
|
+
let __pixpilot_shadcn_ui = require("@pixpilot/shadcn-ui");
|
|
10
|
+
__pixpilot_shadcn_ui = require_rolldown_runtime.__toESM(__pixpilot_shadcn_ui);
|
|
11
|
+
let lucide_react = require("lucide-react");
|
|
12
|
+
lucide_react = require_rolldown_runtime.__toESM(lucide_react);
|
|
13
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
14
|
+
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
|
|
15
|
+
|
|
16
|
+
//#region src/ResetPasswordForm.tsx
|
|
17
|
+
function ResetPasswordForm({ onResetPassword, isLoading, error, onSwitchToSignIn }) {
|
|
18
|
+
const [email, setEmail] = (0, react.useState)("");
|
|
19
|
+
const [emailError, setEmailError] = (0, react.useState)("");
|
|
20
|
+
const validateEmail = (emailValue) => {
|
|
21
|
+
if (!emailValue.trim()) {
|
|
22
|
+
setEmailError("Email is required");
|
|
23
|
+
return false;
|
|
24
|
+
}
|
|
25
|
+
const input = document.createElement("input");
|
|
26
|
+
input.type = "email";
|
|
27
|
+
input.value = emailValue;
|
|
28
|
+
if (!input.validity.valid) {
|
|
29
|
+
setEmailError("Please enter a valid email address");
|
|
30
|
+
return false;
|
|
31
|
+
}
|
|
32
|
+
setEmailError("");
|
|
33
|
+
return true;
|
|
34
|
+
};
|
|
35
|
+
const handleSubmit = (e) => {
|
|
36
|
+
e.preventDefault();
|
|
37
|
+
if (!validateEmail(email)) return;
|
|
38
|
+
onResetPassword(email).catch(console.error);
|
|
39
|
+
};
|
|
40
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Card, {
|
|
41
|
+
className: "mx-auto w-full max-w-md",
|
|
42
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.CardContent, {
|
|
43
|
+
className: "p-6",
|
|
44
|
+
children: [
|
|
45
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
|
|
46
|
+
className: "mb-4 text-center text-2xl font-bold",
|
|
47
|
+
children: "Reset Password"
|
|
48
|
+
}),
|
|
49
|
+
error != null && error.trim() !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn_ui.Alert, {
|
|
50
|
+
variant: "error",
|
|
51
|
+
description: error
|
|
52
|
+
}),
|
|
53
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
|
|
54
|
+
onSubmit: handleSubmit,
|
|
55
|
+
className: "space-y-4",
|
|
56
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
57
|
+
className: "space-y-2",
|
|
58
|
+
children: [
|
|
59
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Label, {
|
|
60
|
+
htmlFor: "email",
|
|
61
|
+
children: "Email"
|
|
62
|
+
}),
|
|
63
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Input, {
|
|
64
|
+
id: "email",
|
|
65
|
+
type: "email",
|
|
66
|
+
value: email,
|
|
67
|
+
onChange: (e) => {
|
|
68
|
+
setEmail(e.target.value);
|
|
69
|
+
if (emailError) setEmailError("");
|
|
70
|
+
},
|
|
71
|
+
disabled: isLoading,
|
|
72
|
+
required: true
|
|
73
|
+
}),
|
|
74
|
+
emailError && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
|
|
75
|
+
className: "text-destructive text-sm",
|
|
76
|
+
children: emailError
|
|
77
|
+
})
|
|
78
|
+
]
|
|
79
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
|
|
80
|
+
type: "submit",
|
|
81
|
+
className: "mt-6 w-full",
|
|
82
|
+
disabled: isLoading,
|
|
83
|
+
children: [isLoading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), isLoading ? "Sending Reset Email..." : "Send Reset Email"]
|
|
84
|
+
})]
|
|
85
|
+
}),
|
|
86
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
87
|
+
className: "mt-4 text-center",
|
|
88
|
+
children: onSwitchToSignIn && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
|
|
89
|
+
className: "text-sm",
|
|
90
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Button, {
|
|
91
|
+
variant: "link",
|
|
92
|
+
size: "sm",
|
|
93
|
+
onClick: onSwitchToSignIn,
|
|
94
|
+
disabled: isLoading,
|
|
95
|
+
className: "min-w-0 p-0 font-medium",
|
|
96
|
+
children: "Back to sign in"
|
|
97
|
+
})
|
|
98
|
+
})
|
|
99
|
+
})
|
|
100
|
+
]
|
|
101
|
+
})
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
//#endregion
|
|
106
|
+
exports.ResetPasswordForm = ResetPasswordForm;
|
|
@@ -1 +1,100 @@
|
|
|
1
|
-
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
import React, { useState } from "react";
|
|
5
|
+
import { Button, Card, CardContent, Input, Label } from "@pixpilot/shadcn";
|
|
6
|
+
import { Alert as Alert$1 } from "@pixpilot/shadcn-ui";
|
|
7
|
+
import { Loader2 } from "lucide-react";
|
|
8
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
9
|
+
|
|
10
|
+
//#region src/ResetPasswordForm.tsx
|
|
11
|
+
function ResetPasswordForm({ onResetPassword, isLoading, error, onSwitchToSignIn }) {
|
|
12
|
+
const [email, setEmail] = useState("");
|
|
13
|
+
const [emailError, setEmailError] = useState("");
|
|
14
|
+
const validateEmail = (emailValue) => {
|
|
15
|
+
if (!emailValue.trim()) {
|
|
16
|
+
setEmailError("Email is required");
|
|
17
|
+
return false;
|
|
18
|
+
}
|
|
19
|
+
const input = document.createElement("input");
|
|
20
|
+
input.type = "email";
|
|
21
|
+
input.value = emailValue;
|
|
22
|
+
if (!input.validity.valid) {
|
|
23
|
+
setEmailError("Please enter a valid email address");
|
|
24
|
+
return false;
|
|
25
|
+
}
|
|
26
|
+
setEmailError("");
|
|
27
|
+
return true;
|
|
28
|
+
};
|
|
29
|
+
const handleSubmit = (e) => {
|
|
30
|
+
e.preventDefault();
|
|
31
|
+
if (!validateEmail(email)) return;
|
|
32
|
+
onResetPassword(email).catch(console.error);
|
|
33
|
+
};
|
|
34
|
+
return /* @__PURE__ */ jsx(Card, {
|
|
35
|
+
className: "mx-auto w-full max-w-md",
|
|
36
|
+
children: /* @__PURE__ */ jsxs(CardContent, {
|
|
37
|
+
className: "p-6",
|
|
38
|
+
children: [
|
|
39
|
+
/* @__PURE__ */ jsx("h2", {
|
|
40
|
+
className: "mb-4 text-center text-2xl font-bold",
|
|
41
|
+
children: "Reset Password"
|
|
42
|
+
}),
|
|
43
|
+
error != null && error.trim() !== "" && /* @__PURE__ */ jsx(Alert$1, {
|
|
44
|
+
variant: "error",
|
|
45
|
+
description: error
|
|
46
|
+
}),
|
|
47
|
+
/* @__PURE__ */ jsxs("form", {
|
|
48
|
+
onSubmit: handleSubmit,
|
|
49
|
+
className: "space-y-4",
|
|
50
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
51
|
+
className: "space-y-2",
|
|
52
|
+
children: [
|
|
53
|
+
/* @__PURE__ */ jsx(Label, {
|
|
54
|
+
htmlFor: "email",
|
|
55
|
+
children: "Email"
|
|
56
|
+
}),
|
|
57
|
+
/* @__PURE__ */ jsx(Input, {
|
|
58
|
+
id: "email",
|
|
59
|
+
type: "email",
|
|
60
|
+
value: email,
|
|
61
|
+
onChange: (e) => {
|
|
62
|
+
setEmail(e.target.value);
|
|
63
|
+
if (emailError) setEmailError("");
|
|
64
|
+
},
|
|
65
|
+
disabled: isLoading,
|
|
66
|
+
required: true
|
|
67
|
+
}),
|
|
68
|
+
emailError && /* @__PURE__ */ jsx("p", {
|
|
69
|
+
className: "text-destructive text-sm",
|
|
70
|
+
children: emailError
|
|
71
|
+
})
|
|
72
|
+
]
|
|
73
|
+
}), /* @__PURE__ */ jsxs(Button, {
|
|
74
|
+
type: "submit",
|
|
75
|
+
className: "mt-6 w-full",
|
|
76
|
+
disabled: isLoading,
|
|
77
|
+
children: [isLoading && /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), isLoading ? "Sending Reset Email..." : "Send Reset Email"]
|
|
78
|
+
})]
|
|
79
|
+
}),
|
|
80
|
+
/* @__PURE__ */ jsx("div", {
|
|
81
|
+
className: "mt-4 text-center",
|
|
82
|
+
children: onSwitchToSignIn && /* @__PURE__ */ jsx("p", {
|
|
83
|
+
className: "text-sm",
|
|
84
|
+
children: /* @__PURE__ */ jsx(Button, {
|
|
85
|
+
variant: "link",
|
|
86
|
+
size: "sm",
|
|
87
|
+
onClick: onSwitchToSignIn,
|
|
88
|
+
disabled: isLoading,
|
|
89
|
+
className: "min-w-0 p-0 font-medium",
|
|
90
|
+
children: "Back to sign in"
|
|
91
|
+
})
|
|
92
|
+
})
|
|
93
|
+
})
|
|
94
|
+
]
|
|
95
|
+
})
|
|
96
|
+
});
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
//#endregion
|
|
100
|
+
export { ResetPasswordForm };
|
package/dist/SignInForm.cjs
CHANGED
|
@@ -1 +1,164 @@
|
|
|
1
|
-
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
|
|
5
|
+
const require_GoogleSignIn = require('./GoogleSignIn.cjs');
|
|
6
|
+
let react = require("react");
|
|
7
|
+
react = require_rolldown_runtime.__toESM(react);
|
|
8
|
+
let __pixpilot_shadcn = require("@pixpilot/shadcn");
|
|
9
|
+
__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
|
|
10
|
+
let lucide_react = require("lucide-react");
|
|
11
|
+
lucide_react = require_rolldown_runtime.__toESM(lucide_react);
|
|
12
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
13
|
+
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
|
|
14
|
+
|
|
15
|
+
//#region src/SignInForm.tsx
|
|
16
|
+
const MIN_PASSWORD_LENGTH = 6;
|
|
17
|
+
function SignInForm({ onSignIn, onGoogleSignIn, isLoading, error, onSwitchToSignUp, onSwitchToReset }) {
|
|
18
|
+
const [email, setEmail] = (0, react.useState)("");
|
|
19
|
+
const [password, setPassword] = (0, react.useState)("");
|
|
20
|
+
const [emailError, setEmailError] = (0, react.useState)("");
|
|
21
|
+
const [passwordError, setPasswordError] = (0, react.useState)("");
|
|
22
|
+
const validateEmail = (emailValue) => {
|
|
23
|
+
if (!emailValue.trim()) {
|
|
24
|
+
setEmailError("Email is required");
|
|
25
|
+
return false;
|
|
26
|
+
}
|
|
27
|
+
const input = document.createElement("input");
|
|
28
|
+
input.type = "email";
|
|
29
|
+
input.value = emailValue;
|
|
30
|
+
if (!input.validity.valid) {
|
|
31
|
+
setEmailError("Please enter a valid email address");
|
|
32
|
+
return false;
|
|
33
|
+
}
|
|
34
|
+
setEmailError("");
|
|
35
|
+
return true;
|
|
36
|
+
};
|
|
37
|
+
const validatePassword = (passwordValue) => {
|
|
38
|
+
if (!passwordValue.trim()) {
|
|
39
|
+
setPasswordError("Password is required");
|
|
40
|
+
return false;
|
|
41
|
+
}
|
|
42
|
+
if (passwordValue.length < MIN_PASSWORD_LENGTH) {
|
|
43
|
+
setPasswordError(`Password must be at least ${MIN_PASSWORD_LENGTH} characters long`);
|
|
44
|
+
return false;
|
|
45
|
+
}
|
|
46
|
+
setPasswordError("");
|
|
47
|
+
return true;
|
|
48
|
+
};
|
|
49
|
+
const handleSubmit = (e) => {
|
|
50
|
+
e.preventDefault();
|
|
51
|
+
if (!validateEmail(email)) return;
|
|
52
|
+
if (!validatePassword(password)) return;
|
|
53
|
+
onSignIn(email, password).catch(console.error);
|
|
54
|
+
};
|
|
55
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Card, {
|
|
56
|
+
className: "mx-auto w-full max-w-md",
|
|
57
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.CardContent, {
|
|
58
|
+
className: "p-6",
|
|
59
|
+
children: [
|
|
60
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
|
|
61
|
+
className: "mb-4 text-center text-2xl font-bold",
|
|
62
|
+
children: "Sign In"
|
|
63
|
+
}),
|
|
64
|
+
error != null && error.trim() !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Alert, {
|
|
65
|
+
variant: "destructive",
|
|
66
|
+
className: "mb-4",
|
|
67
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.AlertDescription, { children: error })
|
|
68
|
+
}),
|
|
69
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
|
|
70
|
+
onSubmit: handleSubmit,
|
|
71
|
+
className: "space-y-4",
|
|
72
|
+
children: [
|
|
73
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
74
|
+
className: "space-y-2",
|
|
75
|
+
children: [
|
|
76
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Label, {
|
|
77
|
+
htmlFor: "email",
|
|
78
|
+
children: "Email"
|
|
79
|
+
}),
|
|
80
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Input, {
|
|
81
|
+
id: "email",
|
|
82
|
+
type: "email",
|
|
83
|
+
value: email,
|
|
84
|
+
onChange: (e) => {
|
|
85
|
+
setEmail(e.target.value);
|
|
86
|
+
if (emailError) setEmailError("");
|
|
87
|
+
},
|
|
88
|
+
disabled: isLoading,
|
|
89
|
+
required: true,
|
|
90
|
+
className: emailError ? "border-destructive" : ""
|
|
91
|
+
}),
|
|
92
|
+
emailError && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
|
|
93
|
+
className: "text-destructive text-sm",
|
|
94
|
+
children: emailError
|
|
95
|
+
})
|
|
96
|
+
]
|
|
97
|
+
}),
|
|
98
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
99
|
+
className: "space-y-2",
|
|
100
|
+
children: [
|
|
101
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Label, {
|
|
102
|
+
htmlFor: "password",
|
|
103
|
+
children: "Password"
|
|
104
|
+
}),
|
|
105
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Input, {
|
|
106
|
+
id: "password",
|
|
107
|
+
type: "password",
|
|
108
|
+
value: password,
|
|
109
|
+
onChange: (e) => {
|
|
110
|
+
setPassword(e.target.value);
|
|
111
|
+
if (passwordError) setPasswordError("");
|
|
112
|
+
},
|
|
113
|
+
disabled: isLoading,
|
|
114
|
+
required: true,
|
|
115
|
+
className: passwordError ? "border-destructive" : ""
|
|
116
|
+
}),
|
|
117
|
+
passwordError && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
|
|
118
|
+
className: "text-destructive text-sm",
|
|
119
|
+
children: passwordError
|
|
120
|
+
})
|
|
121
|
+
]
|
|
122
|
+
}),
|
|
123
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
|
|
124
|
+
type: "submit",
|
|
125
|
+
className: "mt-6 w-full",
|
|
126
|
+
disabled: isLoading,
|
|
127
|
+
children: [isLoading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), isLoading ? "Signing In..." : "Sign In"]
|
|
128
|
+
})
|
|
129
|
+
]
|
|
130
|
+
}),
|
|
131
|
+
onGoogleSignIn != null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.OrContinueWithSeparator, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_GoogleSignIn.GoogleSignIn, {
|
|
132
|
+
onGoogleSignIn,
|
|
133
|
+
isLoading
|
|
134
|
+
})] }),
|
|
135
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Separator, { className: "my-4" }),
|
|
136
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
137
|
+
className: "space-y-2 text-center text-sm",
|
|
138
|
+
children: [onSwitchToSignUp && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", { children: [
|
|
139
|
+
"Don't have an account?",
|
|
140
|
+
" ",
|
|
141
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Button, {
|
|
142
|
+
variant: "link",
|
|
143
|
+
size: "sm",
|
|
144
|
+
onClick: onSwitchToSignUp,
|
|
145
|
+
disabled: isLoading,
|
|
146
|
+
className: "h-auto p-0",
|
|
147
|
+
children: "Sign up"
|
|
148
|
+
})
|
|
149
|
+
] }), onSwitchToReset && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Button, {
|
|
150
|
+
variant: "link",
|
|
151
|
+
size: "sm",
|
|
152
|
+
onClick: onSwitchToReset,
|
|
153
|
+
disabled: isLoading,
|
|
154
|
+
className: "h-auto p-0",
|
|
155
|
+
children: "Forgot your password?"
|
|
156
|
+
}) })]
|
|
157
|
+
})
|
|
158
|
+
]
|
|
159
|
+
})
|
|
160
|
+
});
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
//#endregion
|
|
164
|
+
exports.SignInForm = SignInForm;
|
package/dist/SignInForm.js
CHANGED
|
@@ -1 +1,159 @@
|
|
|
1
|
-
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
import { GoogleSignIn } from "./GoogleSignIn.js";
|
|
5
|
+
import React, { useState } from "react";
|
|
6
|
+
import { Alert, AlertDescription, Button, Card, CardContent, Input, Label, OrContinueWithSeparator, Separator } from "@pixpilot/shadcn";
|
|
7
|
+
import { Loader2 } from "lucide-react";
|
|
8
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
9
|
+
|
|
10
|
+
//#region src/SignInForm.tsx
|
|
11
|
+
const MIN_PASSWORD_LENGTH = 6;
|
|
12
|
+
function SignInForm({ onSignIn, onGoogleSignIn, isLoading, error, onSwitchToSignUp, onSwitchToReset }) {
|
|
13
|
+
const [email, setEmail] = useState("");
|
|
14
|
+
const [password, setPassword] = useState("");
|
|
15
|
+
const [emailError, setEmailError] = useState("");
|
|
16
|
+
const [passwordError, setPasswordError] = useState("");
|
|
17
|
+
const validateEmail = (emailValue) => {
|
|
18
|
+
if (!emailValue.trim()) {
|
|
19
|
+
setEmailError("Email is required");
|
|
20
|
+
return false;
|
|
21
|
+
}
|
|
22
|
+
const input = document.createElement("input");
|
|
23
|
+
input.type = "email";
|
|
24
|
+
input.value = emailValue;
|
|
25
|
+
if (!input.validity.valid) {
|
|
26
|
+
setEmailError("Please enter a valid email address");
|
|
27
|
+
return false;
|
|
28
|
+
}
|
|
29
|
+
setEmailError("");
|
|
30
|
+
return true;
|
|
31
|
+
};
|
|
32
|
+
const validatePassword = (passwordValue) => {
|
|
33
|
+
if (!passwordValue.trim()) {
|
|
34
|
+
setPasswordError("Password is required");
|
|
35
|
+
return false;
|
|
36
|
+
}
|
|
37
|
+
if (passwordValue.length < MIN_PASSWORD_LENGTH) {
|
|
38
|
+
setPasswordError(`Password must be at least ${MIN_PASSWORD_LENGTH} characters long`);
|
|
39
|
+
return false;
|
|
40
|
+
}
|
|
41
|
+
setPasswordError("");
|
|
42
|
+
return true;
|
|
43
|
+
};
|
|
44
|
+
const handleSubmit = (e) => {
|
|
45
|
+
e.preventDefault();
|
|
46
|
+
if (!validateEmail(email)) return;
|
|
47
|
+
if (!validatePassword(password)) return;
|
|
48
|
+
onSignIn(email, password).catch(console.error);
|
|
49
|
+
};
|
|
50
|
+
return /* @__PURE__ */ jsx(Card, {
|
|
51
|
+
className: "mx-auto w-full max-w-md",
|
|
52
|
+
children: /* @__PURE__ */ jsxs(CardContent, {
|
|
53
|
+
className: "p-6",
|
|
54
|
+
children: [
|
|
55
|
+
/* @__PURE__ */ jsx("h2", {
|
|
56
|
+
className: "mb-4 text-center text-2xl font-bold",
|
|
57
|
+
children: "Sign In"
|
|
58
|
+
}),
|
|
59
|
+
error != null && error.trim() !== "" && /* @__PURE__ */ jsx(Alert, {
|
|
60
|
+
variant: "destructive",
|
|
61
|
+
className: "mb-4",
|
|
62
|
+
children: /* @__PURE__ */ jsx(AlertDescription, { children: error })
|
|
63
|
+
}),
|
|
64
|
+
/* @__PURE__ */ jsxs("form", {
|
|
65
|
+
onSubmit: handleSubmit,
|
|
66
|
+
className: "space-y-4",
|
|
67
|
+
children: [
|
|
68
|
+
/* @__PURE__ */ jsxs("div", {
|
|
69
|
+
className: "space-y-2",
|
|
70
|
+
children: [
|
|
71
|
+
/* @__PURE__ */ jsx(Label, {
|
|
72
|
+
htmlFor: "email",
|
|
73
|
+
children: "Email"
|
|
74
|
+
}),
|
|
75
|
+
/* @__PURE__ */ jsx(Input, {
|
|
76
|
+
id: "email",
|
|
77
|
+
type: "email",
|
|
78
|
+
value: email,
|
|
79
|
+
onChange: (e) => {
|
|
80
|
+
setEmail(e.target.value);
|
|
81
|
+
if (emailError) setEmailError("");
|
|
82
|
+
},
|
|
83
|
+
disabled: isLoading,
|
|
84
|
+
required: true,
|
|
85
|
+
className: emailError ? "border-destructive" : ""
|
|
86
|
+
}),
|
|
87
|
+
emailError && /* @__PURE__ */ jsx("p", {
|
|
88
|
+
className: "text-destructive text-sm",
|
|
89
|
+
children: emailError
|
|
90
|
+
})
|
|
91
|
+
]
|
|
92
|
+
}),
|
|
93
|
+
/* @__PURE__ */ jsxs("div", {
|
|
94
|
+
className: "space-y-2",
|
|
95
|
+
children: [
|
|
96
|
+
/* @__PURE__ */ jsx(Label, {
|
|
97
|
+
htmlFor: "password",
|
|
98
|
+
children: "Password"
|
|
99
|
+
}),
|
|
100
|
+
/* @__PURE__ */ jsx(Input, {
|
|
101
|
+
id: "password",
|
|
102
|
+
type: "password",
|
|
103
|
+
value: password,
|
|
104
|
+
onChange: (e) => {
|
|
105
|
+
setPassword(e.target.value);
|
|
106
|
+
if (passwordError) setPasswordError("");
|
|
107
|
+
},
|
|
108
|
+
disabled: isLoading,
|
|
109
|
+
required: true,
|
|
110
|
+
className: passwordError ? "border-destructive" : ""
|
|
111
|
+
}),
|
|
112
|
+
passwordError && /* @__PURE__ */ jsx("p", {
|
|
113
|
+
className: "text-destructive text-sm",
|
|
114
|
+
children: passwordError
|
|
115
|
+
})
|
|
116
|
+
]
|
|
117
|
+
}),
|
|
118
|
+
/* @__PURE__ */ jsxs(Button, {
|
|
119
|
+
type: "submit",
|
|
120
|
+
className: "mt-6 w-full",
|
|
121
|
+
disabled: isLoading,
|
|
122
|
+
children: [isLoading && /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), isLoading ? "Signing In..." : "Sign In"]
|
|
123
|
+
})
|
|
124
|
+
]
|
|
125
|
+
}),
|
|
126
|
+
onGoogleSignIn != null && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(OrContinueWithSeparator, {}), /* @__PURE__ */ jsx(GoogleSignIn, {
|
|
127
|
+
onGoogleSignIn,
|
|
128
|
+
isLoading
|
|
129
|
+
})] }),
|
|
130
|
+
/* @__PURE__ */ jsx(Separator, { className: "my-4" }),
|
|
131
|
+
/* @__PURE__ */ jsxs("div", {
|
|
132
|
+
className: "space-y-2 text-center text-sm",
|
|
133
|
+
children: [onSwitchToSignUp && /* @__PURE__ */ jsxs("p", { children: [
|
|
134
|
+
"Don't have an account?",
|
|
135
|
+
" ",
|
|
136
|
+
/* @__PURE__ */ jsx(Button, {
|
|
137
|
+
variant: "link",
|
|
138
|
+
size: "sm",
|
|
139
|
+
onClick: onSwitchToSignUp,
|
|
140
|
+
disabled: isLoading,
|
|
141
|
+
className: "h-auto p-0",
|
|
142
|
+
children: "Sign up"
|
|
143
|
+
})
|
|
144
|
+
] }), onSwitchToReset && /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(Button, {
|
|
145
|
+
variant: "link",
|
|
146
|
+
size: "sm",
|
|
147
|
+
onClick: onSwitchToReset,
|
|
148
|
+
disabled: isLoading,
|
|
149
|
+
className: "h-auto p-0",
|
|
150
|
+
children: "Forgot your password?"
|
|
151
|
+
}) })]
|
|
152
|
+
})
|
|
153
|
+
]
|
|
154
|
+
})
|
|
155
|
+
});
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
//#endregion
|
|
159
|
+
export { SignInForm };
|
package/dist/SignUpForm.cjs
CHANGED
|
@@ -1 +1,154 @@
|
|
|
1
|
-
const
|
|
1
|
+
const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
|
|
2
|
+
const require_GoogleSignIn = require('./GoogleSignIn.cjs');
|
|
3
|
+
let react = require("react");
|
|
4
|
+
react = require_rolldown_runtime.__toESM(react);
|
|
5
|
+
let __pixpilot_shadcn = require("@pixpilot/shadcn");
|
|
6
|
+
__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
|
|
7
|
+
let lucide_react = require("lucide-react");
|
|
8
|
+
lucide_react = require_rolldown_runtime.__toESM(lucide_react);
|
|
9
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
10
|
+
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
|
|
11
|
+
|
|
12
|
+
//#region src/SignUpForm.tsx
|
|
13
|
+
const MIN_PASSWORD_LENGTH = 6;
|
|
14
|
+
function SignUpForm({ onSignUp, onGoogleSignIn, isLoading, error, onSwitchToSignIn }) {
|
|
15
|
+
const [email, setEmail] = (0, react.useState)("");
|
|
16
|
+
const [password, setPassword] = (0, react.useState)("");
|
|
17
|
+
const [emailError, setEmailError] = (0, react.useState)("");
|
|
18
|
+
const [passwordError, setPasswordError] = (0, react.useState)("");
|
|
19
|
+
const validateEmail = (emailValue) => {
|
|
20
|
+
if (!emailValue.trim()) {
|
|
21
|
+
setEmailError("Email is required");
|
|
22
|
+
return false;
|
|
23
|
+
}
|
|
24
|
+
const input = document.createElement("input");
|
|
25
|
+
input.type = "email";
|
|
26
|
+
input.value = emailValue;
|
|
27
|
+
if (!input.validity.valid) {
|
|
28
|
+
setEmailError("Please enter a valid email address");
|
|
29
|
+
return false;
|
|
30
|
+
}
|
|
31
|
+
setEmailError("");
|
|
32
|
+
return true;
|
|
33
|
+
};
|
|
34
|
+
const validatePassword = (passwordValue) => {
|
|
35
|
+
if (!passwordValue.trim()) {
|
|
36
|
+
setPasswordError("Password is required");
|
|
37
|
+
return false;
|
|
38
|
+
}
|
|
39
|
+
if (passwordValue.length < MIN_PASSWORD_LENGTH) {
|
|
40
|
+
setPasswordError(`Password must be at least ${MIN_PASSWORD_LENGTH} characters long`);
|
|
41
|
+
return false;
|
|
42
|
+
}
|
|
43
|
+
setPasswordError("");
|
|
44
|
+
return true;
|
|
45
|
+
};
|
|
46
|
+
const handleSubmit = (e) => {
|
|
47
|
+
e.preventDefault();
|
|
48
|
+
if (!validateEmail(email)) return;
|
|
49
|
+
if (!validatePassword(password)) return;
|
|
50
|
+
onSignUp(email, password).catch(console.error);
|
|
51
|
+
};
|
|
52
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Card, {
|
|
53
|
+
className: "mx-auto w-full max-w-md",
|
|
54
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.CardContent, {
|
|
55
|
+
className: "p-6",
|
|
56
|
+
children: [
|
|
57
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
|
|
58
|
+
className: "mb-4 text-center text-2xl font-bold",
|
|
59
|
+
children: "Sign Up"
|
|
60
|
+
}),
|
|
61
|
+
error != null && error.trim() !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Alert, {
|
|
62
|
+
variant: "destructive",
|
|
63
|
+
className: "mb-4",
|
|
64
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.AlertDescription, { children: error })
|
|
65
|
+
}),
|
|
66
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
|
|
67
|
+
onSubmit: handleSubmit,
|
|
68
|
+
className: "space-y-4",
|
|
69
|
+
children: [
|
|
70
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
71
|
+
className: "space-y-2",
|
|
72
|
+
children: [
|
|
73
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Label, {
|
|
74
|
+
htmlFor: "email",
|
|
75
|
+
children: "Email"
|
|
76
|
+
}),
|
|
77
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Input, {
|
|
78
|
+
id: "email",
|
|
79
|
+
type: "email",
|
|
80
|
+
value: email,
|
|
81
|
+
onChange: (e) => {
|
|
82
|
+
setEmail(e.target.value);
|
|
83
|
+
if (emailError) setEmailError("");
|
|
84
|
+
},
|
|
85
|
+
disabled: isLoading,
|
|
86
|
+
required: true,
|
|
87
|
+
className: emailError ? "border-destructive" : ""
|
|
88
|
+
}),
|
|
89
|
+
emailError && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
|
|
90
|
+
className: "text-destructive text-sm",
|
|
91
|
+
children: emailError
|
|
92
|
+
})
|
|
93
|
+
]
|
|
94
|
+
}),
|
|
95
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
96
|
+
className: "space-y-2",
|
|
97
|
+
children: [
|
|
98
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Label, {
|
|
99
|
+
htmlFor: "password",
|
|
100
|
+
children: "Password"
|
|
101
|
+
}),
|
|
102
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Input, {
|
|
103
|
+
id: "password",
|
|
104
|
+
type: "password",
|
|
105
|
+
value: password,
|
|
106
|
+
onChange: (e) => {
|
|
107
|
+
setPassword(e.target.value);
|
|
108
|
+
if (passwordError) setPasswordError("");
|
|
109
|
+
},
|
|
110
|
+
disabled: isLoading,
|
|
111
|
+
required: true,
|
|
112
|
+
className: passwordError ? "border-destructive" : ""
|
|
113
|
+
}),
|
|
114
|
+
passwordError && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
|
|
115
|
+
className: "text-destructive text-sm",
|
|
116
|
+
children: passwordError
|
|
117
|
+
})
|
|
118
|
+
]
|
|
119
|
+
}),
|
|
120
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
|
|
121
|
+
type: "submit",
|
|
122
|
+
className: "mt-6 w-full",
|
|
123
|
+
disabled: isLoading,
|
|
124
|
+
children: [isLoading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), isLoading ? "Signing Up..." : "Sign Up"]
|
|
125
|
+
})
|
|
126
|
+
]
|
|
127
|
+
}),
|
|
128
|
+
onGoogleSignIn != null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.OrContinueWithSeparator, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_GoogleSignIn.GoogleSignIn, {
|
|
129
|
+
onGoogleSignIn,
|
|
130
|
+
isLoading
|
|
131
|
+
})] }),
|
|
132
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Separator, { className: "my-4" }),
|
|
133
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
134
|
+
className: "text-center text-sm",
|
|
135
|
+
children: onSwitchToSignIn && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", { children: [
|
|
136
|
+
"Already have an account?",
|
|
137
|
+
" ",
|
|
138
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Button, {
|
|
139
|
+
variant: "link",
|
|
140
|
+
size: "sm",
|
|
141
|
+
onClick: onSwitchToSignIn,
|
|
142
|
+
disabled: isLoading,
|
|
143
|
+
className: "h-auto p-0",
|
|
144
|
+
children: "Sign in"
|
|
145
|
+
})
|
|
146
|
+
] })
|
|
147
|
+
})
|
|
148
|
+
]
|
|
149
|
+
})
|
|
150
|
+
});
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
//#endregion
|
|
154
|
+
exports.SignUpForm = SignUpForm;
|
package/dist/SignUpForm.js
CHANGED
|
@@ -1 +1,149 @@
|
|
|
1
|
-
import{GoogleSignIn
|
|
1
|
+
import { GoogleSignIn } from "./GoogleSignIn.js";
|
|
2
|
+
import React, { useState } from "react";
|
|
3
|
+
import { Alert, AlertDescription, Button, Card, CardContent, Input, Label, OrContinueWithSeparator, Separator } from "@pixpilot/shadcn";
|
|
4
|
+
import { Loader2 } from "lucide-react";
|
|
5
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
|
|
7
|
+
//#region src/SignUpForm.tsx
|
|
8
|
+
const MIN_PASSWORD_LENGTH = 6;
|
|
9
|
+
function SignUpForm({ onSignUp, onGoogleSignIn, isLoading, error, onSwitchToSignIn }) {
|
|
10
|
+
const [email, setEmail] = useState("");
|
|
11
|
+
const [password, setPassword] = useState("");
|
|
12
|
+
const [emailError, setEmailError] = useState("");
|
|
13
|
+
const [passwordError, setPasswordError] = useState("");
|
|
14
|
+
const validateEmail = (emailValue) => {
|
|
15
|
+
if (!emailValue.trim()) {
|
|
16
|
+
setEmailError("Email is required");
|
|
17
|
+
return false;
|
|
18
|
+
}
|
|
19
|
+
const input = document.createElement("input");
|
|
20
|
+
input.type = "email";
|
|
21
|
+
input.value = emailValue;
|
|
22
|
+
if (!input.validity.valid) {
|
|
23
|
+
setEmailError("Please enter a valid email address");
|
|
24
|
+
return false;
|
|
25
|
+
}
|
|
26
|
+
setEmailError("");
|
|
27
|
+
return true;
|
|
28
|
+
};
|
|
29
|
+
const validatePassword = (passwordValue) => {
|
|
30
|
+
if (!passwordValue.trim()) {
|
|
31
|
+
setPasswordError("Password is required");
|
|
32
|
+
return false;
|
|
33
|
+
}
|
|
34
|
+
if (passwordValue.length < MIN_PASSWORD_LENGTH) {
|
|
35
|
+
setPasswordError(`Password must be at least ${MIN_PASSWORD_LENGTH} characters long`);
|
|
36
|
+
return false;
|
|
37
|
+
}
|
|
38
|
+
setPasswordError("");
|
|
39
|
+
return true;
|
|
40
|
+
};
|
|
41
|
+
const handleSubmit = (e) => {
|
|
42
|
+
e.preventDefault();
|
|
43
|
+
if (!validateEmail(email)) return;
|
|
44
|
+
if (!validatePassword(password)) return;
|
|
45
|
+
onSignUp(email, password).catch(console.error);
|
|
46
|
+
};
|
|
47
|
+
return /* @__PURE__ */ jsx(Card, {
|
|
48
|
+
className: "mx-auto w-full max-w-md",
|
|
49
|
+
children: /* @__PURE__ */ jsxs(CardContent, {
|
|
50
|
+
className: "p-6",
|
|
51
|
+
children: [
|
|
52
|
+
/* @__PURE__ */ jsx("h2", {
|
|
53
|
+
className: "mb-4 text-center text-2xl font-bold",
|
|
54
|
+
children: "Sign Up"
|
|
55
|
+
}),
|
|
56
|
+
error != null && error.trim() !== "" && /* @__PURE__ */ jsx(Alert, {
|
|
57
|
+
variant: "destructive",
|
|
58
|
+
className: "mb-4",
|
|
59
|
+
children: /* @__PURE__ */ jsx(AlertDescription, { children: error })
|
|
60
|
+
}),
|
|
61
|
+
/* @__PURE__ */ jsxs("form", {
|
|
62
|
+
onSubmit: handleSubmit,
|
|
63
|
+
className: "space-y-4",
|
|
64
|
+
children: [
|
|
65
|
+
/* @__PURE__ */ jsxs("div", {
|
|
66
|
+
className: "space-y-2",
|
|
67
|
+
children: [
|
|
68
|
+
/* @__PURE__ */ jsx(Label, {
|
|
69
|
+
htmlFor: "email",
|
|
70
|
+
children: "Email"
|
|
71
|
+
}),
|
|
72
|
+
/* @__PURE__ */ jsx(Input, {
|
|
73
|
+
id: "email",
|
|
74
|
+
type: "email",
|
|
75
|
+
value: email,
|
|
76
|
+
onChange: (e) => {
|
|
77
|
+
setEmail(e.target.value);
|
|
78
|
+
if (emailError) setEmailError("");
|
|
79
|
+
},
|
|
80
|
+
disabled: isLoading,
|
|
81
|
+
required: true,
|
|
82
|
+
className: emailError ? "border-destructive" : ""
|
|
83
|
+
}),
|
|
84
|
+
emailError && /* @__PURE__ */ jsx("p", {
|
|
85
|
+
className: "text-destructive text-sm",
|
|
86
|
+
children: emailError
|
|
87
|
+
})
|
|
88
|
+
]
|
|
89
|
+
}),
|
|
90
|
+
/* @__PURE__ */ jsxs("div", {
|
|
91
|
+
className: "space-y-2",
|
|
92
|
+
children: [
|
|
93
|
+
/* @__PURE__ */ jsx(Label, {
|
|
94
|
+
htmlFor: "password",
|
|
95
|
+
children: "Password"
|
|
96
|
+
}),
|
|
97
|
+
/* @__PURE__ */ jsx(Input, {
|
|
98
|
+
id: "password",
|
|
99
|
+
type: "password",
|
|
100
|
+
value: password,
|
|
101
|
+
onChange: (e) => {
|
|
102
|
+
setPassword(e.target.value);
|
|
103
|
+
if (passwordError) setPasswordError("");
|
|
104
|
+
},
|
|
105
|
+
disabled: isLoading,
|
|
106
|
+
required: true,
|
|
107
|
+
className: passwordError ? "border-destructive" : ""
|
|
108
|
+
}),
|
|
109
|
+
passwordError && /* @__PURE__ */ jsx("p", {
|
|
110
|
+
className: "text-destructive text-sm",
|
|
111
|
+
children: passwordError
|
|
112
|
+
})
|
|
113
|
+
]
|
|
114
|
+
}),
|
|
115
|
+
/* @__PURE__ */ jsxs(Button, {
|
|
116
|
+
type: "submit",
|
|
117
|
+
className: "mt-6 w-full",
|
|
118
|
+
disabled: isLoading,
|
|
119
|
+
children: [isLoading && /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), isLoading ? "Signing Up..." : "Sign Up"]
|
|
120
|
+
})
|
|
121
|
+
]
|
|
122
|
+
}),
|
|
123
|
+
onGoogleSignIn != null && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(OrContinueWithSeparator, {}), /* @__PURE__ */ jsx(GoogleSignIn, {
|
|
124
|
+
onGoogleSignIn,
|
|
125
|
+
isLoading
|
|
126
|
+
})] }),
|
|
127
|
+
/* @__PURE__ */ jsx(Separator, { className: "my-4" }),
|
|
128
|
+
/* @__PURE__ */ jsx("div", {
|
|
129
|
+
className: "text-center text-sm",
|
|
130
|
+
children: onSwitchToSignIn && /* @__PURE__ */ jsxs("p", { children: [
|
|
131
|
+
"Already have an account?",
|
|
132
|
+
" ",
|
|
133
|
+
/* @__PURE__ */ jsx(Button, {
|
|
134
|
+
variant: "link",
|
|
135
|
+
size: "sm",
|
|
136
|
+
onClick: onSwitchToSignIn,
|
|
137
|
+
disabled: isLoading,
|
|
138
|
+
className: "h-auto p-0",
|
|
139
|
+
children: "Sign in"
|
|
140
|
+
})
|
|
141
|
+
] })
|
|
142
|
+
})
|
|
143
|
+
]
|
|
144
|
+
})
|
|
145
|
+
});
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
//#endregion
|
|
149
|
+
export { SignUpForm };
|
|
@@ -1 +1,25 @@
|
|
|
1
|
-
|
|
1
|
+
//#region rolldown:runtime
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __copyProps = (to, from, except, desc) => {
|
|
9
|
+
if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
|
|
10
|
+
key = keys[i];
|
|
11
|
+
if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
12
|
+
get: ((k) => from[k]).bind(null, key),
|
|
13
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
14
|
+
});
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
19
|
+
value: mod,
|
|
20
|
+
enumerable: true
|
|
21
|
+
}) : target, mod));
|
|
22
|
+
|
|
23
|
+
//#endregion
|
|
24
|
+
|
|
25
|
+
exports.__toESM = __toESM;
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1,11 @@
|
|
|
1
|
-
const
|
|
1
|
+
const require_ResetPasswordForm = require('./ResetPasswordForm.cjs');
|
|
2
|
+
const require_GoogleSignIn = require('./GoogleSignIn.cjs');
|
|
3
|
+
const require_SignInForm = require('./SignInForm.cjs');
|
|
4
|
+
const require_SignUpForm = require('./SignUpForm.cjs');
|
|
5
|
+
const require_AuthForms = require('./AuthForms.cjs');
|
|
6
|
+
|
|
7
|
+
exports.AuthForms = require_AuthForms.AuthForms;
|
|
8
|
+
exports.GoogleSignIn = require_GoogleSignIn.GoogleSignIn;
|
|
9
|
+
exports.ResetPasswordForm = require_ResetPasswordForm.ResetPasswordForm;
|
|
10
|
+
exports.SignInForm = require_SignInForm.SignInForm;
|
|
11
|
+
exports.SignUpForm = require_SignUpForm.SignUpForm;
|
package/dist/index.d.cts
CHANGED
|
@@ -3,5 +3,4 @@ import { GoogleSignIn, GoogleSignInProps } from "./GoogleSignIn.cjs";
|
|
|
3
3
|
import { ResetPasswordForm } from "./ResetPasswordForm.cjs";
|
|
4
4
|
import { SignInForm } from "./SignInForm.cjs";
|
|
5
5
|
import { SignUpForm } from "./SignUpForm.cjs";
|
|
6
|
-
import "./index copy.cjs";
|
|
7
6
|
export { AuthForms, GoogleSignIn, GoogleSignInProps, ResetPasswordForm, SignInForm, SignUpForm };
|
package/dist/index.d.ts
CHANGED
|
@@ -3,5 +3,4 @@ import { GoogleSignIn, GoogleSignInProps } from "./GoogleSignIn.js";
|
|
|
3
3
|
import { ResetPasswordForm } from "./ResetPasswordForm.js";
|
|
4
4
|
import { SignInForm } from "./SignInForm.js";
|
|
5
5
|
import { SignUpForm } from "./SignUpForm.js";
|
|
6
|
-
import "./index copy.js";
|
|
7
6
|
export { AuthForms, GoogleSignIn, GoogleSignInProps, ResetPasswordForm, SignInForm, SignUpForm };
|
package/dist/index.js
CHANGED
|
@@ -1 +1,7 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import { ResetPasswordForm } from "./ResetPasswordForm.js";
|
|
2
|
+
import { GoogleSignIn } from "./GoogleSignIn.js";
|
|
3
|
+
import { SignInForm } from "./SignInForm.js";
|
|
4
|
+
import { SignUpForm } from "./SignUpForm.js";
|
|
5
|
+
import { AuthForms } from "./AuthForms.js";
|
|
6
|
+
|
|
7
|
+
export { AuthForms, GoogleSignIn, ResetPasswordForm, SignInForm, SignUpForm };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pixpilot/shadcn-auth",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.16",
|
|
5
5
|
"description": "Authentication forms and components built with shadcn/ui.",
|
|
6
6
|
"author": "m.doaie <m.doaie@hotmail.com>",
|
|
7
7
|
"license": "MIT",
|
|
@@ -29,8 +29,8 @@
|
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"lucide-react": "0.553.0",
|
|
32
|
-
"@pixpilot/shadcn": "0.3.
|
|
33
|
-
"@pixpilot/shadcn-ui": "0.4.
|
|
32
|
+
"@pixpilot/shadcn": "0.3.2",
|
|
33
|
+
"@pixpilot/shadcn-ui": "0.4.4"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@storybook/react": "^8.5.3",
|
|
@@ -43,11 +43,11 @@
|
|
|
43
43
|
"tsdown": "^0.15.8",
|
|
44
44
|
"typescript": "^5.9.3",
|
|
45
45
|
"typescript-eslint": "^8.46.3",
|
|
46
|
+
"@internal/eslint-config": "0.3.0",
|
|
47
|
+
"@internal/prettier-config": "0.0.1",
|
|
46
48
|
"@internal/tsconfig": "0.1.0",
|
|
47
49
|
"@internal/tsdown-config": "0.1.0",
|
|
48
|
-
"@internal/
|
|
49
|
-
"@internal/vitest-config": "0.1.0",
|
|
50
|
-
"@internal/prettier-config": "0.0.1"
|
|
50
|
+
"@internal/vitest-config": "0.1.0"
|
|
51
51
|
},
|
|
52
52
|
"prettier": "@internal/prettier-config",
|
|
53
53
|
"scripts": {
|
package/dist/index copy.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
const e=require(`./ResetPasswordForm.cjs`),t=require(`./GoogleSignIn.cjs`),n=require(`./SignInForm.cjs`),r=require(`./SignUpForm.cjs`),i=require(`./AuthForms.cjs`);
|
package/dist/index copy.d.cts
DELETED
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import { AuthForms } from "./AuthForms.cjs";
|
|
2
|
-
import { GoogleSignIn, GoogleSignInProps } from "./GoogleSignIn.cjs";
|
|
3
|
-
import { ResetPasswordForm } from "./ResetPasswordForm.cjs";
|
|
4
|
-
import { SignInForm } from "./SignInForm.cjs";
|
|
5
|
-
import { SignUpForm } from "./SignUpForm.cjs";
|
package/dist/index copy.d.ts
DELETED
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import { AuthForms } from "./AuthForms.js";
|
|
2
|
-
import { GoogleSignIn, GoogleSignInProps } from "./GoogleSignIn.js";
|
|
3
|
-
import { ResetPasswordForm } from "./ResetPasswordForm.js";
|
|
4
|
-
import { SignInForm } from "./SignInForm.js";
|
|
5
|
-
import { SignUpForm } from "./SignUpForm.js";
|
package/dist/index copy.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{ResetPasswordForm as e}from"./ResetPasswordForm.js";import{GoogleSignIn as t}from"./GoogleSignIn.js";import{SignInForm as n}from"./SignInForm.js";import{SignUpForm as r}from"./SignUpForm.js";import{AuthForms as i}from"./AuthForms.js";
|