@frank-auth/react
Version:
Flexible and customizable React UI components for Frank Authentication
964 lines (963 loc) • 31.8 kB
JavaScript
'use client';
import { jsx as e, jsxs as d, Fragment as H } from "react/jsx-runtime";
import "@emotion/styled";
import { Button as G } from "../../ui/button/button.js";
import { Input as Ce } from "../../ui/input/input.js";
import { Checkbox as Me } from "../../ui/checkbox/checkbox.js";
import { Link as ne } from "../../ui/link/link.js";
import { Divider as R } from "../../ui/divider/divider.js";
import { EnvelopeIcon as $, LockClosedIcon as V } from "@heroicons/react/24/outline";
import { Select as Le, SelectItem as Se } from "@heroui/react";
import { motion as Ae } from "framer-motion";
import S, { useMemo as j, useState as D, useCallback as g } from "react";
import se from "../../forms/email-field.js";
import Be from "../../forms/field-error.js";
import Ie from "../../forms/form-wrapper.js";
import Pe from "../../forms/password-field.js";
import { useAuth as Te } from "../../../hooks/use-auth.js";
import { useConfig as E } from "../../../hooks/use-config.js";
import { usePasskeys as We } from "../../../hooks/use-passkeys.js";
import { useOAuth as je } from "../../../hooks/use-oauth.js";
import { useMagicLink as De } from "../../../hooks/use-magic-link.js";
const ae = S.memo(() => (
// biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>
/* @__PURE__ */ d("svg", { className: "w-4 h-4", viewBox: "0 0 24 24", children: [
/* @__PURE__ */ e(
"path",
{
fill: "#4285F4",
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"
}
),
/* @__PURE__ */ e(
"path",
{
fill: "#34A853",
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"
}
),
/* @__PURE__ */ e(
"path",
{
fill: "#FBBC05",
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"
}
),
/* @__PURE__ */ e(
"path",
{
fill: "#EA4335",
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"
}
)
] })
)), ie = S.memo(() => (
// biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>
/* @__PURE__ */ e("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { d: "M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" }) })
)), oe = S.memo(() => (
// biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>
/* @__PURE__ */ d("svg", { className: "w-4 h-4", viewBox: "0 0 24 24", children: [
/* @__PURE__ */ e("path", { fill: "#f25022", d: "M1 1h10v10H1z" }),
/* @__PURE__ */ e("path", { fill: "#00a4ef", d: "M13 1h10v10H13z" }),
/* @__PURE__ */ e("path", { fill: "#7fba00", d: "M1 13h10v10H1z" }),
/* @__PURE__ */ e("path", { fill: "#ffb900", d: "M13 13h10v10H13z" })
] })
)), ce = S.memo(() => (
// biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>
/* @__PURE__ */ e("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { d: "M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" }) })
));
ae.displayName = "GoogleIcon";
ie.displayName = "GitHubIcon";
oe.displayName = "MicrosoftIcon";
ce.displayName = "AppleIcon";
const re = S.memo(
({
successType: l,
successData: u,
redirectUrl: m
}) => {
const [a, o] = D(!1), { components: c } = E(), w = c.Button ?? G, h = g(() => {
switch (l) {
case "password-signin":
return {
title: "Welcome back!",
subtitle: "You have been successfully signed in.",
icon: /* @__PURE__ */ e(
"svg",
{
className: "w-8 h-8 text-success-600 dark:text-success-400",
fill: "none",
stroke: "currentColor",
viewBox: "0 0 24 24",
children: /* @__PURE__ */ e(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M5 13l4 4L19 7"
}
)
}
)
};
case "oauth-signin":
return {
title: "Welcome back!",
subtitle: `Successfully signed in with ${u?.provider || "OAuth"}.`,
icon: /* @__PURE__ */ e(
"svg",
{
className: "w-8 h-8 text-success-600 dark:text-success-400",
fill: "none",
stroke: "currentColor",
viewBox: "0 0 24 24",
children: /* @__PURE__ */ e(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M5 13l4 4L19 7"
}
)
}
)
};
case "passkey-signin":
return {
title: "Authenticated!",
subtitle: "Successfully signed in with your passkey.",
icon: /* @__PURE__ */ e(V, { className: "w-8 h-8 text-success-600 dark:text-success-400" })
};
case "mfa-verified":
return {
title: "Verification complete!",
subtitle: "Two-factor authentication successful.",
icon: /* @__PURE__ */ e(
"svg",
{
className: "w-8 h-8 text-success-600 dark:text-success-400",
fill: "none",
stroke: "currentColor",
viewBox: "0 0 24 24",
children: /* @__PURE__ */ e(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
}
)
}
)
};
case "email-verification-required":
return {
title: "Check your email",
subtitle: `We've sent a verification link to ${u?.email || "your email address"}. Please click the link to complete your sign-in.`,
icon: /* @__PURE__ */ e($, { className: "w-8 h-8 text-warning-600 dark:text-warning-400" }),
extraButton: /* @__PURE__ */ e(
w,
{
isLoading: a,
onClick: async () => {
o(!0), u.resendVerification({
email: u.email,
type: "email"
}).then(() => {
}).finally(() => {
o(!1);
});
},
size: "sm",
children: "Resend Email"
}
)
};
case "magic-link-sent":
return {
title: "Magic link sent!",
subtitle: `Check your email at ${u?.email} and click the link to sign in.`,
icon: (
// biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>
/* @__PURE__ */ e(
"svg",
{
className: "w-8 h-8 text-primary-600 dark:text-primary-400",
fill: "none",
stroke: "currentColor",
viewBox: "0 0 24 24",
children: /* @__PURE__ */ e(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M3 8l7.89 7.89a2 2 0 002.83 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
}
)
}
)
),
extraButton: /* @__PURE__ */ e(
w,
{
onClick: async () => {
await u.sendMagicLink(u.email, {
redirectUrl: m,
organizationId: u.organizationId
});
},
size: "sm",
children: "Resend magic link"
}
)
};
default:
return {
title: "Success!",
subtitle: "Operation completed successfully.",
icon: /* @__PURE__ */ e(
"svg",
{
className: "w-8 h-8 text-success-600 dark:text-success-400",
fill: "none",
stroke: "currentColor",
viewBox: "0 0 24 24",
children: /* @__PURE__ */ e(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M5 13l4 4L19 7"
}
)
}
)
};
}
}, [l, u])(), v = m && !["email-verification-required", "magic-link-sent"].includes(l);
return /* @__PURE__ */ d("div", { className: "text-center space-y-4", children: [
/* @__PURE__ */ e(
Ae.div,
{
initial: { scale: 0 },
animate: { scale: 1 },
className: `mx-auto w-16 h-16 rounded-full flex items-center justify-center ${l === "email-verification-required" ? "bg-warning-100 dark:bg-warning-900/30" : l === "magic-link-sent" ? "bg-primary-100 dark:bg-primary-900/30" : "bg-success-100 dark:bg-success-900/30"}`,
children: h.icon
}
),
/* @__PURE__ */ d("div", { children: [
/* @__PURE__ */ e("h3", { className: "text-xl font-semibold text-foreground mb-2", children: h.title }),
/* @__PURE__ */ e("p", { className: "text-default-500 text-sm", children: h.subtitle }),
h.extraButton && /* @__PURE__ */ e("div", { className: "flex justify-center py-4", children: h.extraButton })
] }),
v && /* @__PURE__ */ d("div", { className: "flex items-center justify-center gap-2 text-sm text-default-500", children: [
/* @__PURE__ */ e("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-primary" }),
/* @__PURE__ */ e("span", { children: "Redirecting..." })
] }),
l === "email-verification-required" && /* @__PURE__ */ e("div", { className: "text-xs text-default-400", children: "Didn't receive the email? Check your spam folder or contact support." })
] });
}
);
re.displayName = "SuccessMessage";
const le = S.memo(
({
onSuccess: l,
onError: u,
redirectUrl: m,
organizationId: a,
disabled: o,
size: c = "md",
radius: w = "md"
}) => {
const {
signInWithGoogle: M,
signInWithGitHub: h,
signInWithMicrosoft: v,
signInWithApple: C,
isLoading: f
} = je(), { components: i } = E(), r = i.Button ?? G, y = g(
async (I, F) => {
try {
const b = await F();
l(I, { provider: I, ...b });
} catch (b) {
u?.(
b instanceof Error ? b : new Error(`${I} sign-in failed`)
);
}
},
[l, u]
), A = g(() => {
y(
"Google",
() => M({ redirectUrl: m, organizationId: a })
);
}, [y, M, m, a]), k = g(() => {
y(
"GitHub",
() => h({ redirectUrl: m, organizationId: a })
);
}, [y, h, m, a]), B = g(() => {
y(
"Microsoft",
() => v({ redirectUrl: m, organizationId: a })
);
}, [y, v, m, a]), N = g(() => {
y(
"Apple",
() => C({ redirectUrl: m, organizationId: a })
);
}, [y, C, m, a]);
return /* @__PURE__ */ d("div", { className: "space-y-3", children: [
/* @__PURE__ */ e(
r,
{
type: "button",
variant: "bordered",
size: c,
radius: w,
className: "w-full",
startContent: /* @__PURE__ */ e(ae, {}),
onPress: A,
isDisabled: o || f,
children: "Continue with Google"
}
),
/* @__PURE__ */ e(
r,
{
type: "button",
variant: "bordered",
size: c,
radius: w,
className: "w-full",
startContent: /* @__PURE__ */ e(ie, {}),
onPress: k,
isDisabled: o || f,
children: "Continue with GitHub"
}
),
/* @__PURE__ */ e(
r,
{
type: "button",
variant: "bordered",
size: c,
radius: w,
className: "w-full",
startContent: /* @__PURE__ */ e(oe, {}),
onPress: B,
isDisabled: o || f,
children: "Continue with Microsoft"
}
),
/* @__PURE__ */ e(
r,
{
type: "button",
variant: "bordered",
size: c,
radius: w,
className: "w-full",
startContent: /* @__PURE__ */ e(ce, {}),
onPress: N,
isDisabled: o || f,
children: "Continue with Apple"
}
)
] });
}
);
le.displayName = "OAuthButtons";
const _ = S.memo(
({
email: l,
onSuccess: u,
onError: m,
redirectUrl: a,
organizationId: o,
disabled: c,
size: w = "md",
radius: M = "md"
}) => {
const { sendMagicLink: h, isLoading: v, lastSentEmail: C, canResend: f } = De(), [i, r] = D(!1), { components: y } = E(), A = y.Button ?? G, k = j(
() => /* @__PURE__ */ e($, { className: "w-4 h-4" }),
[]
), B = g(async () => {
if (l)
try {
const N = await h(l, {
redirectUrl: a,
organizationId: o
});
N.success && (r(!0), u({
type: "magic-link-sent",
email: l,
redirectUrl: a,
organizationId: o,
...N,
sendMagicLink: h,
canResend: f
}));
} catch (N) {
m?.(
N instanceof Error ? N : new Error("Failed to send magic link")
);
}
}, [l, h, a, o, u, m]);
return i && C ? /* @__PURE__ */ d("div", { className: "text-center space-y-4", children: [
/* @__PURE__ */ d("div", { className: "text-success-600 font-medium", children: [
"Magic link sent to ",
C
] }),
/* @__PURE__ */ e("p", { className: "text-default-500 text-sm", children: "Check your email and click the link to sign in" }),
f && /* @__PURE__ */ e(
A,
{
type: "button",
variant: "light",
size: "sm",
onPress: B,
isDisabled: c || v,
children: "Resend magic link"
}
)
] }) : /* @__PURE__ */ e(
A,
{
type: "button",
variant: "bordered",
size: w,
radius: M,
className: "w-full",
startContent: k,
onPress: B,
isDisabled: c || v || !l,
isLoading: v,
children: "Send magic link"
}
);
}
);
_.displayName = "MagicLinkSection";
const me = S.memo(
({
length: l = 6,
onComplete: u,
disabled: m = !1
}) => {
const { components: a } = E(), o = a.Input ?? Ce, [c, w] = D(Array(l).fill("")), [M, h] = D(0), v = g(
(f, i) => {
if (i.length > 1) return;
const r = [...c];
r[f] = i, w(r), i && f < l - 1 && h(f + 1), r.every((y) => y !== "") && r.join("").length === l && u(r.join(""));
},
[c, l, u]
), C = g(
(f, i) => {
i.key === "Backspace" && !c[f] && f > 0 && h(f - 1);
},
[c]
);
return /* @__PURE__ */ e("div", { className: "flex gap-2 justify-center", children: Array.from({ length: l }, (f, i) => /* @__PURE__ */ e(
o,
{
type: "text",
maxLength: 1,
value: c[i],
onChange: (r) => v(i, r.target.value),
onKeyDown: (r) => C(i, r),
className: "w-12 text-center",
classNames: {
input: "text-center text-lg font-mono",
inputWrapper: "h-12 w-12"
},
isDisabled: m,
disabled: m,
autoFocus: i === M
},
i
)) });
}
);
me.displayName = "VerificationCode";
function nt({
methods: l = ["password", "oauth", "magic-link"],
email: u = "",
organizationId: m,
redirectUrl: a,
onSuccess: o,
onError: c,
showSignUpLink: w = !0,
showForgotPasswordLink: M = !0,
showOrganizationSelector: h = !1,
title: v,
subtitle: C,
variant: f = "default",
size: i = "lg",
radius: r = "md",
className: y = "",
showBranding: A = !0,
disabled: k = !1,
titleAlignment: B,
footer: N,
header: I
}) {
const { signIn: F, isLoading: b, organizationMemberships: q, resendVerification: de } = Te(), {
features: T,
organizationSettings: P,
components: K,
linksPath: Y,
titleAlignment: J
} = E(), { authenticateWithPasskey: Q } = We(), X = j(
() => /* @__PURE__ */ e($, { className: "w-4 h-4 text-default-400" }),
[]
), ue = j(
() => /* @__PURE__ */ e(V, { className: "w-4 h-4 text-default-400" }),
[]
), he = j(
() => /* @__PURE__ */ e(V, { className: "w-4 h-4" }),
[]
), fe = S.useMemo(
() => B ?? J,
[B, J]
), O = K.Button ?? G, Z = K.SignInForm;
if (Z)
return /* @__PURE__ */ e(
Z,
{
methods: l,
email: u,
organizationId: m,
redirectUrl: a,
onSuccess: o,
onError: c,
showSignUpLink: w,
showForgotPasswordLink: M,
showOrganizationSelector: h,
title: v,
subtitle: C,
variant: f,
size: i,
className: y,
showBranding: A,
disabled: k,
footer: N,
header: I
}
);
const [s, x] = D({
step: "credentials",
method: "password",
email: u,
password: "",
selectedOrganization: m,
rememberMe: !0,
showPassword: !1
}), [z, W] = D(null), L = j(() => l.filter((n) => {
switch (n) {
case "oauth":
return T.oauth;
case "magic-link":
return T.magicLink;
case "passkey":
return T.passkeys;
case "sso":
return T.sso;
default:
return !0;
}
}), [l, T]), pe = j(() => {
const t = P?.branding?.customLoginText ? {
title: P.branding.customLoginText.title || "Welcome back",
subtitle: P.branding.customLoginText.subtitle || "Sign in to your account"
} : {
title: "Welcome back",
subtitle: "Sign in to your account"
}, p = v || t.title, Ne = C || t.subtitle;
let te;
return A && P?.branding?.logoUrl && (te = /* @__PURE__ */ e(
"img",
{
src: P.branding.logoUrl,
alt: "Organization Logo",
className: "h-8 w-auto mx-auto mb-4"
}
)), {
size: i,
variant: "flat",
className: `space-y-6 ${y}`,
footer: N,
header: I,
title: p,
subtitle: Ne,
showCard: !1,
logo: te
};
}, [
v,
C,
i,
y,
N,
I,
A,
P?.branding?.customLoginText,
P?.branding?.logoUrl
]), ge = g(
async (n) => {
if (n.preventDefault(), W(null), !s.email || !s.password) {
W("Please enter your email and password");
return;
}
try {
const t = await F({
strategy: "password",
identifier: s.email,
password: s.password,
organizationId: s.selectedOrganization || m
});
if (t.status === "needs_mfa") {
x((p) => ({
...p,
step: "mfa",
mfaToken: t.mfaToken
}));
return;
}
if (t.status === "needs_verification") {
x((p) => ({
...p,
step: "success",
successType: "email-verification-required",
successData: { email: s.email, resendVerification: de }
})), o?.(t);
return;
}
t.status === "complete" && t.user && (x((p) => ({
...p,
step: "success",
successType: "password-signin"
})), o?.(t), a && setTimeout(() => {
window.location.href = a;
}, 1e3)), t.status === "complete" && t.error && W(t.error.message);
} catch (t) {
const p = t instanceof Error ? t : new Error("Sign in failed");
console.error(p), W(p.message), c?.(p);
}
},
[
s.email,
s.password,
s.selectedOrganization,
m,
F,
o,
c,
a
]
), ye = g(
async (n) => {
if (s.mfaToken)
try {
x((t) => ({
...t,
step: "success",
successType: "mfa-verified"
})), o?.({ mfaVerified: !0 }), a && setTimeout(() => {
window.location.href = a;
}, 1e3);
} catch (t) {
const p = t instanceof Error ? t : new Error("MFA verification failed");
W(p.message), c?.(p);
}
},
[s.mfaToken, o, c, a]
), ke = g(
(n, t) => {
x((p) => ({
...p,
step: "success",
successType: "oauth-signin",
successData: { provider: n }
})), o?.(t);
},
[o]
), U = g(
(n) => {
n.type === "magic-link-sent" ? x((t) => ({
...t,
step: "success",
successType: "magic-link-sent",
successData: {
email: n.email,
message: n.message,
sendMagicLink: n.sendMagicLink,
canResend: n.canResend
}
})) : x((t) => ({
...t,
step: "success",
successType: "password-signin"
})), o?.(n);
},
[o]
), we = g(async () => {
try {
const n = await Q();
n.success && (x((t) => ({
...t,
step: "success",
successType: "passkey-signin"
})), o?.(n));
} catch (n) {
const t = n instanceof Error ? n : new Error("Passkey authentication failed");
W(t.message), c?.(t);
}
}, [Q, o, c]), ee = g((n) => {
x((t) => ({ ...t, email: n }));
}, []), ve = g((n) => {
x((t) => ({ ...t, password: n }));
}, []), be = g((n) => {
x((t) => ({ ...t, rememberMe: n }));
}, []), xe = g((n) => {
const t = Array.from(n)[0];
x((p) => ({ ...p, selectedOrganization: t }));
}, []);
return s.step === "success" ? /* @__PURE__ */ e(
re,
{
successType: s.successType,
successData: s.successData,
redirectUrl: a
}
) : s.step === "mfa" ? /* @__PURE__ */ d("div", { className: "space-y-6", children: [
/* @__PURE__ */ d("div", { className: "text-center", children: [
/* @__PURE__ */ e("h3", { className: "text-xl font-semibold text-foreground mb-2", children: "Two-Factor Authentication" }),
/* @__PURE__ */ e("p", { className: "text-default-500 text-sm", children: "Enter the verification code from your authenticator app" })
] }),
/* @__PURE__ */ e(
me,
{
length: 6,
onComplete: ye,
disabled: k || b
}
),
z && /* @__PURE__ */ e("div", { className: "text-danger-600 text-sm bg-danger-50 dark:bg-danger-900/20 rounded-lg p-3 text-center", children: z }),
/* @__PURE__ */ e(
O,
{
type: "button",
variant: "light",
size: "sm",
onPress: () => x((n) => ({ ...n, step: "credentials" })),
className: "w-full",
children: "Back to sign in"
}
)
] }) : /* @__PURE__ */ d(
Ie,
{
...pe,
onSubmit: ge,
titleAlignment: fe,
children: [
L.includes("oauth") && /* @__PURE__ */ d(H, { children: [
/* @__PURE__ */ e(
le,
{
onSuccess: ke,
onError: c,
redirectUrl: a,
organizationId: s.selectedOrganization || m,
disabled: k,
size: i,
radius: r
}
),
(L.includes("password") || L.includes("magic-link")) && /* @__PURE__ */ d("div", { className: "relative", children: [
/* @__PURE__ */ e(R, { className: "my-4" }),
/* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ e("span", { className: "bg-background text-sm text-default-500", children: "or" }) })
] })
] }),
L.includes("password") && /* @__PURE__ */ d("div", { className: "space-y-2", children: [
h && q.length > 1 && /* @__PURE__ */ e(
Le,
{
label: "Organization",
placeholder: "Select an organization",
selectedKeys: s.selectedOrganization ? [s.selectedOrganization] : [],
onSelectionChange: xe,
size: i,
radius: r,
isDisabled: k || b,
children: q.map((n) => /* @__PURE__ */ e(
Se,
{
value: n.organization.id,
children: n.organization.name
},
n.organization.id
))
}
),
/* @__PURE__ */ e(
se,
{
label: "Email",
name: "email",
placeholder: "Enter your email",
value: s.email,
onChange: ee,
startContent: X,
size: i,
radius: r,
required: !0,
disabled: k || b,
showSuggestions: !1,
showVerificationStatus: !0,
variant: "bordered"
}
),
s.email && /* @__PURE__ */ d(H, { children: [
/* @__PURE__ */ e(
Pe,
{
label: "Password",
name: "password",
placeholder: "Enter your password",
value: s.password,
onChange: ve,
startContent: ue,
size: i,
radius: r,
required: !0,
disabled: k || b,
variant: "bordered"
}
),
/* @__PURE__ */ d("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ e(
Me,
{
isSelected: s.rememberMe,
onValueChange: be,
size: "sm",
isDisabled: k || b,
children: "Remember me"
}
),
M && /* @__PURE__ */ e(
ne,
{
href: Y?.forgotPassword,
size: "sm",
color: "primary",
children: "Forgot password?"
}
)
] })
] }),
z && /* @__PURE__ */ e("div", { className: "rounded-lg", children: /* @__PURE__ */ e(Be, { error: z }) }),
/* @__PURE__ */ e(
O,
{
type: "submit",
color: "primary",
size: i,
radius: r,
className: "w-full",
isLoading: b,
isDisabled: k || !s.email || !s.password,
children: b ? "Signing in..." : "Sign in"
}
),
L.includes("magic-link") && s.email && /* @__PURE__ */ d(H, { children: [
/* @__PURE__ */ e("div", { className: "relative", children: /* @__PURE__ */ e(R, { className: "my-1", children: /* @__PURE__ */ e("span", { className: "bg-background text-sm text-default-500", children: "or" }) }) }),
/* @__PURE__ */ e(
_,
{
email: s.email,
onSuccess: U,
onError: c,
redirectUrl: a,
organizationId: s.selectedOrganization || m,
disabled: k,
size: i,
radius: r
}
)
] })
] }),
/* @__PURE__ */ d("div", { className: "space-y-2", children: [
L.includes("magic-link") && !L.includes("password") && /* @__PURE__ */ d("div", { className: "space-y-4", children: [
/* @__PURE__ */ e(
se,
{
label: "Email",
placeholder: "Enter your email",
value: s.email,
onChange: ee,
startContent: X,
size: i,
radius: r,
required: !0,
disabled: k || b,
autoFocus: !0,
variant: "bordered"
}
),
/* @__PURE__ */ e(
_,
{
email: s.email,
onSuccess: U,
onError: c,
redirectUrl: a,
organizationId: s.selectedOrganization || m,
disabled: k,
size: i,
radius: r
}
)
] }),
L.includes("passkey") && /* @__PURE__ */ d(H, { children: [
L.includes("password") && L.includes("magic-link") && !s.email && /* @__PURE__ */ d("div", { className: "relative", children: [
/* @__PURE__ */ e(R, { className: "my-1" }),
/* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ e("span", { className: "bg-background px-2 text-sm text-default-500", children: "or" }) })
] }),
/* @__PURE__ */ e(
O,
{
type: "button",
variant: "bordered",
size: i,
radius: r,
className: "w-full",
startContent: he,
onPress: we,
isDisabled: k || b,
children: "Sign in with passkey"
}
)
] }),
w && T.signUp && /* @__PURE__ */ d("div", { className: "text-center text-sm", children: [
/* @__PURE__ */ e("span", { className: "text-default-500", children: "Don't have an account? " }),
/* @__PURE__ */ e(ne, { href: Y?.signUp, color: "primary", children: "Sign up" })
] })
] }),
N
]
}
);
}
export {
nt as SignInForm
};
//# sourceMappingURL=sign-in-form.js.map