mogh_ui 0.1.0 → 0.2.1

package/dist/auth/profile/linked-logins.cjs

@@ -0,0 +1,177 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var linked_logins_exports = {};
+__export(linked_logins_exports, {
+  LinkedLogins: () => LinkedLogins
+});
+module.exports = __toCommonJS(linked_logins_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_core = require("@mantine/core");
+var import_notifications = require("@mantine/notifications");
+var import__ = require("../..");
+var MoghAuth = __toESM(require("mogh_auth_client"), 1);
+var import_lucide_react = require("lucide-react");
+function useLinkWithExternalLogin() {
+  const { mutateAsync } = (0, import__.useManageAuth)("BeginExternalLoginLink");
+  return (provider) => mutateAsync({}).then(
+    () => location.replace(`${import__.AUTH_URL}/${provider.toLowerCase()}/link`)
+  );
+}
+function LinkedLogins({
+  refetchUser,
+  passwordSet,
+  oidcLinkedId,
+  githubLinkedId,
+  googleLinkedId,
+  extraProviderFilter
+}) {
+  const options = (0, import__.useLoginOptions)().data;
+  const loginProviders = (0, import_react.useMemo)(() => {
+    return [
+      {
+        provider: MoghAuth.Types.LoginProvider.Local,
+        enabled: !!options?.local,
+        data: passwordSet ? "########" : void 0
+      },
+      {
+        provider: MoghAuth.Types.LoginProvider.Oidc,
+        enabled: !!options?.oidc,
+        data: oidcLinkedId
+      },
+      {
+        provider: MoghAuth.Types.LoginProvider.Github,
+        enabled: !!options?.github,
+        data: githubLinkedId
+      },
+      {
+        provider: MoghAuth.Types.LoginProvider.Google,
+        enabled: !!options?.google,
+        data: googleLinkedId
+      }
+    ].filter(
+      ({ enabled, provider }) => enabled && (extraProviderFilter?.(provider) ?? true)
+    );
+  }, [passwordSet, oidcLinkedId, githubLinkedId, googleLinkedId, options]);
+  const linkWithExternalLogin = useLinkWithExternalLogin();
+  const { mutateAsync: unlink } = (0, import__.useManageAuth)("UnlinkLogin", {
+    onSuccess: () => {
+      import_notifications.notifications.show({ message: "Unlinked login." });
+      refetchUser();
+    }
+  });
+  if (!loginProviders.length) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import__.Section,
+    {
+      title: "Providers",
+      titleFz: "h3",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.CloudCog, { size: "1.2rem" }),
+      withBorder: true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import__.DataTable,
+        {
+          noBorder: true,
+          tableKey: "login-providers-v1",
+          data: loginProviders,
+          columns: [
+            {
+              header: "Provider",
+              accessorKey: "provider",
+              cell: ({ row }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Text, { fw: "bold", children: row.original.provider })
+            },
+            {
+              header: "Linked",
+              cell: ({
+                row: {
+                  original: { data }
+                }
+              }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Badge, { color: data ? "green.8" : "red", children: data ? "Linked" : "Unlinked" })
+            },
+            {
+              header: "Data",
+              cell: ({
+                row: {
+                  original: { data }
+                }
+              }) => data && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_core.Text,
+                {
+                  maw: "20vw",
+                  size: "sm",
+                  style: {
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    textWrap: "nowrap"
+                  },
+                  children: data
+                }
+              )
+            },
+            {
+              header: "Link",
+              cell: ({
+                row: {
+                  original: { provider, data }
+                }
+              }) => data ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import__.ConfirmModal,
+                {
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Unlink, { size: "1rem" }),
+                  onConfirm: () => unlink({ provider }),
+                  confirmText: "Unlink",
+                  title: "Unlink Login",
+                  confirmProps: { variant: "filled", color: "red" },
+                  children: "Unlink"
+                }
+              ) : provider === "Local" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: "Set password above to enable." }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                import_core.Button,
+                {
+                  onClick: () => linkWithExternalLogin(provider),
+                  leftSection: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Plus, { size: "1rem" }),
+                  children: [
+                    "Link ",
+                    provider
+                  ]
+                }
+              )
+            }
+          ]
+        }
+      )
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LinkedLogins
+});
+//# sourceMappingURL=linked-logins.cjs.map

