@frank-auth/react
Version:
Flexible and customizable React UI components for Frank Authentication
185 lines (184 loc) • 7.72 kB
JavaScript
'use client';
import { jsx as e, jsxs as o, Fragment as W } from "react/jsx-runtime";
import A from "react";
import { Card as P, CardBody as N, Spinner as J, CardHeader as Q, Button as X, Divider as U, Tabs as Y, Tab as Z } from "@heroui/react";
import { useAuth as _ } from "../../../hooks/use-auth.js";
import { useUser as $ } from "../../../hooks/use-user.js";
import { useConfig as D } from "../../../hooks/use-config.js";
import { ProfileForm as E } from "./profile-form.js";
import { SecurityPanel as S } from "./security-panel.js";
import { MFASetup as ee } from "./mfa-setup.js";
import { PasskeySetup as re } from "./passkey-setup.js";
const l = {
user: /* @__PURE__ */ e("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" }) }),
security: /* @__PURE__ */ e("svg", { className: "w-4 h-4", 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" }) }),
shield: /* @__PURE__ */ e("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" }) }),
key: /* @__PURE__ */ e("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" }) }),
organization: /* @__PURE__ */ e("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" }) })
};
function he({
defaultTab: z = "profile",
tabs: j,
hideTabs: d = [],
showOrganizationSettings: m = !0,
showSecuritySettings: h = !0,
showMFASettings: u = !0,
showPasskeySettings: p = !0,
className: f = "",
variant: k = "bordered",
orientation: v = "horizontal",
tabPlacement: M = "top",
headerContent: g,
footerContent: y,
onProfileUpdate: L,
onSuccess: t,
onError: n,
onClose: a,
isLoading: w = !1,
isDisabled: i = !1,
size: B = "md",
customTabs: x = {}
}) {
const { user: F, isLoading: I } = _(), { isLoading: O } = $(), { components: T, features: c } = D(), C = T.UserProfile;
if (C)
return /* @__PURE__ */ e(C, { defaultTab: z, tabs: j, hideTabs: d, showOrganizationSettings: m, showSecuritySettings: h, showMFASettings: u, showPasskeySettings: p, className: f, variant: k, orientation: v, tabPlacement: M, headerContent: g, footerContent: y, onProfileUpdate: L, onSuccess: t, onError: n, onClose: a, isLoading: w, isDisabled: i, size: B, customTabs: x });
const H = w || I || O, [V, K] = A.useState(z), R = A.useMemo(() => {
const r = [
{
key: "profile",
title: "Profile",
icon: l.user,
content: /* @__PURE__ */ e(
E,
{
onUpdate: L,
onSuccess: t,
onError: n,
isDisabled: i
}
)
}
];
return h && r.push({
key: "security",
title: "Security",
icon: l.security,
content: /* @__PURE__ */ e(
S,
{
onSuccess: t,
onError: n,
isDisabled: i
}
)
}), u && c.mfa && r.push({
key: "mfa",
title: "Two-Factor Auth",
icon: l.shield,
content: /* @__PURE__ */ e(
ee,
{
onSuccess: t,
onError: n,
isDisabled: i
}
)
}), p && c.passkeys && r.push({
key: "passkeys",
title: "Passkeys",
icon: l.key,
content: /* @__PURE__ */ e(
re,
{
onSuccess: t,
onError: n,
isDisabled: i
}
)
}), m && c.organizationManagement && r.push({
key: "organizations",
title: "Organizations",
icon: l.organization,
content: /* @__PURE__ */ e("div", { className: "space-y-4", children: /* @__PURE__ */ e("p", { children: "Organization management coming soon..." }) })
}), Object.entries(x).forEach(([s, G]) => {
r.push({
key: s,
title: s.charAt(0).toUpperCase() + s.slice(1),
content: G
});
}), r.filter((s) => !d.includes(s.key));
}, [
h,
u,
p,
m,
c,
d,
x,
L,
t,
n,
i
]), b = j || R, q = {
sm: "sm",
md: "md",
lg: "lg"
};
return !F && !H ? null : H ? /* @__PURE__ */ e(P, { variant: k, className: f, children: /* @__PURE__ */ e(N, { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ e(J, { size: "lg" }) }) }) : /* @__PURE__ */ o(P, { variant: k, className: f, children: [
(g || a) && /* @__PURE__ */ o(W, { children: [
/* @__PURE__ */ o(Q, { className: "flex items-center justify-between", children: [
g || /* @__PURE__ */ o("div", { children: [
/* @__PURE__ */ e("h3", { className: "text-lg font-semibold", children: "Profile Settings" }),
/* @__PURE__ */ e("p", { className: "text-sm text-default-500", children: "Manage your account settings and preferences" })
] }),
a && /* @__PURE__ */ e(
X,
{
isIconOnly: !0,
variant: "light",
onPress: a,
"aria-label": "Close",
children: /* @__PURE__ */ e("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
}
)
] }),
/* @__PURE__ */ e(U, {})
] }),
/* @__PURE__ */ e(N, { className: "p-0", children: /* @__PURE__ */ e(
Y,
{
selectedKey: V,
onSelectionChange: (r) => K(r),
orientation: v,
placement: M,
size: q[B],
classNames: {
base: "w-full",
tabList: v === "vertical" ? "w-full" : void 0,
panel: "w-full"
},
children: b.map((r) => /* @__PURE__ */ e(
Z,
{
title: /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
r.icon,
/* @__PURE__ */ e("span", { children: r.title }),
r.badge && /* @__PURE__ */ e("span", { className: "bg-danger text-white text-xs rounded-full px-1.5 py-0.5 min-w-[1.25rem] h-5 flex items-center justify-center", children: r.badge })
] }),
isDisabled: r.isDisabled || i,
children: /* @__PURE__ */ e("div", { className: "p-6", children: r.content })
},
r.key
))
}
) }),
y && /* @__PURE__ */ o(W, { children: [
/* @__PURE__ */ e(U, {}),
/* @__PURE__ */ e(N, { className: "pt-4", children: y })
] })
] });
}
export {
he as UserProfile
};
//# sourceMappingURL=user-profile.js.map