@thinhnguyencth1204/nextcli 0.8.0 → 0.9.0

package/templates/next-base/src/features/auth/components/account-panel.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useTranslations } from "next-intl";
+import { protectedApi } from "@/lib/api/axios";
+import type { ApiSuccess } from "@/types";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+type MePayload = {
+  user?: {
+    id: string;
+    username: string;
+    email?: string | null;
+    name?: string | null;
+    role?: { name: string; level: number } | null;
+  };
+};
+
+export function AccountPanel() {
+  const t = useTranslations("auth.account");
+  const [session, setSession] = useState<MePayload | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let mounted = true;
+    const run = async () => {
+      try {
+        const response = await protectedApi.get("/api/v1/auth/me", {
+          withCredentials: true,
+        });
+        if (mounted) {
+          setSession((response.data as ApiSuccess<MePayload>).data);
+        }
+      } catch {
+        if (mounted) {
+          setSession(null);
+        }
+      } finally {
+        if (mounted) {
+          setLoading(false);
+        }
+      }
+    };
+
+    void run();
+    return () => {
+      mounted = false;
+    };
+  }, []);
+
+  if (loading) {
+    return <p>{t("loading")}</p>;
+  }
+
+  if (!session?.user) {
+    return <p>{t("noSession")}</p>;
+  }
+
+  return (
+    <Card className="max-w-xl">
+      <CardHeader>
+        <CardTitle>{t("title")}</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-2 text-sm">
+        <p>
+          {t("userId")}: {session.user.id}
+        </p>
+        <p>
+          {t("username")}: {session.user.username}
+        </p>
+        <p>
+          {t("email")}: {session.user.email ?? t("na")}
+        </p>
+        <p>
+          {t("name")}: {session.user.name ?? t("na")}
+        </p>
+      </CardContent>
+    </Card>
+  );
+}

