@alepha/ui 0.18.2 → 0.19.0

package/src/auth/components/Profile.tsx

@@ -10,6 +10,7 @@ import {
 import { useAuth } from "alepha/react/auth";
 import { useRouter } from "alepha/react/router";
 import type { AuthRouter } from "../AuthRouter.ts";
+import ProfileField from "./ProfileField.tsx";
 
 const Profile = () => {
   const auth = useAuth();
@@ -123,26 +124,4 @@ const Profile = () => {
   );
 };
 
-interface ProfileFieldProps {
-  icon: React.ReactNode;
-  label: string;
-  children: React.ReactNode;
-}
-
-const ProfileField = ({ icon, label, children }: ProfileFieldProps) => {
-  return (
-    <Flex gap="sm" align="flex-start">
-      <Flex c="dimmed" mt={2}>
-        {icon}
-      </Flex>
-      <Flex direction="column" gap={2} flex={1}>
-        <Text size="xs" c="dimmed" tt="uppercase" fw={500}>
-          {label}
-        </Text>
-        <Text size="sm">{children}</Text>
-      </Flex>
-    </Flex>
-  );
-};
-
 export default Profile;

package/src/auth/components/ProfileField.tsx

@@ -0,0 +1,39 @@
+import { Flex, Text } from "@mantine/core";
+import type { ReactNode } from "react";
+
+export interface ProfileFieldProps {
+  /**
+   * Icon to display
+   */
+  icon: ReactNode;
+
+  /**
+   * Field label
+   */
+  label: string;
+
+  /**
+   * Field content
+   */
+  children: ReactNode;
+}
+
+const ProfileField = (props: ProfileFieldProps) => {
+  const { icon, label, children } = props;
+
+  return (
+    <Flex gap="sm" align="flex-start">
+      <Flex c="dimmed" mt={2}>
+        {icon}
+      </Flex>
+      <Flex direction="column" gap={2} flex={1}>
+        <Text size="xs" c="dimmed" tt="uppercase" fw={500}>
+          {label}
+        </Text>
+        <Text size="sm">{children}</Text>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default ProfileField;

package/src/auth/components/Register.tsx

@@ -5,6 +5,7 @@ import {
   IconLock,
   IconMail,
   IconPhone,
+  IconPhoto,
   IconUser,
 } from "@tabler/icons-react";
 import { TypeBoxError, t } from "alepha";
@@ -20,12 +21,14 @@ import { useI18n } from "alepha/react/i18n";
 import { useRouter } from "alepha/react/router";
 import { useMemo, useState } 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 RegisterProps {
   realmConfig: RealmConfig;
+  loginPath?: string;
+  variant?: "card" | "split";
+  image?: string;
 }
 
 type RegistrationPhase = "form" | "verification";
@@ -42,7 +45,7 @@ interface RegistrationState {
 const Register = (props: RegisterProps) => {
   const auth = useAuth();
   const userCtrl = useClient<UserController>();
-  const router = useRouter<AuthRouter>();
+  const router = useRouter();
   const { tr } = useI18n<AuthI18n, "en">();
   const redirect = router.query.r || "/";
 
@@ -81,9 +84,9 @@ const Register = (props: RegisterProps) => {
 
     const required = registerSchema.required as string[];
 
-    if (settings.usernameRequired) required.push("username");
-    if (settings.emailRequired) required.push("email");
-    if (settings.phoneRequired) required.push("phoneNumber");
+    if (settings.username === "required") required.push("username");
+    if (settings.email === "required") required.push("email");
+    if (settings.phoneNumber === "required") required.push("phoneNumber");
 
     return registerSchema;
   }, []);
@@ -208,7 +211,7 @@ const Register = (props: RegisterProps) => {
     return true;
   };
 
-  // Verification phase UI
+  // Verification phase UI (always card layout)
   if (registrationState.phase === "verification" && registrationState.intent) {
     return (
       <Flex flex={1} justify={"center"} align={"center"}>
@@ -296,171 +299,225 @@ const Register = (props: RegisterProps) => {
 
   const showOrDivider = credentialsProvider && externalMethods.length > 0;
 
-  // Registration form phase UI
-  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"
+  const realmQuery = props.realmConfig.realmName
+    ? `?realm=${encodeURIComponent(props.realmConfig.realmName)}`
+    : "";
+
+  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>
+      )}
+
+      {!isRegistrationAllowed ? (
+        <>
+          <Alert variant="light" color="yellow" icon={<IconAlertCircle />}>
+            <Text size="sm">{tr("registerDisabled")}</Text>
+          </Alert>
+          <ActionButton
+            href={`${props.loginPath ?? "/auth/login"}${realmQuery}`}
+          >
+            {tr("registerBackToSignIn")}
+          </ActionButton>
+        </>
+      ) : (
+        <>
+          {/* Credentials registration form */}
+          {credentialsProvider && (
+            <form {...form.props}>
+              <Flex direction="column" flex={1} gap={"md"}>
+                {settings.username !== "none" && form.input.username && (
+                  <Control
+                    label={tr("registerUsername")}
+                    input={form.input.username}
+                    icon={<IconUser />}
+                    text={{
+                      autoComplete: "username",
+                    }}
                   />
                 )}
-                {settings.displayName && (
-                  <Title order={4} ta="center">
-                    {settings.displayName}
-                  </Title>
+                {settings.email !== "none" && form.input.email && (
+                  <Control
+                    label={tr("registerEmail")}
+                    input={form.input.email}
+                    icon={<IconMail />}
+                    text={{
+                      autoComplete: "email",
+                    }}
+                  />
                 )}
-                {settings.description && (
-                  <Text size="sm" c="dimmed" ta="center">
-                    {settings.description}
-                  </Text>
+                {settings.phoneNumber !== "none" && form.input.phoneNumber && (
+                  <Control
+                    label={tr("registerPhone")}
+                    input={form.input.phoneNumber}
+                    icon={<IconPhone />}
+                    text={{
+                      autoComplete: "tel",
+                    }}
+                  />
                 )}
+                <Control
+                  label={tr("registerPassword")}
+                  input={form.input.password}
+                  icon={<IconLock />}
+                  password={{
+                    autoComplete: "new-password",
+                  }}
+                />
+                <Control
+                  label={tr("registerConfirmPassword")}
+                  input={form.input.confirmPassword}
+                  icon={<IconLock />}
+                  password={{
+                    autoComplete: "new-password",
+                  }}
+                />
+                <ActionButton form={form} color={"blue"} variant={"filled"}>
+                  {tr("registerCreateAccount")}
+                </ActionButton>
               </Flex>
-            )}
+            </form>
+          )}
+
+          {/* 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("registerOr")}
+              </Text>
+              <Flex flex={1} h={"1px"} bg={"var(--alepha-border)"} />
+            </Flex>
+          )}
 
-            {!isRegistrationAllowed ? (
-              <>
-                <Alert
-                  variant="light"
-                  color="yellow"
-                  icon={<IconAlertCircle />}
-                >
-                  <Text size="sm">{tr("registerDisabled")}</Text>
-                </Alert>
+          {/* External login methods */}
+          {externalMethods.length > 0 && (
+            <Flex direction="column" gap={"sm"}>
+              {externalMethods.map((method) => (
                 <ActionButton
-                  href={router.path("login", {
-                    query: { realm: props.realmConfig.realmName },
-                  })}
+                  variant={"default"}
+                  key={method.type}
+                  leftSection={leftSection(method.name.toLowerCase())}
+                  onClick={() =>
+                    auth.login(method.name, {
+                      redirect,
+                      realm: props.realmConfig.realmName,
+                    })
+                  }
                 >
-                  {tr("registerBackToSignIn")}
+                  {tr("registerContinueWith", {
+                    args: [capitalize(method.name)],
+                  })}
                 </ActionButton>
-              </>
-            ) : (
-              <>
-                {/* Credentials registration form */}
-                {credentialsProvider && (
-                  <form {...form.props}>
-                    <Flex direction="column" 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("registerEmail")}
-                          input={form.input.email}
-                          icon={<IconMail />}
-                          text={{
-                            autoComplete: "email",
-                          }}
-                        />
-                      )}
-                      {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>
-                    </Flex>
-                  </form>
-                )}
-
-                {/* 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("registerOr")}
-                    </Text>
-                    <Flex flex={1} h={"1px"} bg={"var(--alepha-border)"} />
-                  </Flex>
-                )}
-
-                {/* External login methods */}
-                {externalMethods.length > 0 && (
-                  <Flex direction="column" 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>
-                    ))}
-                  </Flex>
-                )}
+              ))}
+            </Flex>
+          )}
+
+          {/* Sign in link */}
+          <Text size="sm" ta="center">
+            {tr("registerHaveAccount")}{" "}
+            <ActionButton
+              href={`${props.loginPath ?? "/auth/login"}${realmQuery}`}
+              anchorProps={{ inherit: true }}
+            >
+              {tr("registerSignIn")}
+            </ActionButton>
+          </Text>
+        </>
+      )}
+    </Flex>
+  );
 
-                {/* 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>
-              </>
+  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)",
+                  }}
+                >
+                  <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={redirect}>
+                {tr("registerCancel")}
+              </ActionButton>
+            </Flex>
           </Flex>
         </Card>
+      </Flex>
+    );
+  }
+
+  // Default card variant
+  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={redirect}>
           {tr("registerCancel")}
         </ActionButton>

package/src/auth/components/ResetPassword.tsx

@@ -20,10 +20,10 @@ import { useI18n } from "alepha/react/i18n";
 import { useRouter } from "alepha/react/router";
 import { useState } from "react";
 import type { AuthI18n } from "../AuthI18n.ts";
-import type { AuthRouter } from "../AuthRouter.ts";
 
 export interface ResetPasswordProps {
   realmConfig: RealmConfig;
+  loginPath?: string;
 }
 
 type Step = "email" | "code" | "password" | "success";
@@ -36,7 +36,7 @@ interface ResetState {
 }
 
 const ResetPassword = (props: ResetPasswordProps) => {
-  const router = useRouter<AuthRouter>();
+  const router = useRouter();
   const userCtrl = useClient<UserController>();
   const { tr } = useI18n<AuthI18n, "en">();
   const [resetState, setResetState] = useState<ResetState>({ step: "email" });
@@ -176,9 +176,7 @@ const ResetPassword = (props: ResetPasswordProps) => {
                   <Text size="sm">{tr("resetPasswordDisabled")}</Text>
                 </Alert>
                 <ActionButton
-                  href={router.path("login", {
-                    query: { realm: props.realmConfig.realmName },
-                  })}
+                  href={`${props.loginPath ?? "/auth/login"}${props.realmConfig.realmName ? `?realm=${encodeURIComponent(props.realmConfig.realmName)}` : ""}`}
                 >
                   {tr("resetPasswordBackToSignIn")}
                 </ActionButton>
@@ -193,7 +191,7 @@ const ResetPassword = (props: ResetPasswordProps) => {
                     {tr("resetPasswordEnterEmail")}
                   </Text>
                   <Control
-                    title={tr("resetPasswordEmail")}
+                    label={tr("resetPasswordEmail")}
                     input={emailForm.input.email}
                     icon={<IconMail />}
                     text={{
@@ -249,7 +247,7 @@ const ResetPassword = (props: ResetPasswordProps) => {
                     {tr("resetPasswordEnterNewPassword")}
                   </Text>
                   <Control
-                    title={tr("resetPasswordNewPassword")}
+                    label={tr("resetPasswordNewPassword")}
                     input={passwordForm.input.password}
                     icon={<IconLock />}
                     password={{
@@ -258,7 +256,7 @@ const ResetPassword = (props: ResetPasswordProps) => {
                     }}
                   />
                   <Control
-                    title={tr("resetPasswordConfirmPassword")}
+                    label={tr("resetPasswordConfirmPassword")}
                     input={passwordForm.input.confirmPassword}
                     icon={<IconLock />}
                     password={{
@@ -276,9 +274,7 @@ const ResetPassword = (props: ResetPasswordProps) => {
                   <Text size="sm">{tr("resetPasswordSuccess")}</Text>
                 </Alert>
                 <ActionButton
-                  href={router.path("login", {
-                    query: { realm: props.realmConfig.realmName },
-                  })}
+                  href={`${props.loginPath ?? "/auth/login"}${props.realmConfig.realmName ? `?realm=${encodeURIComponent(props.realmConfig.realmName)}` : ""}`}
                 >
                   {tr("resetPasswordBackToSignIn")}
                 </ActionButton>

package/src/auth/components/VerifyEmail.tsx

@@ -4,22 +4,23 @@ import { IconAlertCircle, IconCheck, IconMailCheck } from "@tabler/icons-react";
 import type { UserController } from "alepha/api/users";
 import { useClient } from "alepha/react";
 import { useI18n } from "alepha/react/i18n";
-import { useRouter, useRouterState } from "alepha/react/router";
+import { useRouterState } from "alepha/react/router";
 import { useEffect, useState } from "react";
 import type { AuthI18n } from "../AuthI18n.ts";
-import type { AuthRouter } from "../AuthRouter.ts";
 
-export type VerifyEmailProps = {};
+export type VerifyEmailStep = "verifying" | "success" | "error";
 
-type Step = "verifying" | "success" | "error";
+export interface VerifyEmailProps {
+  loginPath?: string;
+  step?: VerifyEmailStep;
+}
 
-const VerifyEmail = (_props: VerifyEmailProps) => {
-  const router = useRouter<AuthRouter>();
+const VerifyEmailStateful = (props: VerifyEmailProps) => {
   const state = useRouterState();
   const userCtrl = useClient<UserController>();
   const { tr } = useI18n<AuthI18n, "en">();
 
-  const [step, setStep] = useState<Step>("verifying");
+  const [step, setStep] = useState<VerifyEmailStep>("verifying");
   const [error, setError] = useState<string | null>(null);
 
   const email = state.query.email as string | undefined;
@@ -47,6 +48,21 @@ const VerifyEmail = (_props: VerifyEmailProps) => {
     verify();
   }, [email, token]);
 
+  return (
+    <VerifyEmailView step={step} error={error} loginPath={props.loginPath} />
+  );
+};
+
+interface VerifyEmailViewProps {
+  step: VerifyEmailStep;
+  error?: string | null;
+  loginPath?: string;
+}
+
+const VerifyEmailView = (props: VerifyEmailViewProps) => {
+  const { tr } = useI18n<AuthI18n, "en">();
+  const { step } = props;
+
   return (
     <Flex flex={1} justify="center" align="center">
       <Flex direction="column" gap="sm" w={400}>
@@ -73,7 +89,7 @@ const VerifyEmail = (_props: VerifyEmailProps) => {
                 <Alert variant="light" color="green" icon={<IconCheck />}>
                   <Text size="sm">{tr("verifyEmailSuccess")}</Text>
                 </Alert>
-                <ActionButton href={router.path("login")} fullWidth>
+                <ActionButton href={props.loginPath ?? "/auth/login"} fullWidth>
                   {tr("verifyEmailSignIn")}
                 </ActionButton>
               </>
@@ -86,9 +102,11 @@ const VerifyEmail = (_props: VerifyEmailProps) => {
                   {tr("verifyEmailTitle")}
                 </Text>
                 <Alert variant="light" color="red" icon={<IconAlertCircle />}>
-                  <Text size="sm">{error || tr("verifyEmailFailed")}</Text>
+                  <Text size="sm">
+                    {props.error || tr("verifyEmailFailed")}
+                  </Text>
                 </Alert>
-                <ActionButton href={router.path("login")} fullWidth>
+                <ActionButton href={props.loginPath ?? "/auth/login"} fullWidth>
                   {tr("verifyEmailBackToSignIn")}
                 </ActionButton>
               </>
@@ -100,4 +118,11 @@ const VerifyEmail = (_props: VerifyEmailProps) => {
   );
 };
 
+const VerifyEmail = (props: VerifyEmailProps) => {
+  if (props.step) {
+    return <VerifyEmailView step={props.step} loginPath={props.loginPath} />;
+  }
+  return <VerifyEmailStateful {...props} />;
+};
+
 export default VerifyEmail;