@alepha/ui 0.18.2 → 0.18.3

package/dist/demo/Login-C12N4oGs.js

@@ -0,0 +1,275 @@
+import { t as __exportAll } from "./rolldown-runtime-CjeV3_4I.js";
+import { h as ActionButton, n as capitalize, o as Control } from "./core-DFgB3yU4.js";
+import { n as IconGithub, t as IconGoogle } from "./IconGoogle-CSQLPYwX.js";
+import { AlephaError, t } from "alepha";
+import { FormValidationError, useForm } from "alepha/react/form";
+import { useI18n } from "alepha/react/i18n";
+import { Card, Flex, Image, Text, Title } from "@mantine/core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { IconLock, IconPhoto, IconUser } from "@tabler/icons-react";
+import { useRouter } from "alepha/react/router";
+import { useAuth } from "alepha/react/auth";
+import { HttpError } from "alepha/server";
+
+//#region ../../src/auth/components/Login.tsx
+var Login_exports = /* @__PURE__ */ __exportAll({ default: () => Login });
+const Login = (props) => {
+	const auth = useAuth();
+	const router = useRouter();
+	const { tr } = useI18n();
+	const redirect = router.query.r || "/";
+	const credentialsProvider = props.realmConfig.authenticationMethods.find((it) => it.type === "CREDENTIALS");
+	const settings = props.realmConfig.settings;
+	const loginMethods = useMemo(() => {
+		const methods = [];
+		if (settings.username !== "none") methods.push("username");
+		if (settings.email !== "none") methods.push("email");
+		if (settings.phoneNumber !== "none") methods.push("phone");
+		return methods;
+	}, [settings]);
+	const identifierTitle = useMemo(() => {
+		if (loginMethods.length === 0) return tr("loginUsername");
+		if (loginMethods.length === 1) {
+			if (loginMethods[0] === "username") return tr("loginUsername");
+			if (loginMethods[0] === "email") return tr("loginEmail");
+			if (loginMethods[0] === "phone") return tr("loginPhone");
+		}
+		const labels = loginMethods.map((m) => {
+			if (m === "username") return tr("loginUsername").toLowerCase();
+			if (m === "email") return tr("loginEmail").toLowerCase();
+			if (m === "phone") return tr("loginPhone").toLowerCase();
+			return m;
+		});
+		return capitalize(`${labels.slice(0, -1).join(", ")} or ${labels[labels.length - 1]}`);
+	}, [loginMethods, tr]);
+	const form = useForm({
+		schema: t.object({
+			identifier: t.string({ minLength: 1 }),
+			password: t.string({ minLength: settings.passwordPolicy?.minLength || 6 })
+		}),
+		handler: async (data) => {
+			if (!credentialsProvider) throw new AlephaError("Credentials provider not configured");
+			try {
+				await auth.login(credentialsProvider.name, {
+					username: data.identifier,
+					password: data.password,
+					realm: props.realmConfig.realmName
+				});
+				await router.push(router.query.r || "/");
+			} catch (error) {
+				if (error instanceof HttpError && error.error === "InvalidCredentialsError") throw new FormValidationError({
+					message: "Invalid identifier or password",
+					path: "/password"
+				});
+				throw error;
+			}
+		}
+	});
+	const getAutoCompleteType = () => {
+		if (loginMethods.includes("email")) return "email";
+		if (loginMethods.includes("username")) return "username";
+		if (loginMethods.includes("phone")) return "tel";
+		return "username";
+	};
+	const externalLoginMethods = props.realmConfig.authenticationMethods.filter((method) => method.type !== "CREDENTIALS");
+	const showOrDivider = credentialsProvider && externalLoginMethods.length > 0;
+	const realmQuery = props.realmConfig.realmName ? `?realm=${encodeURIComponent(props.realmConfig.realmName)}` : "";
+	const formContent = /* @__PURE__ */ jsxs(Flex, {
+		direction: "column",
+		gap: "md",
+		children: [
+			(settings.logoUrl || settings.displayName || settings.description) && /* @__PURE__ */ jsxs(Flex, {
+				direction: "column",
+				gap: "xs",
+				align: "center",
+				mb: "xs",
+				children: [
+					settings.logoUrl && /* @__PURE__ */ jsx(Image, {
+						src: settings.logoUrl,
+						alt: settings.displayName || props.realmConfig.realmName,
+						h: 48,
+						w: "auto",
+						fit: "contain"
+					}),
+					settings.displayName && /* @__PURE__ */ jsx(Title, {
+						order: 4,
+						ta: "center",
+						children: settings.displayName
+					}),
+					settings.description && /* @__PURE__ */ jsx(Text, {
+						size: "sm",
+						c: "dimmed",
+						ta: "center",
+						children: settings.description
+					})
+				]
+			}),
+			credentialsProvider && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("form", {
+				...form.props,
+				children: /* @__PURE__ */ jsxs(Flex, {
+					direction: "column",
+					flex: 1,
+					gap: "md",
+					children: [
+						/* @__PURE__ */ jsx(Control, {
+							label: identifierTitle,
+							input: form.input.identifier,
+							icon: IconUser,
+							text: { autoComplete: getAutoCompleteType() }
+						}),
+						/* @__PURE__ */ jsx(Control, {
+							label: tr("loginPassword"),
+							input: form.input.password,
+							icon: IconLock,
+							password: { autoComplete: "current-password" }
+						}),
+						/* @__PURE__ */ jsx(ActionButton, {
+							variant: "filled",
+							form,
+							children: tr("loginSignIn")
+						})
+					]
+				})
+			}), settings.resetPasswordAllowed && /* @__PURE__ */ jsx(Text, {
+				size: "sm",
+				ta: "center",
+				children: /* @__PURE__ */ jsx(ActionButton, {
+					href: `${props.resetPasswordPath ?? "/auth/reset-password"}${realmQuery}`,
+					anchorProps: { inherit: true },
+					children: tr("loginForgotPassword")
+				})
+			})] }),
+			showOrDivider && /* @__PURE__ */ jsxs(Flex, {
+				align: "center",
+				justify: "center",
+				gap: "md",
+				children: [
+					/* @__PURE__ */ jsx(Flex, {
+						flex: 1,
+						h: "1px",
+						bg: "var(--alepha-border)"
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						size: "xs",
+						c: "dimmed",
+						children: tr("loginOr")
+					}),
+					/* @__PURE__ */ jsx(Flex, {
+						flex: 1,
+						h: "1px",
+						bg: "var(--alepha-border)"
+					})
+				]
+			}),
+			externalLoginMethods.length > 0 && /* @__PURE__ */ jsx(Flex, {
+				direction: "column",
+				gap: "sm",
+				children: externalLoginMethods.map((method) => /* @__PURE__ */ jsx(ActionButton, {
+					variant: "default",
+					leftSection: leftSection(method.name.toLowerCase()),
+					onClick: () => auth.login(method.name, {
+						redirect,
+						realm: props.realmConfig.realmName
+					}),
+					children: tr("loginContinueWith", { args: [capitalize(method.name)] })
+				}, method.type))
+			}),
+			settings.registrationAllowed && /* @__PURE__ */ jsxs(Text, {
+				size: "sm",
+				ta: "center",
+				children: [
+					tr("loginNoAccount"),
+					" ",
+					/* @__PURE__ */ jsx(ActionButton, {
+						href: `${props.registerPath ?? "/auth/register"}${realmQuery}`,
+						anchorProps: { inherit: true },
+						children: tr("loginSignUp")
+					})
+				]
+			})
+		]
+	});
+	if (props.variant === "split") return /* @__PURE__ */ jsx(Flex, {
+		flex: 1,
+		justify: "center",
+		align: "center",
+		children: /* @__PURE__ */ jsx(Card, {
+			withBorder: true,
+			p: 0,
+			w: 720,
+			bg: "var(--alepha-elevated)",
+			style: { overflow: "hidden" },
+			children: /* @__PURE__ */ jsxs(Flex, {
+				mih: 480,
+				children: [props.image ? /* @__PURE__ */ jsx(Flex, {
+					flex: 1,
+					style: {
+						backgroundImage: `url(${props.image})`,
+						backgroundSize: "cover",
+						backgroundPosition: "center"
+					}
+				}) : /* @__PURE__ */ jsx(Flex, {
+					flex: 1,
+					justify: "center",
+					align: "center",
+					bg: "var(--mantine-color-gray-light)",
+					style: { borderRight: "1px solid var(--mantine-color-default-border)" },
+					children: /* @__PURE__ */ jsx(Flex, {
+						justify: "center",
+						align: "center",
+						w: 120,
+						h: 80,
+						style: {
+							border: "2px dashed var(--mantine-color-default-border)",
+							borderRadius: "var(--mantine-radius-sm)"
+						},
+						children: /* @__PURE__ */ jsx(IconPhoto, {
+							size: 32,
+							style: { opacity: .3 }
+						})
+					})
+				}), /* @__PURE__ */ jsxs(Flex, {
+					flex: 1,
+					direction: "column",
+					gap: "md",
+					p: "xl",
+					justify: "center",
+					children: [formContent, /* @__PURE__ */ jsx(ActionButton, {
+						variant: "subtle",
+						href: "/",
+						children: tr("loginCancel")
+					})]
+				})]
+			})
+		})
+	});
+	return /* @__PURE__ */ jsx(Flex, {
+		flex: 1,
+		justify: "center",
+		align: "center",
+		children: /* @__PURE__ */ jsxs(Flex, {
+			direction: "column",
+			gap: "sm",
+			w: 360,
+			children: [/* @__PURE__ */ jsx(Card, {
+				withBorder: true,
+				p: "lg",
+				bg: "var(--alepha-elevated)",
+				children: formContent
+			}), /* @__PURE__ */ jsx(ActionButton, {
+				variant: "subtle",
+				href: "/",
+				children: tr("loginCancel")
+			})]
+		})
+	});
+};
+const leftSection = (name) => {
+	if (name === "google") return /* @__PURE__ */ jsx(IconGoogle, {});
+	if (name === "github") return /* @__PURE__ */ jsx(IconGithub, {});
+};
+
+//#endregion
+export { Login_exports as n, Login as t };
+//# sourceMappingURL=Login-C12N4oGs.js.map