package/templates/next-base/src/features/auth/components/change-password-form.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { useState } from "react";
+import type { FormEvent } from "react";
+import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { toast } from "sonner";
+import { protectedApi } from "@/lib/api/axios";
+import { changePasswordSchema } from "@/features/auth/validations";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+export function ChangePasswordForm() {
+  const router = useRouter();
+  const t = useTranslations("auth.changePasswordForm");
+  const [currentPassword, setCurrentPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const onSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    const parsed = changePasswordSchema.safeParse({
+      currentPassword,
+      newPassword,
+    });
+
+    if (!parsed.success) {
+      toast.error(t("invalidInput"));
+      return;
+    }
+
+    try {
+      setIsSubmitting(true);
+      await protectedApi.post("/api/v1/auth/change-password", parsed.data, {
+        withCredentials: true,
+      });
+      toast.success(t("success"));
+      router.push("/dashboard");
+      router.refresh();
+    } catch (error) {
+      const message = error instanceof Error ? error.message : t("failed");
+      toast.error(message);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Card>
+      <CardContent className="pt-6">
+        <form onSubmit={onSubmit} className="grid gap-4">
+          <div className="grid gap-2">
+            <Label htmlFor="currentPassword">{t("currentPassword")}</Label>
+            <Input
+              id="currentPassword"
+              type="password"
+              value={currentPassword}
+              onChange={(event) => setCurrentPassword(event.target.value)}
+              required
+            />
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="newPassword">{t("newPassword")}</Label>
+            <Input
+              id="newPassword"
+              type="password"
+              value={newPassword}
+              onChange={(event) => setNewPassword(event.target.value)}
+              required
+            />
+          </div>
+          <Button type="submit" disabled={isSubmitting}>
+            {isSubmitting ? t("submitting") : t("submit")}
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}

package/templates/next-base/src/features/auth/components/sign-in-form.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { useState } from "react";
+import type { FormEvent } from "react";
+import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { toast } from "sonner";
+import { publicApi } from "@/lib/api/axios";
+import { setAccessToken } from "@/lib/api/token-store";
+import { signInSchema } from "@/features/auth/validations";
+import type { ApiSuccess } from "@/types";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+type LoginResponse = {
+  accessToken: string;
+  requirePasswordChange: boolean;
+};
+
+export function SignInForm() {
+  const router = useRouter();
+  const t = useTranslations("auth.signInForm");
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const onSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    const parsed = signInSchema.safeParse({ username, password });
+    if (!parsed.success) {
+      toast.error(t("invalidInput"));
+      return;
+    }
+
+    try {
+      setIsSubmitting(true);
+      const response = await publicApi.post("/api/v1/auth/login", parsed.data, {
+        withCredentials: true,
+      });
+      const payload = (response.data as ApiSuccess<LoginResponse>).data;
+      if (!payload?.accessToken) {
+        toast.error(t("missingAccessToken"));
+        return;
+      }
+
+      setAccessToken(payload.accessToken);
+      toast.success(t("success"));
+      router.push(payload.requirePasswordChange ? "/change-password" : "/dashboard");
+      router.refresh();
+    } catch (error) {
+      const message = error instanceof Error ? error.message : t("failed");
+      toast.error(message);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Card>
+      <CardContent className="pt-6">
+        <form onSubmit={onSubmit} className="grid gap-4">
+          <div className="grid gap-2">
+            <Label htmlFor="username">{t("username")}</Label>
+            <Input
+              id="username"
+              value={username}
+              onChange={(event) => setUsername(event.target.value)}
+              placeholder={t("usernamePlaceholder")}
+              autoComplete="username"
+              required
+            />
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="password">{t("password")}</Label>
+            <Input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(event) => setPassword(event.target.value)}
+              placeholder={t("passwordPlaceholder")}
+              autoComplete="current-password"
+              required
+            />
+          </div>
+          <Button type="submit" disabled={isSubmitting}>
+            {isSubmitting ? t("submitting") : t("submit")}
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}

package/templates/next-base/src/features/auth/validations.ts

@@ -0,0 +1,14 @@
+import { z } from "zod";
+
+export const signInSchema = z.object({
+  username: z.string().min(3).max(30),
+  password: z.string().min(8),
+});
+
+export const changePasswordSchema = z.object({
+  currentPassword: z.string().min(8),
+  newPassword: z.string().min(8),
+});
+
+export type SignInInput = z.infer<typeof signInSchema>;
+export type ChangePasswordInput = z.infer<typeof changePasswordSchema>;

package/templates/next-base/src/features/users/services.ts

@@ -0,0 +1,132 @@
+import type { Role, User } from "@prisma/client";
+import { INTERNAL_EMAIL_DOMAIN, SUPER_ADMIN_USERNAME } from "@/lib/constants";
+import { auth } from "@/lib/auth";
+import prisma from "@/lib/db/prisma";
+import type { CreateUserInput, UpdateUserInput } from "@/features/users/validations";
+
+export type UserWithRole = User & { role: Role | null };
+
+function toPublicUser(user: UserWithRole) {
+  return {
+    id: user.id,
+    username: user.username,
+    displayUsername: user.displayUsername,
+    name: user.name,
+    email: user.email,
+    requirePasswordChange: user.requirePasswordChange,
+    role: user.role
+      ? { id: user.role.id, name: user.role.name, level: user.role.level }
+      : null,
+    createdAt: user.createdAt,
+    updatedAt: user.updatedAt,
+  };
+}
+
+export async function listUsersForActor(actorLevel: number) {
+  const users = await prisma.user.findMany({
+    where: {
+      username: { not: SUPER_ADMIN_USERNAME },
+      role: {
+        level: { lt: actorLevel },
+      },
+    },
+    include: { role: true },
+    orderBy: { createdAt: "desc" },
+  });
+
+  return users.map(toPublicUser);
+}
+
+export async function getUserByIdForActor(
+  id: string,
+  actorLevel: number,
+): Promise<ReturnType<typeof toPublicUser> | null> {
+  const user = await prisma.user.findFirst({
+    where: {
+      id,
+      username: { not: SUPER_ADMIN_USERNAME },
+      role: {
+        level: { lt: actorLevel },
+      },
+    },
+    include: { role: true },
+  });
+
+  return user ? toPublicUser(user) : null;
+}
+
+export async function createUserRecord(
+  input: CreateUserInput,
+  options?: { requirePasswordChange?: boolean },
+) {
+  const placeholderEmail =
+    input.email ?? `${input.username}@${INTERNAL_EMAIL_DOMAIN}`;
+
+  await auth.api.signUpEmail({
+    body: {
+      email: placeholderEmail,
+      password: input.password,
+      name: input.name ?? input.username,
+      username: input.username,
+      displayUsername: input.username,
+    },
+  });
+
+  const created = await prisma.user.findUnique({
+    where: { username: input.username },
+    include: { role: true },
+  });
+
+  if (!created) {
+    throw new Error("USER_CREATE_FAILED");
+  }
+
+  const updated = await prisma.user.update({
+    where: { id: created.id },
+    data: {
+      roleId: input.roleId,
+      email: input.email ?? placeholderEmail,
+      requirePasswordChange: options?.requirePasswordChange ?? input.requirePasswordChange ?? false,
+    },
+    include: { role: true },
+  });
+
+  return toPublicUser(updated);
+}
+
+export async function updateUserRecord(id: string, input: UpdateUserInput) {
+  const existing = await prisma.user.findUnique({
+    where: { id },
+    include: { role: true },
+  });
+
+  if (!existing) {
+    return null;
+  }
+
+  if (input.password) {
+    const { hashPassword } = await import("better-auth/crypto");
+    const hashed = await hashPassword(input.password);
+    await prisma.account.updateMany({
+      where: { userId: id, providerId: "credential" },
+      data: { password: hashed },
+    });
+  }
+
+  const updated = await prisma.user.update({
+    where: { id },
+    data: {
+      name: input.name,
+      email: input.email,
+      roleId: input.roleId,
+      requirePasswordChange: input.requirePasswordChange,
+    },
+    include: { role: true },
+  });
+
+  return toPublicUser(updated);
+}
+
+export async function deleteUserRecord(id: string) {
+  await prisma.user.delete({ where: { id } });
+}

package/templates/next-base/src/features/users/validations.ts

@@ -0,0 +1,21 @@
+import { z } from "zod";
+
+export const createUserSchema = z.object({
+  username: z.string().min(3).max(30),
+  password: z.string().min(8),
+  name: z.string().min(1).max(120).optional(),
+  email: z.string().email().optional(),
+  roleId: z.string().min(1),
+  requirePasswordChange: z.boolean().optional(),
+});
+
+export const updateUserSchema = z.object({
+  name: z.string().min(1).max(120).optional(),
+  email: z.string().email().nullable().optional(),
+  roleId: z.string().min(1).optional(),
+  password: z.string().min(8).optional(),
+  requirePasswordChange: z.boolean().optional(),
+});
+
+export type CreateUserInput = z.infer<typeof createUserSchema>;
+export type UpdateUserInput = z.infer<typeof updateUserSchema>;

package/templates/next-base/src/hooks/table/use-data-table.ts

@@ -0,0 +1,33 @@
+"use client";
+
+import * as React from "react";
+import {
+  getCoreRowModel,
+  getPaginationRowModel,
+  type ColumnDef,
+  useReactTable,
+} from "@tanstack/react-table";
+import type { DataTablePaginationState } from "@/types/data-table";
+
+export function useDataTable<TData>({
+  data,
+  columns,
+  initialState,
+}: {
+  data: TData[];
+  columns: ColumnDef<TData, unknown>[];
+  initialState?: DataTablePaginationState;
+}) {
+  const [pagination, setPagination] = React.useState<DataTablePaginationState>(
+    initialState ?? { pageIndex: 0, pageSize: 10 },
+  );
+
+  return useReactTable({
+    data,
+    columns,
+    state: { pagination },
+    onPaginationChange: setPagination,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+  });
+}

package/templates/next-base/src/hooks/use-mobile.ts

@@ -0,0 +1,25 @@
+"use client";
+
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+    undefined,
+  );
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}

