@lukoweb/apitogo-module-user-panel 0.2.22 → 0.2.24

package/src/pages/SettingsPage.tsx

@@ -1,279 +1,279 @@
-import type { ResolvedProfileContent } from "@lukoweb/apitogo";
-import { Head, Link } from "@lukoweb/apitogo/components";
-import { useAuth } from "@lukoweb/apitogo/hooks";
-import { Button } from "@lukoweb/apitogo/ui/Button.js";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@lukoweb/apitogo/ui/Card.js";
-import { Input } from "@lukoweb/apitogo/ui/Input.js";
-import { Label } from "@lukoweb/apitogo/ui/Label.js";
-import { useEffect, useState } from "react";
-import {
-  useAccountMe,
-  useChangeAccountPassword,
-  useDeleteAccount,
-  useUpdateAccountProfile,
-} from "../hooks/useAccountSettings.js";
-
-export type SettingsPageProps = {
-  content: ResolvedProfileContent;
-};
-
-export const SettingsPage = ({ content }: SettingsPageProps) => {
-  const auth = useAuth();
-  const { data: account, isLoading } = useAccountMe();
-  const updateProfile = useUpdateAccountProfile();
-  const changePassword = useChangeAccountPassword();
-  const deleteAccountMutation = useDeleteAccount();
-
-  const [displayName, setDisplayName] = useState("");
-  const [currentPassword, setCurrentPassword] = useState("");
-  const [newPassword, setNewPassword] = useState("");
-  const [deletePassword, setDeletePassword] = useState("");
-  const [deleteConfirm, setDeleteConfirm] = useState("");
-  const [profileMessage, setProfileMessage] = useState<string | null>(null);
-  const [passwordMessage, setPasswordMessage] = useState<string | null>(null);
-  const [deleteMessage, setDeleteMessage] = useState<string | null>(null);
-
-  const title = content.title ?? "Settings";
-  const hasNativePassword = account?.hasNativePassword === true;
-  const email = account?.email ?? auth.profile?.email ?? "";
-
-  useEffect(() => {
-    if (account?.displayName !== undefined) {
-      setDisplayName(account.displayName ?? "");
-    } else if (auth.profile?.name) {
-      setDisplayName(auth.profile.name);
-    }
-  }, [account?.displayName, auth.profile?.name]);
-
-  if (!auth.isAuthenticated) {
-    return (
-      <div className="mx-auto max-w-[760px] px-8 py-7">
-        <Head>
-          <title>{title}</title>
-        </Head>
-        <h1 className="mb-2 text-[1.6rem] font-bold tracking-[-0.01em]">
-          {title}
-        </h1>
-        <p className="text-muted-foreground">
-          {auth.isAuthEnabled
-            ? "Sign in to manage your account settings."
-            : "Configure authentication to enable account settings."}
-        </p>
-        {auth.isAuthEnabled ? (
-          <Button asChild className="mt-4">
-            <Link to="/signin">Sign in</Link>
-          </Button>
-        ) : null}
-      </div>
-    );
-  }
-
-  return (
-    <div className="mx-auto max-w-[760px] px-8 py-7">
-      <Head>
-        <title>{title}</title>
-      </Head>
-
-      <h1 className="mb-6 text-[1.6rem] font-bold tracking-[-0.01em]">
-        {title}
-      </h1>
-
-      <div className="grid gap-5">
-        <Card>
-          <CardHeader>
-            <CardTitle>Profile</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="grid gap-4 sm:grid-cols-2">
-              <div className="space-y-2">
-                <Label htmlFor="settings-display-name">Full name</Label>
-                <Input
-                  id="settings-display-name"
-                  value={displayName}
-                  onChange={(event) => setDisplayName(event.target.value)}
-                  disabled={isLoading || updateProfile.isPending}
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="settings-email">Email</Label>
-                <Input
-                  id="settings-email"
-                  type="email"
-                  value={email}
-                  readOnly
-                  disabled
-                />
-              </div>
-            </div>
-            {profileMessage ? (
-              <p className="text-sm text-muted-foreground">{profileMessage}</p>
-            ) : null}
-            <Button
-              size="sm"
-              disabled={isLoading || updateProfile.isPending}
-              onClick={() => {
-                setProfileMessage(null);
-                updateProfile.mutate(displayName, {
-                  onSuccess: () => setProfileMessage("Profile saved."),
-                  onError: (error) =>
-                    setProfileMessage(
-                      error instanceof Error
-                        ? error.message
-                        : "Unable to save profile.",
-                    ),
-                });
-              }}
-            >
-              Save changes
-            </Button>
-          </CardContent>
-        </Card>
-
-        {hasNativePassword ? (
-          <Card>
-            <CardHeader>
-              <CardTitle>Password</CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="grid gap-4 sm:grid-cols-2">
-                <div className="space-y-2">
-                  <Label htmlFor="settings-current-password">
-                    Current password
-                  </Label>
-                  <Input
-                    id="settings-current-password"
-                    type="password"
-                    value={currentPassword}
-                    onChange={(event) => setCurrentPassword(event.target.value)}
-                    autoComplete="current-password"
-                  />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="settings-new-password">New password</Label>
-                  <Input
-                    id="settings-new-password"
-                    type="password"
-                    value={newPassword}
-                    onChange={(event) => setNewPassword(event.target.value)}
-                    autoComplete="new-password"
-                  />
-                </div>
-              </div>
-              {passwordMessage ? (
-                <p className="text-sm text-muted-foreground">
-                  {passwordMessage}
-                </p>
-              ) : null}
-              <Button
-                variant="outline"
-                size="sm"
-                disabled={changePassword.isPending}
-                onClick={() => {
-                  setPasswordMessage(null);
-                  changePassword.mutate(
-                    { currentPassword, newPassword },
-                    {
-                      onSuccess: () => {
-                        setCurrentPassword("");
-                        setNewPassword("");
-                        setPasswordMessage("Password updated.");
-                      },
-                      onError: (error) =>
-                        setPasswordMessage(
-                          error instanceof Error
-                            ? error.message
-                            : "Unable to update password.",
-                        ),
-                    },
-                  );
-                }}
-              >
-                Update password
-              </Button>
-            </CardContent>
-          </Card>
-        ) : null}
-
-        <Card className="border-destructive/40">
-          <CardHeader>
-            <CardTitle className="text-destructive">Danger zone</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <p className="text-sm text-muted-foreground">
-              Deleting your account removes all keys, usage history, and billing
-              data. This cannot be undone.
-            </p>
-            {hasNativePassword ? (
-              <div className="max-w-sm space-y-2">
-                <Label htmlFor="settings-delete-password">
-                  Confirm with password
-                </Label>
-                <Input
-                  id="settings-delete-password"
-                  type="password"
-                  value={deletePassword}
-                  onChange={(event) => setDeletePassword(event.target.value)}
-                  autoComplete="current-password"
-                />
-              </div>
-            ) : (
-              <div className="max-w-sm space-y-2">
-                <Label htmlFor="settings-delete-confirm">
-                  Type DELETE to confirm
-                </Label>
-                <Input
-                  id="settings-delete-confirm"
-                  value={deleteConfirm}
-                  onChange={(event) => setDeleteConfirm(event.target.value)}
-                  autoComplete="off"
-                />
-              </div>
-            )}
-            {deleteMessage ? (
-              <p className="text-sm text-muted-foreground">{deleteMessage}</p>
-            ) : null}
-            <Button
-              variant="outline"
-              size="sm"
-              className="border-destructive text-destructive hover:bg-destructive/10"
-              disabled={
-                deleteAccountMutation.isPending ||
-                (hasNativePassword
-                  ? !deletePassword
-                  : deleteConfirm !== "DELETE")
-              }
-              onClick={() => {
-                if (
-                  !window.confirm(
-                    "Delete your account permanently? This cannot be undone.",
-                  )
-                ) {
-                  return;
-                }
-                setDeleteMessage(null);
-                deleteAccountMutation.mutate(
-                  hasNativePassword ? deletePassword : undefined,
-                  {
-                    onError: (error) =>
-                      setDeleteMessage(
-                        error instanceof Error
-                          ? error.message
-                          : "Unable to delete account.",
-                      ),
-                  },
-                );
-              }}
-            >
-              Delete account
-            </Button>
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  );
-};
+import type { ResolvedProfileContent } from "@lukoweb/apitogo";
+import { Head, Link } from "@lukoweb/apitogo/components";
+import { useAuth } from "@lukoweb/apitogo/hooks";
+import { Button } from "@lukoweb/apitogo/ui/Button.js";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@lukoweb/apitogo/ui/Card.js";
+import { Input } from "@lukoweb/apitogo/ui/Input.js";
+import { Label } from "@lukoweb/apitogo/ui/Label.js";
+import { useEffect, useState } from "react";
+import {
+  useAccountMe,
+  useChangeAccountPassword,
+  useDeleteAccount,
+  useUpdateAccountProfile,
+} from "../hooks/useAccountSettings.js";
+
+export type SettingsPageProps = {
+  content: ResolvedProfileContent;
+};
+
+export const SettingsPage = ({ content }: SettingsPageProps) => {
+  const auth = useAuth();
+  const { data: account, isLoading } = useAccountMe();
+  const updateProfile = useUpdateAccountProfile();
+  const changePassword = useChangeAccountPassword();
+  const deleteAccountMutation = useDeleteAccount();
+
+  const [displayName, setDisplayName] = useState("");
+  const [currentPassword, setCurrentPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [deletePassword, setDeletePassword] = useState("");
+  const [deleteConfirm, setDeleteConfirm] = useState("");
+  const [profileMessage, setProfileMessage] = useState<string | null>(null);
+  const [passwordMessage, setPasswordMessage] = useState<string | null>(null);
+  const [deleteMessage, setDeleteMessage] = useState<string | null>(null);
+
+  const title = content.title ?? "Settings";
+  const hasNativePassword = account?.hasNativePassword === true;
+  const email = account?.email ?? auth.profile?.email ?? "";
+
+  useEffect(() => {
+    if (account?.displayName !== undefined) {
+      setDisplayName(account.displayName ?? "");
+    } else if (auth.profile?.name) {
+      setDisplayName(auth.profile.name);
+    }
+  }, [account?.displayName, auth.profile?.name]);
+
+  if (!auth.isAuthenticated) {
+    return (
+      <div className="mx-auto max-w-[760px] px-8 py-7">
+        <Head>
+          <title>{title}</title>
+        </Head>
+        <h1 className="mb-2 text-[1.6rem] font-bold tracking-[-0.01em]">
+          {title}
+        </h1>
+        <p className="text-muted-foreground">
+          {auth.isAuthEnabled
+            ? "Sign in to manage your account settings."
+            : "Configure authentication to enable account settings."}
+        </p>
+        {auth.isAuthEnabled ? (
+          <Button asChild className="mt-4">
+            <Link to="/signin">Sign in</Link>
+          </Button>
+        ) : null}
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-[760px] px-8 py-7">
+      <Head>
+        <title>{title}</title>
+      </Head>
+
+      <h1 className="mb-6 text-[1.6rem] font-bold tracking-[-0.01em]">
+        {title}
+      </h1>
+
+      <div className="grid gap-5">
+        <Card>
+          <CardHeader>
+            <CardTitle>Profile</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor="settings-display-name">Full name</Label>
+                <Input
+                  id="settings-display-name"
+                  value={displayName}
+                  onChange={(event) => setDisplayName(event.target.value)}
+                  disabled={isLoading || updateProfile.isPending}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="settings-email">Email</Label>
+                <Input
+                  id="settings-email"
+                  type="email"
+                  value={email}
+                  readOnly
+                  disabled
+                />
+              </div>
+            </div>
+            {profileMessage ? (
+              <p className="text-sm text-muted-foreground">{profileMessage}</p>
+            ) : null}
+            <Button
+              size="sm"
+              disabled={isLoading || updateProfile.isPending}
+              onClick={() => {
+                setProfileMessage(null);
+                updateProfile.mutate(displayName, {
+                  onSuccess: () => setProfileMessage("Profile saved."),
+                  onError: (error) =>
+                    setProfileMessage(
+                      error instanceof Error
+                        ? error.message
+                        : "Unable to save profile.",
+                    ),
+                });
+              }}
+            >
+              Save changes
+            </Button>
+          </CardContent>
+        </Card>
+
+        {hasNativePassword ? (
+          <Card>
+            <CardHeader>
+              <CardTitle>Password</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="grid gap-4 sm:grid-cols-2">
+                <div className="space-y-2">
+                  <Label htmlFor="settings-current-password">
+                    Current password
+                  </Label>
+                  <Input
+                    id="settings-current-password"
+                    type="password"
+                    value={currentPassword}
+                    onChange={(event) => setCurrentPassword(event.target.value)}
+                    autoComplete="current-password"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="settings-new-password">New password</Label>
+                  <Input
+                    id="settings-new-password"
+                    type="password"
+                    value={newPassword}
+                    onChange={(event) => setNewPassword(event.target.value)}
+                    autoComplete="new-password"
+                  />
+                </div>
+              </div>
+              {passwordMessage ? (
+                <p className="text-sm text-muted-foreground">
+                  {passwordMessage}
+                </p>
+              ) : null}
+              <Button
+                variant="outline"
+                size="sm"
+                disabled={changePassword.isPending}
+                onClick={() => {
+                  setPasswordMessage(null);
+                  changePassword.mutate(
+                    { currentPassword, newPassword },
+                    {
+                      onSuccess: () => {
+                        setCurrentPassword("");
+                        setNewPassword("");
+                        setPasswordMessage("Password updated.");
+                      },
+                      onError: (error) =>
+                        setPasswordMessage(
+                          error instanceof Error
+                            ? error.message
+                            : "Unable to update password.",
+                        ),
+                    },
+                  );
+                }}
+              >
+                Update password
+              </Button>
+            </CardContent>
+          </Card>
+        ) : null}
+
+        <Card className="border-destructive/40">
+          <CardHeader>
+            <CardTitle className="text-destructive">Danger zone</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <p className="text-sm text-muted-foreground">
+              Deleting your account removes all keys, usage history, and billing
+              data. This cannot be undone.
+            </p>
+            {hasNativePassword ? (
+              <div className="max-w-sm space-y-2">
+                <Label htmlFor="settings-delete-password">
+                  Confirm with password
+                </Label>
+                <Input
+                  id="settings-delete-password"
+                  type="password"
+                  value={deletePassword}
+                  onChange={(event) => setDeletePassword(event.target.value)}
+                  autoComplete="current-password"
+                />
+              </div>
+            ) : (
+              <div className="max-w-sm space-y-2">
+                <Label htmlFor="settings-delete-confirm">
+                  Type DELETE to confirm
+                </Label>
+                <Input
+                  id="settings-delete-confirm"
+                  value={deleteConfirm}
+                  onChange={(event) => setDeleteConfirm(event.target.value)}
+                  autoComplete="off"
+                />
+              </div>
+            )}
+            {deleteMessage ? (
+              <p className="text-sm text-muted-foreground">{deleteMessage}</p>
+            ) : null}
+            <Button
+              variant="outline"
+              size="sm"
+              className="border-destructive text-destructive hover:bg-destructive/10"
+              disabled={
+                deleteAccountMutation.isPending ||
+                (hasNativePassword
+                  ? !deletePassword
+                  : deleteConfirm !== "DELETE")
+              }
+              onClick={() => {
+                if (
+                  !window.confirm(
+                    "Delete your account permanently? This cannot be undone.",
+                  )
+                ) {
+                  return;
+                }
+                setDeleteMessage(null);
+                deleteAccountMutation.mutate(
+                  hasNativePassword ? deletePassword : undefined,
+                  {
+                    onError: (error) =>
+                      setDeleteMessage(
+                        error instanceof Error
+                          ? error.message
+                          : "Unable to delete account.",
+                      ),
+                  },
+                );
+              }}
+            >
+              Delete account
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+};

package/src/renderModuleElement.tsx

@@ -1,18 +1,18 @@
-import type { ComponentType, ReactNode } from "react";
-import { isValidElement } from "react";
-
-export const renderModuleElement = (
-  component: ComponentType | ReactNode | undefined,
-  fallback: ReactNode,
-) => {
-  if (!component) {
-    return fallback;
-  }
-
-  if (isValidElement(component)) {
-    return component;
-  }
-
-  const Component = component as ComponentType;
-  return <Component />;
-};
+import type { ComponentType, ReactNode } from "react";
+import { isValidElement } from "react";
+
+export const renderModuleElement = (
+  component: ComponentType | ReactNode | undefined,
+  fallback: ReactNode,
+) => {
+  if (!component) {
+    return fallback;
+  }
+
+  if (isValidElement(component)) {
+    return component;
+  }
+
+  const Component = component as ComponentType;
+  return <Component />;
+};