package/dist/demo/Login-C12N4oGs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Login-C12N4oGs.js","names":[],"sources":["../../src/auth/components/Login.tsx"],"sourcesContent":["import { ActionButton, Control, capitalize } from \"@alepha/ui\";\nimport { Card, Flex, Image, Text, Title } from \"@mantine/core\";\nimport { IconLock, IconPhoto, IconUser } from \"@tabler/icons-react\";\nimport { AlephaError, t } from \"alepha\";\nimport type { RealmConfig } from \"alepha/api/users\";\nimport { useAuth } from \"alepha/react/auth\";\nimport { FormValidationError, useForm } from \"alepha/react/form\";\nimport { useI18n } from \"alepha/react/i18n\";\nimport { useRouter } from \"alepha/react/router\";\nimport { HttpError } from \"alepha/server\";\nimport { useMemo } from \"react\";\nimport type { AuthI18n } from \"../AuthI18n.ts\";\nimport IconGithub from \"./icons/IconGithub.tsx\";\nimport IconGoogle from \"./icons/IconGoogle.tsx\";\n\nexport interface LoginProps {\n  realmConfig: RealmConfig;\n  registerPath?: string;\n  resetPasswordPath?: string;\n  variant?: \"card\" | \"split\";\n  image?: string;\n}\n\nconst Login = (props: LoginProps) => {\n  const auth = useAuth();\n  const router = useRouter();\n  const { tr } = useI18n<AuthI18n, \"en\">();\n  const redirect = router.query.r || \"/\";\n\n  const credentialsProvider = props.realmConfig.authenticationMethods.find(\n    (it) => it.type === \"CREDENTIALS\",\n  );\n\n  const settings = props.realmConfig.settings;\n\n  // Determine what login methods are available\n  const loginMethods = useMemo(() => {\n    const methods = [];\n    if (settings.username !== \"none\") methods.push(\"username\");\n    if (settings.email !== \"none\") methods.push(\"email\");\n    if (settings.phoneNumber !== \"none\") methods.push(\"phone\");\n    return methods;\n  }, [settings]);\n\n  // Create identifier title based on enabled methods\n  const identifierTitle = useMemo(() => {\n    if (loginMethods.length === 0) return tr(\"loginUsername\");\n    if (loginMethods.length === 1) {\n      if (loginMethods[0] === \"username\") return tr(\"loginUsername\");\n      if (loginMethods[0] === \"email\") return tr(\"loginEmail\");\n      if (loginMethods[0] === \"phone\") return tr(\"loginPhone\");\n    }\n    const labels = loginMethods.map((m) => {\n      if (m === \"username\") return tr(\"loginUsername\").toLowerCase();\n      if (m === \"email\") return tr(\"loginEmail\").toLowerCase();\n      if (m === \"phone\") return tr(\"loginPhone\").toLowerCase();\n      return m;\n    });\n    return capitalize(\n      `${labels.slice(0, -1).join(\", \")} or ${labels[labels.length - 1]}`,\n    );\n  }, [loginMethods, tr]);\n\n  const form = useForm({\n    schema: t.object({\n      identifier: t.string({\n        minLength: 1,\n      }),\n      password: t.string({\n        minLength: settings.passwordPolicy?.minLength || 6,\n      }),\n    }),\n    handler: async (data) => {\n      if (!credentialsProvider) {\n        throw new AlephaError(\"Credentials provider not configured\");\n      }\n\n      try {\n        await auth.login(credentialsProvider.name, {\n          username: data.identifier,\n          password: data.password,\n          realm: props.realmConfig.realmName,\n        });\n        await router.push(router.query.r || \"/\");\n      } catch (error) {\n        if (\n          error instanceof HttpError &&\n          error.error === \"InvalidCredentialsError\"\n        ) {\n          throw new FormValidationError({\n            message: \"Invalid identifier or password\",\n            path: \"/password\",\n          });\n        }\n        throw error;\n      }\n    },\n  });\n\n  const getAutoCompleteType = () => {\n    if (loginMethods.includes(\"email\")) {\n      return \"email\";\n    }\n    if (loginMethods.includes(\"username\")) {\n      return \"username\";\n    }\n    if (loginMethods.includes(\"phone\")) {\n      return \"tel\";\n    }\n    return \"username\";\n  };\n\n  const externalLoginMethods = props.realmConfig.authenticationMethods.filter(\n    (method) => method.type !== \"CREDENTIALS\",\n  );\n\n  const showOrDivider = credentialsProvider && externalLoginMethods.length > 0;\n\n  const realmQuery = props.realmConfig.realmName\n    ? `?realm=${encodeURIComponent(props.realmConfig.realmName)}`\n    : \"\";\n\n  const formContent = (\n    <Flex direction=\"column\" gap={\"md\"}>\n      {/* Realm branding */}\n      {(settings.logoUrl || settings.displayName || settings.description) && (\n        <Flex direction=\"column\" gap={\"xs\"} align=\"center\" mb=\"xs\">\n          {settings.logoUrl && (\n            <Image\n              src={settings.logoUrl}\n              alt={settings.displayName || props.realmConfig.realmName}\n              h={48}\n              w=\"auto\"\n              fit=\"contain\"\n            />\n          )}\n          {settings.displayName && (\n            <Title order={4} ta=\"center\">\n              {settings.displayName}\n            </Title>\n          )}\n          {settings.description && (\n            <Text size=\"sm\" c=\"dimmed\" ta=\"center\">\n              {settings.description}\n            </Text>\n          )}\n        </Flex>\n      )}\n\n      {/* Credentials login form */}\n      {credentialsProvider && (\n        <>\n          <form {...form.props}>\n            <Flex direction=\"column\" flex={1} gap={\"md\"}>\n              <Control\n                label={identifierTitle}\n                input={form.input.identifier}\n                icon={IconUser}\n                text={{\n                  autoComplete: getAutoCompleteType(),\n                }}\n              />\n              <Control\n                label={tr(\"loginPassword\")}\n                input={form.input.password}\n                icon={IconLock}\n                password={{\n                  autoComplete: \"current-password\",\n                }}\n              />\n              <ActionButton variant={\"filled\"} form={form}>\n                {tr(\"loginSignIn\")}\n              </ActionButton>\n            </Flex>\n          </form>\n          {settings.resetPasswordAllowed && (\n            <Text size=\"sm\" ta=\"center\">\n              <ActionButton\n                href={`${props.resetPasswordPath ?? \"/auth/reset-password\"}${realmQuery}`}\n                anchorProps={{ inherit: true }}\n              >\n                {tr(\"loginForgotPassword\")}\n              </ActionButton>\n            </Text>\n          )}\n        </>\n      )}\n\n      {/* OR divider - only when both credentials AND external methods exist */}\n      {showOrDivider && (\n        <Flex align=\"center\" justify=\"center\" gap={\"md\"}>\n          <Flex flex={1} h={\"1px\"} bg={\"var(--alepha-border)\"} />\n          <Text size=\"xs\" c={\"dimmed\"}>\n            {tr(\"loginOr\")}\n          </Text>\n          <Flex flex={1} h={\"1px\"} bg={\"var(--alepha-border)\"} />\n        </Flex>\n      )}\n\n      {/* External login methods */}\n      {externalLoginMethods.length > 0 && (\n        <Flex direction=\"column\" gap={\"sm\"}>\n          {externalLoginMethods.map((method) => (\n            <ActionButton\n              variant={\"default\"}\n              key={method.type}\n              leftSection={leftSection(method.name.toLowerCase())}\n              onClick={() =>\n                auth.login(method.name, {\n                  redirect,\n                  realm: props.realmConfig.realmName,\n                })\n              }\n            >\n              {tr(\"loginContinueWith\", {\n                args: [capitalize(method.name)],\n              })}\n            </ActionButton>\n          ))}\n        </Flex>\n      )}\n\n      {/* Registration link */}\n      {settings.registrationAllowed && (\n        <Text size=\"sm\" ta=\"center\">\n          {tr(\"loginNoAccount\")}{\" \"}\n          <ActionButton\n            href={`${props.registerPath ?? \"/auth/register\"}${realmQuery}`}\n            anchorProps={{ inherit: true }}\n          >\n            {tr(\"loginSignUp\")}\n          </ActionButton>\n        </Text>\n      )}\n    </Flex>\n  );\n\n  if (props.variant === \"split\") {\n    return (\n      <Flex flex={1} justify={\"center\"} align={\"center\"}>\n        <Card\n          withBorder\n          p={0}\n          w={720}\n          bg={\"var(--alepha-elevated)\"}\n          style={{ overflow: \"hidden\" }}\n        >\n          <Flex mih={480}>\n            {props.image ? (\n              <Flex\n                flex={1}\n                style={{\n                  backgroundImage: `url(${props.image})`,\n                  backgroundSize: \"cover\",\n                  backgroundPosition: \"center\",\n                }}\n              />\n            ) : (\n              <Flex\n                flex={1}\n                justify=\"center\"\n                align=\"center\"\n                bg=\"var(--mantine-color-gray-light)\"\n                style={{\n                  borderRight: \"1px solid var(--mantine-color-default-border)\",\n                }}\n              >\n                <Flex\n                  justify=\"center\"\n                  align=\"center\"\n                  w={120}\n                  h={80}\n                  style={{\n                    border: \"2px dashed var(--mantine-color-default-border)\",\n                    borderRadius: \"var(--mantine-radius-sm)\",\n                  }}\n                >\n                  <IconPhoto size={32} style={{ opacity: 0.3 }} />\n                </Flex>\n              </Flex>\n            )}\n            <Flex\n              flex={1}\n              direction=\"column\"\n              gap={\"md\"}\n              p={\"xl\"}\n              justify={\"center\"}\n            >\n              {formContent}\n              <ActionButton variant={\"subtle\"} href={\"/\"}>\n                {tr(\"loginCancel\")}\n              </ActionButton>\n            </Flex>\n          </Flex>\n        </Card>\n      </Flex>\n    );\n  }\n\n  return (\n    <Flex flex={1} justify={\"center\"} align={\"center\"}>\n      <Flex direction=\"column\" gap={\"sm\"} w={360}>\n        <Card withBorder p={\"lg\"} bg={\"var(--alepha-elevated)\"}>\n          {formContent}\n        </Card>\n        <ActionButton variant={\"subtle\"} href={\"/\"}>\n          {tr(\"loginCancel\")}\n        </ActionButton>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport default Login;\n\nconst leftSection = (name: string) => {\n  if (name === \"google\") {\n    return <IconGoogle />;\n  }\n\n  if (name === \"github\") {\n    return <IconGithub />;\n  }\n};\n"],"mappings":"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"}

