@lukoweb/apitogo-module-user-panel 0.1.88 → 0.1.90

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukoweb/apitogo-module-user-panel",
-  "version": "0.1.88",
+  "version": "0.1.90",
   "type": "module",
   "exports": {
     ".": "./src/index.tsx"
@@ -14,7 +14,7 @@
   "devDependencies": {
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
-    "@lukoweb/apitogo": "0.1.88",
+    "@lukoweb/apitogo": "0.1.90",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "react-router": "7.13.1",

package/src/account-paths.ts

@@ -0,0 +1,42 @@
+/** Default account area paths (match dev-portal billing plugin). */
+export const DEFAULT_ACCOUNT_BASE_PATH = "/account";
+
+export type AccountNavPaths = {
+  overview: string;
+  apiKeys: string;
+  usage: string;
+  billing: string;
+  settings: string;
+  docs: string;
+};
+
+export function buildAccountNavPaths(
+  basePath = DEFAULT_ACCOUNT_BASE_PATH,
+  docsPath = "/introduction",
+): AccountNavPaths {
+  const base = basePath.replace(/\/+$/, "") || DEFAULT_ACCOUNT_BASE_PATH;
+
+  return {
+    overview: `${base}/dashboard`,
+    apiKeys: `${base}/credentials`,
+    usage: `${base}/usage`,
+    billing: `${base}/subscriptions`,
+    settings: `${base}/profile`,
+    docs: docsPath,
+  };
+}
+
+export function toAccountChildPath(basePath: string, fullPath: string): string {
+  const base = basePath.replace(/\/+$/, "");
+  const normalized = fullPath.replace(/\/+$/, "") || fullPath;
+
+  if (normalized === base) {
+    return "";
+  }
+
+  if (normalized.startsWith(`${base}/`)) {
+    return normalized.slice(base.length + 1);
+  }
+
+  return normalized.replace(/^\/+/, "");
+}

package/src/components/AccountLayout.tsx

@@ -0,0 +1,119 @@
+import { cn } from "@lukoweb/apitogo";
+import { useAuth } from "@lukoweb/apitogo/hooks";
+import {
+  BookOpenIcon,
+  CreditCardIcon,
+  KeyRoundIcon,
+  LayoutGridIcon,
+  LogOutIcon,
+  SettingsIcon,
+  BarChart3Icon,
+} from "@lukoweb/apitogo/icons";
+import { Link, NavLink, Outlet } from "@lukoweb/apitogo/router";
+import type { ReactNode } from "react";
+import {
+  buildAccountNavPaths,
+  DEFAULT_ACCOUNT_BASE_PATH,
+} from "../account-paths.js";
+
+type AccountNavItem = {
+  label: string;
+  to: string;
+  icon: typeof LayoutGridIcon;
+};
+
+export type AccountLayoutProps = {
+  basePath?: string;
+  docsPath?: string;
+  children?: ReactNode;
+  /** When true, show API keys / Usage / Billing (billing plugin routes). */
+  includeBillingNav?: boolean;
+};
+
+export function AccountLayout({
+  basePath = DEFAULT_ACCOUNT_BASE_PATH,
+  docsPath = "/introduction",
+  children,
+  includeBillingNav = false,
+}: AccountLayoutProps) {
+  const auth = useAuth();
+  const paths = buildAccountNavPaths(basePath, docsPath);
+
+  const navItems: AccountNavItem[] = [
+    { label: "Overview", to: paths.overview, icon: LayoutGridIcon },
+    ...(includeBillingNav
+      ? [
+          { label: "API keys", to: paths.apiKeys, icon: KeyRoundIcon },
+          { label: "Usage", to: paths.usage, icon: BarChart3Icon },
+          { label: "Billing", to: paths.billing, icon: CreditCardIcon },
+        ]
+      : []),
+    { label: "Settings", to: paths.settings, icon: SettingsIcon },
+  ];
+
+  const renderNavLink = (item: AccountNavItem, compact = false) => (
+    <NavLink
+      key={item.to}
+      to={item.to}
+      end={item.to === paths.overview}
+      className={({ isActive }) =>
+        cn(
+          compact
+            ? "inline-flex shrink-0 items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors"
+            : "flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors",
+          isActive
+            ? "bg-primary/14 font-semibold text-primary"
+            : "text-muted-foreground hover:bg-muted/80 hover:text-foreground",
+        )
+      }
+    >
+      <item.icon
+        size={compact ? 18 : 20}
+        strokeWidth={1.8}
+        className="shrink-0 opacity-80"
+      />
+      {item.label}
+    </NavLink>
+  );
+
+  return (
+    <div className="flex min-h-[calc(100dvh-var(--header-height))] flex-col bg-muted md:flex-row">
+      <nav
+        aria-label="Account"
+        className="flex gap-1 overflow-x-auto border-b border-border bg-card px-3 py-2 md:hidden"
+      >
+        {navItems.map((item) => renderNavLink(item, true))}
+      </nav>
+
+      <aside className="hidden w-[236px] shrink-0 flex-col justify-between border-r border-border bg-card px-3 py-4 md:flex">
+        <nav className="flex flex-col gap-1">
+          {navItems.map((item) => renderNavLink(item))}
+        </nav>
+
+        <div className="flex flex-col gap-1 border-t border-border pt-3">
+          <Link
+            to={paths.docs}
+            className="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted/80 hover:text-foreground"
+          >
+            <BookOpenIcon size={20} strokeWidth={1.8} className="shrink-0" />
+            Documentation
+          </Link>
+          {auth.isAuthEnabled ? (
+            <button
+              type="button"
+              className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left text-sm font-medium text-muted-foreground transition-colors hover:bg-muted/80 hover:text-foreground"
+              onClick={() => {
+                void auth.logout();
+              }}
+            >
+              <LogOutIcon size={20} strokeWidth={1.8} className="shrink-0" />
+              Log out
+            </button>
+          ) : null}
+        </div>
+      </aside>
+
+      <main className="min-w-0 flex-1">{children ?? <Outlet />}</main>
+    </div>
+  );
+}

package/src/hooks/useAccountSettings.ts

@@ -0,0 +1,93 @@
+import { useAuth, useZudoku } from "@lukoweb/apitogo/hooks";
+import {
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from "@lukoweb/apitogo/react-query";
+import {
+  changeAccountPassword,
+  deleteAccount,
+  fetchAccountMe,
+  resolveDevPortalApiBaseUrl,
+  updateAccountProfile,
+} from "../utils/dev-portal-api.js";
+
+export function useAccountMe() {
+  const auth = useAuth();
+  const apiBaseUrl = resolveDevPortalApiBaseUrl(
+    auth.providerData as { type: "dev-portal"; apiBaseUrl: string } | null,
+  );
+
+  return useQuery({
+    queryKey: ["account-me", apiBaseUrl],
+    enabled: auth.isAuthenticated && Boolean(apiBaseUrl),
+    queryFn: () => fetchAccountMe(apiBaseUrl!),
+  });
+}
+
+export function useUpdateAccountProfile() {
+  const auth = useAuth();
+  const { authentication } = useZudoku();
+  const queryClient = useQueryClient();
+  const apiBaseUrl = resolveDevPortalApiBaseUrl(
+    auth.providerData as { type: "dev-portal"; apiBaseUrl: string } | null,
+  );
+
+  return useMutation({
+    mutationFn: (displayName: string) => {
+      if (!apiBaseUrl) {
+        throw new Error("Dev portal API is not configured.");
+      }
+
+      return updateAccountProfile(apiBaseUrl, displayName);
+    },
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ["account-me"] });
+      await queryClient.invalidateQueries({ queryKey: ["dev-portal-me"] });
+      await authentication?.refreshUserProfile?.();
+    },
+  });
+}
+
+export function useChangeAccountPassword() {
+  const auth = useAuth();
+  const apiBaseUrl = resolveDevPortalApiBaseUrl(
+    auth.providerData as { type: "dev-portal"; apiBaseUrl: string } | null,
+  );
+
+  return useMutation({
+    mutationFn: ({
+      currentPassword,
+      newPassword,
+    }: {
+      currentPassword: string;
+      newPassword: string;
+    }) => {
+      if (!apiBaseUrl) {
+        throw new Error("Dev portal API is not configured.");
+      }
+
+      return changeAccountPassword(apiBaseUrl, currentPassword, newPassword);
+    },
+  });
+}
+
+export function useDeleteAccount() {
+  const auth = useAuth();
+  const apiBaseUrl = resolveDevPortalApiBaseUrl(
+    auth.providerData as { type: "dev-portal"; apiBaseUrl: string } | null,
+  );
+
+  return useMutation({
+    mutationFn: (password?: string) => {
+      if (!apiBaseUrl) {
+        throw new Error("Dev portal API is not configured.");
+      }
+
+      return deleteAccount(apiBaseUrl, password);
+    },
+    onSuccess: async () => {
+      await auth.logout();
+    },
+  });
+}

