@alepha/ui 0.17.2 → 0.18.1

package/src/admin/components/users/AdminUserLayout.tsx

@@ -1,20 +1,17 @@
-import { Center, Flex, Loader, Text } from "@mantine/core";
-import {
-  IconBan,
-  IconDevices,
-  IconHistory,
-  IconLock,
-  IconMail,
-  IconPencil,
-  IconSettings,
-  IconShieldCheck,
-  IconTrash,
-  IconUser,
-} from "@tabler/icons-react";
+import { Flex, Text, useDialog, useToast } from "@alepha/ui";
+import { Loader } from "@mantine/core";
+import { IconBan, IconShieldCheck, IconTrash } from "@tabler/icons-react";
+import { t } from "alepha";
 import type { AdminUserController, UserEntity } from "alepha/api/users";
 import { useClient } from "alepha/react";
 import { NestedView, useRouter, useRouterState } from "alepha/react/router";
-import { useEffect, useState } from "react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
 import type { AdminRouter } from "../../AdminRouter.ts";
 import AdminResourceHeader from "../shared/AdminResourceHeader.tsx";
 import AdminResourceTabs from "../shared/AdminResourceTabs.tsx";
@@ -23,198 +20,164 @@ export interface AdminUserLayoutProps {
   userRealmName?: string;
 }
 