package/templates/next-base/src/i18n/config.ts

@@ -0,0 +1,7 @@
+// nextcli:locales:start
+export const locales = ["vi"] as const;
+// nextcli:locales:end
+
+export const defaultLocale = "vi";
+
+export type AppLocale = (typeof locales)[number];

package/templates/next-base/src/i18n/namespaces.ts

@@ -0,0 +1,5 @@
+// nextcli:namespaces:start
+export const namespaces = ["common", "auth", "example"] as const;
+// nextcli:namespaces:end
+
+export type MessageNamespace = (typeof namespaces)[number];

package/templates/next-base/src/i18n/request.ts

@@ -0,0 +1,25 @@
+import { getRequestConfig } from "next-intl/server";
+import { cookies } from "next/headers";
+import { defaultLocale, locales, type AppLocale } from "@/i18n/config";
+import { namespaces } from "@/i18n/namespaces";
+
+export default getRequestConfig(async () => {
+  const cookieStore = await cookies();
+  const cookieLocale = cookieStore.get("NEXT_LOCALE")?.value;
+  const locale = (
+    locales.includes(cookieLocale as AppLocale) ? cookieLocale : defaultLocale
+  ) as AppLocale;
+
+  const namespaceMessages = await Promise.all(
+    namespaces.map(async (namespace) => {
+      const file = (await import(`../../messages/${locale}/${namespace}.json`))
+        .default;
+      return [namespace, file] as const;
+    }),
+  );
+
+  return {
+    locale,
+    messages: Object.fromEntries(namespaceMessages),
+  };
+});