package/src/index.tsx

@@ -1,5 +1,14 @@
 export { userPanelModule } from "./userPanelModule.js";
 export type { UserPanelModuleOptions } from "./userPanelModule.js";
+export { AccountLayout } from "./components/AccountLayout.js";
+export type { AccountLayoutProps } from "./components/AccountLayout.js";
+export {
+  buildAccountNavPaths,
+  DEFAULT_ACCOUNT_BASE_PATH,
+  toAccountChildPath,
+} from "./account-paths.js";
+export type { AccountNavPaths } from "./account-paths.js";
 export { DefaultDashboardPage } from "./pages/DefaultDashboardPage.js";
+export { SettingsPage } from "./pages/SettingsPage.js";
 export { DefaultProfilePage } from "./pages/DefaultProfilePage.js";
 export { DefaultPlansPage } from "./pages/DefaultPlansPage.js";

package/src/pages/DefaultDashboardPage.tsx

@@ -1,84 +1,123 @@
 import type { ResolvedDashboardContent } from "@lukoweb/apitogo";
 import { Head, Link } from "@lukoweb/apitogo/components";
 import { useAuth } from "@lukoweb/apitogo/hooks";
+import { ArrowRightIcon, LayoutDashboardIcon } from "@lukoweb/apitogo/icons";
 import { Button } from "@lukoweb/apitogo/ui/Button.js";
