@alepha/ui 0.12.0 → 0.12.1

package/src/admin/components/AdminUsers.tsx

@@ -0,0 +1,137 @@
+import { useClient } 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 { type Page, t } from "alepha";
+import { type UserController, type UserEntity, users } from "alepha/api/users";
+
+export interface AdminUsersProps {
+  userRealmName?: string;
+}
+
+const AdminUsers = (props: AdminUsersProps) => {
+  const client = useClient<UserController>();
+  const { l } = useI18n();
+
+  const filters = t.object({
+    query: t.optional(
+      t.string({
+        $control: {
+          query: t.omit(users.schema, ["id", "version"]),
+        },
+      }),
+    ),
+  });
+
+  return (
+    <Flex flex={1}>
+      <DataTable<UserEntity, typeof filters>
+        submitOnInit
+        defaultSize={10}
+        typeFormProps={{
+          skipSubmitButton: true,
+          columns: 3,
+        }}
+        tableProps={{
+          horizontalSpacing: "xs",
+          verticalSpacing: "xs",
+        }}
+        onFilterChange={(key, value, form) => {
+          if (key === "query") {
+            return form.submit();
+          }
+        }}
+        filters={filters}
+        tableTrProps={(item) => {
+          if (!item.enabled) {
+            return {
+              opacity: 0.5,
+            };
+          }
+          return {};
+        }}
+        items={async (filters) => {
+          const response = await client.findUsers({
+            query: {
+              ...filters,
+              userRealmName: props.userRealmName,
+            },
+          });
+
+          return response as Page<UserEntity>;
+        }}
+        columns={{
+          username: {
+            label: "Username",
+            value: (item) => (
+              <Text size="sm" fw={500}>
+                {item.username || "-"}
+              </Text>
+            ),
+          },
+          email: {
+            label: "Email",
+            value: (item) => (
+              <Group gap="xs">
+                <Text size="sm">{item.email || "-"}</Text>
+                {item.email && (
+                  <Badge
+                    size="xs"
+                    variant="light"
+                    color={item.emailVerified ? "green" : "gray"}
+                    leftSection={
+                      item.emailVerified ? (
+                        <IconCheck size={10} />
+                      ) : (
+                        <IconX size={10} />
+                      )
+                    }
+                  >
+                    {item.emailVerified ? "Verified" : "Unverified"}
+                  </Badge>
+                )}
+              </Group>
+            ),
+          },
+          roles: {
+            label: "Roles",
+            value: (item) => (
+              <Group gap={4}>
+                {item.roles.map((role: string) => (
+                  <Badge key={role} size="xs" variant="outline">
+                    {role}
+                  </Badge>
+                ))}
+              </Group>
+            ),
+          },
+          enabled: {
+            label: "Status",
+            fit: true,
+            value: (item) => (
+              <Badge
+                size="sm"
+                variant="light"
+                color={item.enabled ? "green" : "red"}
+              >
+                {item.enabled ? "Active" : "Disabled"}
+              </Badge>
+            ),
+          },
+          createdAt: {
+            label: "Created",
+            fit: true,
+            value: (item) => (
+              <Text size="xs" c="dimmed">
+                {l(item.createdAt, { date: "fromNow" })}
+              </Text>
+            ),
+          },
+        }}
+      />
+    </Flex>
+  );
+};
+
+export default AdminUsers;

package/src/admin/components/AdminVerifications.tsx

@@ -0,0 +1,25 @@
+import { Flex, Text } from "@alepha/ui";
+import { Stack } from "@mantine/core";
+import { IconShieldCheck } from "@tabler/icons-react";
+
+const AdminVerifications = () => {
+  return (
+    <Flex flex={1} justify="center" align="center">
+      <Stack align="center" gap="xs">
+        <IconShieldCheck
+          size={48}
+          stroke={1.5}
+          color="var(--mantine-color-dimmed)"
+        />
+        <Text c="dimmed">Verification Management</Text>
+        <Text size="xs" c="dimmed" ta="center" maw={400}>
+          Verifications are automatically managed by the system. Email and SMS
+          verification codes are generated and validated through the
+          verification API endpoints.
+        </Text>
+      </Stack>
+    </Flex>
+  );
+};
+
+export default AdminVerifications;

package/src/admin/index.ts