package/templates/next-base/src/instrumentation.ts

@@ -0,0 +1,14 @@
+export async function register() {
+  if (process.env.NEXT_RUNTIME !== "nodejs") {
+    return;
+  }
+
+  try {
+    const { runBootstrap } = await import("@/lib/auth/bootstrap");
+    await runBootstrap();
+  } catch (error) {
+    const message =
+      error instanceof Error ? error.message : "Unknown instrumentation error";
+    console.warn(`[instrumentation] Bootstrap failed: ${message}`);
+  }
+}

package/templates/next-base/src/lib/api/axios.ts

@@ -0,0 +1,145 @@
+import axios from "axios";
+import {
+  clearAccessToken,
+  getAccessToken,
+  setAccessToken,
+} from "@/lib/api/token-store";
+import type { ApiErrorResponse, ApiSuccess } from "@/types";
+
+const baseURL = process.env.NEXT_PUBLIC_APP_URL ?? "http://localhost:3000";
+
+type RetryableRequestConfig = {
+  _retry?: boolean;
+};
+
+export const publicApi = axios.create({
+  baseURL,
+  withCredentials: true,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+export const protectedApi = axios.create({
+  baseURL,
+  withCredentials: true,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+protectedApi.interceptors.request.use((config) => {
+  const token = getAccessToken();
+  if (token) {
+    config.headers = config.headers ?? {};
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+let isRefreshing = false;
+let waitingQueue: Array<(token: string | null) => void> = [];
+
+function flushQueue(token: string | null): void {
+  for (const resolve of waitingQueue) {
+    resolve(token);
+  }
+  waitingQueue = [];
+}
+
+async function refreshAccessToken(): Promise<string | null> {
+  try {
+    const response = await publicApi.post("/api/v1/auth/refresh", null, {
+      withCredentials: true,
+    });
+    const token = (response.data as ApiSuccess<{ accessToken: string }>).data
+      ?.accessToken;
+    if (!token) {
+      clearAccessToken();
+      return null;
+    }
+    setAccessToken(token);
+    return token;
+  } catch {
+    clearAccessToken();
+    return null;
+  }
+}
+
+protectedApi.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    const config = error.config as typeof error.config & RetryableRequestConfig;
+    if (!config || config._retry || error.response?.status !== 401) {
+      return Promise.reject(error);
+    }
+
+    if (isRefreshing) {
+      return new Promise((resolve, reject) => {
+        waitingQueue.push((token) => {
+          if (!token) {
+            reject(error);
+            return;
+          }
+
+          config.headers = config.headers ?? {};
+          config.headers.Authorization = `Bearer ${token}`;
+          resolve(protectedApi(config));
+        });
+      });
+    }
+
+    config._retry = true;
+    isRefreshing = true;
+
+    try {
+      const token = await refreshAccessToken();
+      flushQueue(token);
+      if (!token) {
+        return Promise.reject(error);
+      }
+
+      config.headers = config.headers ?? {};
+      config.headers.Authorization = `Bearer ${token}`;
+      return protectedApi(config);
+    } finally {
+      isRefreshing = false;
+    }
+  },
+);
+
+function extractApiErrorMessage(error: unknown): string {
+  if (!axios.isAxiosError(error)) {
+    return "Unexpected error occurred.";
+  }
+
+  const payload = error.response?.data as ApiErrorResponse | undefined;
+  if (payload && payload.success === false) {
+    return payload.error.message;
+  }
+
+  return error.message || "Request failed.";
+}
+
+publicApi.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    if (axios.isAxiosError(error)) {
+      error.message = extractApiErrorMessage(error);
+    }
+    return Promise.reject(error);
+  },
+);
+
+protectedApi.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    if (axios.isAxiosError(error)) {
+      error.message = extractApiErrorMessage(error);
+    }
+    return Promise.reject(error);
+  },
+);
+
+export const api = publicApi;
+export { extractApiErrorMessage };