-import {
-  ArrowRightIcon,
-  BookOpenIcon,
-  CodeIcon,
-  LayoutDashboardIcon,
-} from "lucide-react";
 
 export type DefaultDashboardPageProps = {
   content: ResolvedDashboardContent;
 };
 
+function StatCard({
+  label,
+  value,
+  sub,
+}: {
+  label: string;
+  value: string;
+  sub: string;
+}) {
+  return (
+    <div className="rounded-xl border border-border bg-card p-5">
+      <div className="text-xs font-medium uppercase tracking-[0.05em] text-muted-foreground">
+        {label}
+      </div>
+      <div className="mt-1.5 text-[1.7rem] font-bold tracking-[-0.02em] text-foreground">
+        {value}
+      </div>
+      <div className="mt-1 text-xs text-muted-foreground">{sub}</div>
+    </div>
+  );
+}
+
 export const DefaultDashboardPage = ({
   content,
 }: DefaultDashboardPageProps) => {
   const auth = useAuth();
-  const title = content.title ?? "Dashboard";
-  const subtitle = content.subtitle;
+  const title = content.title ?? "Overview";
   const description =
     content.description ??
     "Overview of your account activity, documentation shortcuts, and next steps.";
-  const quickLinks = content.quickLinks ?? [];
 
   const greeting = auth.isAuthenticated
     ? auth.profile?.name || auth.profile?.email
     : undefined;
 
   return (
-    <div className="mx-auto max-w-screen-xl px-4 pb-16 pt-(--padding-content-top) lg:px-8">
+    <div className="px-8 py-7">
       <Head>
         <title>{title}</title>
       </Head>
 
-      <div className="mb-8 flex items-start gap-4">
+      <div className="mb-6 flex items-start gap-4">
         <div className="flex size-12 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary">
           <LayoutDashboardIcon size={24} />
         </div>
         <div className="space-y-1">
-          {subtitle ? (
-            <p className="text-sm font-medium tracking-wide text-muted-foreground uppercase">
-              {subtitle}
-            </p>
-          ) : null}
-          <h1 className="text-3xl font-semibold tracking-tight">
+          <h1 className="text-[1.6rem] font-bold tracking-[-0.01em]">
             {greeting ? `Welcome back, ${greeting}` : title}
           </h1>
           <p className="max-w-2xl text-muted-foreground">{description}</p>
         </div>
       </div>
 
-      {quickLinks.length > 0 ? (
-        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-          {quickLinks.map((link) => (
-            <article
-              key={link.href}
-              className="rounded-xl border bg-card/60 p-6 shadow-xs"
-            >
-              <div className="mb-4 flex size-10 items-center justify-center rounded-lg bg-primary/10 text-primary">
-                {link.href.includes("api") ? (
-                  <CodeIcon size={20} />
-                ) : (
-                  <BookOpenIcon size={20} />
-                )}
-              </div>
-              <h2 className="text-lg font-medium">{link.label}</h2>
-              <Button asChild variant="link" className="mt-2 h-auto p-0">
-                <Link to={link.href}>
-                  Open
-                  <ArrowRightIcon className="ms-1" size={16} />
+      <div className="mb-6 grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
+        <StatCard
+          label="Requests (30d)"
+          value="—"
+          sub="Connect billing for usage metrics"
+        />
+        <StatCard label="Active keys" value="—" sub="Enable API credentials" />
+        <StatCard label="Plan" value="—" sub="Add plans in your manifest" />
+        <StatCard label="Uptime" value="—" sub="Telemetry coming soon" />
+      </div>
+
+      <div className="mb-5 grid grid-cols-1 gap-5 lg:grid-cols-2">
+        <div className="rounded-xl border border-border bg-card p-6">
+          <h2 className="mb-4 text-lg font-semibold">Requests, last 14 days</h2>
+          <div className="flex min-h-[150px] items-center justify-center rounded-lg border border-dashed border-border bg-muted/30 px-4 text-center text-sm text-muted-foreground">
+            Usage charts appear when the dev-portal billing plugin is
+            configured.
+          </div>
+        </div>
+        <div className="rounded-xl border border-border bg-card p-6">
+          <h2 className="mb-4 text-lg font-semibold">Quick links</h2>
+          <div className="flex flex-col gap-3">
+            {(content.quickLinks ?? []).length > 0 ? (
+              content.quickLinks?.map((link) => (
+                <Button
+                  key={link.href}
+                  asChild
+                  variant="outline"
+                  className="justify-between"
+                >
+                  <Link to={link.href}>
+                    {link.label}
+                    <ArrowRightIcon size={16} />
+                  </Link>
+                </Button>
+              ))
+            ) : (
+              <Button asChild variant="outline" className="justify-between">
+                <Link to="/introduction">
+                  Documentation
+                  <ArrowRightIcon size={16} />
                 </Link>
               </Button>
-            </article>
-          ))}
+            )}
+          </div>
         </div>
-      ) : null}
+      </div>
+
+      <div className="rounded-xl border border-border bg-card p-6">
+        <h2 className="mb-4 text-lg font-semibold">Recent requests</h2>
+        <p className="text-sm text-muted-foreground">
+          Request logs will appear when usage analytics is available.
+        </p>
+      </div>
 
       {!auth.isAuthenticated && auth.isAuthEnabled ? (
-        <p className="mt-8 text-sm text-muted-foreground">
+        <p className="mt-6 text-sm text-muted-foreground">
           Sign in to see personalized account information on your dashboard.
         </p>
       ) : null}

package/src/pages/SettingsPage.tsx

@@ -0,0 +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>
+  );
+};