@@ -0,0 +1,29 @@
+import { AlephaUI } from "@alepha/ui";
+import { $module } from "alepha";
+import { AdminRouter } from "./AdminRouter.ts";
+
+// ---------------------------------------------------------------------------------------------------------------------
+
+export { AdminRouter } from "./AdminRouter.ts";
+export { default as AdminFiles } from "./components/AdminFiles.tsx";
+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 AdminUsers } from "./components/AdminUsers.tsx";
+export { default as AdminVerifications } from "./components/AdminVerifications.tsx";
+
+// ---------------------------------------------------------------------------------------------------------------------
+
+/**
+ * Admin panel UI Module
+ *
+ * @module alepha.ui.admin
+ */
+export const AlephaUIAdmin = $module({
+  name: "alepha.ui.admin",
+  services: [AlephaUI, AdminRouter],
+});

package/src/auth/AuthI18n.ts

@@ -0,0 +1,118 @@
+import { $dictionary } from "@alepha/react/i18n";
+
+export class AuthI18n {
+  en = $dictionary({
+    name: "alepha.ui.auth.en",
+    lazy: () => ({
+      default: {
+        loginSignIn: "Sign in",
+        loginContinueWith: "Continue with $1",
+        loginOr: "OR",
+        loginCancel: "Cancel",
+        loginForgotPassword: "Forgot password?",
+        loginNoAccount: "Don't have an account?",
+        loginSignUp: "Sign up",
+        loginUsername: "Username",
+        loginEmail: "Email",
+        loginPhone: "Phone number",
+        loginPassword: "Password",
+        registerCreateAccount: "Create account",
+        registerContinueWith: "Continue with $1",
+        registerOr: "OR",
+        registerCancel: "Cancel",
+        registerHaveAccount: "Already have an account?",
+        registerSignIn: "Sign in",
+        registerUsername: "Username",
+        registerEmail: "Email",
+        registerPhone: "Phone number",
+        registerPassword: "Password",
+        registerConfirmPassword: "Confirm password",
+        registerDisabled:
+          "Registration is not available. Please contact your administrator.",
+        registerBackToSignIn: "Back to sign in",
+        registerVerifyTitle: "Verify your account",
+        registerVerifyDescription:
+          "Please enter the verification code(s) sent to you.",
+        registerEmailCode: "Email verification code",
+        registerPhoneCode: "Phone verification code",
+        registerVerifySubmit: "Complete Registration",
+        registerVerifyBack: "Back to registration",
+        resetPasswordTitle: "Reset password",
+        resetPasswordEmail: "Email",
+        resetPasswordEnterEmail:
+          "Enter your email address to reset your password",
+        resetPasswordSendCode: "Send verification code",
+        resetPasswordCodeSent: "We've sent a verification code to your email.",
+        resetPasswordEnterCode: "Enter the 6-digit code",
+        resetPasswordResendCode: "Resend code",
+        resetPasswordEnterNewPassword: "Create your new password",
+        resetPasswordNewPassword: "New password",
+        resetPasswordConfirmPassword: "Confirm password",
+        resetPasswordSetNewPassword: "Set new password",
+        resetPasswordSuccess: "Your password has been reset successfully.",
+        resetPasswordBackToSignIn: "Back to sign in",
+        resetPasswordCancel: "Cancel",
+        resetPasswordDisabled:
+          "Password reset is not available. Please contact your administrator.",
+      },
+    }),
+  });
+
+  fr = $dictionary({
+    lazy: () => ({
+      default: {
+        loginSignIn: "Se connecter",
+        loginContinueWith: "Continuer avec $1",
+        loginOr: "OU",
+        loginCancel: "Annuler",
+        loginForgotPassword: "Mot de passe oublié ?",
+        loginNoAccount: "Vous n'avez pas de compte ?",
+        loginSignUp: "S'inscrire",
+        loginUsername: "Nom d'utilisateur",
+        loginEmail: "E-mail",
+        loginPhone: "Numéro de téléphone",
+        loginPassword: "Mot de passe",
+        registerCreateAccount: "Créer un compte",
+        registerContinueWith: "Continuer avec $1",
+        registerOr: "OU",
+        registerCancel: "Annuler",
+        registerHaveAccount: "Vous avez déjà un compte ?",
+        registerSignIn: "Se connecter",
+        registerUsername: "Nom d'utilisateur",
+        registerEmail: "E-mail",
+        registerPhone: "Numéro de téléphone",
+        registerPassword: "Mot de passe",
+        registerConfirmPassword: "Confirmer le mot de passe",
+        registerDisabled:
+          "L'inscription n'est pas disponible. Veuillez contacter votre administrateur.",
+        registerBackToSignIn: "Retour à la connexion",
+        registerVerifyTitle: "Vérifiez votre compte",
+        registerVerifyDescription:
+          "Veuillez entrer le(s) code(s) de vérification qui vous ont été envoyés.",
+        registerEmailCode: "Code de vérification par e-mail",
+        registerPhoneCode: "Code de vérification par téléphone",
+        registerVerifySubmit: "Terminer l'inscription",
+        registerVerifyBack: "Retour à l'inscription",
+        resetPasswordTitle: "Réinitialiser le mot de passe",
+        resetPasswordEmail: "E-mail",
+        resetPasswordEnterEmail:
+          "Entrez votre adresse e-mail pour réinitialiser votre mot de passe",
+        resetPasswordSendCode: "Envoyer le code de vérification",
+        resetPasswordCodeSent:
+          "Nous avons envoyé un code de vérification à votre e-mail.",
+        resetPasswordEnterCode: "Entrez le code à 6 chiffres",
+        resetPasswordResendCode: "Renvoyer le code",
+        resetPasswordEnterNewPassword: "Créez votre nouveau mot de passe",
+        resetPasswordNewPassword: "Nouveau mot de passe",
+        resetPasswordConfirmPassword: "Confirmer le mot de passe",
+        resetPasswordSetNewPassword: "Définir le nouveau mot de passe",
+        resetPasswordSuccess:
+          "Votre mot de passe a été réinitialisé avec succès.",
+        resetPasswordBackToSignIn: "Retour à la connexion",
+        resetPasswordCancel: "Annuler",
+        resetPasswordDisabled:
+          "La réinitialisation du mot de passe n'est pas disponible. Veuillez contacter votre administrateur.",
+      },
+    }),
+  });
+}