package/dist/demo/{Profile-BE_Y3co2.js → Profile-DS5q4vOh.js}

@@ -1,10 +1,39 @@
-import { h as ActionButton } from "./core-B7LNjM78.js";
+import { h as ActionButton } from "./core-DFgB3yU4.js";
 import { Avatar, Badge, Card, Flex, Text, Title } from "@mantine/core";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { IconAt, IconCalendar, IconId, IconShield, IconUser } from "@tabler/icons-react";
 import { useRouter } from "alepha/react/router";
 import { useAuth } from "alepha/react/auth";
 
+//#region ../../src/auth/components/ProfileField.tsx
+const ProfileField = (props) => {
+	const { icon, label, children } = props;
+	return /* @__PURE__ */ jsxs(Flex, {
+		gap: "sm",
+		align: "flex-start",
+		children: [/* @__PURE__ */ jsx(Flex, {
+			c: "dimmed",
+			mt: 2,
+			children: icon
+		}), /* @__PURE__ */ jsxs(Flex, {
+			direction: "column",
+			gap: 2,
+			flex: 1,
+			children: [/* @__PURE__ */ jsx(Text, {
+				size: "xs",
+				c: "dimmed",
+				tt: "uppercase",
+				fw: 500,
+				children: label
+			}), /* @__PURE__ */ jsx(Text, {
+				size: "sm",
+				children
+			})]
+		})]
+	});
+};
+
+//#endregion
 //#region ../../src/auth/components/Profile.tsx
 const Profile = () => {
 	const auth = useAuth();
@@ -124,32 +153,7 @@ const Profile = () => {
 		})
 	});
 };
