@alepha/ui 0.13.6 → 0.13.8

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

@@ -0,0 +1,183 @@
+import { useClient, useRouterState } from "@alepha/react";
+import { useI18n } from "@alepha/react/i18n";
+import { DataTable, Flex, Text } from "@alepha/ui";
+import { Badge, Group, Tooltip } from "@mantine/core";
+import {
+  IconAlertTriangle,
+  IconCheck,
+  IconInfoCircle,
+  IconX,
+} from "@tabler/icons-react";
+import { type Page, t } from "alepha";
+import type { AuditController, AuditEntity } from "alepha/api/audits";
+
+export interface AdminUserAuditsProps {
+  userRealmName?: string;
+}
+
+const getSeverityColor = (severity: string) => {
+  switch (severity) {
+    case "critical":
+      return "red";
+    case "warning":
+      return "yellow";
+    default:
+      return "blue";
+  }
+};
+
+const getSeverityIcon = (severity: string) => {
+  switch (severity) {
+    case "critical":
+      return <IconAlertTriangle size={12} />;
+    case "warning":
+      return <IconAlertTriangle size={12} />;
+    default:
+      return <IconInfoCircle size={12} />;
+  }
+};
+
+const AdminUserAudits = (_props: AdminUserAuditsProps) => {
+  const state = useRouterState();
+  const client = useClient<AuditController>();
+  const { l } = useI18n();
+  const userId = state.params.userId as string;
+
+  const filters = t.object({
+    type: t.optional(t.text()),
+    action: t.optional(t.text()),
+    severity: t.optional(t.enum(["info", "warning", "critical"])),
+    success: t.optional(t.boolean()),
+    from: t.optional(t.datetime()),
+    to: t.optional(t.datetime()),
+  });
+
+  return (
+    <Flex flex={1} direction="column">
+      <DataTable<AuditEntity, typeof filters>
+        submitOnInit
+        defaultSize={15}
+        typeFormProps={{
+          skipSubmitButton: true,
+          columns: 4,
+        }}
+        tableProps={{
+          horizontalSpacing: "xs",
+          verticalSpacing: "xs",
+          striped: false,
+          highlightOnHover: true,
+        }}
+        filters={filters}
+        items={async (query) => {
+          const response = await client.findByUser({
+            params: { userId },
+            query,
+          });
+          return response as Page<AuditEntity>;
+        }}
+        columns={{
+          type: {
+            label: "Type",
+            fit: true,
+            value: (item) => (
+              <Badge size="sm" variant="light" color="grape">
+                {item.type}
+              </Badge>
+            ),
+          },
+          action: {
+            label: "Action",
+            fit: true,
+            value: (item) => (
+              <Badge size="sm" variant="outline">
+                {item.action}
+              </Badge>
+            ),
+          },
+          severity: {
+            label: "Severity",
+            fit: true,
+            value: (item) => (
+              <Badge
+                size="sm"
+                variant="light"
+                color={getSeverityColor(item.severity)}
+                leftSection={getSeverityIcon(item.severity)}
+              >
+                {item.severity}
+              </Badge>
+            ),
+          },
+          description: {
+            label: "Description",
+            value: (item) => (
+              <Text size="sm" lineClamp={1}>
+                {item.description || "-"}
+              </Text>
+            ),
+          },
+          resource: {
+            label: "Resource",
+            fit: true,
+            value: (item) =>
+              item.resourceType ? (
+                <Tooltip label={item.resourceId || "N/A"}>
+                  <Badge size="xs" variant="dot" color="gray">
+                    {item.resourceType}
+                  </Badge>
+                </Tooltip>
+              ) : (
+                <Text size="xs" c="dimmed">
+                  -
+                </Text>
+              ),
+          },
+          success: {
+            label: "Status",
+            fit: true,
+            value: (item) =>
+              item.success ? (
+                <Group gap={4}>
+                  <IconCheck size={14} color="var(--mantine-color-green-6)" />
+                  <Text size="xs" c="green">
+                    Success
+                  </Text>
+                </Group>
+              ) : (
+                <Tooltip label={item.errorMessage || "Failed"}>
+                  <Group gap={4}>
+                    <IconX size={14} color="var(--mantine-color-red-6)" />
+                    <Text size="xs" c="red">
+                      Failed
+                    </Text>
+                  </Group>
+                </Tooltip>
+              ),
+          },
+          ipAddress: {
+            label: "IP",
+            fit: true,
+            value: (item) => (
+              <Text size="xs" c="dimmed" ff="monospace">
+                {item.ipAddress || "-"}
+              </Text>
+            ),
+          },
+          createdAt: {
+            label: "Time",
+            fit: true,
+            value: (item) => (
+              <Tooltip label={l(item.createdAt, { date: "medium" })}>
+                <Text size="xs" c="dimmed">
+                  {l(item.createdAt, { date: "fromNow" })}
+                </Text>
+              </Tooltip>
+            ),
+          },
+        }}
+      />
+    </Flex>
+  );
+};
+
+export default AdminUserAudits;

