@alepha/ui 0.14.2 → 0.14.4

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

@@ -1,11 +1,23 @@
 import { useClient } from "@alepha/react";
 import { NestedView, useRouter, useRouterState } from "@alepha/react/router";
-import { ActionButton, Flex, Text } from "@alepha/ui";
-import { Avatar, Badge, Card, Group, Loader, Stack, Tabs } from "@mantine/core";
-import { IconDevices, IconSettings, IconUser } from "@tabler/icons-react";
-import type { UserController, UserEntity } from "alepha/api/users";
+import { Box, Center, Loader, Stack, Text } from "@mantine/core";
+import {
+  IconBan,
+  IconDevices,
+  IconHistory,
+  IconLock,
+  IconMail,
+  IconPencil,
+  IconSettings,
+  IconShieldCheck,
+  IconTrash,
+  IconUser,
+} from "@tabler/icons-react";
+import type { AdminUserController, UserEntity } from "alepha/api/users";
 import { useEffect, useState } from "react";
 import type { AdminRouter } from "../../AdminRouter.ts";
+import AdminResourceHeader from "../shared/AdminResourceHeader.tsx";
+import AdminResourceTabs from "../shared/AdminResourceTabs.tsx";
 
 export interface AdminUserLayoutProps {
   userRealmName?: string;
@@ -14,11 +26,12 @@ export interface AdminUserLayoutProps {
 const AdminUserLayout = (props: AdminUserLayoutProps) => {
   const router = useRouter<AdminRouter>();
   const state = useRouterState();
-  const client = useClient<UserController>();
+  const client = useClient<AdminUserController>();
   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 () => {
@@ -38,127 +51,170 @@ const AdminUserLayout = (props: AdminUserLayoutProps) => {
 
   if (loading) {
     return (
-      <Flex flex={1} justify="center" align="center">
+      <Center flex={1}>
         <Loader />
-      </Flex>
+      </Center>
     );
   }
 
   if (!user) {
     return (
-      <Flex flex={1} justify="center" align="center">
-        <Text c="dimmed">User not found</Text>
-      </Flex>
+      <Center flex={1}>
+        <Stack align="center" gap="xs">
+          <IconUser size={48} opacity={0.3} />
+          <Text c="dimmed">User not found</Text>
+        </Stack>
+      </Center>
     );
   }
 
-  const currentPath = state.url.pathname;
-  const detailsPath = router.path("adminUserDetails", { params: { userId } });
-  const sessionsPath = router.path("adminUserSessions", { params: { userId } });
-  const settingsPath = router.path("adminUserSettings", { params: { userId } });
+  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";
-    return "details";
+    if (currentPath.endsWith("/audits")) return "audits";
+    return "profile";
   };
-  const activeTab = getActiveTab();
 
-  const displayName =
-    user.firstName || user.lastName
-      ? `${user.firstName ?? ""} ${user.lastName ?? ""}`.trim()
-      : user.username || user.email || "User";
+  const handleBlockUser = async () => {
+    setActionLoading("block");
+    try {
+      const updated = await client.updateUser({
+        params: { id: userId },
+        query: { userRealmName: props.userRealmName },
+        body: { enabled: !user.enabled },
+      });
+      setUser(updated);
+    } finally {
+      setActionLoading(null);
+    }
+  };
+
+  const handleSendVerification = async () => {
+    setActionLoading("verify");
+    // TODO: Implement send verification
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    setActionLoading(null);
+  };
+
+  const handleResetPassword = async () => {
+    setActionLoading("reset");
+    // TODO: Implement reset password
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    setActionLoading(null);
+  };
+
+  const handleDeleteUser = async () => {
+    if (
+      !confirm(
+        "Are you sure you want to delete this user? This action cannot be undone.",
+      )
+    ) {
+      return;
+    }
+    setActionLoading("delete");
+    try {
+      await client.deleteUser({
+        params: { id: userId },
+        query: { userRealmName: props.userRealmName },
+      });
+      await router.go("adminUsers");
+    } finally {
+      setActionLoading(null);
+    }
+  };
 
   return (
-    <Flex flex={1} direction="column" gap="md" p="md">
-      <Card withBorder p="md">
-        <Group>
-          <Avatar size="lg" radius="xl" color="blue">
-            {displayName.charAt(0).toUpperCase()}
-          </Avatar>
-          <Stack gap={4}>
-            <Group gap="xs">
-              <Text size="lg" fw={500}>
-                {displayName}
-              </Text>
-              <Badge
-                size="sm"
-                variant="light"
-                color={user.enabled ? "green" : "red"}
-              >
-                {user.enabled ? "Active" : "Disabled"}
-              </Badge>
-            </Group>
-            <Text size="sm" c="dimmed">
-              {user.email || user.username || user.id}
-            </Text>
-            {user.roles.length > 0 && (
-              <Group gap={4}>
-                {user.roles.map((role: string) => (
-                  <Badge key={role} size="xs" variant="outline">
-                    {role}
-                  </Badge>
-                ))}
-              </Group>
-            )}
-          </Stack>
-        </Group>
-      </Card>
-
-      <Tabs value={activeTab}>
-        <Tabs.List>
-          <ActionButton
-            href={detailsPath}
-            leftSection={<IconUser size={16} />}
-            c={activeTab === "details" ? undefined : "dimmed"}
-            fw={activeTab === "details" ? 500 : 400}
-            style={{
-              borderBottom:
-                activeTab === "details"
-                  ? "2px solid var(--mantine-primary-color-filled)"
-                  : "2px solid transparent",
-              borderRadius: 0,
-            }}
-          >
-            Details
-          </ActionButton>
-          <ActionButton
-            href={sessionsPath}
-            leftSection={<IconDevices size={16} />}
-            c={activeTab === "sessions" ? undefined : "dimmed"}
-            fw={activeTab === "sessions" ? 500 : 400}
-            style={{
-              borderBottom:
-                activeTab === "sessions"
-                  ? "2px solid var(--mantine-primary-color-filled)"
-                  : "2px solid transparent",
-              borderRadius: 0,
-            }}
-          >
-            Sessions
-          </ActionButton>
-          <ActionButton
-            href={settingsPath}
-            leftSection={<IconSettings size={16} />}
-            c={activeTab === "settings" ? undefined : "dimmed"}
-            fw={activeTab === "settings" ? 500 : 400}
-            style={{
-              borderBottom:
-                activeTab === "settings"
-                  ? "2px solid var(--mantine-primary-color-filled)"
-                  : "2px solid transparent",
-              borderRadius: 0,
-            }}
-          >
-            Settings
-          </ActionButton>
-        </Tabs.List>
-      </Tabs>
-
-      <Flex flex={1}>
+    <Box py="xl" px="xl" flex={1}>
+      <Stack gap="lg">
+        <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}
+          status={{
+            label: user.enabled ? "Active" : "Disabled",
+            color: user.enabled ? "green" : "red",
+          }}
+          menuActions={[
+            {
+              label: "Edit Profile",
+              icon: IconPencil,
+              href: router.path("adminUserDetails", { params: { userId } }),
+            },
+            {
+              label: user.enabled ? "Disable User" : "Enable User",
+              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",
+            },
+            {
+              label: "Delete User",
+              icon: IconTrash,
+              color: "red",
+              onClick: handleDeleteUser,
+              loading: actionLoading === "delete",
+            },
+          ]}
+        />
+
+        <AdminResourceTabs
+          activeTab={getActiveTab()}
+          tabs={[
+            {
+              value: "profile",
+              label: "Profile",
+              icon: IconUser,
+              href: router.path("adminUserDetails", { 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 } }),
+            },
+          ]}
+        />
+
         <NestedView />
-      </Flex>
-    </Flex>
+      </Stack>
+    </Box>
   );
 };
 

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

@@ -10,7 +10,7 @@ import {
   IconTrash,
 } from "@tabler/icons-react";
 import { type Page, t } from "alepha";
-import type { SessionController, SessionEntity } from "alepha/api/users";
+import type { AdminSessionController, SessionEntity } from "alepha/api/users";
 import { useState } from "react";
 
 export interface AdminUserSessionsProps {
@@ -19,7 +19,7 @@ export interface AdminUserSessionsProps {
 
 const AdminUserSessions = (props: AdminUserSessionsProps) => {
   const state = useRouterState();
-  const client = useClient<SessionController>();
+  const client = useClient<AdminSessionController>();
   const { l } = useI18n();
   const userId = state.params.userId as string;
   const [refreshKey, setRefreshKey] = useState(0);

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

@@ -8,7 +8,11 @@ import {
   IconMail,
   IconTrash,
 } from "@tabler/icons-react";
-import type { UserController, UserEntity } from "alepha/api/users";
+import type {
+  AdminUserController,
+  UserController,
+  UserEntity,
+} from "alepha/api/users";
 import { useEffect, useState } from "react";
 import type { AdminRouter } from "../../AdminRouter.ts";
 
@@ -19,7 +23,8 @@ export interface AdminUserSettingsProps {
 const AdminUserSettings = (props: AdminUserSettingsProps) => {
   const router = useRouter<AdminRouter>();
   const state = useRouterState();
-  const client = useClient<UserController>();
+  const adminClient = useClient<AdminUserController>();
+  const userClient = useClient<UserController>();
   const userId = state.params.userId as string;
 
   const [user, setUser] = useState<UserEntity | null>(null);
@@ -31,7 +36,7 @@ const AdminUserSettings = (props: AdminUserSettingsProps) => {
   useEffect(() => {
     const loadUser = async () => {
       try {
-        const data = await client.getUser({
+        const data = await adminClient.getUser({
           params: { id: userId },
           query: { userRealmName: props.userRealmName },
         });
@@ -51,7 +56,7 @@ const AdminUserSettings = (props: AdminUserSettingsProps) => {
 
     setDeleteLoading(true);
     try {
-      await client.deleteUser({
+      await adminClient.deleteUser({
         params: { id: userId },
         query: { userRealmName: props.userRealmName },
       });
@@ -67,7 +72,7 @@ const AdminUserSettings = (props: AdminUserSettingsProps) => {
     setVerifyLoading(true);
     setVerifySuccess(false);
     try {
-      await client.requestEmailVerification({
+      await userClient.requestEmailVerification({
         query: {
           userRealmName: props.userRealmName,
           method: "link",

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

@@ -5,7 +5,11 @@ import { DataTable, Text } from "@alepha/ui";
 import { Badge, Flex, Group } from "@mantine/core";
 import { IconCheck, IconUsersPlus, IconX } from "@tabler/icons-react";
 import { type Page, t } from "alepha";
-import { type UserController, type UserEntity, users } from "alepha/api/users";
+import {
+  type AdminUserController,
+  type UserEntity,
+  users,
+} from "alepha/api/users";
 import type { AdminRouter } from "../../AdminRouter.ts";
 
 export interface AdminUsersProps {
@@ -13,7 +17,7 @@ export interface AdminUsersProps {
 }
 
 const AdminUsers = (props: AdminUsersProps) => {
-  const client = useClient<UserController>();
+  const client = useClient<AdminUserController>();
   const router = useRouter<AdminRouter>();
   const { l } = useI18n();
 

package/src/auth/AuthRouter.ts

@@ -47,7 +47,7 @@ export class AuthRouter {
     },
     can: () => !this.auth.user,
     lazy: () => import("./components/Login.tsx"),
-    resolve: async ({ query }) => {
+    loader: async ({ query }) => {
       return {
         realmConfig: await this.loadRealmConfig(query.realm),
       };
@@ -64,7 +64,7 @@ export class AuthRouter {
     },
     can: () => !this.auth.user,
     lazy: () => import("./components/Register.tsx"),
-    resolve: async ({ query }) => {
+    loader: async ({ query }) => {
       return {
         realmConfig: await this.loadRealmConfig(query.realm),
       };
@@ -81,7 +81,7 @@ export class AuthRouter {
     },
     can: () => !this.auth.user,
     lazy: () => import("./components/ResetPassword.tsx"),
-    resolve: async ({ query }) => {
+    loader: async ({ query }) => {
       return {
         realmConfig: await this.loadRealmConfig(query.realm),
       };
@@ -109,7 +109,7 @@ export class AuthRouter {
     can: () => !!this.auth.user,
     path: "/logout",
     component: () => null,
-    resolve: () => {
+    loader: () => {
       this.auth.logout();
       return {};
     },

package/src/core/components/form/TypeForm.tsx

@@ -92,6 +92,7 @@ const TypeForm = <T extends TObject>(props: TypeFormProps<T>) => {
     skipFormElement = false,
     skipSubmitButton = false,
     submitButtonProps,
+    fill = true,
   } = props;
 
   const schema = props.schema || form.options.schema;
@@ -176,7 +177,7 @@ const TypeForm = <T extends TObject>(props: TypeFormProps<T>) => {
     <Flex
       direction={"column"}
       gap={"sm"}
-      flex={props.fill ? 1 : undefined}
+      flex={fill ? 1 : undefined}
       {...props.flexProps}
     >
       <Flex direction={"column"} gap={"sm"} flex={1}>
@@ -212,7 +213,7 @@ const TypeForm = <T extends TObject>(props: TypeFormProps<T>) => {
   return (
     <Flex
       component={"form"}
-      flex={props.fill ? 1 : undefined}
+      flex={fill ? 1 : undefined}
       {...form.props}
       {...props.flexProps}
     >

package/src/core/components/layout/AlephaMantineProvider.tsx

@@ -11,6 +11,7 @@ import { ModalsProvider, type ModalsProviderProps } from "@mantine/modals";
 import { Notifications, type NotificationsProps } from "@mantine/notifications";
 import type { NavigationProgressProps } from "@mantine/nprogress";
 import { NavigationProgress, nprogress } from "@mantine/nprogress";
+import { TypeBoxError } from "alepha";
 import type { ReactNode } from "react";
 import { useTheme } from "../../hooks/useTheme.ts";
 import { useToast } from "../../hooks/useToast.ts";
@@ -39,7 +40,10 @@ const AlephaMantineProvider = (props: AlephaMantineProviderProps) => {
         nprogress.complete();
       },
       "react:action:error": ({ error }) => {
-        if (error instanceof FormValidationError) {
+        if (
+          error instanceof FormValidationError ||
+          error instanceof TypeBoxError
+        ) {
           // Validation errors are handled by the form component
           return;
         }

package/src/core/components/layout/Sidebar.tsx

@@ -129,12 +129,14 @@ export const Sidebar = (props: SidebarProps) => {
   const getSidebarNodes = (): SidebarNode[] => {
     if (props.items) return props.items;
     if (props.autoPopulateMenu) {
-      const items = router.concretePages.map((page) => ({
-        label: page.label ?? page.name,
-        //description: page.description?.slice(0, 32),
-        icon: renderIcon(page.icon),
-        href: router.path(page.name),
-      })) as SidebarMenuItem[];
+      const items = router.concretePages
+        .filter((page) => !page.can || page.can())
+        .map((page) => ({
+          label: page.label ?? page.name,
+          //description: page.description?.slice(0, 32),
+          icon: renderIcon(page.icon),
+          href: router.path(page.name),
+        })) as SidebarMenuItem[];
       if (
         typeof props.autoPopulateMenu === "object" &&
         props.autoPopulateMenu.startsWith
@@ -142,6 +144,7 @@ export const Sidebar = (props: SidebarProps) => {
         const startsWith = props.autoPopulateMenu.startsWith;
         return items.filter((item) => item.href?.startsWith(startsWith));
       }
+      return items;
     }
     return [];
   };