@alepha/ui 0.18.2 → 0.19.0

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

@@ -1,47 +1,19 @@
-import { Flex, Text, useDialog, useToast } from "@alepha/ui";
-import { Loader } from "@mantine/core";
+import { Flex, useDialog, useToast } from "@alepha/ui";
 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 {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useState,
-} from "react";
+import { useAlepha, useClient, useStore } from "alepha/react";
+import { NestedView, useRouter } from "alepha/react/router";
+import { useCallback, useEffect } from "react";
 import type { AdminRouter } from "../../AdminRouter.ts";
+import { adminUserAtom } from "../../atoms/adminUserAtom.ts";
 import AdminResourceHeader from "../shared/AdminResourceHeader.tsx";
 import AdminResourceTabs from "../shared/AdminResourceTabs.tsx";
 
 export interface AdminUserLayoutProps {
-  userRealmName?: string;
-}
-
-interface UserContextValue {
   user: UserEntity;
-  reload: () => void;
+  userRealmName?: string;
 }
 
-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()
@@ -49,63 +21,55 @@ const displayName = (u: UserEntity) =>
 
 const AdminUserLayout = (props: AdminUserLayoutProps) => {
   const router = useRouter<AdminRouter>();
-  const state = useRouterState();
   const client = useClient<AdminUserController>();
+  const alepha = useAlepha();
   const dialog = useDialog();
   const toast = useToast();
-  const userId = state.params.userId as string;
+  const [user] = useStore(adminUserAtom);
 
-  const [user, setUser] = useState<UserEntity | null>(null);
-  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    alepha.store.set(adminUserAtom, props.user);
+  }, [props.user]);
 
+  const currentUser = user ?? props.user;
+  const userId = currentUser.id;
   const realmQuery = { userRealmName: props.userRealmName };
 
