@nocobase/portal-template-default 1.0.0

package/src/pages/categories/edit.tsx

@@ -0,0 +1,73 @@
+import { useForm } from "@refinedev/react-hook-form";
+import { useNavigate } from "react-router";
+
+import { EditView } from "@/components/resources/views/edit-view";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+
+export const CategoryEdit = () => {
+  const navigate = useNavigate();
+
+  const {
+    refineCore: { onFinish },
+    ...form
+  } = useForm({
+    refineCoreProps: {},
+  });
+
+  function onSubmit(values: Record<string, string>) {
+    onFinish(values);
+  }
+
+  return (
+    <EditView>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="resource-form">
+          <FormField
+            control={form.control}
+            name="title"
+            rules={{ required: "Title is required" }}
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Title</FormLabel>
+                <FormControl
+                  render={<Input
+                    {...field}
+                    value={field.value || ""}
+                    placeholder="Enter category title"
+                  />}
+                />
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <div className="flex gap-2">
+            <Button
+              type="submit"
+              {...form.saveButtonProps}
+              disabled={form.formState.isSubmitting}
+            >
+              {form.formState.isSubmitting ? "Updating..." : "Update"}
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => navigate(-1)}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </EditView>
+  );
+};

package/src/pages/categories/index.ts

@@ -0,0 +1,4 @@
+export * from "./create";
+export * from "./edit";
+export * from "./list";
+export * from "./show";

package/src/pages/categories/list.tsx

@@ -0,0 +1,86 @@
+import { type BaseRecord } from "@refinedev/core";
+import { useTable } from "@refinedev/react-table";
+import { createColumnHelper } from "@tanstack/react-table";
+import { Eye, Pencil, Trash2 } from "lucide-react";
+import React from "react";
+
+import { DataTable } from "@/components/data-table/data-table";
+import { ListView } from "@/components/resources/views/list-view";
+import { EditButton } from "@/components/resources/buttons/edit";
+import { ShowButton } from "@/components/resources/buttons/show";
+import { DeleteButton } from "@/components/resources/buttons/delete";
+
+type Category = {
+  id: string;
+  title: string;
+};
+
+export const CategoryList = () => {
+  const columns = React.useMemo(() => {
+    const columnHelper = createColumnHelper<Category>();
+
+    return [
+      columnHelper.accessor("id", {
+        id: "id",
+        header: "ID",
+        enableSorting: false,
+      }),
+      columnHelper.accessor("title", {
+        id: "title",
+        header: "Title",
+        enableSorting: true,
+      }),
+      columnHelper.display({
+        id: "actions",
+        header: "Actions",
+        cell: ({ row }) => (
+          <div className="flex items-center gap-1">
+            <EditButton
+              recordItemId={row.original.id}
+              variant="ghost"
+              size="icon"
+              aria-label="Edit category"
+              title="Edit"
+            >
+              <Pencil />
+            </EditButton>
+            <ShowButton
+              recordItemId={row.original.id}
+              variant="ghost"
+              size="icon"
+              aria-label="View category"
+              title="View"
+            >
+              <Eye />
+            </ShowButton>
+            <DeleteButton
+              recordItemId={row.original.id}
+              variant="ghost"
+              size="icon"
+              className="text-destructive hover:text-destructive"
+              aria-label="Delete category"
+              title="Delete"
+            >
+              <Trash2 />
+            </DeleteButton>
+          </div>
+        ),
+        enableSorting: false,
+        size: 144,
+      }),
+    ];
+  }, []);
+
+  const table = useTable({
+    columns,
+    refineCoreProps: {
+      syncWithLocation: true,
+    },
+  });
+
+  return (
+    <ListView>
+      <DataTable table={table} />
+    </ListView>
+  );
+};

package/src/pages/categories/show.tsx

@@ -0,0 +1,37 @@
+import { useShow } from "@refinedev/core";
+import React from "react";
+
+import { ShowView } from "@/components/resources/views/show-view";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+export const CategoryShow = () => {
+  const { result: record, query } = useShow({});
+  const { isLoading } = query;
+
+  return (
+    <ShowView>
+      <Card className="resource-detail-card max-w-3xl">
+        <CardHeader>
+          <CardTitle>{record?.title}</CardTitle>
+          <CardDescription>Category ID: {record?.id}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            <div>
+              <h4 className="text-sm font-medium mb-2">Title</h4>
+              <p className="text-sm text-muted-foreground">
+                {record?.title || "-"}
+              </p>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </ShowView>
+  );
+};

package/src/pages/forgot-password/index.tsx

@@ -0,0 +1,6 @@
+import { ForgotPasswordForm } from "@/components/auth/forgot-password-form";
+import React from "react";
+
+export const ForgotPassword = () => {
+  return <ForgotPasswordForm />;
+};

package/src/pages/forgotPassword/index.tsx

