@alepha/ui 0.13.6 → 0.13.8

package/src/auth/components/Register.tsx

@@ -3,7 +3,17 @@ import { useAuth } from "@alepha/react/auth";
 import { useForm } from "@alepha/react/form";
 import { useI18n } from "@alepha/react/i18n";
 import { ActionButton, Control, capitalize } from "@alepha/ui";
-import { Alert, Card, Flex, Group, PinInput, Stack, Text } from "@mantine/core";
+import {
+  Alert,
+  Card,
+  Flex,
+  Group,
+  Image,
+  PinInput,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
 import {
   IconAlertCircle,
   IconLock,
@@ -57,7 +67,7 @@ const Register = (props: RegisterProps) => {
   );
   const [isSubmitting, setIsSubmitting] = useState(false);
 
-  const hasUsernamePassword = props.realmConfig.authenticationMethods.find(
+  const credentialsProvider = props.realmConfig.authenticationMethods.find(
     (it) => it.type === "CREDENTIALS",
   );
 
@@ -97,6 +107,7 @@ const Register = (props: RegisterProps) => {
 
       // Phase 1: Create registration intent
       const intent = await userCtrl.createRegistrationIntent({
+        query: { userRealmName: props.realmConfig.realmName },
         body: {
           username: data.username,
           email: data.email,
@@ -130,10 +141,11 @@ const Register = (props: RegisterProps) => {
       });
 
       // Auto-login after registration
-      if (identifier) {
-        await auth.login("credentials", {
+      if (identifier && credentialsProvider) {
+        await auth.login(credentialsProvider.name, {
           username: identifier,
           password: data.password,
+          realm: props.realmConfig.realmName,
         });
       }
 
@@ -162,10 +174,11 @@ const Register = (props: RegisterProps) => {
       });
 
       // Auto-login after registration
-      if (registrationState.credentials) {
-        await auth.login("credentials", {
+      if (registrationState.credentials && credentialsProvider) {
+        await auth.login(credentialsProvider.name, {
           username: registrationState.credentials.identifier,
           password: registrationState.credentials.password,
+          realm: props.realmConfig.realmName,
         });
       }
 
@@ -280,12 +293,46 @@ const Register = (props: RegisterProps) => {
     );
   }
 
+  // External login methods
+  const externalMethods = props.realmConfig.authenticationMethods.filter(
+    (method) => method.type !== "CREDENTIALS",
+  );
+
+  const showOrDivider = credentialsProvider && externalMethods.length > 0;
+
   // Registration form phase UI
   return (
     <Flex flex={1} justify={"center"} align={"center"}>
       <Stack gap={"sm"} w={360}>
         <Card withBorder p={"lg"} bg={"var(--alepha-elevated)"}>
           <Stack gap={"md"}>
+            {/* 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>
+            )}
+
             {!isRegistrationAllowed ? (
               <>
                 <Alert
@@ -295,108 +342,125 @@ const Register = (props: RegisterProps) => {
                 >
                   <Text size="sm">{tr("registerDisabled")}</Text>
                 </Alert>
-                <ActionButton href={router.path("login")}>
+                <ActionButton
+                  href={router.path("login", {
+                    query: { realm: props.realmConfig.realmName },
+                  })}
+                >
                   {tr("registerBackToSignIn")}
                 </ActionButton>
               </>
-            ) : hasUsernamePassword ? (
+            ) : (
               <>
-                <form {...form.props}>
-                  <Stack flex={1} gap={"md"}>
-                    {settings.usernameEnabled !== false &&
-                      form.input.username && (
+                {/* Credentials registration form */}
+                {credentialsProvider && (
+                  <form {...form.props}>
+                    <Stack flex={1} gap={"md"}>
+                      {settings.usernameEnabled !== false &&
+                        form.input.username && (
+                          <Control
+                            title={tr("registerUsername")}
+                            input={form.input.username}
+                            icon={<IconUser />}
+                            text={{
+                              autoComplete: "username",
+                            }}
+                          />
+                        )}
+                      {settings.emailEnabled !== false && form.input.email && (
                         <Control
-                          title={tr("registerUsername")}
-                          input={form.input.username}
-                          icon={<IconUser />}
+                          title={tr("registerEmail")}
+                          input={form.input.email}
+                          icon={<IconMail />}
                           text={{
-                            autoComplete: "username",
+                            autoComplete: "email",
                           }}
                         />
                       )}
-                    {settings.emailEnabled !== false && form.input.email && (
+                      {settings.phoneEnabled === true &&
+                        form.input.phoneNumber && (
+                          <Control
+                            title={tr("registerPhone")}
+                            input={form.input.phoneNumber}
+                            icon={<IconPhone />}
+                            text={{
+                              autoComplete: "tel",
+                            }}
+                          />
+                        )}
                       <Control
-                        title={tr("registerEmail")}
-                        input={form.input.email}
-                        icon={<IconMail />}
-                        text={{
-                          autoComplete: "email",
+                        title={tr("registerPassword")}
+                        input={form.input.password}
+                        icon={<IconLock />}
+                        password={{
+                          autoComplete: "new-password",
                         }}
                       />
-                    )}
-                    {settings.phoneEnabled === true &&
-                      form.input.phoneNumber && (
-                        <Control
-                          title={tr("registerPhone")}
-                          input={form.input.phoneNumber}
-                          icon={<IconPhone />}
-                          text={{
-                            autoComplete: "tel",
-                          }}
-                        />
-                      )}
-                    <Control
-                      title={tr("registerPassword")}
-                      input={form.input.password}
-                      icon={<IconLock />}
-                      password={{
-                        autoComplete: "new-password",
-                      }}
-                    />
-                    <Control
-                      title={tr("registerConfirmPassword")}
-                      input={form.input.confirmPassword}
-                      icon={<IconLock />}
-                      password={{
-                        autoComplete: "new-password",
-                      }}
-                    />
-                    <ActionButton form={form} color={"blue"} variant={"filled"}>
-                      {tr("registerCreateAccount")}
-                    </ActionButton>
+                      <Control
+                        title={tr("registerConfirmPassword")}
+                        input={form.input.confirmPassword}
+                        icon={<IconLock />}
+                        password={{
+                          autoComplete: "new-password",
+                        }}
+                      />
+                      <ActionButton
+                        form={form}
+                        color={"blue"}
+                        variant={"filled"}
+                      >
+                        {tr("registerCreateAccount")}
+                      </ActionButton>
+                    </Stack>
+                  </form>
+                )}
+
+                {/* 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("registerOr")}
+                    </Text>
+                    <Flex flex={1} h={"1px"} bg={"var(--alepha-border)"} />
+                  </Group>
+                )}
+
+                {/* External login methods */}
+                {externalMethods.length > 0 && (
+                  <Stack gap={"sm"}>
+                    {externalMethods.map((method) => (
+                      <ActionButton
+                        variant={"default"}
+                        key={method.type}
+                        leftSection={leftSection(method.name.toLowerCase())}
+                        onClick={() =>
+                          auth.login(method.name, {
+                            redirect,
+                            realm: props.realmConfig.realmName,
+                          })
+                        }
+                      >
+                        {tr("registerContinueWith", {
+                          args: [capitalize(method.name)],
+                        })}
+                      </ActionButton>
+                    ))}
                   </Stack>
-                </form>
-                <Group align="center" justify="center" gap={"md"}>
-                  <Flex flex={1} h={"1px"} bg={"var(--alepha-text-muted)"} />
-                  <Text size="xs">{tr("registerOr")}</Text>
-                  <Flex flex={1} h={"1px"} bg={"var(--alepha-text-muted)"} />
-                </Group>
-              </>
-            ) : null}
-            {isRegistrationAllowed && (
-              <>
-                <Stack gap={"sm"}>
-                  {props.realmConfig.authenticationMethods.map(
-                    (method) =>
-                      method.type !== "CREDENTIALS" && (
-                        <ActionButton
-                          variant={"default"}
-                          key={method.type}
-                          leftSection={leftSection(method.name.toLowerCase())}
-                          onClick={() =>
-                            auth.login(method.name, {
-                              redirect,
-                            })
-                          }
-                        >
-                          {tr("registerContinueWith", {
-                            args: [capitalize(method.name)],
-                          })}
-                        </ActionButton>
-                      ),
-                  )}
-                </Stack>
-                {props.realmConfig.authenticationMethods.length > 0 && (
-                  <Text size="sm" ta="center">
-                    {tr("registerHaveAccount")}{" "}
-                    <ActionButton
-                      href={router.path("login")}
-                      anchorProps={{ inherit: true }}
-                    >
-                      {tr("registerSignIn")}
-                    </ActionButton>
-                  </Text>
                 )}
+
+                {/* Sign in link */}
+                <Text size="sm" ta="center">
+                  {tr("registerHaveAccount")}{" "}
+                  <ActionButton
+                    href={router.path("login", {
+                      query: { realm: props.realmConfig.realmName },
+                    })}
+                    anchorProps={{ inherit: true }}
+                  >
+                    {tr("registerSignIn")}
+                  </ActionButton>
+                </Text>
               </>
             )}
           </Stack>

package/src/auth/components/ResetPassword.tsx

@@ -2,7 +2,16 @@ import { useClient, useRouter } from "@alepha/react";
 import { useForm } from "@alepha/react/form";
 import { useI18n } from "@alepha/react/i18n";
 import { ActionButton, Control } from "@alepha/ui";
-import { Alert, Card, Flex, PinInput, Stack, Text } from "@mantine/core";
+import {
+  Alert,
+  Card,
+  Flex,
+  Image,
+  PinInput,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
 import {
   IconAlertCircle,
   IconCheck,
@@ -43,8 +52,8 @@ const ResetPassword = (props: ResetPasswordProps) => {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const redirect = router.query.r || "/";
 
-  const isResetPasswordAllowed =
-    props.realmConfig.settings?.resetPasswordAllowed !== false;
+  const settings = props.realmConfig.settings;
+  const isResetPasswordAllowed = settings?.resetPasswordAllowed !== false;
 
   // Phase 1: Request password reset intent
   const emailForm = useForm({
@@ -52,6 +61,7 @@ const ResetPassword = (props: ResetPasswordProps) => {
     handler: async (data) => {
       setError(null);
       const intent = await userCtrl.createPasswordResetIntent({
+        query: { userRealmName: props.realmConfig.realmName },
         body: { email: data.email },
       });
 
@@ -111,6 +121,7 @@ const ResetPassword = (props: ResetPasswordProps) => {
 
     try {
       const intent = await userCtrl.createPasswordResetIntent({
+        query: { userRealmName: props.realmConfig.realmName },
         body: { email: resetState.email },
       });
 
@@ -130,6 +141,33 @@ const ResetPassword = (props: ResetPasswordProps) => {
       <Stack gap={"sm"} w={360}>
         <Card withBorder p={"lg"} bg={"var(--alepha-elevated)"}>
           <Stack gap={"md"}>
+            {/* 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>
+            )}
+
             {error && (
               <Alert variant="light" color="red" icon={<IconAlertCircle />}>
                 <Text size="sm">{error}</Text>
@@ -145,7 +183,11 @@ const ResetPassword = (props: ResetPasswordProps) => {
                 >
                   <Text size="sm">{tr("resetPasswordDisabled")}</Text>
                 </Alert>
-                <ActionButton href={router.path("login")}>
+                <ActionButton
+                  href={router.path("login", {
+                    query: { realm: props.realmConfig.realmName },
+                  })}
+                >
                   {tr("resetPasswordBackToSignIn")}
                 </ActionButton>
               </>
@@ -241,7 +283,11 @@ const ResetPassword = (props: ResetPasswordProps) => {
                 <Alert variant="light" color="green" icon={<IconCheck />}>
                   <Text size="sm">{tr("resetPasswordSuccess")}</Text>
                 </Alert>
-                <ActionButton href={router.path("login")}>
+                <ActionButton
+                  href={router.path("login", {
+                    query: { realm: props.realmConfig.realmName },
+                  })}
+                >
                   {tr("resetPasswordBackToSignIn")}
                 </ActionButton>
               </>

package/src/auth/components/buttons/UserButton.tsx

@@ -51,6 +51,8 @@ const UserButton = (props: UserButtonProps) => {
     ...buttonProps
   } = props;
 
+  buttonProps.variant ??= "subtle";
+
   const auth = useAuth<{
     username?: string;
     email?: string;

package/src/core/atoms/alephaThemeAtom.ts

@@ -0,0 +1,13 @@
+import { $atom, type Static, t } from "alepha";
+
+export const alephaThemeAtom = $atom({
+  name: "alepha.ui.theme",
+  schema: t.object({
+    index: t.integer(),
+  }),
+  default: {
+    index: 0,
+  },
+});
+
+export type CurrentAlephaTheme = Static<typeof alephaThemeAtom.schema>;

package/src/core/atoms/alephaThemeListAtom.ts

@@ -0,0 +1,10 @@
+import { $atom, t } from "alepha";
+import type { AlephaTheme } from "../interfaces/AlephaTheme.ts";
+import { defaultTheme } from "./themes/default.ts";
+import { midnightTheme } from "./themes/midnight.ts";
+
+export const alephaThemeListAtom = $atom({
+  name: "alepha.ui.themeList",
+  schema: t.array(t.json<AlephaTheme>()), // TODO: translate to proper schema
+  default: [defaultTheme, midnightTheme],
+});

package/src/core/atoms/themes/default.ts

@@ -0,0 +1,6 @@
+import type { AlephaTheme } from "../../interfaces/AlephaTheme.ts";
+
+export const defaultTheme: AlephaTheme = {
+  name: "Default",
+  description: "Default Alepha Theme",
+};

package/src/core/{themes → atoms/themes}/midnight.ts

@@ -1,10 +1,9 @@
-import type { AlephaTheme } from "../providers/ThemeProvider.ts";
+import type { AlephaTheme } from "../../interfaces/AlephaTheme.ts";
 
 export const midnightTheme: AlephaTheme = {
-  id: "midnight",
-  label: "Midnight",
+  name: "Midnight",
   description: "Clean, developer-focused design",
-  primaryColor: "gray",
+  primaryColor: "pink",
   primaryShade: { light: 7, dark: 8 },
   fontFamily:
     '-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
@@ -24,7 +23,6 @@ export const midnightTheme: AlephaTheme = {
       h6: { fontSize: "0.75rem", lineHeight: "1.5" },
     },
   },
-
   radius: {
     xs: "3px",
     sm: "6px",

package/src/core/components/buttons/ActionButton.tsx

@@ -21,16 +21,17 @@ import {
   type ThemeIconProps,
   Tooltip,
   type TooltipProps,
+  useMantineTheme,
 } from "@mantine/core";
 import { IconCheck, IconChevronRight } from "@tabler/icons-react";
 import {
   type ButtonHTMLAttributes,
   Children,
   type ComponentType,
-  isValidElement,
   type ReactNode,
 } from "react";
 import { ui } from "../../constants/ui.ts";
+import { isComponentType } from "../../helpers/isComponentType.ts";
 
 export interface ActionMenuItem {
   /**
@@ -119,7 +120,7 @@ export interface ActionCommonProps extends ButtonProps {
    * Tooltip to display on hover. Can be a string for simple tooltips
    * or a TooltipProps object for advanced configuration.
    */
-  tooltip?: string | TooltipProps;
+  tooltip?: string | number | TooltipProps;
 
   /**
    * Menu configuration. When provided, the action will display a dropdown menu.
@@ -148,7 +149,7 @@ export interface ActionCommonProps extends ButtonProps {
   /**
    * Visual intent of the action button.
    */
-  intent?: "primary" | "success" | "danger" | "warning" | "info";
+  intent?: "primary" | "success" | "danger" | "warning" | "info" | "none";
 }
 
 export type ActionProps = ActionCommonProps &
@@ -239,12 +240,36 @@ const ActionMenuItem = (props: {
 };
 
 const ActionButton = (_props: ActionProps) => {
-  const props = { variant: "subtle", ..._props };
+  const theme = useMantineTheme();
+  const props = { ..._props };
   const { tooltip, menu, icon, ...restProps } = props;
 
-  // set default color to gray (not colored)
-  restProps.color ??= "gray";
-  restProps.c ??= "var(--mantine-color-text)";
+  if (props.variant === "subtle") {
+    restProps.c ??= "var(--mantine-color-text)";
+    restProps.color ??= "gray";
+  }
+
+  if (props.intent) {
+    if (props.intent === "none") {
+      restProps.c ??= "var(--mantine-color-text)";
+      restProps.color ??= "gray";
+    } else if (props.intent === "primary") {
+      restProps.c ??= "white";
+      restProps.color ??= theme.primaryColor;
+    } else if (props.intent === "success") {
+      restProps.c ??= "white";
+      restProps.color ??= "green";
+    } else if (props.intent === "danger") {
+      restProps.c ??= "white";
+      restProps.color ??= "red";
+    } else if (props.intent === "warning") {
+      restProps.c ??= "var(--mantine-color-text)";
+      restProps.color ??= "yellow";
+    } else if (props.intent === "info") {
+      restProps.c ??= "white";
+      restProps.color ??= "blue";
+    }
+  }
 
   if (props.icon) {
     const icon = isComponentType(props.icon) ? (
@@ -379,7 +404,7 @@ const ActionButton = (_props: ActionProps) => {
       openDelay: 1000,
     };
     const tooltipProps: TooltipProps =
-      typeof tooltip === "string"
+      typeof tooltip === "string" || typeof tooltip === "number"
         ? {
             ...defaultTooltipProps,
             label: tooltip,
@@ -599,21 +624,3 @@ const ActionHrefButton = (props: ActionNavigationButtonProps) => {
 };
 
 // ---------------------------------------------------------------------------------------------------------------------
-
-export function isComponentType(param: any): param is ComponentType<any> {
-  if (isValidElement(param)) return false;
-  return (
-    typeof param === "function" ||
-    (typeof param === "object" && param !== null && "$$typeof" in param)
-  );
-}
-
-export const renderIcon = (icon: ReactNode | ComponentType): ReactNode => {
-  if (!icon) return null;
-  if (isValidElement(icon)) return icon;
-  if (isComponentType(icon)) {
-    const IconComponent = icon;
-    return <IconComponent size={ui.sizes.icon.md} />;
-  }
-  return icon as ReactNode;
-};

package/src/core/components/buttons/DarkModeButton.tsx

@@ -77,7 +77,6 @@ const DarkModeButton = (props: DarkModeButtonProps) => {
       size={props.size ?? "sm"}
       aria-label="Toggle color scheme"
       px={"xs"}
-      c={colorScheme !== "default" ? undefined : "transparent"}
       fullWidth={props.fullWidth ?? false}
       icon={
         colorScheme === "dark"

package/src/core/components/buttons/ThemeButton.tsx

@@ -1,7 +1,7 @@
-import { useInject } from "@alepha/react";
+import { useStore } from "@alepha/react";
 import { IconPalette } from "@tabler/icons-react";
+import { alephaThemeListAtom } from "../../atoms/alephaThemeListAtom.ts";
 import { useTheme } from "../../hooks/useTheme.ts";
-import { ThemeProvider } from "../../providers/ThemeProvider.ts";
 import ActionButton, { type ActionProps } from "./ActionButton.tsx";
 
 export interface ThemeButtonProps {
@@ -10,17 +10,20 @@ export interface ThemeButtonProps {
 
 const ThemeButton = (props: ThemeButtonProps) => {
   const [theme, setTheme] = useTheme();
-  const themes = useInject(ThemeProvider).themes;
+  const themeList = useStore(alephaThemeListAtom)[0];
 
   return (
     <ActionButton
       variant="subtle"
       icon={IconPalette}
       menu={{
-        items: themes.map((it) => ({
-          label: it.label,
-          onClick: () => setTheme(it),
-          active: theme.id === it.id,
+        items: themeList.map((it, index) => ({
+          label: it.name,
+          onClick: () =>
+            setTheme({
+              index,
+            }),
+          active: theme.name === it.name,
         })),
       }}
       {...props.actionProps}