chore: add 403 page

api/v2/acl_config.go

@@ -7,6 +7,7 @@ var authenticationAllowlistMethods = map[string]bool{
 	"/memos.api.v2.AuthService/GetAuthStatus":     true,
 	"/memos.api.v2.UserService/GetUser":           true,
 	"/memos.api.v2.MemoService/ListMemos":         true,
+	"/memos.api.v2.MemoService/GetMemo":           true,
 	"/memos.api.v2.MemoService/ListMemoResources": true,
 	"/memos.api.v2.MemoService/ListMemoRelations": true,
 	"/memos.api.v2.MemoService/ListMemoComments":  true,

web/src/pages/Archived.tsx

 import { Tooltip } from "@mui/joy";
+import { ClientError } from "nice-grpc-web";
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import { showCommonDialog } from "@/components/Dialog/CommonDialog";
@@ -23,20 +24,18 @@ const Archived = () => {
   const [archivedMemos, setArchivedMemos] = useState<Memo[]>([]);
 
   useEffect(() => {
-    memoServiceClient
-      .listMemos({
-        filter: [`creator == "${user.name}"`, "row_status == 'ARCHIVED'"].join(" && "),
-      })
-      .then(({ memos }) => {
+    (async () => {
+      try {
+        const filters = [`creator == "${user.name}"`, "row_status == 'ARCHIVED'"];
+        const { memos } = await memoServiceClient.listMemos({
+          filter: filters.join(" && "),
+        });
         setArchivedMemos(memos);
-      })
-      .catch((error) => {
-        console.error(error);
-        toast.error(error.response.data.message);
-      })
-      .finally(() => {
-        loadingState.setFinish();
-      });
+      } catch (error: unknown) {
+        toast.error((error as ClientError).details);
+      }
+      loadingState.setFinish();
+    })();
   }, []);
 
   const handleDeleteMemoClick = async (memo: Memo) => {
@@ -63,9 +62,9 @@ const Archived = () => {
       );
       setArchivedMemos((prev) => prev.filter((m) => m.id !== memo.id));
       toast(t("message.restored-successfully"));
-    } catch (error: any) {
+    } catch (error: unknown) {
       console.error(error);
-      toast.error(error.response.data.message);
+      toast.error((error as ClientError).details);
     }
   };
 

web/src/pages/MemoDetail.tsx

 import { Select, Tooltip, Option, IconButton } from "@mui/joy";
 import copy from "copy-to-clipboard";
+import { ClientError } from "nice-grpc-web";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { Link, useParams } from "react-router-dom";
@@ -35,7 +36,7 @@ const MemoDetail = () => {
   const [creator, setCreator] = useState<User>();
   const memoId = Number(params.memoId);
   const memo = memoStore.getMemoById(memoId);
-  const allowEdit = memo?.creatorId === currentUser.id;
+  const allowEdit = memo?.creatorId === currentUser?.id;
   const [parentMemo, setParentMemo] = useState<Memo | undefined>(undefined);
   const referenceRelations = memo?.relations.filter((relation) => relation.type === MemoRelation_Type.REFERENCE) || [];
   const commentRelations =
@@ -51,9 +52,9 @@ const MemoDetail = () => {
           const user = await userStore.getOrFetchUserByUsername(extractUsernameFromName(memo.creator));
           setCreator(user);
         })
-        .catch((error) => {
-          console.error(error);
-          toast.error(error.response.data.message);
+        .catch((error: ClientError) => {
+          toast.error(error.details);
+          navigateTo("/403");
         });
     } else {
       navigateTo("/404");

web/src/pages/PermissionDenied.tsx

+import MobileHeader from "@/components/MobileHeader";
+
+const PermissionDenied = () => {
+  return (
+    <section className="@container w-full max-w-5xl min-h-[100svh] flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
+      <MobileHeader />
+      <div className="w-full px-4 grow flex flex-col justify-center items-center sm:px-6">
+        <p className="font-medium">Permission denied</p>
+        <p className="mt-4 text-[8rem] font-mono dark:text-gray-300">403</p>
+      </div>
+    </section>
+  );
+};
+
+export default PermissionDenied;

web/src/router/index.tsx

@@ -18,6 +18,7 @@ const Resources = lazy(() => import("@/pages/Resources"));
 const Inboxes = lazy(() => import("@/pages/Inboxes"));
 const Setting = lazy(() => import("@/pages/Setting"));
 const NotFound = lazy(() => import("@/pages/NotFound"));
+const PermissionDenied = lazy(() => import("@/pages/PermissionDenied"));
 
 const initialGlobalStateLoader = async () => {
   try {
@@ -110,6 +111,14 @@ const router = createBrowserRouter([
             path: "u/:username",
             element: <UserProfile />,
           },
+          {
+            path: "403",
+            element: <PermissionDenied />,
+          },
+          {
+            path: "404",
+            element: <NotFound />,
+          },
           {
             path: "*",
             element: <NotFound />,