@goplusvn/core 0.1.69 → 0.1.71

package/src/security/pages/sessions-page.tsx

@@ -0,0 +1,516 @@
+"use client"
+
+// Trang QUẢN TRỊ "Quản lý phiên đăng nhập" (Better Auth, session DB-backed) —
+// admin xem/thu hồi phiên của MỌI user. Promoted từ vinhhoa. Gate user:view ở
+// page + API (app tự gác). Data: props `apiUrl` (mặc định
+// /api/security/sessions) — app cung cấp 3 endpoint:
+//   GET    {apiUrl}?search&page&pageSize  → {items,total,page,pageSize}
+//   DELETE {apiUrl}/{id}                  → thu hồi 1 phiên
+//   POST   {apiUrl}/revoke-user {userId}  → đăng xuất mọi thiết bị của 1 user
+// Impersonation ("đăng nhập thay") là tính năng app-specific (cần authClient
+// của app) — core KHÔNG ship; app nào cần thì tự bọc thêm nút quanh trang này.
+import { useCallback, useEffect, useRef, useState } from "react"
+import { toast } from "sonner"
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  Globe,
+  Monitor,
+  MonitorSmartphone,
+  RefreshCw,
+  Search,
+  Smartphone,
+  Tablet,
+  Trash2,
+  UserX,
+  X,
+} from "lucide-react"
+
+import {
+  Badge,
+  Button,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Skeleton,
+} from "../../ui/primitives"
+import { ConfirmDialog } from "../../ui/shared/confirm-dialog"
+import { cn } from "../../utils"
+
+interface SessionRow {
+  id: string
+  userId: string
+  userName: string | null
+  userEmail: string | null
+  ipAddress: string | null
+  userAgent: string | null
+  createdAt: string
+  updatedAt: string
+  expiresAt: string
+  isCurrent: boolean
+  isMine: boolean
+  /** Plugin admin của Better Auth — app không dùng thì API cứ trả null. */
+  impersonatedBy?: string | null
+}
+
+// --- Phân tích User-Agent thô → trình duyệt + hệ điều hành + loại máy ---
+function parseUA(ua: string | null | undefined) {
+  const s = ua || ""
+  const browser = /edg\//i.test(s)
+    ? "Edge"
+    : /chrome|crios/i.test(s)
+      ? "Chrome"
+      : /firefox|fxios/i.test(s)
+        ? "Firefox"
+        : /safari/i.test(s)
+          ? "Safari"
+          : /curl/i.test(s)
+            ? "curl"
+            : "Trình duyệt khác"
+  const os = /windows/i.test(s)
+    ? "Windows"
+    : /mac os x|macintosh/i.test(s)
+      ? "macOS"
+      : /android/i.test(s)
+        ? "Android"
+        : /iphone|ipad|ios/i.test(s)
+          ? "iOS"
+          : /linux/i.test(s)
+            ? "Linux"
+            : "Không rõ"
+  const kind: "mobile" | "tablet" | "desktop" = /ipad|tablet/i.test(s)
+    ? "tablet"
+    : /mobile|iphone|android/i.test(s)
+      ? "mobile"
+      : "desktop"
+  return { browser, os, kind }
+}
+
+const KIND_ICON = {
+  mobile: Smartphone,
+  tablet: Tablet,
+  desktop: Monitor,
+} as const
+
+function formatTime(d: string) {
+  return new Date(d).toLocaleString("vi-VN", {
+    hour: "2-digit",
+    minute: "2-digit",
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+  })
+}
+
+function shortIp(ip: string | null | undefined) {
+  if (!ip) return "—"
+  if (ip === "::1" || /^0000:/.test(ip)) return "localhost"
+  return ip.replace(/^::ffff:/, "")
+}
+
+const PAGE_SIZES = [10, 20, 50]
+
+export interface SessionsPageProps {
+  /** Gốc API app cung cấp (GET list · DELETE /{id} · POST /revoke-user). */
+  apiUrl?: string
+}
+
+export function SessionsPage({
+  apiUrl = "/api/security/sessions",
+}: SessionsPageProps = {}) {
+  const [items, setItems] = useState<SessionRow[]>([])
+  const [total, setTotal] = useState(0)
+  const [search, setSearch] = useState("")
+  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(20)
+  const [loading, setLoading] = useState(true)
+  const [isRefreshing, setIsRefreshing] = useState(false)
+  const [busyId, setBusyId] = useState<string | null>(null)
+  const [confirmRow, setConfirmRow] = useState<SessionRow | null>(null)
+  const [confirmUser, setConfirmUser] = useState<SessionRow | null>(null)
+  const [revokingUser, setRevokingUser] = useState(false)
+
+  // Debounce tìm kiếm 350ms — chuẩn các toolbar khác
+  const searchTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const [debouncedSearch, setDebouncedSearch] = useState("")
+  useEffect(() => {
+    if (searchTimer.current) clearTimeout(searchTimer.current)
+    searchTimer.current = setTimeout(() => {
+      setDebouncedSearch(search)
+      setPage(1)
+    }, 350)
+    return () => {
+      if (searchTimer.current) clearTimeout(searchTimer.current)
+    }
+  }, [search])
+
+  const fetchData = useCallback(async () => {
+    try {
+      const params = new URLSearchParams({
+        page: String(page),
+        pageSize: String(pageSize),
+      })
+      if (debouncedSearch) params.set("search", debouncedSearch)
+      const res = await fetch(`${apiUrl}?${params}`, {
+        cache: "no-store",
+      })
+      if (!res.ok) throw new Error("Không tải được danh sách phiên")
+      const data = await res.json()
+      setItems(data.items ?? [])
+      setTotal(data.total ?? 0)
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Lỗi tải dữ liệu")
+    } finally {
+      setLoading(false)
+      setIsRefreshing(false)
+    }
+  }, [apiUrl, page, pageSize, debouncedSearch])
+
+  useEffect(() => {
+    fetchData()
+  }, [fetchData])
+
+  const handleRefresh = () => {
+    setIsRefreshing(true)
+    fetchData()
+  }
+
+  const revokeOne = async (row: SessionRow) => {
+    setBusyId(row.id)
+    try {
+      const res = await fetch(`${apiUrl}/${row.id}`, {
+        method: "DELETE",
+      })
+      if (!res.ok) {
+        const data = await res.json().catch(() => null)
+        throw new Error(data?.error || "Không thu hồi được phiên")
+      }
+      toast.success("Đã thu hồi phiên đăng nhập")
+      setConfirmRow(null)
+      await fetchData()
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Không thu hồi được phiên")
+    } finally {
+      setBusyId(null)
+    }
+  }
+
+  const revokeAllOfUser = async (row: SessionRow) => {
+    setRevokingUser(true)
+    try {
+      const res = await fetch(`${apiUrl}/revoke-user`, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ userId: row.userId }),
+      })
+      const data = await res.json().catch(() => null)
+      if (!res.ok) throw new Error(data?.error || "Không thu hồi được phiên")
+      toast.success(
+        `Đã đăng xuất ${data?.revoked ?? 0} thiết bị của ${row.userName || row.userEmail}`
+      )
+      setConfirmUser(null)
+      await fetchData()
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Không thu hồi được phiên")
+    } finally {
+      setRevokingUser(false)
+    }
+  }
+
+  const totalPages = Math.max(Math.ceil(total / pageSize), 1)
+  const fromRow = total === 0 ? 0 : (page - 1) * pageSize + 1
+  const toRow = Math.min(page * pageSize, total)
+  const isSearching = debouncedSearch.length > 0
+
+  return (
+    <div className="flex flex-col">
+      {/* ===== Bar navy 1 dòng ===== */}
+      <div className="-mx-4 -mt-4 flex flex-wrap items-center gap-1.5 bg-sidebar px-3 py-2 text-sidebar-foreground shadow-md md:-mx-8 lg:mx-3 lg:mt-1 lg:rounded-xl lg:px-4">
+        <span className="flex h-8 w-8 shrink-0 items-center justify-center">
+          <MonitorSmartphone className="h-4 w-4 text-primary-foreground/80" />
+        </span>
+        <h1 className="min-w-0 flex-1 truncate px-1 text-base font-bold text-primary-foreground sm:text-lg">
+          Quản lý phiên đăng nhập
+        </h1>
+        <span className="hidden shrink-0 text-xs tabular-nums text-primary-foreground/70 md:inline">
+          {total} phiên đang hoạt động toàn hệ thống
+        </span>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={handleRefresh}
+          disabled={isRefreshing}
+          title="Làm mới"
+          className="h-8 w-8 shrink-0 text-primary-foreground/80 hover:bg-white/10 hover:text-primary-foreground"
+        >
+          <RefreshCw
+            className={cn("h-4 w-4", isRefreshing && "animate-spin")}
+          />
+        </Button>
+      </div>
+
+      {/* ===== Khối trắng: toolbar sticky + danh sách + phân trang ===== */}
+      <div className="mt-3 overflow-hidden rounded-xl border border-border bg-card shadow-sm lg:mx-3">
+        {/* Toolbar sticky — tìm kiếm chuẩn */}
+        <div className="sticky top-0 z-20 flex flex-wrap items-center gap-2 border-b border-border bg-card/95 px-3 py-2 backdrop-blur supports-[backdrop-filter]:bg-card/85 sm:px-4">
+          <div className="relative min-w-[160px] flex-1 sm:max-w-80">
+            <Search className="pointer-events-none absolute left-2.5 top-2 h-3.5 w-3.5 text-muted-foreground" />
+            <input
+              placeholder="Tìm theo tên, email, IP, thiết bị…"
+              className="h-8 w-full rounded-md border border-border bg-card pl-8 pr-8 text-sm outline-none focus-visible:ring-1 focus-visible:ring-primary"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+            />
+            {search && (
+              <button
+                type="button"
+                onClick={() => setSearch("")}
+                className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                title="Xóa tìm kiếm"
+              >
+                <X className="h-3.5 w-3.5" />
+              </button>
+            )}
+          </div>
+          <p className="ml-auto whitespace-nowrap text-xs text-muted-foreground">
+            <span className="font-semibold tabular-nums text-foreground">
+              {total}
+            </span>{" "}
+            {isSearching ? "khớp" : "phiên"}
+          </p>
+        </div>
+
+        {/* Danh sách */}
+        {loading ? (
+          <div className="space-y-2 p-4">
+            {Array.from({ length: 5 }).map((_, i) => (
+              <Skeleton key={i} className="h-16 w-full" />
+            ))}
+          </div>
+        ) : items.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-16 text-center">
+            <Globe className="mb-3 h-6 w-6 text-muted-foreground" />
+            <p className="text-sm text-muted-foreground">
+              {isSearching
+                ? "Không có phiên nào khớp từ khóa."
+                : "Không có phiên nào đang hoạt động."}
+            </p>
+          </div>
+        ) : (
+          <ul className="divide-y divide-border">
+            {items.map((s) => {
+              const ua = parseUA(s.userAgent)
+              const KindIcon = KIND_ICON[ua.kind]
+              return (
+                <li
+                  key={s.id}
+                  className="flex items-center gap-3 bg-card px-4 py-3"
+                >
+                  <span
+                    className={cn(
+                      "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border",
+                      s.isCurrent
+                        ? "border-emerald-200 bg-emerald-50 text-emerald-600 dark:border-emerald-500/30 dark:bg-emerald-500/10 dark:text-emerald-400"
+                        : "border-border bg-card text-muted-foreground"
+                    )}
+                  >
+                    <KindIcon className="h-4 w-4" />
+                  </span>
+
+                  <div className="min-w-0 flex-1">
+                    <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5">
+                      <span className="text-sm font-semibold text-foreground">
+                        {s.userName || s.userEmail || s.userId}
+                      </span>
+                      <span className="text-sm text-muted-foreground">
+                        {ua.browser} · {ua.os}
+                      </span>
+                      {s.isCurrent && (
+                        <Badge
+                          variant="outline"
+                          className="h-5 border-emerald-200 bg-emerald-50 px-1.5 text-[10px] font-semibold text-emerald-600 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-400"
+                        >
+                          Thiết bị này
+                        </Badge>
+                      )}
+                      {s.isMine && !s.isCurrent && (
+                        <Badge
+                          variant="outline"
+                          className="h-5 border-border px-1.5 text-[10px] font-medium text-muted-foreground"
+                        >
+                          Của tôi
+                        </Badge>
+                      )}
+                      {s.impersonatedBy && (
+                        <Badge
+                          variant="outline"
+                          className="h-5 border-amber-200 bg-amber-50 px-1.5 text-[10px] font-semibold text-amber-700 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-300"
+                          title="Phiên do quản trị viên đăng nhập thay"
+                        >
+                          Mạo danh
+                        </Badge>
+                      )}
+                    </div>
+                    <p className="mt-0.5 truncate text-xs text-muted-foreground">
+                      {s.userEmail ? `${s.userEmail} · ` : ""}IP{" "}
+                      <span className="font-mono">{shortIp(s.ipAddress)}</span>
+                      {" · "}đăng nhập {formatTime(s.createdAt)}
+                      {" · "}hết hạn {formatTime(s.expiresAt)}
+                    </p>
+                  </div>
+
+                  {/* Hành động — LUÔN hiển thị (phiên hiện tại: disabled kèm
+                      lý do, không ẩn để khỏi tưởng trang chỉ-đọc) */}
+                  <div className="flex shrink-0 items-center gap-1.5">
+                    <button
+                      type="button"
+                      onClick={() => setConfirmRow(s)}
+                      disabled={s.isCurrent || busyId === s.id}
+                      className="inline-flex items-center gap-1 rounded-md border border-border bg-card px-2 py-1.5 text-xs font-medium text-destructive shadow-sm transition-colors hover:border-destructive/40 hover:bg-destructive/10 disabled:cursor-not-allowed disabled:opacity-40"
+                      title={
+                        s.isCurrent
+                          ? "Phiên bạn đang dùng — không thể tự thu hồi (dùng Đăng xuất)"
+                          : "Đăng xuất thiết bị này ngay lập tức"
+                      }
+                    >
+                      <Trash2
+                        className={cn(
+                          "h-3.5 w-3.5",
+                          busyId === s.id && "animate-pulse"
+                        )}
+                      />
+                      <span className="hidden sm:inline">Thu hồi</span>
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setConfirmUser(s)}
+                      className="inline-flex items-center rounded-md border border-border bg-card p-1.5 text-amber-600 shadow-sm transition-colors hover:border-amber-300 hover:bg-amber-50 dark:hover:border-amber-500/40 dark:hover:bg-amber-500/10"
+                      title={`Đăng xuất MỌI thiết bị của ${s.userName || s.userEmail || "người dùng này"}`}
+                    >
+                      <UserX className="h-3.5 w-3.5" />
+                    </button>
+                  </div>
+                </li>
+              )
+            })}
+          </ul>
+        )}
+
+        {/* Footer phân trang chuẩn */}
+        <div className="flex flex-wrap items-center gap-2 border-t border-border px-3 py-2 sm:px-4">
+          <p className="text-xs text-muted-foreground">
+            Hiển thị {fromRow} - {toRow} trong tổng số {total} phiên
+          </p>
+          <div className="ml-auto flex items-center gap-2">
+            <span className="text-xs text-muted-foreground">Số dòng</span>
+            <Select
+              value={String(pageSize)}
+              onValueChange={(v) => {
+                setPageSize(Number(v))
+                setPage(1)
+              }}
+            >
+              <SelectTrigger className="h-7 w-[70px] text-xs">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {PAGE_SIZES.map((n) => (
+                  <SelectItem key={n} value={String(n)}>
+                    {n}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <div className="flex items-center gap-1">
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-7 w-7"
+                disabled={page <= 1}
+                onClick={() => setPage(1)}
+                title="Trang đầu"
+              >
+                <ChevronsLeft className="h-3.5 w-3.5" />
+              </Button>
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-7 w-7"
+                disabled={page <= 1}
+                onClick={() => setPage((p) => p - 1)}
+                title="Trang trước"
+              >
+                <ChevronLeft className="h-3.5 w-3.5" />
+              </Button>
+              <span className="px-1 text-xs tabular-nums text-muted-foreground">
+                Trang{" "}
+                <span className="font-semibold text-foreground">{page}</span> /{" "}
+                {totalPages}
+              </span>
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-7 w-7"
+                disabled={page >= totalPages}
+                onClick={() => setPage((p) => p + 1)}
+                title="Trang sau"
+              >
+                <ChevronRight className="h-3.5 w-3.5" />
+              </Button>
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-7 w-7"
+                disabled={page >= totalPages}
+                onClick={() => setPage(totalPages)}
+                title="Trang cuối"
+              >
+                <ChevronsRight className="h-3.5 w-3.5" />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <ConfirmDialog
+        open={!!confirmRow}
+        onOpenChange={(open) => !open && setConfirmRow(null)}
+        title="Thu hồi phiên đăng nhập"
+        description={
+          confirmRow
+            ? `Thu hồi phiên ${parseUA(confirmRow.userAgent).browser} · ${parseUA(confirmRow.userAgent).os} của ${
+                confirmRow.userName || confirmRow.userEmail || confirmRow.userId
+              }? Thiết bị đó sẽ bị đăng xuất ngay lập tức.`
+            : ""
+        }
+        onConfirm={() => confirmRow && revokeOne(confirmRow)}
+        loading={!!busyId}
+      />
+
+      <ConfirmDialog
+        open={!!confirmUser}
+        onOpenChange={(open) => !open && setConfirmUser(null)}
+        title="Đăng xuất mọi thiết bị của người dùng"
+        description={
+          confirmUser
+            ? `Thu hồi TẤT CẢ phiên đăng nhập của ${
+                confirmUser.userName ||
+                confirmUser.userEmail ||
+                confirmUser.userId
+              } trên mọi thiết bị. Người này sẽ phải đăng nhập lại. ${
+                confirmUser.isMine
+                  ? "(Bạn tự thu hồi — phiên hiện tại của bạn sẽ được giữ lại.)"
+                  : ""
+              }`
+            : ""
+        }
+        onConfirm={() => confirmUser && revokeAllOfUser(confirmUser)}
+        loading={revokingUser}
+      />
+    </div>
+  )
+}

package/src/ui/auth/sign-in-form.tsx

@@ -8,12 +8,11 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useAuthBridge } from "./auth-bridge";
 import { useForm } from "react-hook-form";
 import { Eye, EyeOff } from "lucide-react";