+interface UserContextValue {
+  user: UserEntity;
+  reload: () => void;
+}
+
+const UserContext = createContext<UserContextValue | null>(null);
+
+export const useUser = () => {
+  const ctx = useContext(UserContext);
+  if (!ctx) throw new Error("useUser must be used within AdminUserLayout");
+  return ctx;
+};
+
+const updateUserSchema = t.object({
+  email: t.optional(t.email()),
+  phoneNumber: t.optional(t.e164()),
+  firstName: t.optional(t.string()),
+  lastName: t.optional(t.string()),
+  roles: t.optional(t.array(t.string())),
+  enabled: t.optional(t.boolean()),
+});
+
+const displayName = (u: UserEntity) =>
+  u.firstName || u.lastName
+    ? `${u.firstName ?? ""} ${u.lastName ?? ""}`.trim()
+    : u.username || u.email || "User";
+
 const AdminUserLayout = (props: AdminUserLayoutProps) => {
   const router = useRouter<AdminRouter>();
   const state = useRouterState();
   const client = useClient<AdminUserController>();
+  const dialog = useDialog();
+  const toast = useToast();
   const userId = state.params.userId as string;
 
   const [user, setUser] = useState<UserEntity | null>(null);
   const [loading, setLoading] = useState(true);
-  const [actionLoading, setActionLoading] = useState<string | null>(null);
-
-  useEffect(() => {
-    const loadUser = async () => {
-      try {
-        const data = await client.getUser({
-          params: { id: userId },
-          query: { userRealmName: props.userRealmName },
-        });
-        setUser(data);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    loadUser();
-  }, [userId]);
-
-  if (loading) {
-    return (
-      <Center flex={1}>
-        <Loader />
-      </Center>
-    );
-  }
-
-  if (!user) {
-    return (
-      <Center flex={1}>
-        <Flex direction="column" align="center" gap="xs">
-          <IconUser size={48} opacity={0.3} />
-          <Text c="dimmed">User not found</Text>
-        </Flex>
-      </Center>
-    );
-  }
 
-  const displayName =
-    user.firstName || user.lastName
-      ? `${user.firstName ?? ""} ${user.lastName ?? ""}`.trim()
-      : user.username || user.email || "User";
-
-  const currentPath = state.url.pathname;
-  const getActiveTab = () => {
-    if (currentPath.endsWith("/sessions")) return "sessions";
-    if (currentPath.endsWith("/settings")) return "settings";
-    if (currentPath.endsWith("/audits")) return "audits";
-    return "profile";
-  };
+  const realmQuery = { userRealmName: props.userRealmName };
 
-  const handleBlockUser = async () => {
-    setActionLoading("block");
+  const loadUser = useCallback(async () => {
+    setLoading(true);
     try {
-      const updated = await client.updateUser({
+      const data = await client.getUser({
         params: { id: userId },
-        query: { userRealmName: props.userRealmName },
-        body: { enabled: !user.enabled },
+        query: realmQuery,
       });
-      setUser(updated);
+      setUser(data);
     } finally {
-      setActionLoading(null);
+      setLoading(false);
     }
-  };
-
-  const handleSendVerification = async () => {
-    setActionLoading("verify");
-    // TODO: Implement send verification
-    await new Promise((resolve) => setTimeout(resolve, 1000));
-    setActionLoading(null);
-  };
+  }, [userId, client]);
 
-  const handleResetPassword = async () => {
-    setActionLoading("reset");
-    // TODO: Implement reset password
-    await new Promise((resolve) => setTimeout(resolve, 1000));
-    setActionLoading(null);
+  useEffect(() => {
+    loadUser();
+  }, [loadUser]);
+
+  const handleToggleEnabled = async () => {
+    if (!user) return;
+    const action = user.enabled ? "disable" : "enable";
+    const confirmed = await dialog.confirm({
+      title: `${user.enabled ? "Disable" : "Enable"} User`,
+      message: `Are you sure you want to ${action} ${displayName(user)}?`,
+    });
+    if (confirmed) {
+      const updated = await client.updateUser({
+        params: { id: user.id },
+        query: realmQuery,
+        body: { enabled: !user.enabled },
+      });
+      setUser(updated);
+      toast.success({ title: `User ${action}d` });
+    }
   };
 
-  const handleDeleteUser = async () => {
-    if (
-      !confirm(
-        "Are you sure you want to delete this user? This action cannot be undone.",
-      )
-    ) {
-      return;
-    }
-    setActionLoading("delete");
-    try {
+  const handleDelete = async () => {
+    if (!user) return;
+    const confirmed = await dialog.confirm({
+      title: "Delete User",
+      message: `Are you sure you want to delete ${displayName(user)}? This cannot be undone.`,
+      confirmColor: "red",
+      confirmLabel: "Delete",
+    });
+    if (confirmed) {
       await client.deleteUser({
-        params: { id: userId },
-        query: { userRealmName: props.userRealmName },
+        params: { id: user.id },
+        query: realmQuery,
       });
-      await router.push("adminUsers");
-    } finally {
-      setActionLoading(null);
+      toast.success({ title: "User deleted" });
+      router.push("adminUsers");
     }
   };
 
+  if (loading) {
+    return (
+      <Flex flex={1} justify="center" align="center">
+        <Loader />
+      </Flex>
+    );
+  }
+
+  if (!user) {
+    return (
+      <Flex flex={1} justify="center" align="center">
+        <Text c="dimmed">User not found</Text>
+      </Flex>
+    );
+  }
+
   return (
-    <Flex py="xl" px="xl" flex={1}>
-      <Flex direction="column" gap="lg">
+    <UserContext.Provider value={{ user, reload: loadUser }}>
+      <Flex flex={1} direction="column" gap="lg" p="md">
         <AdminResourceHeader
           backHref={router.path("adminUsers")}
           backLabel="Users"
-          avatar={user.picture || displayName.charAt(0).toUpperCase()}
-          avatarColor={user.enabled ? "blue" : "gray"}
-          title={displayName}
-          subtitle={user.email || user.username || undefined}
+          title={displayName(user)}
+          subtitle={user.email || user.username}
           status={{
             label: user.enabled ? "Active" : "Disabled",
-            color: user.enabled ? "green" : "red",
+            color: user.enabled ? "green" : "gray",
           }}
           menuActions={[
             {
-              label: "Edit Profile",
-              icon: IconPencil,
-              href: router.path("adminUserDetails", { params: { userId } }),
-            },
-            {
-              label: user.enabled ? "Disable User" : "Enable User",
+              label: user.enabled ? "Disable" : "Enable",
               icon: user.enabled ? IconBan : IconShieldCheck,
-              color: user.enabled ? "orange" : "green",
-              onClick: handleBlockUser,
-              loading: actionLoading === "block",
-            },
-            ...(user.email && !user.emailVerified
-              ? [
-                  {
-                    label: "Send Verification Email",
-                    icon: IconMail,
-                    onClick: handleSendVerification,
-                    loading: actionLoading === "verify",
-                  },
-                ]
-              : []),
-            {
-              label: "Reset Password",
-              icon: IconLock,
-              onClick: handleResetPassword,
-              loading: actionLoading === "reset",
+              onClick: handleToggleEnabled,
             },
             {
-              label: "Delete User",
+              label: "Delete",
               icon: IconTrash,
               color: "red",
-              onClick: handleDeleteUser,
-              loading: actionLoading === "delete",
+              onClick: handleDelete,
             },
           ]}
         />
 
         <AdminResourceTabs
-          activeTab={getActiveTab()}
           tabs={[
             {
               value: "profile",
               label: "Profile",
-              icon: IconUser,
-              href: router.path("adminUserDetails", { params: { userId } }),
+              href: router.path("adminUserProfile", {
+                params: { userId },
+              }),
             },
             {
               value: "sessions",
               label: "Sessions",
-              icon: IconDevices,
-              href: router.path("adminUserSessions", { params: { userId } }),
-            },
-            {
-              value: "audits",
-              label: "Activity",
-              icon: IconHistory,
-              href: router.path("adminUserAudits", { params: { userId } }),
-            },
-            {
-              value: "settings",
-              label: "Settings",
-              icon: IconSettings,
-              href: router.path("adminUserSettings", { params: { userId } }),
+              href: router.path("adminUserSessions", {
+                params: { userId },
+              }),
             },
           ]}
         />
 
         <NestedView />
       </Flex>
-    </Flex>
+    </UserContext.Provider>
   );
 };
 

package/src/admin/components/users/AdminUserProfile.tsx

@@ -0,0 +1,50 @@
+import { DetailList, Flex } from "@alepha/ui";
+import { Badge } from "@mantine/core";
+import { useI18n } from "alepha/react/i18n";
+import { useUser } from "./AdminUserLayout.tsx";
+
+const AdminUserProfile = () => {
+  const { user } = useUser();
+  const { l } = useI18n();
+
+  return (
+    <DetailList
+      items={[
+        { label: "ID", value: user.id, copyable: user.id },
+        { label: "Username", value: user.username },
+        { label: "Email", value: user.email },
+        {
+          label: "Email Verified",
+          value: user.emailVerified ? "Yes" : "No",
+        },
+        { label: "Phone", value: user.phoneNumber },
+        { label: "First Name", value: user.firstName },
+        { label: "Last Name", value: user.lastName },
+        { label: "Realm", value: user.realm },
+        {
+          label: "Roles",
+          value:
+            user.roles.length > 0 ? (
+              <Flex gap={4}>
+                {user.roles.map((role) => (
+                  <Badge key={role} size="xs" variant="default">
+                    {role}
+                  </Badge>
+                ))}
+              </Flex>
+            ) : null,
+        },
+        {
+          label: "Created",
+          value: String(l(user.createdAt, { date: "lll" })),
+        },
+        {
+          label: "Updated",
+          value: String(l(user.updatedAt, { date: "lll" })),
+        },
+      ]}
+    />
+  );
+};
+
+export default AdminUserProfile;

package/src/admin/components/users/AdminUserSessions.tsx

@@ -1,5 +1,4 @@
-import { ActionButton, DataTable, Flex, Text } from "@alepha/ui";
-import { Badge } from "@mantine/core";
+import { DataTable, Flex, Text, useDialog } from "@alepha/ui";
 import {
   IconDeviceDesktop,
   IconDeviceMobile,
@@ -17,142 +16,123 @@ export interface AdminUserSessionsProps {
   userRealmName?: string;
 }
 
+const emptyFilters = t.object({});
+
+const getDeviceIcon = (device?: string) => {
+  switch (device) {
+    case "MOBILE":
+      return <IconDeviceMobile size={14} />;
+    case "TABLET":
+      return <IconDeviceTablet size={14} />;
+    default:
+      return <IconDeviceDesktop size={14} />;
+  }
+};
+
+const isExpired = (expiresAt: Date | string) =>
+  new Date(expiresAt) < new Date();
+
 const AdminUserSessions = (props: AdminUserSessionsProps) => {
   const state = useRouterState();
+  const userId = state.params.userId as string;
   const client = useClient<AdminSessionController>();
   const { l } = useI18n();
-  const userId = state.params.userId as string;
+  const dialog = useDialog();
   const [refreshKey, setRefreshKey] = useState(0);
 
-  const getDeviceIcon = (device?: string) => {
-    switch (device) {
-      case "MOBILE":
-        return <IconDeviceMobile size={14} />;
-      case "TABLET":
-        return <IconDeviceTablet size={14} />;
-      default:
-        return <IconDeviceDesktop size={14} />;
-    }
-  };
-
-  const isExpired = (expiresAt: Date | string) => {
-    return new Date(expiresAt) < new Date();
-  };
-
-  const handleDelete = async (sessionId: string) => {
-    await client.deleteSession({
-      params: { id: sessionId },
-      query: { userRealmName: props.userRealmName },
+  const handleDeleteSession = async (sessionId: string) => {
+    const confirmed = await dialog.confirm({
+      title: "Revoke Session",
+      message: "Are you sure you want to revoke this session?",
     });
-    setRefreshKey((k) => k + 1);
+    if (confirmed) {
+      await client.deleteSession({
+        params: { id: sessionId },
+        query: { userRealmName: props.userRealmName },
+      });
+      setRefreshKey((k) => k + 1);
+    }
   };
 
-  const filters = t.object({});
-
   return (
-    <Flex flex={1} direction="column">
-      <DataTable<SessionEntity, typeof filters>
-        key={refreshKey}
-        submitOnInit
-        defaultSize={10}
-        filters={filters}
-        tableProps={{
-          horizontalSpacing: "xs",
-          verticalSpacing: "xs",
-        }}
-        tableTrProps={(item) => {
-          if (isExpired(item.expiresAt)) {
-            return {
-              opacity: 0.5,
-            };
-          }
-          return {};
-        }}
-        items={async (filters) => {
-          const response = await client.findSessions({
-            query: {
-              ...filters,
-              userId,
-              userRealmName: props.userRealmName,
-            },
-          });
-
-          return response as Page<SessionEntity>;
-        }}
-        columns={{
-          userAgent: {
-            label: "Device",
-            value: (item) => (
-              <Flex gap={4}>
-                {item.userAgent ? (
-                  <>
-                    <Badge
-                      size="xs"
-                      variant="light"
-                      leftSection={getDeviceIcon(item.userAgent.device)}
-                    >
-                      {item.userAgent.device}
-                    </Badge>
-                    <Text size="xs" c="dimmed">
-                      {item.userAgent.browser} / {item.userAgent.os}
-                    </Text>
-                  </>
-                ) : (
-                  <Text size="xs" c="dimmed">
-                    -
-                  </Text>
-                )}
-              </Flex>
-            ),
-          },
-          ip: {
-            label: "IP Address",
-            fit: true,
-            value: (item) => (
-              <Text size="xs" ff="monospace" c="dimmed">
-                {item.ip || "-"}
-              </Text>
-            ),
-          },
-          expiresAt: {
-            label: "Status",
-            fit: true,
-            value: (item) => (
-              <Badge
-                size="sm"
-                variant="light"
-                color={isExpired(item.expiresAt) ? "red" : "green"}
-              >
-                {isExpired(item.expiresAt) ? "Expired" : "Active"}
-              </Badge>
-            ),
+    <DataTable<SessionEntity, typeof emptyFilters>
+      key={refreshKey}
+      submitOnInit
+      defaultSize={10}
+      filters={emptyFilters}
+      tableProps={{
+        horizontalSpacing: "xs",
+        verticalSpacing: "xs",
+      }}
+      tableTrProps={(item) => ({
+        style: {
+          opacity: isExpired(item.expiresAt) ? 0.5 : 1,
+        },
+      })}
+      items={async (filters) => {
+        const response = await client.findSessions({
+          query: {
+            ...filters,
+            userId,
+            userRealmName: props.userRealmName,
           },
-          createdAt: {
-            label: "Created",
-            fit: true,
-            value: (item) => (
-              <Text size="xs" c="dimmed">
-                {l(item.createdAt, { date: "fromNow" })}
+        });
+        return response as Page<SessionEntity>;
+      }}
+      columns={{
+        device: {
+          label: "Device",
+          value: (item) => (
+            <Flex gap={4} align="center">
+              {getDeviceIcon(item.userAgent?.device)}
+              <Text size="xs">
+                {item.userAgent
+                  ? `${item.userAgent.browser} / ${item.userAgent.os}`
+                  : "\u2014"}
               </Text>
-            ),
-          },
-          actions: {
-            label: "",
-            fit: true,
-            value: (item) => (
-              <ActionButton
-                size="xs"
-                variant="subtle"
-                color="red"
-                onClick={() => handleDelete(item.id)}
-              >
-                <IconTrash size={14} />
-              </ActionButton>
-            ),
-          },
-        }}
-      />
-    </Flex>
+            </Flex>
+          ),
+        },
+        ip: {
+          label: "IP",
+          fit: true,
+          value: (item) => (
+            <Text size="xs" ff="monospace" c="dimmed">
+              {item.ip || "\u2014"}
+            </Text>
+          ),
+        },
+        status: {
+          label: "Status",
+          fit: true,
+          value: (item) => (
+            <Text size="xs" c="dimmed">
+              {isExpired(item.expiresAt) ? "Expired" : "Active"}
+            </Text>
+          ),
+        },
+        createdAt: {
+          label: "Created",
+          fit: true,
+          value: (item) => (
+            <Text size="xs" c="dimmed">
+              {l(item.createdAt, { date: "fromNow" })}
+            </Text>
+          ),
+        },
+        actions: {
+          label: "",
+          fit: true,
+          actions: (item) => [
+            {
+              icon: <IconTrash size={14} />,
+              onClick: () => handleDeleteSession(item.id),
+              tooltip: "Revoke session",
+            },
+          ],
+        },
+      }}
+    />
   );
 };