@@ -0,0 +1,5 @@
+import { ForgotPasswordForm } from "@/components/auth/forgot-password-form";
+
+export const ForgotPassword = () => {
+  return <ForgotPasswordForm />;
+};

package/src/pages/login/index.tsx

@@ -0,0 +1,5 @@
+import { SignInForm } from "@/components/auth/sign-in-form";
+
+export const Login = () => {
+  return <SignInForm />;
+};

package/src/pages/register/index.tsx

@@ -0,0 +1,5 @@
+import { SignUpForm } from "@/components/auth/sign-up-form";
+
+export const Register = () => {
+  return <SignUpForm />;
+};

package/src/providers/auth.ts

@@ -0,0 +1,204 @@
+import type { AuthProvider } from "@refinedev/core";
+
+import {
+  AUTH_API_URL,
+  getNocoBaseHeaders,
+  NOCOBASE_TOKEN_KEY,
+} from "./constants";
+
+type NocoBaseUser = {
+  id: number | string;
+  nickname?: string;
+  username?: string;
+  email?: string;
+  avatar?: string;
+};
+
+type NocoBaseSignInResponse = {
+  token?: string;
+  user?: NocoBaseUser;
+};
+
+type CurrentUserCache = {
+  token: string;
+  user: NocoBaseUser;
+  expiresAt: number;
+};
+
+const CURRENT_USER_CACHE_MS = 30_000;
+let currentUserCache: CurrentUserCache | undefined;
+let currentUserRequest: Promise<NocoBaseUser> | undefined;
+
+const authUrl = (action: "signIn" | "signOut" | "check") =>
+  `${AUTH_API_URL.replace(/\/$/, "")}/auth:${action}`;
+
+const getErrorMessage = (payload: unknown, fallback: string) => {
+  if (typeof payload !== "object" || payload === null) return fallback;
+  const error = payload as { message?: string; errors?: Array<{ message?: string }> };
+  return error.errors?.[0]?.message ?? error.message ?? fallback;
+};
+
+const saveRenewedToken = (response: Response) => {
+  const token = response.headers.get("x-new-token");
+  if (token) localStorage.setItem(NOCOBASE_TOKEN_KEY, token);
+};
+
+const clearCurrentUserCache = () => {
+  currentUserCache = undefined;
+  currentUserRequest = undefined;
+};
+
+const getCurrentUser = async (): Promise<NocoBaseUser> => {
+  const token = localStorage.getItem(NOCOBASE_TOKEN_KEY);
+  if (!token) throw new Error("No NocoBase token");
+
+  if (currentUserCache?.token === token && currentUserCache.expiresAt > Date.now()) {
+    return currentUserCache.user;
+  }
+
+  if (currentUserRequest) return currentUserRequest;
+
+  currentUserRequest = (async () => {
+    const response = await fetch(authUrl("check"), {
+      headers: getNocoBaseHeaders({ token, includeAuthenticator: true }),
+    });
+    const payload = await response.json().catch(() => undefined);
+    if (!response.ok) throw new Error(getErrorMessage(payload, "NocoBase session is invalid"));
+
+    saveRenewedToken(response);
+    const user = (payload?.data ?? payload) as NocoBaseUser;
+    currentUserCache = {
+      token: localStorage.getItem(NOCOBASE_TOKEN_KEY) ?? token,
+      user,
+      expiresAt: Date.now() + CURRENT_USER_CACHE_MS,
+    };
+    return user;
+  })();
+
+  try {
+    return await currentUserRequest;
+  } finally {
+    currentUserRequest = undefined;
+  }
+};
+
+export const authProvider: AuthProvider = {
+  login: async ({ username, email, password, providerName }) => {
+    if (providerName) {
+      return {
+        success: false,
+        error: {
+          name: "UnsupportedAuthenticator",
+          message: "Configure this provider as a NocoBase authenticator before using social sign-in.",
+        },
+      };
+    }
+
+    const account = username ?? email;
+    if (!account || !password) {
+      return {
+        success: false,
+        error: { name: "LoginError", message: "Please enter your account and password." },
+      };
+    }
+
+    try {
+      const response = await fetch(authUrl("signIn"), {
+        method: "POST",
+        headers: getNocoBaseHeaders({
+          includeAuthenticator: true,
+          includeContentType: true,
+        }),
+        body: JSON.stringify({ account, password }),
+      });
+      const payload = await response.json().catch(() => undefined);
+      if (!response.ok) {
+        return {
+          success: false,
+          error: { name: "LoginError", message: getErrorMessage(payload, "Unable to sign in.") },
+        };
+      }
+
+      const result = (payload?.data ?? payload) as NocoBaseSignInResponse;
+      if (!result.token) {
+        return {
+          success: false,
+          error: { name: "LoginError", message: "NocoBase did not return an access token." },
+        };
+      }
+
+      localStorage.setItem(NOCOBASE_TOKEN_KEY, result.token);
+      clearCurrentUserCache();
+      return { success: true, redirectTo: "/" };
+    } catch {
+      return {
+        success: false,
+        error: {
+          name: "NetworkError",
+          message:
+            "Unable to reach the NocoBase server. If this is a remote NocoBase from localhost, enable backend CORS for X-Authenticator or use the Vite proxy.",
+        },
+      };
+    }
+  },
+
+  logout: async () => {
+    const token = localStorage.getItem(NOCOBASE_TOKEN_KEY);
+    try {
+      if (token) {
+        await fetch(authUrl("signOut"), {
+          method: "POST",
+          headers: getNocoBaseHeaders({ token, includeAuthenticator: true }),
+        });
+      }
+    } finally {
+      localStorage.removeItem(NOCOBASE_TOKEN_KEY);
+      clearCurrentUserCache();
+    }
+
+    return { success: true, redirectTo: "/login" };
+  },
+
+  check: async () => {
+    try {
+      await getCurrentUser();
+      return { authenticated: true };
+    } catch {
+      localStorage.removeItem(NOCOBASE_TOKEN_KEY);
+      clearCurrentUserCache();
+      return { authenticated: false, redirectTo: "/login" };
+    }
+  },
+
+  getPermissions: async () => null,
+
+  getIdentity: async () => {
+    try {
+      const user = await getCurrentUser();
+      const fullName = user.nickname ?? user.username ?? user.email ?? "NocoBase user";
+      return {
+        id: user.id,
+        firstName: fullName,
+        lastName: "",
+        fullName,
+        email: user.email ?? "",
+        avatar: user.avatar,
+      };
+    } catch {
+      return null;
+    }
+  },
+
+  onError: async (error) => {
+    const status = (error as { status?: number; statusCode?: number }).status ??
+      (error as { status?: number; statusCode?: number }).statusCode;
+
+    if (status === 401 || status === 403) {
+      localStorage.removeItem(NOCOBASE_TOKEN_KEY);
+      clearCurrentUserCache();
+      return { logout: true, redirectTo: "/login" };
+    }
+
+    return { error };
+  },
+};