-import type { z } from "zod"; // Add this import
 
 import type { LocaleType } from "../../types";
 import { toast } from "sonner";
+import { z } from "zod";
 import { ensureLocalizedPathname, ensureRedirectPathname } from "../../utils";
-import { SignInSchema } from "../../schemas";
 import { useTabContentCache } from "../layout/tab-content-cache";
 import { useTabNavigation } from "../layout/tab-navigation-provider";
 
@@ -34,9 +33,64 @@ import {
 } from "../index";
 import { OAuthLinks } from "./oauth-links";
 
-type SignInFormType = z.infer<typeof SignInSchema>;
+/**
+ * Ô định danh nhận gì:
+ *  - "email" (mặc định, giữ hành vi cũ): validate + input type email.
+ *  - "username": tên đăng nhập/mã nhân viên — text tự do.
+ *  - "both": một ô cho cả hai; bridge của app tự phân loại (thường theo "@").
+ *
+ * Mật khẩu ở form ĐĂNG NHẬP chỉ đòi khác rỗng — luật độ phức tạp là chuyện lúc
+ * ĐẶT mật khẩu; siết ở đây sẽ chặn nhầm mật khẩu cũ hợp lệ import từ hệ khác.
+ */
+export interface SignInFormProps {
+  identifier?: "email" | "username" | "both";
+  /** Ghi đè nhãn ô định danh (vd "Email hoặc mã nhân viên"). */
+  identifierLabel?: string;
+  identifierPlaceholder?: string;
+}
+
+const IDENTIFIER_PRESETS = {
+  email: {
+    label: "Email",
+    placeholder: "name@example.com",
+    inputType: "email" as const,
+    schema: z.string().trim().toLowerCase().email({ message: "Email không hợp lệ" }),
+  },
+  username: {
+    label: "Tên đăng nhập",
+    placeholder: "ten-dang-nhap",
+    inputType: "text" as const,
+    schema: z.string().trim().min(1, { message: "Nhập tên đăng nhập" }),
+  },
+  both: {
+    label: "Email hoặc tên đăng nhập",
+    placeholder: "name@example.com",
+    inputType: "text" as const,
+    schema: z.string().trim().min(1, { message: "Nhập email hoặc tên đăng nhập" }),
+  },
+};
 