package/src/userPanelModule.tsx

@@ -4,16 +4,22 @@ import type {
   ResolvedUserManagementModule,
   ResolvedUserPanelModule,
 } from "@lukoweb/apitogo";
+import {
+  CreditCardIcon,
+  LayoutDashboardIcon,
+  SettingsIcon,
+} from "@lukoweb/apitogo/icons";
 import type {
   ProfileMenuPlugin,
   ApitogoPlugin,
 } from "@lukoweb/apitogo/plugins";
-import { CreditCardIcon, LayoutDashboardIcon, UserIcon } from "lucide-react";
 import type { ComponentType, ReactNode } from "react";
 import type { RouteObject } from "react-router";
+import { toAccountChildPath } from "./account-paths.js";
+import { AccountLayout } from "./components/AccountLayout.js";
 import { DefaultDashboardPage } from "./pages/DefaultDashboardPage.js";
 import { DefaultPlansPage } from "./pages/DefaultPlansPage.js";
-import { DefaultProfilePage } from "./pages/DefaultProfilePage.js";
+import { SettingsPage } from "./pages/SettingsPage.js";
 import { renderModuleElement } from "./renderModuleElement.js";
 
 type DashboardModuleOptions = ResolvedDashboardModule & {
@@ -56,15 +62,17 @@ export const userPanelModule = (
   const profileMenuItems: ReturnType<ProfileMenuPlugin["getProfileMenuItems"]> =
     [];
   const protectAccountRoutes = options.userManagement.enabled;
+  const basePath = options.basePath ?? "/account";
+  const accountChildren: RouteObject[] = [];
 
   if (options.dashboard.enabled) {
-    routes.push({
-      path: options.dashboard.path,
+    accountChildren.push({
+      path: toAccountChildPath(basePath, options.dashboard.path),
       element: renderModuleElement(
         options.dashboard.component,
         <DefaultDashboardPage content={options.dashboard.content} />,
       ),
-      handle: { layout: "default" },
+      handle: { layout: "none" },
     });
     protectAccountRoute(
       protectedRoutes,
@@ -82,32 +90,32 @@ export const userPanelModule = (
 
   if (options.userManagement.enabled) {
     const profilePath = options.userManagement.routes.profile;
-    routes.push({
-      path: profilePath,
+    accountChildren.push({
+      path: toAccountChildPath(basePath, profilePath),
       element: renderModuleElement(
         options.userManagement.component,
-        <DefaultProfilePage content={options.userManagement.content} />,
+        <SettingsPage content={options.userManagement.content} />,
       ),
-      handle: { layout: "default" },
+      handle: { layout: "none" },
     });
     protectAccountRoute(protectedRoutes, protectAccountRoutes, profilePath);
     profileMenuItems.push({
-      label: "Profile",
+      label: "Settings",
       path: profilePath,
       category: "middle",
-      icon: UserIcon,
+      icon: SettingsIcon,
       weight: 20,
     });
   }
 
   if (options.plans.enabled) {
-    routes.push({
-      path: options.plans.path,
+    accountChildren.push({
+      path: toAccountChildPath(basePath, options.plans.path),
       element: renderModuleElement(
         options.plans.component,
         <DefaultPlansPage content={options.plans.content} />,
       ),
-      handle: { layout: "default" },
+      handle: { layout: "none" },
     });
     protectAccountRoute(
       protectedRoutes,
@@ -131,6 +139,15 @@ export const userPanelModule = (
     );
   }
 
+  if (accountChildren.length > 0) {
+    routes.push({
+      path: basePath,
+      element: <AccountLayout basePath={basePath} />,
+      handle: { layout: "default" },
+      children: accountChildren,
+    });
+  }
+
   return {
     getRoutes: () => routes,
     getProtectedRoutes: () => protectedRoutes,

package/src/utils/dev-portal-api.ts

@@ -0,0 +1,125 @@
+type DevPortalProviderData = {
+  type: "dev-portal";
+  apiBaseUrl: string;
+};
+
+export function resolveDevPortalApiBaseUrl(
+  providerData: DevPortalProviderData | null | undefined,
+): string | undefined {
+  if (providerData?.type === "dev-portal" && providerData.apiBaseUrl) {
+    return providerData.apiBaseUrl.replace(/\/+$/, "");
+  }
+
+  const envUrl =
+    (typeof import.meta.env.VITE_APITOGO_AUTHENTICATION_API_BASE_URL ===
+    "string"
+      ? import.meta.env.VITE_APITOGO_AUTHENTICATION_API_BASE_URL.trim()
+      : "") ||
+    (typeof import.meta.env.VITE_APITOGO_DEV_PORTAL_API_URL === "string"
+      ? import.meta.env.VITE_APITOGO_DEV_PORTAL_API_URL.trim()
+      : "");
+
+  return envUrl ? envUrl.replace(/\/+$/, "") : undefined;
+}
+
+export type AccountMeResponse = {
+  userId: string;
+  displayName: string | null;
+  email?: string | null;
+  emailVerified?: boolean;
+  hasNativePassword?: boolean;
+};
+
+async function readErrorMessage(response: Response, fallback: string) {
+  try {
+    const body = (await response.json()) as {
+      detail?: string;
+      message?: string;
+    };
+    return body.detail ?? body.message ?? fallback;
+  } catch {
+    return fallback;
+  }
+}
+
+export async function fetchAccountMe(
+  apiBaseUrl: string,
+): Promise<AccountMeResponse> {
+  const response = await fetch(`${apiBaseUrl}/api/v1/auth/me`, {
+    method: "GET",
+    headers: { Accept: "application/json" },
+    credentials: "include",
+  });
+
+  if (!response.ok) {
+    throw new Error("Failed to load account details.");
+  }
+
+  return (await response.json()) as AccountMeResponse;
+}
+
+export async function updateAccountProfile(
+  apiBaseUrl: string,
+  displayName: string,
+): Promise<AccountMeResponse> {
+  const response = await fetch(`${apiBaseUrl}/api/v1/account`, {
+    method: "PATCH",
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json",
+    },
+    credentials: "include",
+    body: JSON.stringify({ displayName }),
+  });
+
+  if (!response.ok) {
+    throw new Error(
+      await readErrorMessage(response, "Unable to save profile."),
+    );
+  }
+
+  return (await response.json()) as AccountMeResponse;
+}
+
+export async function changeAccountPassword(
+  apiBaseUrl: string,
+  currentPassword: string,
+  newPassword: string,
+): Promise<void> {
+  const response = await fetch(`${apiBaseUrl}/api/v1/account/change-password`, {
+    method: "POST",
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json",
+    },
+    credentials: "include",
+    body: JSON.stringify({ currentPassword, newPassword }),
+  });
+
+  if (!response.ok) {
+    throw new Error(
+      await readErrorMessage(response, "Unable to update password."),
+    );
+  }
+}
+
+export async function deleteAccount(
+  apiBaseUrl: string,
+  password?: string,
+): Promise<void> {
+  const response = await fetch(`${apiBaseUrl}/api/v1/account`, {
+    method: "DELETE",
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json",
+    },
+    credentials: "include",
+    body: JSON.stringify({ password: password ?? null }),
+  });
+
+  if (!response.ok) {
+    throw new Error(
+      await readErrorMessage(response, "Unable to delete account."),
+    );
+  }
+}