@frank-auth/react
Version:
Flexible and customizable React UI components for Frank Authentication
945 lines (944 loc) • 31.2 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 Ne } from "../../ui/input/input.js";
import { Checkbox as Ce } from "../../ui/checkbox/checkbox.js";
import { Link as se } from "../../ui/link/link.js";
import { Divider as R } from "../../ui/divider/divider.js";
import { EnvelopeIcon as _, LockClosedIcon as $ } from "@heroicons/react/24/outline";
import { Select as Me, SelectItem as Le } from "@heroui/react";
import { motion as Se } from "framer-motion";
import S, { useMemo as W, useState as j, useCallback as p } from "react";
import ne from "../../forms/email-field.js";
import Ae from "../../forms/form-wrapper.js";
import Be from "../../forms/password-field.js";
import { useAuth as Ie } from "../../../hooks/use-auth.js";
import { useConfig as E } from "../../../hooks/use-config.js";
import { usePasskeys as Pe } from "../../../hooks/use-passkeys.js";
import { useOAuth as De } from "../../../hooks/use-oauth.js";
import { useMagicLink as Te } 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: r,
successData: u,
redirectUrl: l
}) => {
const { components: a } = E(), o = a.Button ?? G, g = p(() => {
switch (r) {
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($, { 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(o, { 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: /* @__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(
o,
{
onClick: async () => {
await u.sendMagicLink(u.email, {
redirectUrl: l,
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"
}
)
}
)
};
}
}, [r, u])(), C = l && !["email-verification-required", "magic-link-sent"].includes(r);
return /* @__PURE__ */ d("div", { className: "text-center space-y-4", children: [
/* @__PURE__ */ e(
Se.div,
{
initial: { scale: 0 },
animate: { scale: 1 },
className: `mx-auto w-16 h-16 rounded-full flex items-center justify-center ${r === "email-verification-required" ? "bg-warning-100 dark:bg-warning-900/30" : r === "magic-link-sent" ? "bg-primary-100 dark:bg-primary-900/30" : "bg-success-100 dark:bg-success-900/30"}`,
children: g.icon
}
),
/* @__PURE__ */ d("div", { children: [
/* @__PURE__ */ e("h3", { className: "text-xl font-semibold text-foreground mb-2", children: g.title }),
/* @__PURE__ */ e("p", { className: "text-default-500 text-sm", children: g.subtitle }),
g.extraButton && /* @__PURE__ */ e("div", { className: "flex justify-center py-4", children: g.extraButton })
] }),
C && /* @__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..." })
] }),
r === "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: r,
onError: u,
redirectUrl: l,
organizationId: a,
disabled: o,
size: m = "md",
radius: g = "md"
}) => {
const {
signInWithGoogle: C,
signInWithGitHub: b,
signInWithMicrosoft: x,
signInWithApple: M,
isLoading: h
} = De(), { components: i } = E(), c = i.Button ?? G, k = p(
async (I, F) => {
try {
const w = await F();
r(I, { provider: I, ...w });
} catch (w) {
u?.(
w instanceof Error ? w : new Error(`${I} sign-in failed`)
);
}
},
[r, u]
), A = p(() => {
k(
"Google",
() => C({ redirectUrl: l, organizationId: a })
);
}, [k, C, l, a]), y = p(() => {
k(
"GitHub",
() => b({ redirectUrl: l, organizationId: a })
);
}, [k, b, l, a]), B = p(() => {
k(
"Microsoft",
() => x({ redirectUrl: l, organizationId: a })
);
}, [k, x, l, a]), N = p(() => {
k(
"Apple",
() => M({ redirectUrl: l, organizationId: a })
);
}, [k, M, l, a]);
return /* @__PURE__ */ d("div", { className: "space-y-3", children: [
/* @__PURE__ */ e(
c,
{
type: "button",
variant: "bordered",
size: m,
radius: g,
className: "w-full",
startContent: /* @__PURE__ */ e(ae, {}),
onPress: A,
isDisabled: o || h,
children: "Continue with Google"
}
),
/* @__PURE__ */ e(
c,
{
type: "button",
variant: "bordered",
size: m,
radius: g,
className: "w-full",
startContent: /* @__PURE__ */ e(ie, {}),
onPress: y,
isDisabled: o || h,
children: "Continue with GitHub"
}
),
/* @__PURE__ */ e(
c,
{
type: "button",
variant: "bordered",
size: m,
radius: g,
className: "w-full",
startContent: /* @__PURE__ */ e(oe, {}),
onPress: B,
isDisabled: o || h,
children: "Continue with Microsoft"
}
),
/* @__PURE__ */ e(
c,
{
type: "button",
variant: "bordered",
size: m,
radius: g,
className: "w-full",
startContent: /* @__PURE__ */ e(ce, {}),
onPress: N,
isDisabled: o || h,
children: "Continue with Apple"
}
)
] });
}
);
le.displayName = "OAuthButtons";
const V = S.memo(
({
email: r,
onSuccess: u,
onError: l,
redirectUrl: a,
organizationId: o,
disabled: m,
size: g = "md",
radius: C = "md"
}) => {
const { sendMagicLink: b, isLoading: x, lastSentEmail: M, canResend: h } = Te(), [i, c] = j(!1), { components: k } = E(), A = k.Button ?? G, y = W(
() => /* @__PURE__ */ e(_, { className: "w-4 h-4" }),
[]
), B = p(async () => {
if (r)
try {
const N = await b(r, {
redirectUrl: a,
organizationId: o
});
N.success && (c(!0), u({
type: "magic-link-sent",
email: r,
redirectUrl: a,
organizationId: o,
...N,
sendMagicLink: b,
canResend: h
}));
} catch (N) {
l?.(
N instanceof Error ? N : new Error("Failed to send magic link")
);
}
}, [r, b, a, o, u, l]);
return i && M ? /* @__PURE__ */ d("div", { className: "text-center space-y-4", children: [
/* @__PURE__ */ d("div", { className: "text-success-600 font-medium", children: [
"Magic link sent to ",
M
] }),
/* @__PURE__ */ e("p", { className: "text-default-500 text-sm", children: "Check your email and click the link to sign in" }),
h && /* @__PURE__ */ e(
A,
{
type: "button",
variant: "light",
size: "sm",
onPress: B,
isDisabled: m || x,
children: "Resend magic link"
}
)
] }) : /* @__PURE__ */ e(
A,
{
type: "button",
variant: "bordered",
size: g,
radius: C,
className: "w-full",
startContent: y,
onPress: B,
isDisabled: m || x || !r,
isLoading: x,
children: "Send magic link"
}
);
}
);
V.displayName = "MagicLinkSection";
const me = S.memo(
({
length: r = 6,
onComplete: u,
disabled: l = !1
}) => {
const { components: a } = E(), o = a.Input ?? Ne, [m, g] = j(Array(r).fill("")), [C, b] = j(0), x = p(
(h, i) => {
if (i.length > 1) return;
const c = [...m];
c[h] = i, g(c), i && h < r - 1 && b(h + 1), c.every((k) => k !== "") && c.join("").length === r && u(c.join(""));
},
[m, r, u]
), M = p(
(h, i) => {
i.key === "Backspace" && !m[h] && h > 0 && b(h - 1);
},
[m]
);
return /* @__PURE__ */ e("div", { className: "flex gap-2 justify-center", children: Array.from({ length: r }, (h, i) => /* @__PURE__ */ e(
o,
{
type: "text",
maxLength: 1,
value: m[i],
onChange: (c) => x(i, c.target.value),
onKeyDown: (c) => M(i, c),
className: "w-12 text-center",
classNames: {
input: "text-center text-lg font-mono",
inputWrapper: "h-12 w-12"
},
isDisabled: l,
disabled: l,
autoFocus: i === C
},
i
)) });
}
);
me.displayName = "VerificationCode";
function Ue({
methods: r = ["password", "oauth", "magic-link"],
email: u = "",
organizationId: l,
redirectUrl: a,
onSuccess: o,
onError: m,
showSignUpLink: g = !0,
showForgotPasswordLink: C = !0,
showOrganizationSelector: b = !1,
title: x,
subtitle: M,
variant: h = "default",
size: i = "lg",
radius: c = "md",
className: k = "",
showBranding: A = !0,
disabled: y = !1,
titleAlignment: B,
footer: N,
header: I
}) {
const { signIn: F, isLoading: w, organizationMemberships: q } = Ie(), {
features: D,
organizationSettings: P,
components: K,
linksPath: Y,
titleAlignment: J
} = E(), { authenticateWithPasskey: Q } = Pe(), X = W(
() => /* @__PURE__ */ e(_, { className: "w-4 h-4 text-default-400" }),
[]
), de = W(
() => /* @__PURE__ */ e($, { className: "w-4 h-4 text-default-400" }),
[]
), ue = W(
() => /* @__PURE__ */ e($, { className: "w-4 h-4" }),
[]
), he = S.useMemo(
() => B ?? J,
[B, J]
), O = K.Button ?? G, Z = K.SignInForm;
if (Z)
return /* @__PURE__ */ e(
Z,
{
methods: r,
email: u,
organizationId: l,
redirectUrl: a,
onSuccess: o,
onError: m,
showSignUpLink: g,
showForgotPasswordLink: C,
showOrganizationSelector: b,
title: x,
subtitle: M,
variant: h,
size: i,
className: k,
showBranding: A,
disabled: y,
footer: N,
header: I
}
);
const [n, v] = j({
step: "credentials",
method: "password",
email: u,
password: "",
selectedOrganization: l,
rememberMe: !0,
showPassword: !1
}), [z, T] = j(null), L = W(() => r.filter((s) => {
switch (s) {
case "oauth":
return D.oauth;
case "magic-link":
return D.magicLink;
case "passkey":
return D.passkeys;
case "sso":
return D.sso;
case "password":
default:
return !0;
}
}), [r, D]), fe = W(() => {
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"
}, f = x || t.title, xe = M || 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 ${k}`,
footer: N,
header: I,
title: f,
subtitle: xe,
showCard: !1,
logo: te
};
}, [
x,
M,
i,
k,
N,
I,
A,
P?.branding?.customLoginText,
P?.branding?.logoUrl
]), pe = p(
async (s) => {
if (s.preventDefault(), T(null), !n.email || !n.password) {
T("Please enter your email and password");
return;
}
try {
const t = await F({
strategy: "password",
identifier: n.email,
password: n.password,
organizationId: n.selectedOrganization || l
});
if (t.status === "needs_mfa") {
v((f) => ({
...f,
step: "mfa",
mfaToken: t.mfaToken
}));
return;
}
if (t.status === "needs_verification") {
v((f) => ({
...f,
step: "success",
successType: "email-verification-required",
successData: { email: n.email }
})), o?.(t);
return;
}
t.status === "complete" && t.user && (v((f) => ({
...f,
step: "success",
successType: "password-signin"
})), o?.(t), a && setTimeout(() => {
window.location.href = a;
}, 1e3)), t.status === "complete" && t.error && T(t.error.message);
} catch (t) {
const f = t instanceof Error ? t : new Error("Sign in failed");
console.error(f), T(f.message), m?.(f);
}
},
[
n.email,
n.password,
n.selectedOrganization,
l,
F,
o,
m,
a
]
), ge = p(
async (s) => {
if (n.mfaToken)
try {
v((t) => ({
...t,
step: "success",
successType: "mfa-verified"
})), o?.({ mfaVerified: !0 }), a && setTimeout(() => {
window.location.href = a;
}, 1e3);
} catch (t) {
const f = t instanceof Error ? t : new Error("MFA verification failed");
T(f.message), m?.(f);
}
},
[n.mfaToken, o, m, a]
), ke = p(
(s, t) => {
v((f) => ({
...f,
step: "success",
successType: "oauth-signin",
successData: { provider: s }
})), o?.(t);
},
[o]
), U = p(
(s) => {
s.type === "magic-link-sent" ? v((t) => ({
...t,
step: "success",
successType: "magic-link-sent",
successData: {
email: s.email,
message: s.message,
sendMagicLink: s.sendMagicLink,
canResend: s.canResend
}
})) : v((t) => ({
...t,
step: "success",
successType: "password-signin"
})), o?.(s);
},
[o]
), ye = p(async () => {
try {
const s = await Q();
s.success && (v((t) => ({
...t,
step: "success",
successType: "passkey-signin"
})), o?.(s));
} catch (s) {
const t = s instanceof Error ? s : new Error("Passkey authentication failed");
T(t.message), m?.(t);
}
}, [Q, o, m]), ee = p((s) => {
v((t) => ({ ...t, email: s }));
}, []), we = p((s) => {
v((t) => ({ ...t, password: s }));
}, []), ve = p((s) => {
v((t) => ({ ...t, rememberMe: s }));
}, []), be = p((s) => {
const t = Array.from(s)[0];
v((f) => ({ ...f, selectedOrganization: t }));
}, []);
return n.step === "success" ? /* @__PURE__ */ e(
re,
{
successType: n.successType,
successData: n.successData,
redirectUrl: a
}
) : n.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: ge,
disabled: y || w
}
),
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: () => v((s) => ({ ...s, step: "credentials" })),
className: "w-full",
children: "Back to sign in"
}
)
] }) : /* @__PURE__ */ d(
Ae,
{
...fe,
onSubmit: pe,
titleAlignment: he,
children: [
L.includes("oauth") && /* @__PURE__ */ d(H, { children: [
/* @__PURE__ */ e(
le,
{
onSuccess: ke,
onError: m,
redirectUrl: a,
organizationId: n.selectedOrganization || l,
disabled: y,
size: i,
radius: c
}
),
(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: [
b && q.length > 1 && /* @__PURE__ */ e(
Me,
{
label: "Organization",
placeholder: "Select an organization",
selectedKeys: n.selectedOrganization ? [n.selectedOrganization] : [],
onSelectionChange: be,
size: i,
radius: c,
isDisabled: y || w,
children: q.map((s) => /* @__PURE__ */ e(
Le,
{
value: s.organization.id,
children: s.organization.name
},
s.organization.id
))
}
),
/* @__PURE__ */ e(
ne,
{
label: "Email",
name: "email",
placeholder: "Enter your email",
value: n.email,
onChange: ee,
startContent: X,
size: i,
radius: c,
required: !0,
disabled: y || w,
showSuggestions: !1,
showVerificationStatus: !0,
variant: "bordered"
}
),
n.email && /* @__PURE__ */ d(H, { children: [
/* @__PURE__ */ e(
Be,
{
label: "Password",
name: "password",
placeholder: "Enter your password",
value: n.password,
onChange: we,
startContent: de,
size: i,
radius: c,
required: !0,
disabled: y || w,
variant: "bordered"
}
),
/* @__PURE__ */ d("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ e(
Ce,
{
isSelected: n.rememberMe,
onValueChange: ve,
size: "sm",
isDisabled: y || w,
children: "Remember me"
}
),
C && /* @__PURE__ */ e(
se,
{
href: Y?.forgotPassword,
size: "sm",
color: "primary",
children: "Forgot password?"
}
)
] })
] }),
z && /* @__PURE__ */ e("div", { className: "text-danger-600 text-sm bg-danger-50 dark:bg-danger-900/20 rounded-lg p-3", children: z }),
/* @__PURE__ */ e(
O,
{
type: "submit",
color: "primary",
size: i,
radius: c,
className: "w-full",
isLoading: w,
isDisabled: y || !n.email || !n.password,
children: w ? "Signing in..." : "Sign in"
}
),
L.includes("magic-link") && n.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(
V,
{
email: n.email,
onSuccess: U,
onError: m,
redirectUrl: a,
organizationId: n.selectedOrganization || l,
disabled: y,
size: i,
radius: c
}
)
] })
] }),
/* @__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(
ne,
{
label: "Email",
placeholder: "Enter your email",
value: n.email,
onChange: ee,
startContent: X,
size: i,
radius: c,
required: !0,
disabled: y || w,
autoFocus: !0,
variant: "bordered"
}
),
/* @__PURE__ */ e(
V,
{
email: n.email,
onSuccess: U,
onError: m,
redirectUrl: a,
organizationId: n.selectedOrganization || l,
disabled: y,
size: i,
radius: c
}
)
] }),
L.includes("passkey") && /* @__PURE__ */ d(H, { children: [
L.includes("password") && L.includes("magic-link") && !n.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: c,
className: "w-full",
startContent: ue,
onPress: ye,
isDisabled: y || w,
children: "Sign in with passkey"
}
)
] }),
g && D.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(se, { href: Y?.signUp, color: "primary", children: "Sign up" })
] })
] }),
N
]
}
);
}
export {
Ue as SignInForm
};
//# sourceMappingURL=sign-in-form.js.map