package/src/admin/components/{AdminUserCreate.tsx → users/AdminUserCreate.tsx}

@@ -4,7 +4,7 @@ import { ActionButton, Control, Flex } from "@alepha/ui";
 import { Card, Stack, Text } from "@mantine/core";
 import { t } from "alepha";
 import type { UserController } from "alepha/api/users";
-import type { AdminRouter } from "../AdminRouter.ts";
+import type { AdminRouter } from "../../AdminRouter.ts";
 
 export interface AdminUserCreateProps {
   userRealmName?: string;

package/src/admin/components/{AdminUserLayout.tsx → users/AdminUserLayout.tsx}

@@ -9,7 +9,7 @@ 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 { useEffect, useState } from "react";
-import type { AdminRouter } from "../AdminRouter.ts";
+import type { AdminRouter } from "../../AdminRouter.ts";
 
 export interface AdminUserLayoutProps {
   userRealmName?: string;
@@ -112,7 +112,6 @@ const AdminUserLayout = (props: AdminUserLayoutProps) => {
       <Tabs value={activeTab}>
         <Tabs.List>
           <ActionButton
-            variant="subtle"
             href={detailsPath}
             leftSection={<IconUser size={16} />}
             c={activeTab === "details" ? undefined : "dimmed"}
@@ -128,7 +127,6 @@ const AdminUserLayout = (props: AdminUserLayoutProps) => {
             Details
           </ActionButton>
           <ActionButton
-            variant="subtle"
             href={sessionsPath}
             leftSection={<IconDevices size={16} />}
             c={activeTab === "sessions" ? undefined : "dimmed"}
@@ -144,7 +142,6 @@ const AdminUserLayout = (props: AdminUserLayoutProps) => {
             Sessions
           </ActionButton>
           <ActionButton
-            variant="subtle"
             href={settingsPath}
             leftSection={<IconSettings size={16} />}
             c={activeTab === "settings" ? undefined : "dimmed"}

package/src/admin/components/{AdminUserSettings.tsx → users/AdminUserSettings.tsx}

@@ -9,7 +9,7 @@ import {
 } from "@tabler/icons-react";
 import type { UserController, UserEntity } from "alepha/api/users";
 import { useEffect, useState } from "react";
-import type { AdminRouter } from "../AdminRouter.ts";
+import type { AdminRouter } from "../../AdminRouter.ts";
 
 export interface AdminUserSettingsProps {
   userRealmName?: string;

package/src/admin/components/{AdminUsers.tsx → users/AdminUsers.tsx}

@@ -1,11 +1,11 @@
 import { useClient, useRouter } from "@alepha/react";
 import { useI18n } from "@alepha/react/i18n";
-import { ActionButton, DataTable, Text } from "@alepha/ui";
+import { DataTable, Text } from "@alepha/ui";
 import { Badge, Flex, Group } from "@mantine/core";
-import { IconCheck, IconPlus, IconX } from "@tabler/icons-react";
+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 { AdminRouter } from "../AdminRouter.ts";
+import type { AdminRouter } from "../../AdminRouter.ts";
 
 export interface AdminUsersProps {
   userRealmName?: string;
@@ -28,17 +28,15 @@ const AdminUsers = (props: AdminUsersProps) => {
 
   return (
     <Flex flex={1} direction="column">
-      <Flex justify="flex-end" p="md" pb={0}>
-        <ActionButton
-          leftSection={<IconPlus size={16} />}
-          href={router.path("adminUserCreate")}
-        >
-          Create User
-        </ActionButton>
-      </Flex>
-
       <DataTable<UserEntity, typeof filters>
         submitOnInit
+        actions={[
+          {
+            icon: IconUsersPlus,
+            href: router.path("adminUserCreate"),
+            label: "Create User",
+          },
+        ]}
         defaultSize={10}
         typeFormProps={{
           skipSubmitButton: true,

package/src/admin/index.ts

@@ -2,26 +2,35 @@ import { AlephaUI } from "@alepha/ui";
 import { AlephaUIAuth } from "@alepha/ui/auth";
 import { $module } from "alepha";
 import { AdminRouter } from "./AdminRouter.ts";
-import { AdminSidebar } from "./AdminSidebar.ts";
 import { MainRouter } from "./MainRouter.ts";
 
 // ---------------------------------------------------------------------------------------------------------------------
 
 export { AdminRouter } from "./AdminRouter.ts";
-export { AdminSidebar } from "./AdminSidebar.ts";
-export { default as AdminFiles } from "./components/AdminFiles.tsx";
-export { default as AdminJobs } from "./components/AdminJobs.tsx";
+// Layout
 export { default as AdminLayout } from "./components/AdminLayout.tsx";
-export { default as AdminNotifications } from "./components/AdminNotifications.tsx";
-export { default as AdminParameters } from "./components/AdminParameters.tsx";
-export { default as AdminSessions } from "./components/AdminSessions.tsx";
-export { default as AdminUserCreate } from "./components/AdminUserCreate.tsx";
-export { default as AdminUserDetails } from "./components/AdminUserDetails.tsx";
-export { default as AdminUserLayout } from "./components/AdminUserLayout.tsx";
-export { default as AdminUserSessions } from "./components/AdminUserSessions.tsx";
-export { default as AdminUserSettings } from "./components/AdminUserSettings.tsx";
-export { default as AdminUsers } from "./components/AdminUsers.tsx";
-export { default as AdminVerifications } from "./components/AdminVerifications.tsx";
+// Audits
+export { default as AdminAudits } from "./components/audits/AdminAudits.tsx";
+// Files
+export { default as AdminFiles } from "./components/files/AdminFiles.tsx";
+// Jobs
+export { default as AdminJobs } from "./components/jobs/AdminJobs.tsx";
+// Notifications
+export { default as AdminNotifications } from "./components/notifications/AdminNotifications.tsx";
+// Parameters
+export { default as AdminParameters } from "./components/parameters/AdminParameters.tsx";
+// Sessions
+export { default as AdminSessions } from "./components/sessions/AdminSessions.tsx";
+// Users
+export { default as AdminUserAudits } from "./components/users/AdminUserAudits.tsx";
+export { default as AdminUserCreate } from "./components/users/AdminUserCreate.tsx";
+export { default as AdminUserDetails } from "./components/users/AdminUserDetails.tsx";
+export { default as AdminUserLayout } from "./components/users/AdminUserLayout.tsx";
+export { default as AdminUserSessions } from "./components/users/AdminUserSessions.tsx";
+export { default as AdminUserSettings } from "./components/users/AdminUserSettings.tsx";
+export { default as AdminUsers } from "./components/users/AdminUsers.tsx";
+// Verifications
+export { default as AdminVerifications } from "./components/verifications/AdminVerifications.tsx";
 export { MainRouter } from "./MainRouter.ts";
 
 // ---------------------------------------------------------------------------------------------------------------------
@@ -33,9 +42,8 @@ export { MainRouter } from "./MainRouter.ts";
  */
 export const AlephaUIAdmin = $module({
   name: "alepha.ui.admin",
-  services: [AlephaUI, AlephaUIAuth, AdminRouter, MainRouter, AdminSidebar],
+  services: [AlephaUI, AlephaUIAuth, AdminRouter, MainRouter],
   register: (alepha) => {
     alepha.with(AdminRouter);
-    alepha.with(AdminSidebar);
   },
 });

package/src/auth/AuthRouter.ts

@@ -11,6 +11,16 @@ import { $inject, AlephaError, t } from "alepha";
 import type { UserRealmController } from "alepha/api/users";
 import { $client } from "alepha/server/links";
 
+/**
+ * Schema for realm query parameter used across auth pages.
+ */
+const realmQuerySchema = t.object({
+  r: t.optional(t.string({ description: "Redirect URL after authentication" })),
+  realm: t.optional(
+    t.string({ description: "User realm name for multi-tenant auth" }),
+  ),
+});
+
 export class AuthRouter {
   protected readonly userRealmClient = $client<UserRealmController>();
   protected readonly auth = $inject(ReactAuth);
@@ -33,15 +43,13 @@ export class AuthRouter {
     description: "Sign in to your account",
     path: "/login",
     schema: {
-      query: t.object({
-        r: t.optional(t.string()),
-      }),
+      query: realmQuerySchema,
     },
     can: () => !this.auth.user,
     lazy: () => import("./components/Login.tsx"),
-    resolve: async () => {
+    resolve: async ({ query }) => {
       return {
-        realmConfig: await this.loadRealmConfig(),
+        realmConfig: await this.loadRealmConfig(query.realm),
       };
     },
   });
@@ -52,15 +60,13 @@ export class AuthRouter {
     description: "Create a new account",
     path: "/register",
     schema: {
-      query: t.object({
-        r: t.optional(t.string()),
-      }),
+      query: realmQuerySchema,
     },
     can: () => !this.auth.user,
     lazy: () => import("./components/Register.tsx"),
-    resolve: async () => {
+    resolve: async ({ query }) => {
       return {
-        realmConfig: await this.loadRealmConfig(),
+        realmConfig: await this.loadRealmConfig(query.realm),
       };
     },
   });
@@ -71,15 +77,13 @@ export class AuthRouter {
     description: "Reset your account password",
     path: "/reset-password",
     schema: {
-      query: t.object({
-        r: t.optional(t.string()),
-      }),
+      query: realmQuerySchema,
     },
     can: () => !this.auth.user,
     lazy: () => import("./components/ResetPassword.tsx"),
-    resolve: async () => {
+    resolve: async ({ query }) => {
       return {
-        realmConfig: await this.loadRealmConfig(),
+        realmConfig: await this.loadRealmConfig(query.realm),
       };
     },
   });
@@ -111,9 +115,11 @@ export class AuthRouter {
     },
   });
 
-  protected async loadRealmConfig() {
+  protected async loadRealmConfig(userRealmName?: string) {
     try {
-      return await this.userRealmClient.getRealmConfig();
+      return await this.userRealmClient.getRealmConfig({
+        query: { userRealmName },
+      });
     } catch (e) {
       if (e instanceof AlephaError) {
         throw new AlephaError(

package/src/auth/components/AuthLayout.tsx

@@ -1,11 +1,14 @@
 import { NestedView } from "@alepha/react";
+import { AlephaMantineProvider } from "@alepha/ui";
 import { Flex } from "@mantine/core";
 
 const AuthLayout = () => {
   return (
-    <Flex flex={1} align={"center"} h={"100vh"} justify={"center"}>
-      <NestedView />
-    </Flex>
+    <AlephaMantineProvider omnibar={false}>
+      <Flex flex={1} align={"center"} h={"100vh"} justify={"center"}>
+        <NestedView />
+      </Flex>
+    </AlephaMantineProvider>
   );
 };
 

package/src/auth/components/Login.tsx

@@ -3,9 +3,9 @@ import { useAuth } from "@alepha/react/auth";
 import { FormValidationError, useForm } from "@alepha/react/form";
 import { useI18n } from "@alepha/react/i18n";
 import { ActionButton, Control, capitalize } from "@alepha/ui";
-import { Card, Flex, Group, Stack, Text } from "@mantine/core";
+import { Card, Flex, Group, Image, Stack, Text, Title } from "@mantine/core";
 import { IconLock, IconUser } from "@tabler/icons-react";
-import { t } from "alepha";
+import { AlephaError, t } from "alepha";
 import type { UserRealmConfig } from "alepha/api/users";
 import { HttpError } from "alepha/server";
 import { useMemo } from "react";
@@ -24,7 +24,7 @@ const Login = (props: LoginProps) => {
   const { tr } = useI18n<AuthI18n, "en">();
   const redirect = router.query.r || "/";
 
-  const hasUsernamePassword = props.realmConfig.authenticationMethods.find(
+  const credentialsProvider = props.realmConfig.authenticationMethods.find(
     (it) => it.type === "CREDENTIALS",
   );
 
@@ -68,10 +68,15 @@ const Login = (props: LoginProps) => {
       }),
     }),
     handler: async (data) => {
+      if (!credentialsProvider) {
+        throw new AlephaError("Credentials provider not configured");
+      }
+
       try {
-        await auth.login("credentials", {
+        await auth.login(credentialsProvider.name, {
           username: data.identifier,
           password: data.password,
+          realm: props.realmConfig.realmName,
         });
         await router.go(router.query.r || "/");
       } catch (error) {
@@ -89,12 +94,59 @@ const Login = (props: LoginProps) => {
     },
   });
 
+  const getAutoCompleteType = () => {
+    if (loginMethods.includes("email")) {
+      return "email";
+    }
+    if (loginMethods.includes("username")) {
+      return "username";
+    }
+    if (loginMethods.includes("phone")) {
+      return "tel";
+    }
+    return "username";
+  };
+
+  const externalLoginMethods = props.realmConfig.authenticationMethods.filter(
+    (method) => method.type !== "CREDENTIALS",
+  );
+
+  const showOrDivider = credentialsProvider && externalLoginMethods.length > 0;
+
   return (
     <Flex flex={1} justify={"center"} align={"center"}>
       <Stack gap={"sm"} w={360}>
         <Card withBorder p={"lg"} bg={"var(--alepha-elevated)"}>
           <Stack gap={"md"}>
-            {hasUsernamePassword && (
+            {/* Realm branding */}
+            {(settings.logoUrl ||
+              settings.displayName ||
+              settings.description) && (
+              <Stack gap={"xs"} align="center" mb="xs">
+                {settings.logoUrl && (
+                  <Image
+                    src={settings.logoUrl}
+                    alt={settings.displayName || props.realmConfig.realmName}
+                    h={48}
+                    w="auto"
+                    fit="contain"
+                  />
+                )}
+                {settings.displayName && (
+                  <Title order={4} ta="center">
+                    {settings.displayName}
+                  </Title>
+                )}
+                {settings.description && (
+                  <Text size="sm" c="dimmed" ta="center">
+                    {settings.description}
+                  </Text>
+                )}
+              </Stack>
+            )}
+
+            {/* Credentials login form */}
+            {credentialsProvider && (
               <>
                 <form {...form.props}>
                   <Stack flex={1} gap={"md"}>
@@ -103,9 +155,7 @@ const Login = (props: LoginProps) => {
                       input={form.input.identifier}
                       icon={IconUser}
                       text={{
-                        autoComplete: loginMethods.includes("email")
-                          ? "email"
-                          : "username",
+                        autoComplete: getAutoCompleteType(),
                       }}
                     />
                     <Control
@@ -116,56 +166,68 @@ const Login = (props: LoginProps) => {
                         autoComplete: "current-password",
                       }}
                     />
-                    <ActionButton color={"blue"} variant={"filled"} form={form}>
+                    <ActionButton variant={"filled"} form={form}>
                       {tr("loginSignIn")}
                     </ActionButton>
                   </Stack>
                 </form>
-                <Stack gap="xs">
-                  {settings.resetPasswordAllowed && (
-                    <Text size="sm" ta="center">
-                      <ActionButton
-                        href={router.path("resetPassword")}
-                        anchorProps={{ inherit: true }}
-                      >
-                        {tr("loginForgotPassword")}
-                      </ActionButton>
-                    </Text>
-                  )}
-                  <Group align="center" justify="center" gap={"md"}>
-                    <Flex flex={1} h={"1px"} bg={"var(--alepha-text-muted)"} />
-                    <Text size="xs">{tr("loginOr")}</Text>
-                    <Flex flex={1} h={"1px"} bg={"var(--alepha-text-muted)"} />
-                  </Group>
-                </Stack>
-              </>
-            )}
-            <Stack gap={"sm"}>
-              {props.realmConfig.authenticationMethods.map(
-                (method) =>
-                  method.type !== "CREDENTIALS" && (
+                {settings.resetPasswordAllowed && (
+                  <Text size="sm" ta="center">
                     <ActionButton
-                      variant={"default"}
-                      key={method.type}
-                      leftSection={leftSection(method.name.toLowerCase())}
-                      onClick={() =>
-                        auth.login(method.name, {
-                          redirect,
-                        })
-                      }
-                    >
-                      {tr("loginContinueWith", {
-                        args: [capitalize(method.name)],
+                      href={router.path("resetPassword", {
+                        query: { realm: props.realmConfig.realmName },
                       })}
+                      anchorProps={{ inherit: true }}
+                    >
+                      {tr("loginForgotPassword")}
                     </ActionButton>
-                  ),
-              )}
-            </Stack>
+                  </Text>
+                )}
+              </>
+            )}
+
+            {/* OR divider - only when both credentials AND external methods exist */}
+            {showOrDivider && (
+              <Group align="center" justify="center" gap={"md"}>
+                <Flex flex={1} h={"1px"} bg={"var(--alepha-border)"} />
+                <Text size="xs" c={"dimmed"}>
+                  {tr("loginOr")}
+                </Text>
+                <Flex flex={1} h={"1px"} bg={"var(--alepha-border)"} />
+              </Group>
+            )}
+
+            {/* External login methods */}
+            {externalLoginMethods.length > 0 && (
+              <Stack gap={"sm"}>
+                {externalLoginMethods.map((method) => (
+                  <ActionButton
+                    variant={"default"}
+                    key={method.type}
+                    leftSection={leftSection(method.name.toLowerCase())}
+                    onClick={() =>
+                      auth.login(method.name, {
+                        redirect,
+                        realm: props.realmConfig.realmName,
+                      })
+                    }
+                  >
+                    {tr("loginContinueWith", {
+                      args: [capitalize(method.name)],
+                    })}
+                  </ActionButton>
+                ))}
+              </Stack>
+            )}
+
+            {/* Registration link */}
             {settings.registrationAllowed && (
               <Text size="sm" ta="center">
                 {tr("loginNoAccount")}{" "}
                 <ActionButton
-                  href={router.path("register")}
+                  href={router.path("register", {
+                    query: { realm: props.realmConfig.realmName },
+                  })}
                   anchorProps={{ inherit: true }}
                 >
                   {tr("loginSignUp")}