-  const loadUser = useCallback(async () => {
-    setLoading(true);
-    try {
-      const data = await client.getUser({
-        params: { id: userId },
-        query: realmQuery,
-      });
-      setUser(data);
-    } finally {
-      setLoading(false);
-    }
+  const reload = useCallback(async () => {
+    const data = await client.getUser({
+      params: { id: userId },
+      query: realmQuery,
+    });
+    alepha.store.set(adminUserAtom, data);
   }, [userId, client]);
 
-  useEffect(() => {
-    loadUser();
-  }, [loadUser]);
-
   const handleToggleEnabled = async () => {
-    if (!user) return;
-    const action = user.enabled ? "disable" : "enable";
+    const action = currentUser.enabled ? "disable" : "enable";
     const confirmed = await dialog.confirm({
-      title: `${user.enabled ? "Disable" : "Enable"} User`,
-      message: `Are you sure you want to ${action} ${displayName(user)}?`,
+      title: `${currentUser.enabled ? "Disable" : "Enable"} User`,
+      message: `Are you sure you want to ${action} ${displayName(currentUser)}?`,
     });
     if (confirmed) {
       const updated = await client.updateUser({
-        params: { id: user.id },
+        params: { id: currentUser.id },
         query: realmQuery,
-        body: { enabled: !user.enabled },
+        body: { enabled: !currentUser.enabled },
       });
-      setUser(updated);
+      alepha.store.set(adminUserAtom, updated);
       toast.success({ title: `User ${action}d` });
     }
   };
 
   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.`,
+      message: `Are you sure you want to delete ${displayName(currentUser)}? This cannot be undone.`,
       confirmColor: "red",
       confirmLabel: "Delete",
     });
     if (confirmed) {
       await client.deleteUser({
-        params: { id: user.id },
+        params: { id: currentUser.id },
         query: realmQuery,
       });
       toast.success({ title: "User deleted" });
@@ -113,71 +77,64 @@ const AdminUserLayout = (props: AdminUserLayoutProps) => {
     }
   };
 
-  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 (
-    <UserContext.Provider value={{ user, reload: loadUser }}>
-      <Flex flex={1} direction="column" gap="lg" p="md">
-        <AdminResourceHeader
-          backHref={router.path("adminUsers")}
-          backLabel="Users"
-          title={displayName(user)}
-          subtitle={user.email || user.username}
-          status={{
-            label: user.enabled ? "Active" : "Disabled",
-            color: user.enabled ? "green" : "gray",
-          }}
-          menuActions={[
-            {
-              label: user.enabled ? "Disable" : "Enable",
-              icon: user.enabled ? IconBan : IconShieldCheck,
-              onClick: handleToggleEnabled,
-            },
-            {
-              label: "Delete",
-              icon: IconTrash,
-              color: "red",
-              onClick: handleDelete,
-            },
-          ]}
-        />
-
-        <AdminResourceTabs
-          tabs={[
-            {
-              value: "profile",
-              label: "Profile",
-              href: router.path("adminUserProfile", {
-                params: { userId },
-              }),
-            },
-            {
-              value: "sessions",
-              label: "Sessions",
-              href: router.path("adminUserSessions", {
-                params: { userId },
-              }),
-            },
-          ]}
-        />
-
-        <NestedView />
-      </Flex>
-    </UserContext.Provider>
+    <Flex
+      flex={1}
+      direction="column"
+      gap="lg"
+      p="md"
+      m="md"
+      style={{
+        backgroundColor: "var(--mantine-color-body)",
+        borderRadius: "var(--mantine-radius-md)",
+        border: "1px solid var(--mantine-color-default-border)",
+      }}
+    >
+      <AdminResourceHeader
+        backHref={router.path("adminUsers")}
+        backLabel="Users"
+        title={displayName(currentUser)}
+        subtitle={currentUser.email || currentUser.username}
+        status={{
+          label: currentUser.enabled ? "Active" : "Disabled",
+          color: currentUser.enabled ? "green" : "gray",
+        }}
+        menuActions={[
+          {
+            label: currentUser.enabled ? "Disable" : "Enable",
+            icon: currentUser.enabled ? IconBan : IconShieldCheck,
+            onClick: handleToggleEnabled,
+          },
+          {
+            label: "Delete",
+            icon: IconTrash,
+            color: "red",
+            onClick: handleDelete,
+          },
+        ]}
+      />
+
+      <AdminResourceTabs
+        tabs={[
+          {
+            value: "profile",
+            label: "Profile",
+            href: router.path("adminUserProfile", {
+              params: { userId },
+            }),
+          },
+          {
+            value: "sessions",
+            label: "Sessions",
+            href: router.path("adminUserSessions", {
+              params: { userId },
+            }),
+          },
+        ]}
+      />
+
+      <NestedView />
+    </Flex>
   );
 };
 

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

@@ -1,12 +1,15 @@
 import { DetailList, Flex } from "@alepha/ui";
 import { Badge } from "@mantine/core";
+import { useStore } from "alepha/react";
 import { useI18n } from "alepha/react/i18n";
-import { useUser } from "./AdminUserLayout.tsx";
+import { adminUserAtom } from "../../atoms/adminUserAtom.ts";
 
 const AdminUserProfile = () => {
-  const { user } = useUser();
+  const [user] = useStore(adminUserAtom);
   const { l } = useI18n();
 
+  if (!user) return null;
+
   return (
     <DetailList
       items={[

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

@@ -152,7 +152,7 @@ const AdminUsers = (props: AdminUsersProps) => {
                 >
                   <Flex gap={"xs"} centerY>
                     <Avatar size={"sm"} name={name} />
-                    <Flex col>
+                    <Flex col align={"start"}>
                       <Text size={"sm"} bold>
                         {name}
                       </Text>

package/src/auth/components/Login.tsx

@@ -1,6 +1,6 @@
 import { ActionButton, Control, capitalize } from "@alepha/ui";
 import { Card, Flex, Image, Text, Title } from "@mantine/core";
-import { IconLock, IconUser } from "@tabler/icons-react";
+import { IconLock, IconPhoto, IconUser } from "@tabler/icons-react";
 import { AlephaError, t } from "alepha";
 import type { RealmConfig } from "alepha/api/users";
 import { useAuth } from "alepha/react/auth";
@@ -10,17 +10,20 @@ import { useRouter } from "alepha/react/router";
 import { HttpError } from "alepha/server";
 import { useMemo } from "react";
 import type { AuthI18n } from "../AuthI18n.ts";
-import type { AuthRouter } from "../AuthRouter.ts";
 import IconGithub from "./icons/IconGithub.tsx";
 import IconGoogle from "./icons/IconGoogle.tsx";
 
 export interface LoginProps {
   realmConfig: RealmConfig;
+  registerPath?: string;
+  resetPasswordPath?: string;
+  variant?: "card" | "split";
+  image?: string;
 }
 
 const Login = (props: LoginProps) => {
   const auth = useAuth();
-  const router = useRouter<AuthRouter>();
+  const router = useRouter();
   const { tr } = useI18n<AuthI18n, "en">();
   const redirect = router.query.r || "/";
 
@@ -33,9 +36,9 @@ const Login = (props: LoginProps) => {
   // Determine what login methods are available
   const loginMethods = useMemo(() => {
     const methods = [];
-    if (settings.usernameEnabled !== false) methods.push("username");
-    if (settings.emailEnabled !== false) methods.push("email");
-    if (settings.phoneEnabled === true) methods.push("phone");
+    if (settings.username !== "none") methods.push("username");
+    if (settings.email !== "none") methods.push("email");
+    if (settings.phoneNumber !== "none") methods.push("phone");
     return methods;
   }, [settings]);
 
@@ -113,129 +116,193 @@ const Login = (props: LoginProps) => {
 
   const showOrDivider = credentialsProvider && externalLoginMethods.length > 0;
 
-  return (
-    <Flex flex={1} justify={"center"} align={"center"}>
-      <Flex direction="column" gap={"sm"} w={360}>
-        <Card withBorder p={"lg"} bg={"var(--alepha-elevated)"}>
-          <Flex direction="column" gap={"md"}>
-            {/* Realm branding */}
-            {(settings.logoUrl ||
-              settings.displayName ||
-              settings.description) && (
-              <Flex direction="column" 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>
-                )}
-              </Flex>
-            )}
+  const realmQuery = props.realmConfig.realmName
+    ? `?realm=${encodeURIComponent(props.realmConfig.realmName)}`
+    : "";
 
-            {/* Credentials login form */}
-            {credentialsProvider && (
-              <>
-                <form {...form.props}>
-                  <Flex direction="column" flex={1} gap={"md"}>
-                    <Control
-                      title={identifierTitle}
-                      input={form.input.identifier}
-                      icon={IconUser}
-                      text={{
-                        autoComplete: getAutoCompleteType(),
-                      }}
-                    />
-                    <Control
-                      title={tr("loginPassword")}
-                      input={form.input.password}
-                      icon={IconLock}
-                      password={{
-                        autoComplete: "current-password",
-                      }}
-                    />
-                    <ActionButton variant={"filled"} form={form}>
-                      {tr("loginSignIn")}
-                    </ActionButton>
-                  </Flex>
-                </form>
-                {settings.resetPasswordAllowed && (
-                  <Text size="sm" ta="center">
-                    <ActionButton
-                      href={router.path("resetPassword", {
-                        query: { realm: props.realmConfig.realmName },
-                      })}
-                      anchorProps={{ inherit: true }}
-                    >
-                      {tr("loginForgotPassword")}
-                    </ActionButton>
-                  </Text>
-                )}
-              </>
-            )}
+  const formContent = (
+    <Flex direction="column" gap={"md"}>
+      {/* Realm branding */}
+      {(settings.logoUrl || settings.displayName || settings.description) && (
+        <Flex direction="column" 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>
+          )}
+        </Flex>
+      )}
 
-            {/* OR divider - only when both credentials AND external methods exist */}
-            {showOrDivider && (
-              <Flex 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)"} />
-              </Flex>
-            )}
+      {/* Credentials login form */}
+      {credentialsProvider && (
+        <>
+          <form {...form.props}>
+            <Flex direction="column" flex={1} gap={"md"}>
+              <Control
+                label={identifierTitle}
+                input={form.input.identifier}
+                icon={IconUser}
+                text={{
+                  autoComplete: getAutoCompleteType(),
+                }}
+              />
+              <Control
+                label={tr("loginPassword")}
+                input={form.input.password}
+                icon={IconLock}
+                password={{
+                  autoComplete: "current-password",
+                }}
+              />
+              <ActionButton variant={"filled"} form={form}>
+                {tr("loginSignIn")}
+              </ActionButton>
+            </Flex>
+          </form>
+          {settings.resetPasswordAllowed && (
+            <Text size="sm" ta="center">
+              <ActionButton
+                href={`${props.resetPasswordPath ?? "/auth/reset-password"}${realmQuery}`}
+                anchorProps={{ inherit: true }}
+              >
+                {tr("loginForgotPassword")}
+              </ActionButton>
+            </Text>
+          )}
+        </>
+      )}
 
-            {/* External login methods */}
-            {externalLoginMethods.length > 0 && (
-              <Flex direction="column" 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>
-                ))}
-              </Flex>
-            )}
+      {/* OR divider - only when both credentials AND external methods exist */}
+      {showOrDivider && (
+        <Flex 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)"} />
+        </Flex>
+      )}
+
+      {/* External login methods */}
+      {externalLoginMethods.length > 0 && (
+        <Flex direction="column" 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>
+          ))}
+        </Flex>
+      )}
 
-            {/* Registration link */}
-            {settings.registrationAllowed && (
-              <Text size="sm" ta="center">
-                {tr("loginNoAccount")}{" "}
-                <ActionButton
-                  href={router.path("register", {
-                    query: { realm: props.realmConfig.realmName },
-                  })}
-                  anchorProps={{ inherit: true }}
+      {/* Registration link */}
+      {settings.registrationAllowed && (
+        <Text size="sm" ta="center">
+          {tr("loginNoAccount")}{" "}
+          <ActionButton
+            href={`${props.registerPath ?? "/auth/register"}${realmQuery}`}
+            anchorProps={{ inherit: true }}
+          >
+            {tr("loginSignUp")}
+          </ActionButton>
+        </Text>
+      )}
+    </Flex>
+  );
+
+  if (props.variant === "split") {
+    return (
+      <Flex flex={1} justify={"center"} align={"center"}>
+        <Card
+          withBorder
+          p={0}
+          w={720}
+          bg={"var(--alepha-elevated)"}
+          style={{ overflow: "hidden" }}
+        >
+          <Flex mih={480}>
+            {props.image ? (
+              <Flex
+                flex={1}
+                style={{
+                  backgroundImage: `url(${props.image})`,
+                  backgroundSize: "cover",
+                  backgroundPosition: "center",
+                }}
+              />
+            ) : (
+              <Flex
+                flex={1}
+                justify="center"
+                align="center"
+                bg="var(--mantine-color-gray-light)"
+                style={{
+                  borderRight: "1px solid var(--mantine-color-default-border)",
+                }}
+              >
+                <Flex
+                  justify="center"
+                  align="center"
+                  w={120}
+                  h={80}
+                  style={{
+                    border: "2px dashed var(--mantine-color-default-border)",
+                    borderRadius: "var(--mantine-radius-sm)",
+                  }}
                 >
-                  {tr("loginSignUp")}
-                </ActionButton>
-              </Text>
+                  <IconPhoto size={32} style={{ opacity: 0.3 }} />
+                </Flex>
+              </Flex>
             )}
+            <Flex
+              flex={1}
+              direction="column"
+              gap={"md"}
+              p={"xl"}
+              justify={"center"}
+            >
+              {formContent}
+              <ActionButton variant={"subtle"} href={"/"}>
+                {tr("loginCancel")}
+              </ActionButton>
+            </Flex>
           </Flex>
         </Card>
+      </Flex>
+    );
+  }
+
+  return (
+    <Flex flex={1} justify={"center"} align={"center"}>
+      <Flex direction="column" gap={"sm"} w={360}>
+        <Card withBorder p={"lg"} bg={"var(--alepha-elevated)"}>
+          {formContent}
+        </Card>
         <ActionButton variant={"subtle"} href={"/"}>
           {tr("loginCancel")}
         </ActionButton>