package/dist/auth/profile/linked-logins.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/auth/profile/linked-logins.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { Badge, Button, Text } from \"@mantine/core\";\nimport { notifications } from \"@mantine/notifications\";\nimport {\n  AUTH_URL,\n  ConfirmModal,\n  DataTable,\n  Section,\n  useLoginOptions,\n  useManageAuth,\n} from \"../..\";\nimport * as MoghAuth from \"mogh_auth_client\";\nimport { CloudCog, Plus, Unlink } from \"lucide-react\";\n\nfunction useLinkWithExternalLogin() {\n  const { mutateAsync } = useManageAuth(\"BeginExternalLoginLink\");\n  return (provider: MoghAuth.Types.ExternalLoginProvider) =>\n    mutateAsync({}).then(() =>\n      location.replace(`${AUTH_URL}/${provider.toLowerCase()}/link`),\n    );\n}\n\nexport function LinkedLogins({\n  refetchUser,\n  passwordSet,\n  oidcLinkedId,\n  githubLinkedId,\n  googleLinkedId,\n  extraProviderFilter,\n}: {\n  refetchUser: () => void;\n  passwordSet?: boolean;\n  oidcLinkedId?: string;\n  githubLinkedId?: string;\n  googleLinkedId?: string;\n  extraProviderFilter?: (provider: MoghAuth.Types.LoginProvider) => boolean;\n}) {\n  const options = useLoginOptions().data;\n  const loginProviders: Array<{\n    provider: MoghAuth.Types.LoginProvider;\n    enabled: boolean;\n    data: string | undefined;\n  }> = useMemo(() => {\n    return [\n      {\n        provider: MoghAuth.Types.LoginProvider.Local,\n        enabled: !!options?.local,\n        data: passwordSet ? \"########\" : undefined,\n      },\n      {\n        provider: MoghAuth.Types.LoginProvider.Oidc,\n        enabled: !!options?.oidc,\n        data: oidcLinkedId,\n      },\n      {\n        provider: MoghAuth.Types.LoginProvider.Github,\n        enabled: !!options?.github,\n        data: githubLinkedId,\n      },\n      {\n        provider: MoghAuth.Types.LoginProvider.Google,\n        enabled: !!options?.google,\n        data: googleLinkedId,\n      },\n    ].filter(\n      ({ enabled, provider }) =>\n        enabled && (extraProviderFilter?.(provider) ?? true),\n    );\n  }, [passwordSet, oidcLinkedId, githubLinkedId, googleLinkedId, options]);\n  const linkWithExternalLogin = useLinkWithExternalLogin();\n  const { mutateAsync: unlink } = useManageAuth(\"UnlinkLogin\", {\n    onSuccess: () => {\n      notifications.show({ message: \"Unlinked login.\" });\n      refetchUser();\n    },\n  });\n\n  if (!loginProviders.length) {\n    return null;\n  }\n\n  return (\n    <Section\n      title=\"Providers\"\n      titleFz=\"h3\"\n      icon={<CloudCog size=\"1.2rem\" />}\n      withBorder\n    >\n      <DataTable\n        noBorder\n        tableKey=\"login-providers-v1\"\n        data={loginProviders}\n        columns={[\n          {\n            header: \"Provider\",\n            accessorKey: \"provider\",\n            cell: ({ row }) => <Text fw=\"bold\">{row.original.provider}</Text>,\n          },\n          {\n            header: \"Linked\",\n            cell: ({\n              row: {\n                original: { data },\n              },\n            }) => (\n              <Badge color={data ? \"green.8\" : \"red\"}>\n                {data ? \"Linked\" : \"Unlinked\"}\n              </Badge>\n            ),\n          },\n          {\n            header: \"Data\",\n            cell: ({\n              row: {\n                original: { data },\n              },\n            }) =>\n              data && (\n                <Text\n                  maw=\"20vw\"\n                  size=\"sm\"\n                  style={{\n                    overflow: \"hidden\",\n                    textOverflow: \"ellipsis\",\n                    textWrap: \"nowrap\",\n                  }}\n                >\n                  {data}\n                </Text>\n              ),\n          },\n          {\n            header: \"Link\",\n            cell: ({\n              row: {\n                original: { provider, data },\n              },\n            }) =>\n              data ? (\n                <ConfirmModal\n                  icon={<Unlink size=\"1rem\" />}\n                  onConfirm={() => unlink({ provider })}\n                  confirmText=\"Unlink\"\n                  title=\"Unlink Login\"\n                  confirmProps={{ variant: \"filled\", color: \"red\" }}\n                >\n                  Unlink\n                </ConfirmModal>\n              ) : provider === \"Local\" ? (\n                <>Set password above to enable.</>\n              ) : (\n                <Button\n                  onClick={() => linkWithExternalLogin(provider as any)}\n                  leftSection={<Plus size=\"1rem\" />}\n                >\n                  Link {provider}\n                </Button>\n              ),\n          },\n        ]}\n      />\n    </Section>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/auth/profile/linked-logins.d.cts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as MoghAuth from 'mogh_auth_client';
+
+declare function LinkedLogins({ refetchUser, passwordSet, oidcLinkedId, githubLinkedId, googleLinkedId, extraProviderFilter, }: {
+    refetchUser: () => void;
+    passwordSet?: boolean;
+    oidcLinkedId?: string;
+    githubLinkedId?: string;
+    googleLinkedId?: string;
+    extraProviderFilter?: (provider: MoghAuth.Types.LoginProvider) => boolean;
+}): react_jsx_runtime.JSX.Element | null;
+
+export { LinkedLogins };

