@alepha/ui 0.13.1 → 0.13.3

package/src/admin/components/AdminUserSettings.tsx

@@ -0,0 +1,165 @@
+import { useClient, useRouter, useRouterState } from "@alepha/react";
+import { ActionButton, Flex, Text } from "@alepha/ui";
+import { Alert, Card, Group, Loader, Stack } from "@mantine/core";
+import {
+  IconAlertCircle,
+  IconCheck,
+  IconMail,
+  IconTrash,
+} from "@tabler/icons-react";
+import type { UserController, UserEntity } from "alepha/api/users";
+import { useEffect, useState } from "react";
+import type { AdminRouter } from "../AdminRouter.ts";
+
+export interface AdminUserSettingsProps {
+  userRealmName?: string;
+}
+
+const AdminUserSettings = (props: AdminUserSettingsProps) => {
+  const router = useRouter<AdminRouter>();
+  const state = useRouterState();
+  const client = useClient<UserController>();
+  const userId = state.params.userId as string;
+
+  const [user, setUser] = useState<UserEntity | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [deleteLoading, setDeleteLoading] = useState(false);
+  const [verifyLoading, setVerifyLoading] = useState(false);
+  const [verifySuccess, setVerifySuccess] = useState(false);
+
+  useEffect(() => {
+    const loadUser = async () => {
+      try {
+        const data = await client.getUser({
+          params: { id: userId },
+          query: { userRealmName: props.userRealmName },
+        });
+        setUser(data);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadUser();
+  }, [userId]);
+
+  const handleDelete = async () => {
+    if (!confirm("Are you sure you want to delete this user?")) {
+      return;
+    }
+
+    setDeleteLoading(true);
+    try {
+      await client.deleteUser({
+        params: { id: userId },
+        query: { userRealmName: props.userRealmName },
+      });
+      await router.go("adminUsers");
+    } finally {
+      setDeleteLoading(false);
+    }
+  };
+
+  const handleTriggerEmailVerification = async () => {
+    if (!user?.email) return;
+
+    setVerifyLoading(true);
+    setVerifySuccess(false);
+    try {
+      await client.requestEmailVerification({
+        query: {
+          userRealmName: props.userRealmName,
+          method: "link",
+          verifyUrl: `${window.location.origin}/verify-email`,
+        },
+        body: { email: user.email },
+      });
+      setVerifySuccess(true);
+    } finally {
+      setVerifyLoading(false);
+    }
+  };
+
+  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 (
+    <Flex flex={1} direction="column" gap="md">
+      {user.email && !user.emailVerified && (
+        <Card withBorder p="lg">
+          <Stack gap="md">
+            <Text size="lg" fw={500}>
+              Email Verification
+            </Text>
+
+            <Alert variant="light" color="yellow" icon={<IconMail />}>
+              <Text size="sm">
+                This user's email ({user.email}) is not verified. You can send a
+                verification link to the user.
+              </Text>
+            </Alert>
+
+            {verifySuccess && (
+              <Alert variant="light" color="green" icon={<IconCheck />}>
+                <Text size="sm">
+                  Verification link sent successfully to {user.email}.
+                </Text>
+              </Alert>
+            )}
+
+            <Group>
+              <ActionButton
+                leftSection={<IconMail size={16} />}
+                loading={verifyLoading}
+                onClick={handleTriggerEmailVerification}
+              >
+                Send Verification Link
+              </ActionButton>
+            </Group>
+          </Stack>
+        </Card>
+      )}
+
+      <Card withBorder p="lg">
+        <Stack gap="md">
+          <Text size="lg" fw={500} c="red">
+            Danger Zone
+          </Text>
+
+          <Alert variant="light" color="red" icon={<IconAlertCircle />}>
+            <Text size="sm">
+              Deleting this user will permanently remove their account and all
+              associated data. This action cannot be undone.
+            </Text>
+          </Alert>
+
+          <Group>
+            <ActionButton
+              color="red"
+              leftSection={<IconTrash size={16} />}
+              loading={deleteLoading}
+              onClick={handleDelete}
+            >
+              Delete User
+            </ActionButton>
+          </Group>
+        </Stack>
+      </Card>
+    </Flex>
+  );
+};
+
+export default AdminUserSettings;

package/src/admin/components/AdminUsers.tsx

@@ -1,10 +1,11 @@
-import { useClient } from "@alepha/react";
+import { useClient, useRouter } from "@alepha/react";
 import { useI18n } from "@alepha/react/i18n";
-import { DataTable, Flex, Text } from "@alepha/ui";
-import { Badge, Group } from "@mantine/core";
-import { IconCheck, IconX } from "@tabler/icons-react";
+import { ActionButton, DataTable, Text } from "@alepha/ui";
+import { Badge, Flex, Group } from "@mantine/core";
+import { IconCheck, IconPlus, 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";
 
 export interface AdminUsersProps {
   userRealmName?: string;
@@ -12,6 +13,7 @@ export interface AdminUsersProps {
 
 const AdminUsers = (props: AdminUsersProps) => {
   const client = useClient<UserController>();
+  const router = useRouter<AdminRouter>();
   const { l } = useI18n();
 
   const filters = t.object({
@@ -25,7 +27,16 @@ const AdminUsers = (props: AdminUsersProps) => {
   });
 
   return (
-    <Flex flex={1}>
+    <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
         defaultSize={10}
@@ -36,6 +47,8 @@ const AdminUsers = (props: AdminUsersProps) => {
         tableProps={{
           horizontalSpacing: "xs",
           verticalSpacing: "xs",
+          striped: false,
+          highlightOnHover: true,
         }}
         onFilterChange={(key, value, form) => {
           if (key === "query") {
@@ -44,12 +57,19 @@ const AdminUsers = (props: AdminUsersProps) => {
         }}
         filters={filters}
         tableTrProps={(item) => {
+          const baseProps: Record<string, any> = {
+            style: { cursor: "pointer" },
+            onClick: () =>
+              router.go("adminUserDetails", {
+                params: { userId: item.id },
+              }),
+          };
+
           if (!item.enabled) {
-            return {
-              opacity: 0.5,
-            };
+            baseProps.opacity = 0.5;
           }
-          return {};
+
+          return baseProps;
         }}
         items={async (filters) => {
           const response = await client.findUsers({

package/src/admin/index.ts

@@ -1,6 +1,8 @@
 import { AlephaUI } from "@alepha/ui";
+import { AlephaUIAuth } from "@alepha/ui/auth";
 import { $module } from "alepha";
 import { AdminRouter } from "./AdminRouter.ts";
+import { MainRouter } from "./MainRouter.ts";
 
 // ---------------------------------------------------------------------------------------------------------------------
 
@@ -10,11 +12,15 @@ export { default as AdminJobs } from "./components/AdminJobs.tsx";
 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 type { AdminSessionsProps } from "./components/AdminSessions.tsx";
 export { default as AdminSessions } from "./components/AdminSessions.tsx";
-export type { AdminUsersProps } from "./components/AdminUsers.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";
+export { MainRouter } from "./MainRouter.ts";
 
 // ---------------------------------------------------------------------------------------------------------------------
 
@@ -25,5 +31,8 @@ export { default as AdminVerifications } from "./components/AdminVerifications.t
  */
 export const AlephaUIAdmin = $module({
   name: "alepha.ui.admin",
-  services: [AlephaUI, AdminRouter],
+  services: [AlephaUI, AlephaUIAuth, AdminRouter, MainRouter],
+  register: (alepha) => {
+    alepha.with(AdminRouter);
+  },
 });

package/src/auth/AuthI18n.ts

@@ -54,6 +54,17 @@ export class AuthI18n {
         resetPasswordCancel: "Cancel",
         resetPasswordDisabled:
           "Password reset is not available. Please contact your administrator.",
+        verifyEmailTitle: "Email Verification",
+        verifyEmailVerifying: "Verifying your email...",
+        verifyEmailPleaseWait:
+          "Please wait while we verify your email address.",
+        verifyEmailSuccess: "Your email has been verified successfully.",
+        verifyEmailFailed:
+          "Failed to verify your email. The link may have expired or is invalid.",
+        verifyEmailMissingParams:
+          "Invalid verification link. Email and token are required.",
+        verifyEmailSignIn: "Sign in to your account",
+        verifyEmailBackToSignIn: "Back to sign in",
       },
     }),
   });
@@ -112,6 +123,17 @@ export class AuthI18n {
         resetPasswordCancel: "Annuler",
         resetPasswordDisabled:
           "La réinitialisation du mot de passe n'est pas disponible. Veuillez contacter votre administrateur.",
+        verifyEmailTitle: "Vérification de l'e-mail",
+        verifyEmailVerifying: "Vérification de votre e-mail...",
+        verifyEmailPleaseWait:
+          "Veuillez patienter pendant que nous vérifions votre adresse e-mail.",
+        verifyEmailSuccess: "Votre e-mail a été vérifié avec succès.",
+        verifyEmailFailed:
+          "Échec de la vérification de votre e-mail. Le lien a peut-être expiré ou est invalide.",
+        verifyEmailMissingParams:
+          "Lien de vérification invalide. L'e-mail et le jeton sont requis.",
+        verifyEmailSignIn: "Se connecter à votre compte",
+        verifyEmailBackToSignIn: "Retour à la connexion",
       },
     }),
   });

package/src/auth/AuthRouter.ts

@@ -1,53 +1,127 @@
 import { $page } from "@alepha/react";
-import { t } from "alepha";
+import { ReactAuth } from "@alepha/react/auth";
+import {
+  IconLogin2,
+  IconLogout2,
+  IconMailCheck,
+  IconPasswordUser,
+  IconUserPlus,
+} from "@tabler/icons-react";
+import { $inject, AlephaError, t } from "alepha";
 import type { UserRealmController } from "alepha/api/users";
 import { $client } from "alepha/server/links";
 
 export class AuthRouter {
-  userRealmClient = $client<UserRealmController>();
+  protected readonly userRealmClient = $client<UserRealmController>();
+  protected readonly auth = $inject(ReactAuth);
+
+  layout = $page({
+    name: "AuthLayout",
+    path: "/auth",
+    lazy: () => import("./components/AuthLayout.tsx"),
+    children: () => [
+      this.login,
+      this.register,
+      this.resetPassword,
+      this.verifyEmail,
+    ],
+  });
 
   login = $page({
+    icon: IconLogin2,
+    label: "Sign In",
+    description: "Sign in to your account",
     path: "/login",
     schema: {
       query: t.object({
-        redirect: t.optional(t.string()),
+        r: t.optional(t.string()),
       }),
     },
+    can: () => !this.auth.user,
     lazy: () => import("./components/Login.tsx"),
     resolve: async () => {
       return {
-        realmConfig: await this.userRealmClient.getRealmConfig(),
+        realmConfig: await this.loadRealmConfig(),
       };
     },
   });
 
   register = $page({
+    icon: IconUserPlus,
+    label: "Register",
+    description: "Create a new account",
     path: "/register",
     schema: {
       query: t.object({
-        redirect: t.optional(t.string()),
+        r: t.optional(t.string()),
       }),
     },
+    can: () => !this.auth.user,
     lazy: () => import("./components/Register.tsx"),
     resolve: async () => {
       return {
-        realmConfig: await this.userRealmClient.getRealmConfig(),
+        realmConfig: await this.loadRealmConfig(),
       };
     },
   });
 
   resetPassword = $page({
+    icon: IconPasswordUser,
+    label: "Reset Password",
+    description: "Reset your account password",
     path: "/reset-password",
     schema: {
       query: t.object({
-        redirect: t.optional(t.string()),
+        r: t.optional(t.string()),
       }),
     },
+    can: () => !this.auth.user,
     lazy: () => import("./components/ResetPassword.tsx"),
     resolve: async () => {
       return {
-        realmConfig: await this.userRealmClient.getRealmConfig(),
+        realmConfig: await this.loadRealmConfig(),
       };
     },
   });
+
+  verifyEmail = $page({
+    icon: IconMailCheck,
+    label: "Verify Email",
+    description: "Verify your email address",
+    path: "/verify-email",
+    schema: {
+      query: t.object({
+        email: t.optional(t.string()),
+        token: t.optional(t.string()),
+      }),
+    },
+    lazy: () => import("./components/VerifyEmail.tsx"),
+  });
+
+  logout = $page({
+    icon: IconLogout2,
+    label: "Sign Out",
+    description: "Sign out of your account",
+    can: () => !!this.auth.user,
+    path: "/logout",
+    component: () => null,
+    resolve: () => {
+      this.auth.logout();
+      return {};
+    },
+  });
+
+  protected async loadRealmConfig() {
+    try {
+      return await this.userRealmClient.getRealmConfig();
+    } catch (e) {
+      if (e instanceof AlephaError) {
+        throw new AlephaError(
+          "Missing User-Realm Configuration - Did you forget to add '$userRealm()' to your application?",
+          e,
+        );
+      }
+      throw e;
+    }
+  }
 }

package/src/auth/components/AuthLayout.tsx

@@ -0,0 +1,12 @@
+import { NestedView } from "@alepha/react";
+import { Flex } from "@mantine/core";
+
+const AuthLayout = () => {
+  return (
+    <Flex flex={1} align={"center"} h={"100vh"} justify={"center"}>
+      <NestedView />
+    </Flex>
+  );
+};
+
+export default AuthLayout;

package/src/auth/components/Login.tsx

@@ -22,7 +22,7 @@ const Login = (props: LoginProps) => {
   const auth = useAuth();
   const router = useRouter<AuthRouter>();
   const { tr } = useI18n<AuthI18n, "en">();
-  const redirect = router.query.redirect || "/";
+  const redirect = router.query.r || "/";
 
   const hasUsernamePassword = props.realmConfig.authenticationMethods.find(
     (it) => it.type === "CREDENTIALS",
@@ -116,7 +116,7 @@ const Login = (props: LoginProps) => {
                         autoComplete: "current-password",
                       }}
                     />
-                    <ActionButton variant={"filled"} form={form}>
+                    <ActionButton color={"blue"} variant={"filled"} form={form}>
                       {tr("loginSignIn")}
                     </ActionButton>
                   </Stack>
@@ -161,15 +161,17 @@ const Login = (props: LoginProps) => {
                   ),
               )}
             </Stack>
-            <Text size="sm" ta="center">
-              {tr("loginNoAccount")}{" "}
-              <ActionButton
-                href={router.path("register")}
-                anchorProps={{ inherit: true }}
-              >
-                {tr("loginSignUp")}
-              </ActionButton>
-            </Text>
+            {settings.registrationAllowed && (
+              <Text size="sm" ta="center">
+                {tr("loginNoAccount")}{" "}
+                <ActionButton
+                  href={router.path("register")}
+                  anchorProps={{ inherit: true }}
+                >
+                  {tr("loginSignUp")}
+                </ActionButton>
+              </Text>
+            )}
           </Stack>
         </Card>
         <ActionButton variant={"subtle"} href={redirect}>

package/src/auth/components/Register.tsx

@@ -43,7 +43,7 @@ const Register = (props: RegisterProps) => {
   const userCtrl = useClient<UserController>();
   const router = useRouter<AuthRouter>();
   const { tr } = useI18n<AuthI18n, "en">();
-  const redirect = router.query.redirect || "/";
+  const redirect = router.query.r || "/";
 
   const [registrationState, setRegistrationState] = useState<RegistrationState>(
     {
@@ -223,7 +223,7 @@ const Register = (props: RegisterProps) => {
               {registrationState.intent.expectEmailVerification && (
                 <Stack gap={"xs"}>
                   <Text size="sm" fw={500}>
-                    {tr("registerEmailCode") ?? "Email verification code"}
+                    {tr("registerEmailCode")}
                   </Text>
                   <Flex justify="center">
                     <PinInput
@@ -241,7 +241,7 @@ const Register = (props: RegisterProps) => {
               {registrationState.intent.expectPhoneVerification && (
                 <Stack gap={"xs"}>
                   <Text size="sm" fw={500}>
-                    {tr("registerPhoneCode") ?? "Phone verification code"}
+                    {tr("registerPhoneCode")}
                   </Text>
                   <Flex justify="center">
                     <PinInput
@@ -257,11 +257,12 @@ const Register = (props: RegisterProps) => {
               )}
 
               <ActionButton
+                color={"blue"}
                 onClick={handleVerificationSubmit}
                 loading={isSubmitting}
                 disabled={!canSubmitVerification()}
               >
-                {tr("registerVerifySubmit") ?? "Complete Registration"}
+                {tr("registerVerifySubmit")}
               </ActionButton>
 
               <ActionButton
@@ -350,7 +351,7 @@ const Register = (props: RegisterProps) => {
                         autoComplete: "new-password",
                       }}
                     />
-                    <ActionButton form={form}>
+                    <ActionButton form={form} color={"blue"} variant={"filled"}>
                       {tr("registerCreateAccount")}
                     </ActionButton>
                   </Stack>

package/src/auth/components/ResetPassword.tsx

@@ -41,7 +41,7 @@ const ResetPassword = (props: ResetPasswordProps) => {
   const [resetState, setResetState] = useState<ResetState>({ step: "email" });
   const [error, setError] = useState<string | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const redirect = router.query.redirect || "/";
+  const redirect = router.query.r || "/";
 
   const isResetPasswordAllowed =
     props.realmConfig.settings?.resetPasswordAllowed !== false;

package/src/auth/components/VerifyEmail.tsx

@@ -0,0 +1,102 @@
+import { useClient, useRouter, useRouterState } from "@alepha/react";
+import { useI18n } from "@alepha/react/i18n";
+import { ActionButton } from "@alepha/ui";
+import { Alert, Card, Flex, Loader, Stack, Text } from "@mantine/core";
+import { IconAlertCircle, IconCheck, IconMailCheck } from "@tabler/icons-react";
+import type { UserController } from "alepha/api/users";
+import { useEffect, useState } from "react";
+import type { AuthI18n } from "../AuthI18n.ts";
+import type { AuthRouter } from "../AuthRouter.ts";
+
+export type VerifyEmailProps = {};
+
+type Step = "verifying" | "success" | "error";
+
+const VerifyEmail = (_props: VerifyEmailProps) => {
+  const router = useRouter<AuthRouter>();
+  const state = useRouterState();
+  const userCtrl = useClient<UserController>();
+  const { tr } = useI18n<AuthI18n, "en">();
+
+  const [step, setStep] = useState<Step>("verifying");
+  const [error, setError] = useState<string | null>(null);
+
+  const email = state.query.email as string | undefined;
+  const token = state.query.token as string | undefined;
+
+  useEffect(() => {
+    const verify = async () => {
+      if (!email || !token) {
+        setError(tr("verifyEmailMissingParams"));
+        setStep("error");
+        return;
+      }
+
+      try {
+        await userCtrl.verifyEmail({
+          body: { email, token },
+        });
+        setStep("success");
+      } catch (err) {
+        setError(err instanceof Error ? err.message : tr("verifyEmailFailed"));
+        setStep("error");
+      }
+    };
+
+    verify();
+  }, [email, token]);
+
+  return (
+    <Flex flex={1} justify="center" align="center">
+      <Stack gap="sm" w={400}>
+        <Card withBorder p="lg" bg="var(--alepha-elevated)">
+          <Stack gap="md" align="center">
+            {step === "verifying" && (
+              <>
+                <Loader size="lg" />
+                <Text size="lg" fw={500} ta="center">
+                  {tr("verifyEmailVerifying")}
+                </Text>
+                <Text size="sm" c="dimmed" ta="center">
+                  {tr("verifyEmailPleaseWait")}
+                </Text>
+              </>
+            )}
+
+            {step === "success" && (
+              <>
+                <IconMailCheck size={48} color="var(--mantine-color-green-6)" />
+                <Text size="lg" fw={500} ta="center">
+                  {tr("verifyEmailTitle")}
+                </Text>
+                <Alert variant="light" color="green" icon={<IconCheck />}>
+                  <Text size="sm">{tr("verifyEmailSuccess")}</Text>
+                </Alert>
+                <ActionButton href={router.path("login")} fullWidth>
+                  {tr("verifyEmailSignIn")}
+                </ActionButton>
+              </>
+            )}
+
+            {step === "error" && (
+              <>
+                <IconAlertCircle size={48} color="var(--mantine-color-red-6)" />
+                <Text size="lg" fw={500} ta="center">
+                  {tr("verifyEmailTitle")}
+                </Text>
+                <Alert variant="light" color="red" icon={<IconAlertCircle />}>
+                  <Text size="sm">{error || tr("verifyEmailFailed")}</Text>
+                </Alert>
+                <ActionButton href={router.path("login")} fullWidth>
+                  {tr("verifyEmailBackToSignIn")}
+                </ActionButton>
+              </>
+            )}
+          </Stack>
+        </Card>
+      </Stack>
+    </Flex>
+  );
+};
+
+export default VerifyEmail;