package/src/auth/AuthRouter.ts

@@ -0,0 +1,53 @@
+import { $page } from "@alepha/react";
+import { t } from "alepha";
+import type { UserRealmController } from "alepha/api/users";
+import { $client } from "alepha/server/links";
+
+export class AuthRouter {
+  userRealmClient = $client<UserRealmController>();
+
+  login = $page({
+    path: "/login",
+    schema: {
+      query: t.object({
+        redirect: t.optional(t.string()),
+      }),
+    },
+    lazy: () => import("./components/Login.tsx"),
+    resolve: async () => {
+      return {
+        realmConfig: await this.userRealmClient.getRealmConfig(),
+      };
+    },
+  });
+
+  register = $page({
+    path: "/register",
+    schema: {
+      query: t.object({
+        redirect: t.optional(t.string()),
+      }),
+    },
+    lazy: () => import("./components/Register.tsx"),
+    resolve: async () => {
+      return {
+        realmConfig: await this.userRealmClient.getRealmConfig(),
+      };
+    },
+  });
+
+  resetPassword = $page({
+    path: "/reset-password",
+    schema: {
+      query: t.object({
+        redirect: t.optional(t.string()),
+      }),
+    },
+    lazy: () => import("./components/ResetPassword.tsx"),
+    resolve: async () => {
+      return {
+        realmConfig: await this.userRealmClient.getRealmConfig(),
+      };
+    },
+  });
+}

package/src/auth/components/Login.tsx