-export function SignInForm() {
+type SignInFormType = {
+  email: string;
+  password: string;
+  rememberMe?: boolean;
+};
+
+export function SignInForm({
+  identifier = "email",
+  identifierLabel,
+  identifierPlaceholder,
+}: SignInFormProps = {}) {
+  const preset = IDENTIFIER_PRESETS[identifier];
+  const schema = React.useMemo(
+    () =>
+      z.object({
+        email: preset.schema,
+        password: z.string().min(1, { message: "Nhập mật khẩu" }),
+        rememberMe: z.boolean().optional(),
+      }),
+    [preset],
+  );
   const { signInWithCredentials } = useAuthBridge();
   const params = useParams();
   const searchParams = useSearchParams();
@@ -50,7 +104,7 @@ export function SignInForm() {
     "/";
 
   const form = useForm<SignInFormType>({
-    resolver: zodResolver(SignInSchema),
+    resolver: zodResolver(schema),
     defaultValues: {
       email: "",
       password: "",
@@ -125,11 +179,12 @@ export function SignInForm() {
             name="email"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Email</FormLabel>
+                <FormLabel>{identifierLabel ?? preset.label}</FormLabel>
                 <FormControl>
                   <Input
-                    type="email"
-                    placeholder="name@example.com"
+                    type={preset.inputType}
+                    autoComplete={identifier === "email" ? "email" : "username"}
+                    placeholder={identifierPlaceholder ?? preset.placeholder}
                     {...field}
                   />
                 </FormControl>
@@ -210,7 +265,7 @@ export function SignInForm() {
         </div>
 
         <ButtonLoading isLoading={isSubmitting} disabled={isDisabled}>
-          Đăng nhập với Email
+          Đăng nhập
         </ButtonLoading>
         <div className="-mt-4 text-center text-sm">
           Chưa có tài khoản?{" "}