From 830c3ee2bd9be5ac4b4d8387252c498fc27b016d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Florian=20Sch=C3=A4fer?= <florian.schaefer@fumix.de>
Date: Fri, 21 Jun 2024 14:35:28 +0200
Subject: [PATCH 1/6] Style drafts differently, so they can be distinguished
 from published articles

---
 client/src/assets/scss/style.scss     | 6 +++++-
 client/src/components/PostPreview.vue | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/client/src/assets/scss/style.scss b/client/src/assets/scss/style.scss
index 36ebfa5..bce0481 100644
--- a/client/src/assets/scss/style.scss
+++ b/client/src/assets/scss/style.scss
@@ -8,7 +8,7 @@
   }
 }
 
-.content, 
+.content,
 .card,
 .jumbotron {
   transition: .75s ease-out all;
@@ -52,6 +52,10 @@ pre {
   img {
     max-width: 100%;
   }
+  &.draft {
+    background: repeating-linear-gradient( -45deg, #fff, #fff 10px, #eee 10px, #eee 20px );
+    filter: grayscale(.5);
+  }
 }
 
 .jumbotron {
diff --git a/client/src/components/PostPreview.vue b/client/src/components/PostPreview.vue
index d5d9ce0..6ca138a 100644
--- a/client/src/components/PostPreview.vue
+++ b/client/src/components/PostPreview.vue
@@ -2,7 +2,7 @@
   <div class="row mb-2">
     <div class="col">
       <div class="card flex-md-row mb-4 box-shadow h-md-250">
-        <div class="card-body">
+        <div v-bind:class="{ 'card-body': true, draft: post.draft }">
           <div class="clearfix mb-4">
             <button v-if="props.userPermissions?.canDeletePost" class="btn btn-sm btn-danger float-end" @click="$emit('deletePost', post)">
               <fa-icon :icon="faTrash" />

From 173c8c18442a58c19f3d44fbd0f45c8087147d26 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Florian=20Sch=C3=A4fer?= <florian.schaefer@fumix.de>
Date: Fri, 21 Jun 2024 14:36:47 +0200
Subject: [PATCH 2/6] Add common types for search operator and the logged in
 user

---
 common/src/index.ts                     | 2 ++
 common/src/types/logged-in-user-info.ts | 7 +++++++
 common/src/types/search-operator.ts     | 5 +++++
 3 files changed, 14 insertions(+)
 create mode 100644 common/src/types/logged-in-user-info.ts
 create mode 100644 common/src/types/search-operator.ts

diff --git a/common/src/index.ts b/common/src/index.ts
index 96b0ea4..2451106 100644
--- a/common/src/index.ts
+++ b/common/src/index.ts
@@ -22,6 +22,8 @@ export * from "./entity/User.js";
 export * from "./entity/UserRole.js";
 export * from "./entity/permission/UserRolePermissions.js";
 export * from "./markdown-converter-common.js";
+export * from "./types/logged-in-user-info.js";
+export * from "./types/search-operator.js";
 export * from "./util/base64.js";
 export * from "./util/cookie-header-helpers.js";
 export * from "./util/filesize.js";
diff --git a/common/src/types/logged-in-user-info.ts b/common/src/types/logged-in-user-info.ts
new file mode 100644
index 0000000..6947012
--- /dev/null
+++ b/common/src/types/logged-in-user-info.ts
@@ -0,0 +1,7 @@
+import type { UserRolePermissionsType } from "@common/entity/permission/UserRolePermissions.js";
+import type { User } from "@common/entity/User.js";
+
+export type LoggedInUserInfo = {
+  user: User;
+  permissions: UserRolePermissionsType;
+};
diff --git a/common/src/types/search-operator.ts b/common/src/types/search-operator.ts
new file mode 100644
index 0000000..09e875b
--- /dev/null
+++ b/common/src/types/search-operator.ts
@@ -0,0 +1,5 @@
+type SearchOperator = "and" | "or";
+
+export function asSearchOperator(s: string | undefined | null): SearchOperator {
+  return s?.toLowerCase() === "or" ? "or" : "and";
+}

From 60817175122a55daa6c265a2fcd57013a1527857 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Florian=20Sch=C3=A4fer?= <florian.schaefer@fumix.de>
Date: Fri, 21 Jun 2024 14:44:18 +0200
Subject: [PATCH 3/6] Replace deprecated faker methods with current ones

---
 portal/src/routes/login.ts            | 2 +-
 portal/src/routes/userinfo.ts         | 2 +-
 server/src/service/testdata/images.ts | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/portal/src/routes/login.ts b/portal/src/routes/login.ts
index 1950b21..73971ab 100644
--- a/portal/src/routes/login.ts
+++ b/portal/src/routes/login.ts
@@ -95,7 +95,7 @@ router.get("/", async (req, res) => {
     const middleName = faker.helpers.maybe(() => faker.person.middleName(), { probability: 0.7 });
     const lastName = faker.person.lastName();
     const fullName = [firstName, middleName, lastName].filter(isNeitherNullNorUndefined).join(" ");
-    const email = faker.internet.email(firstName, lastName);
+    const email = faker.internet.email({ firstName, lastName });
     res
       .status(200)
       .contentType("text/html")
diff --git a/portal/src/routes/userinfo.ts b/portal/src/routes/userinfo.ts
index b6237ab..7481721 100644
--- a/portal/src/routes/userinfo.ts
+++ b/portal/src/routes/userinfo.ts
@@ -12,7 +12,7 @@ router.post("/", (req, res) => {
       Object.assign(userInfo.profile, {
         sub: userId,
         name: userInfo.profile.fullName,
-        picture: faker.image.imageUrl(256, 256, "person,man,woman"),
+        picture: faker.image.urlLoremFlickr({ width: 256, height: 256, category: "person,man,woman" }),
       }),
     );
   } else {
diff --git a/server/src/service/testdata/images.ts b/server/src/service/testdata/images.ts
index 4a3ab4c..44353de 100644
--- a/server/src/service/testdata/images.ts
+++ b/server/src/service/testdata/images.ts
@@ -4,7 +4,7 @@ import { Canvas, CanvasRenderingContext2D, createCanvas } from "canvas";
 import fetch from "node-fetch";
 
 export async function generateProfilePicture(seed: number, sex: SexType, width = 256, height = 256): Promise<Blob> {
-  const url = faker.image.imageUrl(width, height, sex === Sex.Male ? "boy,man" : "girl,woman", true);
+  const url = faker.image.urlLoremFlickr({ width, height, category: sex === Sex.Male ? "boy,man" : "girl,woman" });
   return fetch(url)
     .then((response) =>
       response

From ab1501a9ed29a7fc244ace5591c7d2bc9dbda54d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Florian=20Sch=C3=A4fer?= <florian.schaefer@fumix.de>
Date: Fri, 21 Jun 2024 14:48:50 +0200
Subject: [PATCH 4/6] Make the findPosts() endpoints authenticated, also make
 access to permissions from within an endpoint easier

---
 server/src/logger.ts                  |   3 +
 server/src/routes/posts.ts            | 112 ++++++++++++++++----------
 server/src/routes/utility.ts          |   5 +-
 server/src/service/middleware/auth.ts |  20 +++--
 server/src/types/express/index.d.ts   |   3 +-
 5 files changed, 92 insertions(+), 51 deletions(-)

diff --git a/server/src/logger.ts b/server/src/logger.ts
index bd95f76..37c102d 100644
--- a/server/src/logger.ts
+++ b/server/src/logger.ts
@@ -1,3 +1,5 @@
+import { AppSettings } from "@server/settings.js";
+import process from "process";
 import winston, { createLogger, format, transports } from "winston";
 import "winston-daily-rotate-file/index.js";
 
@@ -24,6 +26,7 @@ export const logger = createLogger({
   transports: [
     new transports.Console({
       format: format.combine(format.colorize(), uncolored),
+      level: process.env.NODE_ENV !== "development" ? "info" : "debug",
     }),
     new winston.transports.DailyRotateFile({
       dirname: "logs",
diff --git a/server/src/routes/posts.ts b/server/src/routes/posts.ts
index cf4650f..e4e0439 100644
--- a/server/src/routes/posts.ts
+++ b/server/src/routes/posts.ts
@@ -1,5 +1,5 @@
-import { DraftResponseDto, EditPostRequestDto, NewPostRequestDto, permissionsForUser, PostRequestDto } from "@fumix/fu-blog-common";
-import { GoneError } from "../errors/GoneError.js";
+import { DraftResponseDto, EditPostRequestDto, LoggedInUserInfo, NewPostRequestDto, PostRequestDto } from "@fumix/fu-blog-common";
+import logger from "@server/logger.js";
 import express, { NextFunction, Request, Response, Router } from "express";
 import { In } from "typeorm";
 import { AppDataSource } from "../data-source.js";
@@ -9,6 +9,7 @@ import { PostEntity } from "../entity/Post.entity.js";
 import { TagEntity } from "../entity/Tag.entity.js";
 import { BadRequestError } from "../errors/BadRequestError.js";
 import { ForbiddenError } from "../errors/ForbiddenError.js";
+import { GoneError } from "../errors/GoneError.js";
 import { InternalServerError } from "../errors/InternalServerError.js";
 import { NotFoundError } from "../errors/NotFoundError.js";
 import { UnauthorizedError } from "../errors/UnauthorizedError.js";
@@ -20,53 +21,82 @@ import { generateShareImage } from "../service/opengraph.js";
 const router: Router = express.Router();
 
 // search posts
-router.get("/page/:page([0-9]+)/count/:count([0-9]+)/search/:search/operator/:operator", async (req: Request, res: Response, next) => {
-  const page = +req.params.page;
-  const itemsPerPage = +req.params.count;
-  const skipEntries = page * itemsPerPage - itemsPerPage;
-  let searchTerm = "";
-  if (req.params.search) {
-    const splitSearchParams: string[] = req.params.search.trim().split(" ");
-    const operator = req.params.operator === "or" ? " | " : " & ";
-    searchTerm = splitSearchParams.filter(Boolean).join(operator);
-  }
+router.get(
+  "/page/:page([0-9]+)/count/:count([0-9]+)/search/:search/operator/:operator",
+  authMiddleware,
+  async (req: Request, res: Response, next) => {
+    const page = +req.params.page;
+    const itemsPerPage = +req.params.count;
+    const skipEntries = page * itemsPerPage - itemsPerPage;
+    let searchTerm = "";
+    if (req.params.search) {
+      const splitSearchParams: string[] = req.params.search.trim().split(" ");
+      const operator = req.params.operator === "or" ? " | " : " & ";
+      searchTerm = splitSearchParams.filter(Boolean).join(operator);
+    }
 
-  await AppDataSource.manager
-    .createQueryBuilder(PostEntity, "post")
-    .select(["post.id as post_id", "ts_rank_cd(sp.post_tsv, to_tsquery(:searchTerm)) as rank", "count(*) over() as count"])
-    .setParameter("searchTerm", searchTerm)
-    .leftJoin("search_posts", "sp", "sp.post_id = id")
-    .where("sp.post_tsv @@ to_tsquery(:searchTerm)", { searchTerm: searchTerm })
-    .orderBy("rank", "DESC")
-    .offset(skipEntries)
-    .limit(itemsPerPage)
-    .getRawMany()
-    .then(async (result) => {
-      const idArray = result?.map((r) => parseInt(r.post_id)) as number[];
-      const count = result?.map((r) => parseInt(r.count)) as number[];
-
-      await AppDataSource.manager
-        .getRepository(PostEntity)
-        .find({
-          where: { id: In(idArray) },
-          relations: ["createdBy", "updatedBy", "tags"],
-        })
-        .then((result) => res.status(200).json({ data: [result, count[0]] }));
-    })
-    .catch((err) => next(err));
-});
+    const loggedInUser = await req.loggedInUser?.();
+
+    await AppDataSource.manager
+      .createQueryBuilder(PostEntity, "post")
+      .select(["post.id as post_id", "ts_rank_cd(sp.post_tsv, to_tsquery(:searchTerm)) as rank", "count(*) over() as count"])
+      .setParameter("searchTerm", searchTerm)
+      .leftJoin("search_posts", "sp", "sp.post_id = id")
+      .where(
+        (loggedInUser?.permissions?.canEditPost === true ? "" : "(draft = FALSE OR created_by_id=:userId) AND ") +
+          "sp.post_tsv @@ to_tsquery(:searchTerm)",
+        {
+          searchTerm: searchTerm,
+          userId: loggedInUser?.user?.id,
+        },
+      )
+      .orderBy("rank", "DESC")
+      .offset(skipEntries)
+      .limit(itemsPerPage)
+      .getRawMany()
+      .then(async (result) => {
+        const idArray = result?.map((r) => parseInt(r.post_id)) as number[];
+        const count = result?.map((r) => parseInt(r.count)) as number[];
+
+        await AppDataSource.manager
+          .getRepository(PostEntity)
+          .find({
+            where: { id: In(idArray) },
+            relations: ["createdBy", "updatedBy", "tags"],
+          })
+          .then((result) => res.status(200).json({ data: [result, count[0]] }));
+      })
+      .catch((err) => next(err));
+  },
+);
 
 // get all posts with paging
-router.get("/page/:page([0-9]+)/count/:count([0-9]+)/", async (req: Request, res: Response, next) => {
+router.get("/page/:page([0-9]+)/count/:count([0-9]+)/", authMiddleware, async (req: Request, res: Response, next) => {
   const page = +req.params.page;
   const itemsPerPage = +req.params.count;
   const skipEntries = page * itemsPerPage - itemsPerPage;
+
+  const loggedInUser: LoggedInUserInfo | undefined = await req.loggedInUser?.();
+
   await AppDataSource.manager
     .getRepository(PostEntity)
     .findAndCount({
       order: {
         createdAt: "DESC",
       },
+      where:
+        loggedInUser && loggedInUser.permissions.canEditPost
+          ? {}
+          : [
+              {
+                draft: false,
+              },
+              {
+                createdBy: {
+                  id: loggedInUser?.user?.id,
+                },
+              },
+            ],
       skip: skipEntries,
       take: itemsPerPage,
       relations: ["createdBy", "updatedBy", "tags"],
@@ -114,13 +144,13 @@ router.post(
   multipleFilesUpload,
   async (req: Request, res: Response<DraftResponseDto>, next: NextFunction): Promise<void> => {
     const body: NewPostRequestDto | undefined = JSON.parse(req.body?.json) as NewPostRequestDto;
-    const loggedInUser = await req.loggedInUser?.();
+    const loggedInUser: LoggedInUserInfo | undefined = await req.loggedInUser?.();
 
     if (!body) {
       return next(new BadRequestError());
     } else if (!loggedInUser) {
       return next(new UnauthorizedError());
-    } else if (!permissionsForUser(loggedInUser.user).canCreatePost) {
+    } else if (!loggedInUser.permissions.canCreatePost) {
       return next(new ForbiddenError());
     }
     AppDataSource.manager
@@ -197,7 +227,7 @@ router.post("/:id(\\d+$)", authMiddleware, multipleFilesUpload, async (req: Requ
   const account = await req.loggedInUser?.();
   if (!account) {
     return next(new UnauthorizedError());
-  } else if (!permissionsForUser(account.user).canEditPost && (account.user.id === null || account.user.id !== post.createdBy?.id)) {
+  } else if (!account.permissions.canEditPost && (account.user.id === null || account.user.id !== post.createdBy?.id)) {
     return next(new ForbiddenError());
   }
 
@@ -339,7 +369,7 @@ router.get("/:id(\\d+)/og-image", async (req: Request, res: Response, next) => {
     .findOne({ where: { id: +req.params.id } })
     .then((post) => {
       if (post && post.id) {
-        console.log("Generating share image for post", post.id);
+        logger.debug("Generating share image for post", post.id);
         res.status(200).write(generateShareImage(post.title, post.createdAt));
         res.end();
       } else {
diff --git a/server/src/routes/utility.ts b/server/src/routes/utility.ts
index 6e66a17..76bca8a 100644
--- a/server/src/routes/utility.ts
+++ b/server/src/routes/utility.ts
@@ -1,4 +1,3 @@
-import { permissionsForUser } from "@fumix/fu-blog-common";
 import express, { Request, Response, Router } from "express";
 import fetch from "node-fetch";
 import { AppDataSource } from "../data-source.js";
@@ -80,7 +79,7 @@ router.post("/chatGptSummarize", authMiddleware, async (req, res, next) => {
     return next(new BadRequestError());
   } else if (!loggedInUser) {
     return next(new UnauthorizedError());
-  } else if (!permissionsForUser(loggedInUser.user).canCreatePost) {
+  } else if (!loggedInUser.permissions.canCreatePost) {
     return next(new ForbiddenError());
   }
 
@@ -103,7 +102,7 @@ router.post("/dallEGenerateImage", authMiddleware, async (req, res, next) => {
     return next(new BadRequestError());
   } else if (!loggedInUser) {
     return next(new UnauthorizedError());
-  } else if (!permissionsForUser(loggedInUser.user).canCreatePost) {
+  } else if (!loggedInUser.permissions.canCreatePost) {
     return next(new ForbiddenError());
   }
 
diff --git a/server/src/service/middleware/auth.ts b/server/src/service/middleware/auth.ts
index f10630e..dd6c79c 100644
--- a/server/src/service/middleware/auth.ts
+++ b/server/src/service/middleware/auth.ts
@@ -1,4 +1,5 @@
-import { Cookies, HttpHeader, OAuthProvider, OAuthType } from "@fumix/fu-blog-common";
+import type { LoggedInUserInfo } from "@fumix/fu-blog-common";
+import { Cookies, HttpHeader, OAuthProvider, OAuthType, permissionsForUser } from "@fumix/fu-blog-common";
 import { NextFunction, Request, Response } from "express";
 import { createRemoteJWKSet, JWTPayload, jwtVerify } from "jose";
 import { AppDataSource } from "../../data-source.js";
@@ -31,14 +32,21 @@ const authMiddleware = async (req: Request, res: Response, next: NextFunction) =
 
       req.loggedInUser = async () =>
         checkIdToken(jwtToken, provider, refreshTokenFun)
-          .then<OAuthAccountEntity | null>((it) => {
-            logger.debug(`ID token checked, ${it.exp ? "expires at " + new Date(it.exp * 1000) : "expired"}`);
+          .then<LoggedInUserInfo | undefined>((value: JWTPayload) => {
+            logger.debug(`ID token checked, ${value.exp ? "expires at " + new Date(value.exp * 1000) : "expired"}`);
             return AppDataSource.manager //
               .getRepository(OAuthAccountEntity)
-              .findOne({ where: { oauthId: it.sub }, relations: ["user"] });
+              .findOne({ where: { oauthId: value.sub }, relations: ["user"] })
+              .then((it): LoggedInUserInfo | undefined => {
+                if (it?.user) {
+                  return {
+                    user: it.user,
+                    permissions: permissionsForUser(it.user),
+                  };
+                }
+              });
           })
-          .then((it) => it ?? undefined)
-          .catch((x) => undefined);
+          .catch(() => undefined);
     }
   }
   next();
diff --git a/server/src/types/express/index.d.ts b/server/src/types/express/index.d.ts
index d0382bc..3a55c12 100644
--- a/server/src/types/express/index.d.ts
+++ b/server/src/types/express/index.d.ts
@@ -1,4 +1,5 @@
 import { OAuthAccountEntity } from "@server/entity/OAuthAccount.entity.js";
+import { LoggedInUserInfo } from "@server/service/middleware/auth.js";
 import { Client, Issuer } from "openid-client";
 
 declare global {
@@ -12,7 +13,7 @@ declare global {
       /**
        * Get the logged-in user by using `req.loggedInUser?.()`
        */
-      loggedInUser?: () => Promise<OAuthAccountEntity | undefined>;
+      loggedInUser?: () => Promise<LoggedInUserInfo | undefined>;
     }
   }
 }

From 3a7bfa1b7419fa243bf57962782a7ca7271142d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Florian=20Sch=C3=A4fer?= <florian.schaefer@fumix.de>
Date: Fri, 21 Jun 2024 14:50:48 +0200
Subject: [PATCH 5/6] Adapt the client to the server changes for getting the
 list of posts

---
 client/src/App.vue             | 31 +++++++++++--------------------
 client/src/util/api-client.ts  | 17 ++++++++++++++---
 client/src/views/PostsView.vue | 25 +++++++++++--------------
 3 files changed, 36 insertions(+), 37 deletions(-)

diff --git a/client/src/App.vue b/client/src/App.vue
index 9f44c2c..871b3b2 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -29,13 +29,13 @@
               <li class="nav-item">
                 <RouterLink to="/posts" class="nav-link">{{ t("nav.posts") }}</RouterLink>
               </li>
-              <li v-if="isAdmin()" class="nav-item">
+              <li v-if="loggedInUserInfo?.permissions?.canEditUserRoles ?? false" class="nav-item">
                 <RouterLink to="/administration" class="nav-link">{{ t("nav.administration") }}</RouterLink>
               </li>
             </ul>
             <div class="username">
-              <login-button v-if="!loggedInUser"></login-button>
-              <user-name v-else :user="loggedInUser" @logout="logoutUser($event)"></user-name>
+              <login-button v-if="!loggedInUserInfo"></login-button>
+              <user-name v-else :user="loggedInUserInfo.user" @logout="logoutUser($event)"></user-name>
             </div>
 
             <light-dark-toggler @theme-changed="cssTheme = $event" style="margin-right: 2.5rem"></light-dark-toggler>
@@ -49,7 +49,7 @@
         </div>
       </nav>
 
-      <RouterView :userPermissions="userPermissions" />
+      <RouterView :userPermissions="loggedInUserInfo?.permissions" />
     </div>
     <footer class="page-footer">
       <div class="container">
@@ -114,8 +114,7 @@ import { AuthEndpoints } from "@client/util/api-client.js";
 import { saveIdToken } from "@client/util/storage.js";
 import { faGithub } from "@fortawesome/free-brands-svg-icons";
 import { faExternalLink } from "@fortawesome/free-solid-svg-icons";
-import type { AppSettingsDto, User, UserRolePermissionsType } from "@fumix/fu-blog-common";
-import { permissionsForUser } from "@fumix/fu-blog-common";
+import type { AppSettingsDto, LoggedInUserInfo } from "@fumix/fu-blog-common";
 import { onMounted, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRoute, useRouter } from "vue-router";
@@ -124,8 +123,7 @@ const { t } = useI18n();
 const route = useRoute();
 const searchQuery = ref<string>("");
 const router = useRouter();
-const loggedInUser = ref<User | null>(null);
-const userPermissions = ref<UserRolePermissionsType | null>(null);
+const loggedInUserInfo = ref<LoggedInUserInfo | undefined>(undefined);
 const cssTheme = ref<string | null>(null);
 
 const appData: AppSettingsDto = (JSON.parse(document.getElementById("app-data")?.textContent ?? "{}") as AppSettingsDto) ?? {
@@ -150,13 +148,11 @@ const setOperator = (operator: string) => {
 
 const setLoginUserAndPermissions = async () => {
   AuthEndpoints.getLoggedInUser()
-    .then((oauthAccount) => {
-      loggedInUser.value = oauthAccount.user;
-      userPermissions.value = permissionsForUser(oauthAccount.user);
+    .then((userInfo: LoggedInUserInfo) => {
+      loggedInUserInfo.value = userInfo;
     })
     .catch(() => {
-      loggedInUser.value = null;
-      userPermissions.value = null;
+      loggedInUserInfo.value = undefined;
     });
 };
 
@@ -172,7 +168,7 @@ watch(route, async (value) => {
 onMounted(() => {
   // listen for token-changed event to gracefully handle login/logout
   window.addEventListener("token-changed", (event) => {
-    if (!loggedInUser.value) {
+    if (!loggedInUserInfo.value) {
       setLoginUserAndPermissions();
     }
   });
@@ -190,14 +186,9 @@ const startSearch = (search: string, operator: string = "and") => {
   }
 };
 
-const isAdmin = () => {
-  return loggedInUser.value?.roles.includes("ADMIN");
-};
-
 const logoutUser = (event: Event) => {
   saveIdToken(null); // clear localStorage
-  loggedInUser.value = null;
-  userPermissions.value = null;
+  loggedInUserInfo.value = undefined;
   router.push(`/`);
 };
 </script>
diff --git a/client/src/util/api-client.ts b/client/src/util/api-client.ts
index 01917e9..4446a93 100644
--- a/client/src/util/api-client.ts
+++ b/client/src/util/api-client.ts
@@ -5,8 +5,9 @@ import type {
   DraftResponseDto,
   EditPostRequestDto,
   JsonMimeType,
+  LoggedInUserInfo,
   NewPostRequestDto,
-  OAuthAccount,
+  Post,
   SupportedImageMimeType,
 } from "@fumix/fu-blog-common";
 import { HttpHeader, imageBytesToDataUrl } from "@fumix/fu-blog-common";
@@ -86,10 +87,10 @@ function toFormData<T>(payload: ApiRequestJsonPayloadWithFiles<T> | null): FormD
 }
 
 export class AuthEndpoints {
-  static async getLoggedInUser(): Promise<OAuthAccount> {
+  static async getLoggedInUser(): Promise<LoggedInUserInfo> {
     const token = loadIdToken();
     if (token) {
-      return callServer<null, JsonMimeType, OAuthAccount>("/api/auth/loggedInUser/", "POST", "application/json");
+      return callServer<null, JsonMimeType, LoggedInUserInfo>("/api/auth/loggedInUser/", "POST", "application/json");
     }
     return Promise.reject();
   }
@@ -138,4 +139,14 @@ export class PostEndpoints {
   static async deletePost(id: number): Promise<{ affected: number }> {
     return callServer<void, JsonMimeType, { affected: number }>(`/api/posts/delete/${id}`, "POST", "application/json");
   }
+
+  static async findPosts(pageIndex: number, itemsPerPage = 12, search: string | undefined = undefined, operator: "and" | "or" = "and") {
+    return callServer<void, JsonMimeType, { data: [Post[], number | null] }>(
+      `/api/posts/page/${pageIndex}/count/${itemsPerPage}${search ? `/search/${encodeURIComponent(search)}/operator/${operator}` : ""}###`,
+      "GET",
+      "application/json",
+      null,
+      true,
+    );
+  }
 }
diff --git a/client/src/views/PostsView.vue b/client/src/views/PostsView.vue
index f24961e..29baeda 100644
--- a/client/src/views/PostsView.vue
+++ b/client/src/views/PostsView.vue
@@ -74,9 +74,10 @@ import ConfirmDialog from "@client/components/ConfirmDialog.vue";
 import LoadingSpinner from "@client/components/LoadingSpinner.vue";
 import PostPreview from "@client/components/PostPreview.vue";
 import WordCloud from "@client/components/WordCloud.vue";
+import { PostEndpoints } from "@client/util/api-client";
 import { faSadTear } from "@fortawesome/free-regular-svg-icons";
 import { faAdd } from "@fortawesome/free-solid-svg-icons";
-import type { ConfirmDialogData, Post, UserRolePermissionsType } from "@fumix/fu-blog-common";
+import { asSearchOperator, type ConfirmDialogData, type Post, type UserRolePermissionsType } from "@fumix/fu-blog-common";
 import type { PropType } from "vue";
 import { onMounted, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
@@ -104,15 +105,11 @@ const props = defineProps({
   },
 });
 
-const loadPostsWithPagination = async (pageIndex: number, search: string, operator: string) => {
+const loadPostsWithPagination = async (pageIndex: number, search: string, operator: "and" | "or") => {
   try {
-    let link = !search
-      ? `/api/posts/page/${pageIndex}/count/${itemsPerPage}`
-      : `/api/posts/page/${pageIndex}/count/${itemsPerPage}/search/${encodeURIComponent(search)}/operator/${encodeURIComponent(operator)}`;
-    const res = await fetch(link);
-    const response = await res.json();
-    posts.value = response.data[0];
-    totalPages.value = Math.ceil((await response.data[1]) / itemsPerPage);
+    const [postResult, count] = await PostEndpoints.findPosts(pageIndex, 12, search, operator).then((it) => it.data);
+    posts.value = postResult;
+    totalPages.value = Math.ceil((count ?? 0) / itemsPerPage);
     loading.value = false;
   } catch (e) {
     console.log("ERROR: ", e);
@@ -122,22 +119,22 @@ const loadPostsWithPagination = async (pageIndex: number, search: string, operat
 
 const onPaginate = (page: number) => {
   const searchValue = (route.query?.search || "") as string;
-  const operator = (route.query?.operator || "and") as string;
+  const operator = asSearchOperator(route.query?.operator?.toString());
   loadPostsWithPagination(page, searchValue, operator);
 };
 
 watch(
   () => route.query,
   (query) => {
-    const searchValue = (query?.search || "") as string;
-    const operator = (route.query?.operator || "and") as string;
+    const searchValue = (query?.search ?? "") as string;
+    const operator = asSearchOperator(route.query?.operator?.toString());
     loadPostsWithPagination(1, searchValue, operator);
   },
 );
 
 onMounted(() => {
   const searchValue = (route.query?.search || "") as string;
-  const operator = (route.query?.operator || "and") as string;
+  const operator = asSearchOperator(route.query?.operator?.toString());
 
   blogTitle.value = "fumiX Blog";
   blogShortDescription.value = "Alle Beiträge auf einen Blick";
@@ -150,7 +147,7 @@ const deletePost = async (post: Post) => {
     const res = await fetch(`/api/posts/delete/${post.id}`);
     await res.json();
     const searchValue = (route.query?.search || "") as string;
-    const operator = (route.query?.operator || "and") as string;
+    const operator = asSearchOperator(route.query?.operator?.toString());
     await loadPostsWithPagination(1, searchValue, operator);
   } catch (e) {
     console.log("ERROR: ", e);

From 47ed2cabd8674634f64a37374617f853a4875a35 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Florian=20Sch=C3=A4fer?= <florian.schaefer@fumix.de>
Date: Fri, 21 Jun 2024 17:05:09 +0200
Subject: [PATCH 6/6] Only pass basic information to the client when getting
 post list

---
 client/package.json                   |  1 +
 client/src/components/DisplayTags.vue | 36 +++++-----------
 client/src/components/PostPreview.vue | 20 ++++-----
 client/src/util/api-client.ts         |  4 +-
 client/src/views/PostView.vue         |  2 +-
 client/src/views/PostsView.vue        | 17 ++++----
 common/src/entity/UserRole.ts         |  2 +
 common/src/index.ts                   |  1 +
 common/src/types/public-post.ts       | 42 +++++++++++++++++++
 package-lock.json                     | 60 +++++++++++++++++++++++++++
 server/src/routes/posts.ts            | 15 +++++--
 11 files changed, 150 insertions(+), 50 deletions(-)
 create mode 100644 common/src/types/public-post.ts

diff --git a/client/package.json b/client/package.json
index 5e83ca5..5f86e4c 100644
--- a/client/package.json
+++ b/client/package.json
@@ -31,6 +31,7 @@
   },
   "devDependencies": {
     "@intlify/unplugin-vue-i18n": "^4.0.0",
+    "@material/web": "^1.5.0",
     "@rushstack/eslint-patch": "^1.10.3",
     "@tsconfig/node20": "^20.1.4",
     "@types/bootstrap": "^5.2.10",
diff --git a/client/src/components/DisplayTags.vue b/client/src/components/DisplayTags.vue
index e630a77..407f40c 100644
--- a/client/src/components/DisplayTags.vue
+++ b/client/src/components/DisplayTags.vue
@@ -1,40 +1,24 @@
 <template>
-  <div class="badge-container">
-    <div
-      v-for="tag in [...tags].sort((a, b) => a.name.localeCompare(b.name))"
-      :key="tag.id"
-      class="badge me-1"
-      @click="searchWord(tag.name)"
-    >
-      {{ tag.name }}
-    </div>
-  </div>
+  <md-chip-set>
+    <md-suggestion-chip v-for="tag in sortedTags()" v-bind:key="tag" :label="tag" @click="searchWord(tag)"></md-suggestion-chip>
+  </md-chip-set>
 </template>
 
-<style lang="scss">
-.badge-container {
-  padding: 0;
-  margin: 0;
-
-  .badge {
-    background-color: $badge-background-color;
-    color: $badge-text-color;
-    cursor: pointer;
-  }
-}
-</style>
-
 <script setup lang="ts">
-import type { Tag } from "@fumix/fu-blog-common";
 import type { PropType } from "vue";
 import { useRouter } from "vue-router";
+import "@material/web/chips/chip-set.js";
+import "@material/web/chips/filter-chip.js";
+import "@material/web/chips/suggestion-chip.js";
 
 const router = useRouter();
-const props = defineProps({ tags: { type: Array as PropType<Tag[]>, required: true } });
+const props = defineProps({ tags: { type: Array as PropType<string[]>, required: true } });
+
+const sortedTags = () => [...props.tags].sort((a, b) => a.localeCompare(b));
 
 const searchWord = (word: string): void => {
   if (word) {
-    router.push(`/posts/?search=${word}&operator=and`);
+    router.push(`/posts/?search=${encodeURIComponent(word)}&operator=and`);
   }
 };
 </script>
diff --git a/client/src/components/PostPreview.vue b/client/src/components/PostPreview.vue
index 6ca138a..df14951 100644
--- a/client/src/components/PostPreview.vue
+++ b/client/src/components/PostPreview.vue
@@ -4,12 +4,12 @@
       <div class="card flex-md-row mb-4 box-shadow h-md-250">
         <div v-bind:class="{ 'card-body': true, draft: post.draft }">
           <div class="clearfix mb-4">
-            <button v-if="props.userPermissions?.canDeletePost" class="btn btn-sm btn-danger float-end" @click="$emit('deletePost', post)">
+            <button v-if="props.post.permissions.canDelete" class="btn btn-sm btn-danger float-end" @click="$emit('deletePost', post)">
               <fa-icon :icon="faTrash" />
               {{ t("app.base.delete") }}
             </button>
             <button
-              v-if="props.userPermissions?.canEditPost"
+              v-if="props.post.permissions.canEdit"
               class="btn btn-sm btn-secondary float-end mx-2"
               @click="$emit('changePost', post)"
             >
@@ -24,16 +24,16 @@
 
           <p class="card-text my-4">{{ post.description }}</p>
 
-          <div v-if="post.createdAt" class="mb-1 text-muted creator">
+          <div v-if="post.created" class="mb-1 text-muted creator">
             <fa-icon :icon="faClock" />
-            {{ $luxonDateTime.fromISO(post.createdAt.toString(), { locale: locale }).toRelativeCalendar() }}
-            <i v-if="post.createdBy">{{ post.createdBy.fullName }}</i>
+            {{ $luxonDateTime.fromISO(post.created.at.toString(), { locale: locale }).toRelativeCalendar() }}
+            <i v-if="post.created.by">{{ post.created.by }}</i>
           </div>
 
-          <div v-if="post.updatedBy && post.updatedAt" class="mb-1 text-muted editor">
+          <div v-if="post.updated" class="mb-1 text-muted editor">
             <fa-icon :icon="faEdit" />
-            {{ $luxonDateTime.fromISO(post.updatedAt.toString(), { locale: locale }).toRelativeCalendar() }}
-            <i>{{ post.updatedBy.fullName }}</i>
+            {{ $luxonDateTime.fromISO(post.updated.at.toString(), { locale: locale }).toRelativeCalendar() }}
+            <i v-if="post.updated.by">{{ post.updated.by }}</i>
           </div>
 
           <display-tags v-if="post.tags" :tags="post.tags"></display-tags>
@@ -71,7 +71,7 @@
 import DisplayTags from "@client/components/DisplayTags.vue";
 import { faClock } from "@fortawesome/free-regular-svg-icons";
 import { faBookReader, faEdit, faTrash } from "@fortawesome/free-solid-svg-icons";
-import type { Post, UserRolePermissionsType } from "@fumix/fu-blog-common";
+import type { Post, PublicPost, UserRolePermissionsType } from "@fumix/fu-blog-common";
 import type { PropType } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
@@ -82,7 +82,7 @@ const locale = useI18n().locale.value;
 
 const props = defineProps({
   post: {
-    type: Object as PropType<Post>,
+    type: Object as PropType<PublicPost>,
     required: true,
   },
   userPermissions: {
diff --git a/client/src/util/api-client.ts b/client/src/util/api-client.ts
index 4446a93..408d3b3 100644
--- a/client/src/util/api-client.ts
+++ b/client/src/util/api-client.ts
@@ -7,7 +7,7 @@ import type {
   JsonMimeType,
   LoggedInUserInfo,
   NewPostRequestDto,
-  Post,
+  PublicPost,
   SupportedImageMimeType,
 } from "@fumix/fu-blog-common";
 import { HttpHeader, imageBytesToDataUrl } from "@fumix/fu-blog-common";
@@ -141,7 +141,7 @@ export class PostEndpoints {
   }
 
   static async findPosts(pageIndex: number, itemsPerPage = 12, search: string | undefined = undefined, operator: "and" | "or" = "and") {
-    return callServer<void, JsonMimeType, { data: [Post[], number | null] }>(
+    return callServer<void, JsonMimeType, { data: [PublicPost[], number | null] }>(
       `/api/posts/page/${pageIndex}/count/${itemsPerPage}${search ? `/search/${encodeURIComponent(search)}/operator/${operator}` : ""}###`,
       "GET",
       "application/json",
diff --git a/client/src/views/PostView.vue b/client/src/views/PostView.vue
index 3518992..65c9f38 100644
--- a/client/src/views/PostView.vue
+++ b/client/src/views/PostView.vue
@@ -46,7 +46,7 @@
               <i>{{ post.updatedBy.fullName }}</i>
             </div>
 
-            <display-tags v-if="post.tags" :tags="post.tags"></display-tags>
+            <display-tags v-if="post?.tags" :tags="post?.tags?.map((it) => it.name) ?? []"></display-tags>
 
             <div v-html="post.sanitizedHtml" class="mt-4"></div>
           </div>
diff --git a/client/src/views/PostsView.vue b/client/src/views/PostsView.vue
index 29baeda..a144757 100644
--- a/client/src/views/PostsView.vue
+++ b/client/src/views/PostsView.vue
@@ -77,7 +77,8 @@ import WordCloud from "@client/components/WordCloud.vue";
 import { PostEndpoints } from "@client/util/api-client";
 import { faSadTear } from "@fortawesome/free-regular-svg-icons";
 import { faAdd } from "@fortawesome/free-solid-svg-icons";
-import { asSearchOperator, type ConfirmDialogData, type Post, type UserRolePermissionsType } from "@fumix/fu-blog-common";
+import type { ConfirmDialogData, PublicPost, UserRolePermissionsType } from "@fumix/fu-blog-common";
+import { asSearchOperator } from "@fumix/fu-blog-common";
 import type { PropType } from "vue";
 import { onMounted, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
@@ -88,10 +89,10 @@ const route = useRoute();
 const router = useRouter();
 const itemsPerPage = 12;
 const loading = ref(true);
-const posts = ref<Post[]>([]);
+const posts = ref<PublicPost[]>([]);
 const showDialog = ref<boolean>(false);
 const dialogData = ref<ConfirmDialogData | null>(null);
-const currentPost = ref<Post | null>(null);
+const currentPost = ref<PublicPost | null>(null);
 const totalPages = ref<number>(1);
 const { t } = useI18n();
 
@@ -142,7 +143,7 @@ onMounted(() => {
   loadPostsWithPagination(1, searchValue, operator);
 });
 
-const deletePost = async (post: Post) => {
+const deletePost = async (post: PublicPost) => {
   try {
     const res = await fetch(`/api/posts/delete/${post.id}`);
     await res.json();
@@ -162,8 +163,8 @@ const searchWord = (event: any) => {
   goTo(`/posts/?search=${event[0]}&operator=and`);
 };
 
-const showConfirm = (post: Post) => {
-  currentPost.value = post as Post;
+const showConfirm = (post: PublicPost) => {
+  currentPost.value = post as PublicPost;
   dialogData.value = {
     title: t("posts.confirm.title"),
     message: t("posts.confirm.message", { post: currentPost.value.title }),
@@ -176,12 +177,12 @@ const canceled = () => {
 };
 
 const confirmed = () => {
-  deletePost(currentPost.value as Post);
+  deletePost(currentPost.value as PublicPost);
   currentPost.value = null;
   showDialog.value = false;
 };
 
-const changePost = (post: Post) => {
+const changePost = (post: PublicPost) => {
   goTo(`/posts/post/${post.id}/edit`);
 };
 </script>
diff --git a/common/src/entity/UserRole.ts b/common/src/entity/UserRole.ts
index 5202700..fb42156 100644
--- a/common/src/entity/UserRole.ts
+++ b/common/src/entity/UserRole.ts
@@ -20,6 +20,8 @@ export const UserRoles = {
   ),
 } as const;
 
+export const DEFAULT_ROLE = new UserRolePermissions("Permissions of the logged out user (basically no permissions at all)", {});
+
 export function permissionsForUser(user: User): UserRolePermissionsType {
   return mergePermissions(user.roles.map((it) => UserRoles[it]));
 }
diff --git a/common/src/index.ts b/common/src/index.ts
index 2451106..be9eada 100644
--- a/common/src/index.ts
+++ b/common/src/index.ts
@@ -23,6 +23,7 @@ export * from "./entity/UserRole.js";
 export * from "./entity/permission/UserRolePermissions.js";
 export * from "./markdown-converter-common.js";
 export * from "./types/logged-in-user-info.js";
+export * from "./types/public-post.js";
 export * from "./types/search-operator.js";
 export * from "./util/base64.js";
 export * from "./util/cookie-header-helpers.js";
diff --git a/common/src/types/public-post.ts b/common/src/types/public-post.ts
new file mode 100644
index 0000000..896ef84
--- /dev/null
+++ b/common/src/types/public-post.ts
@@ -0,0 +1,42 @@
+import { Post } from "@common/entity/Post.js";
+import { LoggedInUserInfo } from "@common/types/logged-in-user-info.js";
+
+export type PublicPost = {
+  id: number | undefined;
+  title: string;
+  description: string;
+  created:
+    | {
+        at: Date;
+        by: string | undefined;
+      }
+    | undefined;
+  updated:
+    | {
+        at: Date;
+        by: string | undefined;
+      }
+    | undefined;
+  draft: boolean;
+  tags: string[];
+  permissions: {
+    canEdit: boolean;
+    canDelete: boolean;
+  };
+};
+
+export function createPublicPostFromPostEntity(loggedInUser: LoggedInUserInfo | undefined, post: Post): PublicPost {
+  return {
+    id: post.id,
+    title: post.title,
+    description: post.description,
+    tags: post.tags?.map((it) => it.name) ?? [],
+    created: post.createdAt ? { at: post.createdAt, by: post.createdBy?.fullName } : undefined,
+    updated: post.updatedAt ? { at: post.updatedAt, by: post.updatedBy?.fullName } : undefined,
+    draft: post.draft,
+    permissions: {
+      canEdit: loggedInUser?.permissions?.canEditPost === true || loggedInUser?.user?.id === post.createdBy?.id,
+      canDelete: loggedInUser?.permissions?.canDeletePost === true || loggedInUser?.user?.id === post.createdBy?.id,
+    },
+  };
+}
diff --git a/package-lock.json b/package-lock.json
index cca3931..7247a67 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -52,6 +52,7 @@
       },
       "devDependencies": {
         "@intlify/unplugin-vue-i18n": "^4.0.0",
+        "@material/web": "^1.5.0",
         "@rushstack/eslint-patch": "^1.10.3",
         "@tsconfig/node20": "^20.1.4",
         "@types/bootstrap": "^5.2.10",
@@ -1427,6 +1428,21 @@
         "webidl-conversions": "^3.0.0"
       }
     },
+    "node_modules/@lit-labs/ssr-dom-shim": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.0.tgz",
+      "integrity": "sha512-yWJKmpGE6lUURKAaIltoPIE/wrbY3TEkqQt+X0m+7fQNnAv0keydnYvbiJFP1PnMhizmIWRWOG5KLhYyc/xl+g==",
+      "dev": true
+    },
+    "node_modules/@lit/reactive-element": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.4.tgz",
+      "integrity": "sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==",
+      "dev": true,
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.2.0"
+      }
+    },
     "node_modules/@mapbox/node-pre-gyp": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.11.tgz",
@@ -1484,6 +1500,19 @@
         "webidl-conversions": "^3.0.0"
       }
     },
+    "node_modules/@material/web": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@material/web/-/web-1.5.0.tgz",
+      "integrity": "sha512-aM2TVCU8Ozh3QS5cckRalmWkNCKK3Y6uhB3skIozP6jIqYX1PDhme/URrHGcWk44k2qqmR7R+X8GEBAu8N/NCQ==",
+      "dev": true,
+      "workspaces": [
+        "catalog"
+      ],
+      "dependencies": {
+        "lit": "^2.7.4 || ^3.0.0",
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -8691,6 +8720,37 @@
         "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
       }
     },
+    "node_modules/lit": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-3.1.4.tgz",
+      "integrity": "sha512-q6qKnKXHy2g1kjBaNfcoLlgbI3+aSOZ9Q4tiGa9bGYXq5RBXxkVTqTIVmP2VWMp29L4GyvCFm8ZQ2o56eUAMyA==",
+      "dev": true,
+      "dependencies": {
+        "@lit/reactive-element": "^2.0.4",
+        "lit-element": "^4.0.4",
+        "lit-html": "^3.1.2"
+      }
+    },
+    "node_modules/lit-element": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.0.6.tgz",
+      "integrity": "sha512-U4sdJ3CSQip7sLGZ/uJskO5hGiqtlpxndsLr6mt3IQIjheg93UKYeGQjWMRql1s/cXNOaRrCzC2FQwjIwSUqkg==",
+      "dev": true,
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.2.0",
+        "@lit/reactive-element": "^2.0.4",
+        "lit-html": "^3.1.2"
+      }
+    },
+    "node_modules/lit-html": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.4.tgz",
+      "integrity": "sha512-yKKO2uVv7zYFHlWMfZmqc+4hkmSbFp8jgjdZY9vvR9jr4J8fH6FUMXhr+ljfELgmjpvlF7Z1SJ5n5/Jeqtc9YA==",
+      "dev": true,
+      "dependencies": {
+        "@types/trusted-types": "^2.0.2"
+      }
+    },
     "node_modules/load-json-file": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-6.2.0.tgz",
diff --git a/server/src/routes/posts.ts b/server/src/routes/posts.ts
index e4e0439..a20b41c 100644
--- a/server/src/routes/posts.ts
+++ b/server/src/routes/posts.ts
@@ -1,4 +1,11 @@
-import { DraftResponseDto, EditPostRequestDto, LoggedInUserInfo, NewPostRequestDto, PostRequestDto } from "@fumix/fu-blog-common";
+import {
+  createPublicPostFromPostEntity,
+  DraftResponseDto,
+  EditPostRequestDto,
+  LoggedInUserInfo,
+  NewPostRequestDto,
+  PostRequestDto,
+} from "@fumix/fu-blog-common";
 import logger from "@server/logger.js";
 import express, { NextFunction, Request, Response, Router } from "express";
 import { In } from "typeorm";
@@ -64,7 +71,9 @@ router.get(
             where: { id: In(idArray) },
             relations: ["createdBy", "updatedBy", "tags"],
           })
-          .then((result) => res.status(200).json({ data: [result, count[0]] }));
+          .then((result) =>
+            res.status(200).json({ data: [result.map((it) => createPublicPostFromPostEntity(loggedInUser, it)), count[0]] }),
+          );
       })
       .catch((err) => next(err));
   },
@@ -101,7 +110,7 @@ router.get("/page/:page([0-9]+)/count/:count([0-9]+)/", authMiddleware, async (r
       take: itemsPerPage,
       relations: ["createdBy", "updatedBy", "tags"],
     })
-    .then((result) => res.status(200).json({ data: result }))
+    .then(([posts, count]) => res.status(200).json({ data: [posts.map((it) => createPublicPostFromPostEntity(loggedInUser, it)), count] }))
     .catch((error) => {
       next(error);
     });