package/dist/auth/profile/linked-logins.d.ts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as MoghAuth from 'mogh_auth_client';
+
+declare function LinkedLogins({ refetchUser, passwordSet, oidcLinkedId, githubLinkedId, googleLinkedId, extraProviderFilter, }: {
+    refetchUser: () => void;
+    passwordSet?: boolean;
+    oidcLinkedId?: string;
+    githubLinkedId?: string;
+    googleLinkedId?: string;
+    extraProviderFilter?: (provider: MoghAuth.Types.LoginProvider) => boolean;
+}): react_jsx_runtime.JSX.Element | null;
+
+export { LinkedLogins };

package/dist/auth/profile/linked-logins.js

@@ -0,0 +1,150 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Badge, Button, Text } from "@mantine/core";
+import { notifications } from "@mantine/notifications";
+import {
+  AUTH_URL,
+  ConfirmModal,
+  DataTable,
+  Section,
+  useLoginOptions,
+  useManageAuth
+} from "../..";
+import * as MoghAuth from "mogh_auth_client";
+import { CloudCog, Plus, Unlink } from "lucide-react";
+function useLinkWithExternalLogin() {
+  const { mutateAsync } = useManageAuth("BeginExternalLoginLink");
+  return (provider) => mutateAsync({}).then(
+    () => location.replace(`${AUTH_URL}/${provider.toLowerCase()}/link`)
+  );
+}
+function LinkedLogins({
+  refetchUser,
+  passwordSet,
+  oidcLinkedId,
+  githubLinkedId,
+  googleLinkedId,
+  extraProviderFilter
+}) {
+  const options = useLoginOptions().data;
+  const loginProviders = useMemo(() => {
+    return [
+      {
+        provider: MoghAuth.Types.LoginProvider.Local,
+        enabled: !!options?.local,
+        data: passwordSet ? "########" : void 0
+      },
+      {
+        provider: MoghAuth.Types.LoginProvider.Oidc,
+        enabled: !!options?.oidc,
+        data: oidcLinkedId
+      },
+      {
+        provider: MoghAuth.Types.LoginProvider.Github,
+        enabled: !!options?.github,
+        data: githubLinkedId
+      },
+      {
+        provider: MoghAuth.Types.LoginProvider.Google,
+        enabled: !!options?.google,
+        data: googleLinkedId
+      }
+    ].filter(
+      ({ enabled, provider }) => enabled && (extraProviderFilter?.(provider) ?? true)
+    );
+  }, [passwordSet, oidcLinkedId, githubLinkedId, googleLinkedId, options]);
+  const linkWithExternalLogin = useLinkWithExternalLogin();
+  const { mutateAsync: unlink } = useManageAuth("UnlinkLogin", {
+    onSuccess: () => {
+      notifications.show({ message: "Unlinked login." });
+      refetchUser();
+    }
+  });
+  if (!loginProviders.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Section,
+    {
+      title: "Providers",
+      titleFz: "h3",
+      icon: /* @__PURE__ */ jsx(CloudCog, { size: "1.2rem" }),
+      withBorder: true,
+      children: /* @__PURE__ */ jsx(
+        DataTable,
+        {
+          noBorder: true,
+          tableKey: "login-providers-v1",
+          data: loginProviders,
+          columns: [
+            {
+              header: "Provider",
+              accessorKey: "provider",
+              cell: ({ row }) => /* @__PURE__ */ jsx(Text, { fw: "bold", children: row.original.provider })
+            },
+            {
+              header: "Linked",
+              cell: ({
+                row: {
+                  original: { data }
+                }
+              }) => /* @__PURE__ */ jsx(Badge, { color: data ? "green.8" : "red", children: data ? "Linked" : "Unlinked" })
+            },
+            {
+              header: "Data",
+              cell: ({
+                row: {
+                  original: { data }
+                }
+              }) => data && /* @__PURE__ */ jsx(
+                Text,
+                {
+                  maw: "20vw",
+                  size: "sm",
+                  style: {
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    textWrap: "nowrap"
+                  },
+                  children: data
+                }
+              )
+            },
+            {
+              header: "Link",
+              cell: ({
+                row: {
+                  original: { provider, data }
+                }
+              }) => data ? /* @__PURE__ */ jsx(
+                ConfirmModal,
+                {
+                  icon: /* @__PURE__ */ jsx(Unlink, { size: "1rem" }),
+                  onConfirm: () => unlink({ provider }),
+                  confirmText: "Unlink",
+                  title: "Unlink Login",
+                  confirmProps: { variant: "filled", color: "red" },
+                  children: "Unlink"
+                }
+              ) : provider === "Local" ? /* @__PURE__ */ jsx(Fragment, { children: "Set password above to enable." }) : /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  onClick: () => linkWithExternalLogin(provider),
+                  leftSection: /* @__PURE__ */ jsx(Plus, { size: "1rem" }),
+                  children: [
+                    "Link ",
+                    provider
+                  ]
+                }
+              )
+            }
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  LinkedLogins
+};
+//# sourceMappingURL=linked-logins.js.map

package/dist/auth/profile/linked-logins.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/auth/profile/linked-logins.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { Badge, Button, Text } from \"@mantine/core\";\nimport { notifications } from \"@mantine/notifications\";\nimport {\n  AUTH_URL,\n  ConfirmModal,\n  DataTable,\n  Section,\n  useLoginOptions,\n  useManageAuth,\n} from \"../..\";\nimport * as MoghAuth from \"mogh_auth_client\";\nimport { CloudCog, Plus, Unlink } from \"lucide-react\";\n\nfunction useLinkWithExternalLogin() {\n  const { mutateAsync } = useManageAuth(\"BeginExternalLoginLink\");\n  return (provider: MoghAuth.Types.ExternalLoginProvider) =>\n    mutateAsync({}).then(() =>\n      location.replace(`${AUTH_URL}/${provider.toLowerCase()}/link`),\n    );\n}\n\nexport function LinkedLogins({\n  refetchUser,\n  passwordSet,\n  oidcLinkedId,\n  githubLinkedId,\n  googleLinkedId,\n  extraProviderFilter,\n}: {\n  refetchUser: () => void;\n  passwordSet?: boolean;\n  oidcLinkedId?: string;\n  githubLinkedId?: string;\n  googleLinkedId?: string;\n  extraProviderFilter?: (provider: MoghAuth.Types.LoginProvider) => boolean;\n}) {\n  const options = useLoginOptions().data;\n  const loginProviders: Array<{\n    provider: MoghAuth.Types.LoginProvider;\n    enabled: boolean;\n    data: string | undefined;\n  }> = useMemo(() => {\n    return [\n      {\n        provider: MoghAuth.Types.LoginProvider.Local,\n        enabled: !!options?.local,\n        data: passwordSet ? \"########\" : undefined,\n      },\n      {\n        provider: MoghAuth.Types.LoginProvider.Oidc,\n        enabled: !!options?.oidc,\n        data: oidcLinkedId,\n      },\n      {\n        provider: MoghAuth.Types.LoginProvider.Github,\n        enabled: !!options?.github,\n        data: githubLinkedId,\n      },\n      {\n        provider: MoghAuth.Types.LoginProvider.Google,\n        enabled: !!options?.google,\n        data: googleLinkedId,\n      },\n    ].filter(\n      ({ enabled, provider }) =>\n        enabled && (extraProviderFilter?.(provider) ?? true),\n    );\n  }, [passwordSet, oidcLinkedId, githubLinkedId, googleLinkedId, options]);\n  const linkWithExternalLogin = useLinkWithExternalLogin();\n  const { mutateAsync: unlink } = useManageAuth(\"UnlinkLogin\", {\n    onSuccess: () => {\n      notifications.show({ message: \"Unlinked login.\" });\n      refetchUser();\n    },\n  });\n\n  if (!loginProviders.length) {\n    return null;\n  }\n\n  return (\n    <Section\n      title=\"Providers\"\n      titleFz=\"h3\"\n      icon={<CloudCog size=\"1.2rem\" />}\n      withBorder\n    >\n      <DataTable\n        noBorder\n        tableKey=\"login-providers-v1\"\n        data={loginProviders}\n        columns={[\n          {\n            header: \"Provider\",\n            accessorKey: \"provider\",\n            cell: ({ row }) => <Text fw=\"bold\">{row.original.provider}</Text>,\n          },\n          {\n            header: \"Linked\",\n            cell: ({\n              row: {\n                original: { data },\n              },\n            }) => (\n              <Badge color={data ? \"green.8\" : \"red\"}>\n                {data ? \"Linked\" : \"Unlinked\"}\n              </Badge>\n            ),\n          },\n          {\n            header: \"Data\",\n            cell: ({\n              row: {\n                original: { data },\n              },\n            }) =>\n              data && (\n                <Text\n                  maw=\"20vw\"\n                  size=\"sm\"\n                  style={{\n                    overflow: \"hidden\",\n                    textOverflow: \"ellipsis\",\n                    textWrap: \"nowrap\",\n                  }}\n                >\n                  {data}\n                </Text>\n              ),\n          },\n          {\n            header: \"Link\",\n            cell: ({\n              row: {\n                original: { provider, data },\n              },\n            }) =>\n              data ? (\n                <ConfirmModal\n                  icon={<Unlink size=\"1rem\" />}\n                  onConfirm={() => unlink({ provider })}\n                  confirmText=\"Unlink\"\n                  title=\"Unlink Login\"\n                  confirmProps={{ variant: \"filled\", color: \"red\" }}\n                >\n                  Unlink\n                </ConfirmModal>\n              ) : provider === \"Local\" ? (\n                <>Set password above to enable.</>\n              ) : (\n                <Button\n                  onClick={() => linkWithExternalLogin(provider as any)}\n                  leftSection={<Plus size=\"1rem\" />}\n                >\n                  Link {provider}\n                </Button>\n              ),\n          },\n        ]}\n      />\n    </Section>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/auth/profile/passkey.cjs

@@ -0,0 +1,109 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var passkey_exports = {};
+__export(passkey_exports, {
+  EnrollPasskey: () => EnrollPasskey
+});
+module.exports = __toCommonJS(passkey_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_core = require("@mantine/core");
+var import_notifications = require("@mantine/notifications");
+var import_lucide_react = require("lucide-react");
+var import__ = require("../..");
+var MoghAuth = __toESM(require("mogh_auth_client"), 1);
+function EnrollPasskey({
+  userInvalidate,
+  passkeyEnrolled,
+  totpEnrolled
+}) {
+  const { mutateAsync: unenroll, isPending: unenrollPending } = (0, import__.useManageAuth)(
+    "UnenrollPasskey",
+    {
+      onSuccess: () => {
+        userInvalidate?.();
+        import_notifications.notifications.show({
+          message: "Unenrolled in passkey 2FA",
+          color: "green"
+        });
+      }
+    }
+  );
+  const { mutate: confirmEnrollment } = (0, import__.useManageAuth)(
+    "ConfirmPasskeyEnrollment",
+    {
+      onSuccess: () => {
+        userInvalidate?.();
+        import_notifications.notifications.show({
+          message: "Enrolled in passkey authentication",
+          color: "green"
+        });
+      }
+    }
+  );
+  const { mutate: beginEnrollment } = (0, import__.useManageAuth)("BeginPasskeyEnrollment", {
+    onSuccess: (challenge) => {
+      navigator.credentials.create(MoghAuth.Passkey.prepareCreationChallengeResponse(challenge)).then((credential) => confirmEnrollment({ credential })).catch((e) => {
+        console.error(e);
+        import_notifications.notifications.show({
+          title: "Failed to create passkey",
+          message: "See console for details",
+          color: "red"
+        });
+      });
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    !passkeyEnrolled && !totpEnrolled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_core.Button,
+      {
+        leftSection: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Fingerprint, { size: "1rem" }),
+        onClick: () => beginEnrollment({}),
+        w: 220,
+        children: "Enroll Passkey 2FA"
+      }
+    ),
+    passkeyEnrolled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import__.ConfirmModal,
+      {
+        confirmText: "Unenroll",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Trash, { size: "1rem" }),
+        loading: unenrollPending,
+        onConfirm: () => unenroll({}),
+        targetProps: { c: "bw", w: 220 },
+        confirmProps: { variant: "filled", color: "red" },
+        children: "Unenroll Passkey 2FA"
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  EnrollPasskey
+});
+//# sourceMappingURL=passkey.cjs.map

package/dist/auth/profile/passkey.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/auth/profile/passkey.tsx"],"sourcesContent":["import { Button } from \"@mantine/core\";\nimport { notifications } from \"@mantine/notifications\";\nimport { Fingerprint, Trash } from \"lucide-react\";\nimport { ConfirmModal, useManageAuth } from \"../..\";\nimport * as MoghAuth from \"mogh_auth_client\";\n\nexport function EnrollPasskey({\n  userInvalidate,\n  passkeyEnrolled,\n  totpEnrolled,\n}: {\n  userInvalidate?: () => void;\n  passkeyEnrolled?: boolean;\n  totpEnrolled?: boolean;\n}) {\n  const { mutateAsync: unenroll, isPending: unenrollPending } = useManageAuth(\n    \"UnenrollPasskey\",\n    {\n      onSuccess: () => {\n        userInvalidate?.();\n        notifications.show({\n          message: \"Unenrolled in passkey 2FA\",\n          color: \"green\",\n        });\n      },\n    },\n  );\n\n  const { mutate: confirmEnrollment } = useManageAuth(\n    \"ConfirmPasskeyEnrollment\",\n    {\n      onSuccess: () => {\n        userInvalidate?.();\n        notifications.show({\n          message: \"Enrolled in passkey authentication\",\n          color: \"green\",\n        });\n      },\n    },\n  );\n\n  const { mutate: beginEnrollment } = useManageAuth(\"BeginPasskeyEnrollment\", {\n    onSuccess: (challenge) => {\n      navigator.credentials\n        .create(MoghAuth.Passkey.prepareCreationChallengeResponse(challenge))\n        .then((credential) => confirmEnrollment({ credential }))\n        .catch((e) => {\n          console.error(e);\n          notifications.show({\n            title: \"Failed to create passkey\",\n            message: \"See console for details\",\n            color: \"red\",\n          });\n        });\n    },\n  });\n\n  return (\n    <>\n      {!passkeyEnrolled && !totpEnrolled && (\n        <Button\n          leftSection={<Fingerprint size=\"1rem\" />}\n          onClick={() => beginEnrollment({})}\n          w={220}\n        >\n          Enroll Passkey 2FA\n        </Button>\n      )}\n      {passkeyEnrolled && (\n        <ConfirmModal\n          confirmText=\"Unenroll\"\n          icon={<Trash size=\"1rem\" />}\n          loading={unenrollPending}\n          onConfirm={() => unenroll({})}\n          targetProps={{ c: \"bw\", w: 220 }}\n          confirmProps={{ variant: \"filled\", color: \"red\" }}\n        >\n          Unenroll Passkey 2FA\n        </ConfirmModal>\n      )}\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0DI;AA1DJ,kBAAuB;AACvB,2BAA8B;AAC9B,0BAAmC;AACnC,eAA4C;AAC5C,eAA0B;AAEnB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,EAAE,aAAa,UAAU,WAAW,gBAAgB,QAAI;AAAA,IAC5D;AAAA,IACA;AAAA,MACE,WAAW,MAAM;AACf,yBAAiB;AACjB,2CAAc,KAAK;AAAA,UACjB,SAAS;AAAA,UACT,OAAO;AAAA,QACT,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAEA,QAAM,EAAE,QAAQ,kBAAkB,QAAI;AAAA,IACpC;AAAA,IACA;AAAA,MACE,WAAW,MAAM;AACf,yBAAiB;AACjB,2CAAc,KAAK;AAAA,UACjB,SAAS;AAAA,UACT,OAAO;AAAA,QACT,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAEA,QAAM,EAAE,QAAQ,gBAAgB,QAAI,wBAAc,0BAA0B;AAAA,IAC1E,WAAW,CAAC,cAAc;AACxB,gBAAU,YACP,OAAO,SAAS,QAAQ,iCAAiC,SAAS,CAAC,EACnE,KAAK,CAAC,eAAe,kBAAkB,EAAE,WAAW,CAAC,CAAC,EACtD,MAAM,CAAC,MAAM;AACZ,gBAAQ,MAAM,CAAC;AACf,2CAAc,KAAK;AAAA,UACjB,OAAO;AAAA,UACP,SAAS;AAAA,UACT,OAAO;AAAA,QACT,CAAC;AAAA,MACH,CAAC;AAAA,IACL;AAAA,EACF,CAAC;AAED,SACE,4EACG;AAAA,KAAC,mBAAmB,CAAC,gBACpB;AAAA,MAAC;AAAA;AAAA,QACC,aAAa,4CAAC,mCAAY,MAAK,QAAO;AAAA,QACtC,SAAS,MAAM,gBAAgB,CAAC,CAAC;AAAA,QACjC,GAAG;AAAA,QACJ;AAAA;AAAA,IAED;AAAA,IAED,mBACC;AAAA,MAAC;AAAA;AAAA,QACC,aAAY;AAAA,QACZ,MAAM,4CAAC,6BAAM,MAAK,QAAO;AAAA,QACzB,SAAS;AAAA,QACT,WAAW,MAAM,SAAS,CAAC,CAAC;AAAA,QAC5B,aAAa,EAAE,GAAG,MAAM,GAAG,IAAI;AAAA,QAC/B,cAAc,EAAE,SAAS,UAAU,OAAO,MAAM;AAAA,QACjD;AAAA;AAAA,IAED;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/auth/profile/passkey.d.cts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function EnrollPasskey({ userInvalidate, passkeyEnrolled, totpEnrolled, }: {
+    userInvalidate?: () => void;
+    passkeyEnrolled?: boolean;
+    totpEnrolled?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+export { EnrollPasskey };

package/dist/auth/profile/passkey.d.ts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function EnrollPasskey({ userInvalidate, passkeyEnrolled, totpEnrolled, }: {
+    userInvalidate?: () => void;
+    passkeyEnrolled?: boolean;
+    totpEnrolled?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+export { EnrollPasskey };

package/dist/auth/profile/passkey.js

@@ -0,0 +1,75 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@mantine/core";
+import { notifications } from "@mantine/notifications";
+import { Fingerprint, Trash } from "lucide-react";
+import { ConfirmModal, useManageAuth } from "../..";
+import * as MoghAuth from "mogh_auth_client";
+function EnrollPasskey({
+  userInvalidate,
+  passkeyEnrolled,
+  totpEnrolled
+}) {
+  const { mutateAsync: unenroll, isPending: unenrollPending } = useManageAuth(
+    "UnenrollPasskey",
+    {
+      onSuccess: () => {
+        userInvalidate?.();
+        notifications.show({
+          message: "Unenrolled in passkey 2FA",
+          color: "green"
+        });
+      }
+    }
+  );
+  const { mutate: confirmEnrollment } = useManageAuth(
+    "ConfirmPasskeyEnrollment",
+    {
+      onSuccess: () => {
+        userInvalidate?.();
+        notifications.show({
+          message: "Enrolled in passkey authentication",
+          color: "green"
+        });
+      }
+    }
+  );
+  const { mutate: beginEnrollment } = useManageAuth("BeginPasskeyEnrollment", {
+    onSuccess: (challenge) => {
+      navigator.credentials.create(MoghAuth.Passkey.prepareCreationChallengeResponse(challenge)).then((credential) => confirmEnrollment({ credential })).catch((e) => {
+        console.error(e);
+        notifications.show({
+          title: "Failed to create passkey",
+          message: "See console for details",
+          color: "red"
+        });
+      });
+    }
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !passkeyEnrolled && !totpEnrolled && /* @__PURE__ */ jsx(
+      Button,
+      {
+        leftSection: /* @__PURE__ */ jsx(Fingerprint, { size: "1rem" }),
+        onClick: () => beginEnrollment({}),
+        w: 220,
+        children: "Enroll Passkey 2FA"
+      }
+    ),
+    passkeyEnrolled && /* @__PURE__ */ jsx(
+      ConfirmModal,
+      {
+        confirmText: "Unenroll",
+        icon: /* @__PURE__ */ jsx(Trash, { size: "1rem" }),
+        loading: unenrollPending,
+        onConfirm: () => unenroll({}),
+        targetProps: { c: "bw", w: 220 },
+        confirmProps: { variant: "filled", color: "red" },
+        children: "Unenroll Passkey 2FA"
+      }
+    )
+  ] });
+}
+export {
+  EnrollPasskey
+};
+//# sourceMappingURL=passkey.js.map

package/dist/auth/profile/passkey.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/auth/profile/passkey.tsx"],"sourcesContent":["import { Button } from \"@mantine/core\";\nimport { notifications } from \"@mantine/notifications\";\nimport { Fingerprint, Trash } from \"lucide-react\";\nimport { ConfirmModal, useManageAuth } from \"../..\";\nimport * as MoghAuth from \"mogh_auth_client\";\n\nexport function EnrollPasskey({\n  userInvalidate,\n  passkeyEnrolled,\n  totpEnrolled,\n}: {\n  userInvalidate?: () => void;\n  passkeyEnrolled?: boolean;\n  totpEnrolled?: boolean;\n}) {\n  const { mutateAsync: unenroll, isPending: unenrollPending } = useManageAuth(\n    \"UnenrollPasskey\",\n    {\n      onSuccess: () => {\n        userInvalidate?.();\n        notifications.show({\n          message: \"Unenrolled in passkey 2FA\",\n          color: \"green\",\n        });\n      },\n    },\n  );\n\n  const { mutate: confirmEnrollment } = useManageAuth(\n    \"ConfirmPasskeyEnrollment\",\n    {\n      onSuccess: () => {\n        userInvalidate?.();\n        notifications.show({\n          message: \"Enrolled in passkey authentication\",\n          color: \"green\",\n        });\n      },\n    },\n  );\n\n  const { mutate: beginEnrollment } = useManageAuth(\"BeginPasskeyEnrollment\", {\n    onSuccess: (challenge) => {\n      navigator.credentials\n        .create(MoghAuth.Passkey.prepareCreationChallengeResponse(challenge))\n        .then((credential) => confirmEnrollment({ credential }))\n        .catch((e) => {\n          console.error(e);\n          notifications.show({\n            title: \"Failed to create passkey\",\n            message: \"See console for details\",\n            color: \"red\",\n          });\n        });\n    },\n  });\n\n  return (\n    <>\n      {!passkeyEnrolled && !totpEnrolled && (\n        <Button\n          leftSection={<Fingerprint size=\"1rem\" />}\n          onClick={() => beginEnrollment({})}\n          w={220}\n        >\n          Enroll Passkey 2FA\n        </Button>\n      )}\n      {passkeyEnrolled && (\n        <ConfirmModal\n          confirmText=\"Unenroll\"\n          icon={<Trash size=\"1rem\" />}\n          loading={unenrollPending}\n          onConfirm={() => unenroll({})}\n          targetProps={{ c: \"bw\", w: 220 }}\n          confirmProps={{ variant: \"filled\", color: \"red\" }}\n        >\n          Unenroll Passkey 2FA\n        </ConfirmModal>\n      )}\n    </>\n  );\n}\n"],"mappings":"AA0DI,mBAGmB,KAHnB;AA1DJ,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAC9B,SAAS,aAAa,aAAa;AACnC,SAAS,cAAc,qBAAqB;AAC5C,YAAY,cAAc;AAEnB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,EAAE,aAAa,UAAU,WAAW,gBAAgB,IAAI;AAAA,IAC5D;AAAA,IACA;AAAA,MACE,WAAW,MAAM;AACf,yBAAiB;AACjB,sBAAc,KAAK;AAAA,UACjB,SAAS;AAAA,UACT,OAAO;AAAA,QACT,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAEA,QAAM,EAAE,QAAQ,kBAAkB,IAAI;AAAA,IACpC;AAAA,IACA;AAAA,MACE,WAAW,MAAM;AACf,yBAAiB;AACjB,sBAAc,KAAK;AAAA,UACjB,SAAS;AAAA,UACT,OAAO;AAAA,QACT,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAEA,QAAM,EAAE,QAAQ,gBAAgB,IAAI,cAAc,0BAA0B;AAAA,IAC1E,WAAW,CAAC,cAAc;AACxB,gBAAU,YACP,OAAO,SAAS,QAAQ,iCAAiC,SAAS,CAAC,EACnE,KAAK,CAAC,eAAe,kBAAkB,EAAE,WAAW,CAAC,CAAC,EACtD,MAAM,CAAC,MAAM;AACZ,gBAAQ,MAAM,CAAC;AACf,sBAAc,KAAK;AAAA,UACjB,OAAO;AAAA,UACP,SAAS;AAAA,UACT,OAAO;AAAA,QACT,CAAC;AAAA,MACH,CAAC;AAAA,IACL;AAAA,EACF,CAAC;AAED,SACE,iCACG;AAAA,KAAC,mBAAmB,CAAC,gBACpB;AAAA,MAAC;AAAA;AAAA,QACC,aAAa,oBAAC,eAAY,MAAK,QAAO;AAAA,QACtC,SAAS,MAAM,gBAAgB,CAAC,CAAC;AAAA,QACjC,GAAG;AAAA,QACJ;AAAA;AAAA,IAED;AAAA,IAED,mBACC;AAAA,MAAC;AAAA;AAAA,QACC,aAAY;AAAA,QACZ,MAAM,oBAAC,SAAM,MAAK,QAAO;AAAA,QACzB,SAAS;AAAA,QACT,WAAW,MAAM,SAAS,CAAC,CAAC;AAAA,QAC5B,aAAa,EAAE,GAAG,MAAM,GAAG,IAAI;AAAA,QAC/B,cAAc,EAAE,SAAS,UAAU,OAAO,MAAM;AAAA,QACjD;AAAA;AAAA,IAED;AAAA,KAEJ;AAEJ;","names":[]}