-const ProfileField = ({ icon, label, children }) => {
-	return /* @__PURE__ */ jsxs(Flex, {
-		gap: "sm",
-		align: "flex-start",
-		children: [/* @__PURE__ */ jsx(Flex, {
-			c: "dimmed",
-			mt: 2,
-			children: icon
-		}), /* @__PURE__ */ jsxs(Flex, {
-			direction: "column",
-			gap: 2,
-			flex: 1,
-			children: [/* @__PURE__ */ jsx(Text, {
-				size: "xs",
-				c: "dimmed",
-				tt: "uppercase",
-				fw: 500,
-				children: label
-			}), /* @__PURE__ */ jsx(Text, {
-				size: "sm",
-				children
-			})]
-		})]
-	});
-};
 
 //#endregion
 export { Profile as default };
-//# sourceMappingURL=Profile-BE_Y3co2.js.map
+//# sourceMappingURL=Profile-DS5q4vOh.js.map

package/dist/demo/Profile-DS5q4vOh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Profile-DS5q4vOh.js","names":[],"sources":["../../src/auth/components/ProfileField.tsx","../../src/auth/components/Profile.tsx"],"sourcesContent":["import { Flex, Text } from \"@mantine/core\";\nimport type { ReactNode } from \"react\";\n\nexport interface ProfileFieldProps {\n  /**\n   * Icon to display\n   */\n  icon: ReactNode;\n\n  /**\n   * Field label\n   */\n  label: string;\n\n  /**\n   * Field content\n   */\n  children: ReactNode;\n}\n\nconst ProfileField = (props: ProfileFieldProps) => {\n  const { icon, label, children } = props;\n\n  return (\n    <Flex gap=\"sm\" align=\"flex-start\">\n      <Flex c=\"dimmed\" mt={2}>\n        {icon}\n      </Flex>\n      <Flex direction=\"column\" gap={2} flex={1}>\n        <Text size=\"xs\" c=\"dimmed\" tt=\"uppercase\" fw={500}>\n          {label}\n        </Text>\n        <Text size=\"sm\">{children}</Text>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport default ProfileField;\n","import { ActionButton } from \"@alepha/ui\";\nimport { Avatar, Badge, Card, Flex, Text, Title } from \"@mantine/core\";\nimport {\n  IconAt,\n  IconCalendar,\n  IconId,\n  IconShield,\n  IconUser,\n} from \"@tabler/icons-react\";\nimport { useAuth } from \"alepha/react/auth\";\nimport { useRouter } from \"alepha/react/router\";\nimport type { AuthRouter } from \"../AuthRouter.ts\";\nimport ProfileField from \"./ProfileField.tsx\";\n\nconst Profile = () => {\n  const auth = useAuth();\n  const router = useRouter<AuthRouter>();\n\n  if (!auth.user) {\n    return null;\n  }\n\n  const { id, name, email, username, picture, roles, organizations } =\n    auth.user;\n\n  const displayName = name || username || email || \"User\";\n\n  return (\n    <Flex flex={1} justify=\"center\" align=\"center\">\n      <Flex direction=\"column\" gap=\"md\" w={400}>\n        <Card withBorder p=\"xl\" bg=\"var(--alepha-elevated)\">\n          <Flex direction=\"column\" gap=\"lg\">\n            {/* Avatar and name */}\n            <Flex direction=\"column\" align=\"center\" gap=\"md\">\n              <Avatar\n                src={picture ? `/api/files/${picture}` : undefined}\n                size={96}\n                radius=\"xl\"\n                color=\"blue\"\n              >\n                {!picture && <IconUser size={48} />}\n              </Avatar>\n              <Flex direction=\"column\" gap={4} align=\"center\">\n                <Title order={3}>{displayName}</Title>\n                {email && username && (\n                  <Text size=\"sm\" c=\"dimmed\">\n                    @{username}\n                  </Text>\n                )}\n              </Flex>\n            </Flex>\n\n            {/* User details */}\n            <Flex direction=\"column\" gap=\"sm\">\n              {email && (\n                <ProfileField icon={<IconAt size={18} />} label=\"Email\">\n                  {email}\n                </ProfileField>\n              )}\n\n              {username && (\n                <ProfileField icon={<IconUser size={18} />} label=\"Username\">\n                  {username}\n                </ProfileField>\n              )}\n\n              {id && (\n                <ProfileField icon={<IconId size={18} />} label=\"User ID\">\n                  <Text size=\"xs\" c=\"dimmed\" ff=\"monospace\">\n                    {id}\n                  </Text>\n                </ProfileField>\n              )}\n\n              {/* Roles */}\n              {roles && roles.length > 0 && (\n                <ProfileField icon={<IconShield size={18} />} label=\"Roles\">\n                  <Flex gap=\"xs\">\n                    {roles.map((role) => (\n                      <Badge key={role} size=\"sm\" variant=\"light\">\n                        {role}\n                      </Badge>\n                    ))}\n                  </Flex>\n                </ProfileField>\n              )}\n\n              {/* Organizations */}\n              {organizations && organizations.length > 0 && (\n                <ProfileField\n                  icon={<IconCalendar size={18} />}\n                  label=\"Organizations\"\n                >\n                  <Flex gap=\"xs\">\n                    {organizations.map((org) => (\n                      <Badge key={org} size=\"sm\" variant=\"outline\">\n                        {org}\n                      </Badge>\n                    ))}\n                  </Flex>\n                </ProfileField>\n              )}\n            </Flex>\n\n            {/* Actions */}\n            <Flex direction=\"column\" gap=\"sm\" mt=\"md\">\n              <ActionButton\n                variant=\"light\"\n                color=\"red\"\n                onClick={() => auth.logout()}\n                fullWidth\n              >\n                Sign out\n              </ActionButton>\n            </Flex>\n          </Flex>\n        </Card>\n\n        <ActionButton variant=\"subtle\" href=\"/\">\n          Back to home\n        </ActionButton>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport default Profile;\n"],"mappings":";;;;;;;;AAoBA,MAAM,gBAAgB,UAA6B;CACjD,MAAM,EAAE,MAAM,OAAO,aAAa;AAElC,QACE,qBAAC;EAAK,KAAI;EAAK,OAAM;aACnB,oBAAC;GAAK,GAAE;GAAS,IAAI;aAClB;IACI,EACP,qBAAC;GAAK,WAAU;GAAS,KAAK;GAAG,MAAM;cACrC,oBAAC;IAAK,MAAK;IAAK,GAAE;IAAS,IAAG;IAAY,IAAI;cAC3C;KACI,EACP,oBAAC;IAAK,MAAK;IAAM;KAAgB;IAC5B;GACF;;;;;ACpBX,MAAM,gBAAgB;CACpB,MAAM,OAAO,SAAS;AACP,YAAuB;AAEtC,KAAI,CAAC,KAAK,KACR,QAAO;CAGT,MAAM,EAAE,IAAI,MAAM,OAAO,UAAU,SAAS,OAAO,kBACjD,KAAK;CAEP,MAAM,cAAc,QAAQ,YAAY,SAAS;AAEjD,QACE,oBAAC;EAAK,MAAM;EAAG,SAAQ;EAAS,OAAM;YACpC,qBAAC;GAAK,WAAU;GAAS,KAAI;GAAK,GAAG;cACnC,oBAAC;IAAK;IAAW,GAAE;IAAK,IAAG;cACzB,qBAAC;KAAK,WAAU;KAAS,KAAI;;MAE3B,qBAAC;OAAK,WAAU;OAAS,OAAM;OAAS,KAAI;kBAC1C,oBAAC;QACC,KAAK,UAAU,cAAc,YAAY;QACzC,MAAM;QACN,QAAO;QACP,OAAM;kBAEL,CAAC,WAAW,oBAAC,YAAS,MAAM,KAAM;SAC5B,EACT,qBAAC;QAAK,WAAU;QAAS,KAAK;QAAG,OAAM;mBACrC,oBAAC;SAAM,OAAO;mBAAI;UAAoB,EACrC,SAAS,YACR,qBAAC;SAAK,MAAK;SAAK,GAAE;oBAAS,KACvB;UACG;SAEJ;QACF;MAGP,qBAAC;OAAK,WAAU;OAAS,KAAI;;QAC1B,SACC,oBAAC;SAAa,MAAM,oBAAC,UAAO,MAAM,KAAM;SAAE,OAAM;mBAC7C;UACY;QAGhB,YACC,oBAAC;SAAa,MAAM,oBAAC,YAAS,MAAM,KAAM;SAAE,OAAM;mBAC/C;UACY;QAGhB,MACC,oBAAC;SAAa,MAAM,oBAAC,UAAO,MAAM,KAAM;SAAE,OAAM;mBAC9C,oBAAC;UAAK,MAAK;UAAK,GAAE;UAAS,IAAG;oBAC3B;WACI;UACM;QAIhB,SAAS,MAAM,SAAS,KACvB,oBAAC;SAAa,MAAM,oBAAC,cAAW,MAAM,KAAM;SAAE,OAAM;mBAClD,oBAAC;UAAK,KAAI;oBACP,MAAM,KAAK,SACV,oBAAC;WAAiB,MAAK;WAAK,SAAQ;qBACjC;aADS,KAEJ,CACR;WACG;UACM;QAIhB,iBAAiB,cAAc,SAAS,KACvC,oBAAC;SACC,MAAM,oBAAC,gBAAa,MAAM,KAAM;SAChC,OAAM;mBAEN,oBAAC;UAAK,KAAI;oBACP,cAAc,KAAK,QAClB,oBAAC;WAAgB,MAAK;WAAK,SAAQ;qBAChC;aADS,IAEJ,CACR;WACG;UACM;;QAEZ;MAGP,oBAAC;OAAK,WAAU;OAAS,KAAI;OAAK,IAAG;iBACnC,oBAAC;QACC,SAAQ;QACR,OAAM;QACN,eAAe,KAAK,QAAQ;QAC5B;kBACD;SAEc;QACV;;MACF;KACF,EAEP,oBAAC;IAAa,SAAQ;IAAS,MAAK;cAAI;KAEzB;IACV;GACF"}