package/src/providers/constants.ts

@@ -0,0 +1,75 @@
+const rawApiUrl =
+  import.meta.env.NOCOBASE_API_URL ?? "http://127.0.0.1:13000/api";
+
+const getDefaultProxyTarget = (apiUrl?: string) => {
+  if (!apiUrl || apiUrl.startsWith("/")) return undefined;
+
+  try {
+    return new URL(apiUrl).origin;
+  } catch {
+    return undefined;
+  }
+};
+
+const proxyTarget = import.meta.env.DEV
+  ? getDefaultProxyTarget(rawApiUrl)
+  : undefined;
+
+const toProxyRelativeUrl = (url: string, target?: string) => {
+  if (!target || url.startsWith("/")) return url;
+
+  try {
+    const parsedUrl = new URL(url);
+    const parsedTarget = new URL(target);
+
+    if (parsedUrl.origin === parsedTarget.origin) {
+      return `${parsedUrl.pathname}${parsedUrl.search}${parsedUrl.hash}`;
+    }
+  } catch {
+    return url;
+  }
+
+  return url;
+};
+
+const getClientLocale = () =>
+  typeof navigator !== "undefined" ? navigator.language : undefined;
+
+const getClientTimezone = () => {
+  const offsetMinutes = -new Date().getTimezoneOffset();
+  const sign = offsetMinutes >= 0 ? "+" : "-";
+  const absoluteMinutes = Math.abs(offsetMinutes);
+  const hours = String(Math.floor(absoluteMinutes / 60)).padStart(2, "0");
+  const minutes = String(absoluteMinutes % 60).padStart(2, "0");
+
+  return `${sign}${hours}:${minutes}`;
+};
+
+export const API_URL = toProxyRelativeUrl(rawApiUrl, proxyTarget);
+export const AUTH_API_URL = API_URL;
+export const TOKEN_KEY = "refine-auth";
+export const NOCOBASE_TOKEN_KEY = "nocobase-auth-token";
+export const NOCOBASE_AUTHENTICATOR =
+  import.meta.env.NOCOBASE_AUTHENTICATOR ?? "basic";
+
+export const getNocoBaseHeaders = ({
+  token,
+  includeAuthenticator = false,
+  includeContentType = false,
+}: {
+  token?: string;
+  includeAuthenticator?: boolean;
+  includeContentType?: boolean;
+} = {}) => {
+  const locale = getClientLocale();
+  const timezone = getClientTimezone();
+
+  return {
+    Accept: "application/json",
+    ...(includeContentType ? { "Content-Type": "application/json" } : {}),
+    ...(includeAuthenticator ? { "X-Authenticator": NOCOBASE_AUTHENTICATOR } : {}),
+    ...(locale ? { "X-Locale": locale } : {}),
+    ...(timezone ? { "X-Timezone": timezone } : {}),
+    ...(token ? { Authorization: `Bearer ${token}` } : {}),
+  };
+};