@@ -0,0 +1,193 @@
+import { useRouter } from "@alepha/react";
+import { useAuth } from "@alepha/react/auth";
+import { FormValidationError, useForm } from "@alepha/react/form";
+import { useI18n } from "@alepha/react/i18n";
+import { ActionButton, Control, capitalize } from "@alepha/ui";
+import { Card, Flex, Group, Stack, Text } from "@mantine/core";
+import { IconLock, IconUser } from "@tabler/icons-react";
+import { t } from "alepha";
+import type { UserRealmConfig } from "alepha/api/users";
+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: UserRealmConfig;
+}
+
+const Login = (props: LoginProps) => {
+  const auth = useAuth();
+  const router = useRouter<AuthRouter>();
+  const { tr } = useI18n<AuthI18n, "en">();
+  const redirect = router.query.redirect || "/";
+
+  const hasUsernamePassword = props.realmConfig.authenticationMethods.find(
+    (it) => it.type === "CREDENTIALS",
+  );
+
+  const settings = props.realmConfig.settings;
+
+  // 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");
+    return methods;
+  }, [settings]);
+
+  // Create identifier title based on enabled methods
+  const identifierTitle = useMemo(() => {
+    if (loginMethods.length === 0) return tr("loginUsername");
+    if (loginMethods.length === 1) {
+      if (loginMethods[0] === "username") return tr("loginUsername");
+      if (loginMethods[0] === "email") return tr("loginEmail");
+      if (loginMethods[0] === "phone") return tr("loginPhone");
+    }
+    const labels = loginMethods.map((m) => {
+      if (m === "username") return tr("loginUsername").toLowerCase();
+      if (m === "email") return tr("loginEmail").toLowerCase();
+      if (m === "phone") return tr("loginPhone").toLowerCase();
+      return m;
+    });
+    return capitalize(
+      `${labels.slice(0, -1).join(", ")} or ${labels[labels.length - 1]}`,
+    );
+  }, [loginMethods, tr]);
+
+  const form = useForm({
+    schema: t.object({
+      identifier: t.string({
+        minLength: 1,
+      }),
+      password: t.string({
+        minLength: settings.passwordPolicy?.minLength || 6,
+      }),
+    }),
+    handler: async (data) => {
+      try {
+        await auth.login("credentials", {
+          username: data.identifier,
+          password: data.password,
+        });
+        await router.go(router.query.r || "/");
+      } catch (error) {
+        if (
+          error instanceof HttpError &&
+          error.error === "InvalidCredentialsError"
+        ) {
+          throw new FormValidationError({
+            message: "Invalid identifier or password",
+            path: "/password",
+          });
+        }
+        throw error;
+      }
+    },
+  });
+
+  return (
+    <Flex flex={1} justify={"center"} align={"center"}>
+      <Stack gap={"sm"} w={360}>
+        <Card withBorder p={"lg"} bg={"var(--alepha-elevated)"}>
+          <Stack gap={"md"}>
+            {hasUsernamePassword && (
+              <>
+                <form {...form.props}>
+                  <Stack flex={1} gap={"md"}>
+                    <Control
+                      title={identifierTitle}
+                      input={form.input.identifier}
+                      icon={IconUser}
+                      text={{
+                        autoComplete: loginMethods.includes("email")
+                          ? "email"
+                          : "username",
+                      }}
+                    />
+                    <Control
+                      title={tr("loginPassword")}
+                      input={form.input.password}
+                      icon={IconLock}
+                      password={{
+                        autoComplete: "current-password",
+                      }}
+                    />
+                    <ActionButton variant={"filled"} form={form}>
+                      {tr("loginSignIn")}
+                    </ActionButton>
+                  </Stack>
+                </form>
+                <Stack gap="xs">
+                  {settings.resetPasswordAllowed && (
+                    <Text size="sm" ta="center">
+                      <ActionButton
+                        href={router.path("resetPassword")}
+                        anchorProps={{ inherit: true }}
+                      >
+                        {tr("loginForgotPassword")}
+                      </ActionButton>
+                    </Text>
+                  )}
+                  <Group align="center" justify="center" gap={"md"}>
+                    <Flex flex={1} h={"1px"} bg={"var(--alepha-text-muted)"} />
+                    <Text size="xs">{tr("loginOr")}</Text>
+                    <Flex flex={1} h={"1px"} bg={"var(--alepha-text-muted)"} />
+                  </Group>
+                </Stack>
+              </>
+            )}
+            <Stack gap={"sm"}>
+              {props.realmConfig.authenticationMethods.map(
+                (method) =>
+                  method.type !== "CREDENTIALS" && (
+                    <ActionButton
+                      variant={"default"}
+                      key={method.type}
+                      leftSection={leftSection(method.name.toLowerCase())}
+                      onClick={() =>
+                        auth.login(method.name, {
+                          redirect,
+                        })
+                      }
+                    >
+                      {tr("loginContinueWith", {
+                        args: [capitalize(method.name)],
+                      })}
+                    </ActionButton>
+                  ),
+              )}
+            </Stack>
+            <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}>
+          {tr("loginCancel")}
+        </ActionButton>
+      </Stack>
+    </Flex>
+  );
+};
+
+export default Login;
+
+const leftSection = (name: string) => {
+  if (name === "google") {
+    return <IconGoogle />;
+  }
+
+  if (name === "github") {
+    return <IconGithub />;
+  }
+};