Merge pull request #619 from CodeForAfrica/fix/codeforafrica_cms

Review of @/codeforafrica CMS

apps/codeforafrica/.eslintignore

@@ -4,13 +4,18 @@ node_modules
 .pnp.js
 .pnpm-debug.log
 
+# typescript
+dist/
+
 # testing
 coverage
 
 # next.js
 .next/
 out/
-build
+
+# payload
+build/
 
 # misc
 .DS_Store

apps/codeforafrica/package.json

@@ -23,15 +23,15 @@
   "scripts": {
     "cms": "netlify-cms-proxy-server",
     "build-server": "tsc --project tsconfig.server.json",
-    "build-next": "NEXT_BUILD=true pnpm pnpm build-server && NEXT_BUILD=true PAYLOAD_CONFIG_PATH=dist/payload.config.js node dist/server.js",
+    "build-next": "NEXT_BUILD=true pnpm pnpm build-server && NEXT_BUILD=true PAYLOAD_CONFIG_PATH=${PAYLOAD_CONFIG_PATH:-dist/payload.config.js} node dist/server.js",
     "build-payload": "payload build",
+    "start": "PAYLOAD_CONFIG_PATH=${PAYLOAD_CONFIG_PATH:-dist/payload.config.js} NODE_ENV=${NODE_ENV:-production} node dist/server.js",
     "dev": "NODE_OPTIONS='--inspect' ts-node --project tsconfig.server.json server.ts",
     "lint-check": "TIMING=1 eslint './'",
     "lint": "TIMING=1 eslint --fix './'",
     "jest": "jest",
     "playwright": "npx playwright test",
     "build": "next build",
-    "start": "next start",
     "clean": "rm -rf .next .turbo node_modules"
   },
   "dependencies": {
@@ -62,6 +62,7 @@
     "nanoid": "^4.0.2",
     "next": "~13.4.11",
     "next-seo": "^5.15.0",
+    "nodemailer-sendgrid": "^1.0.3",
     "payload": "^1.7.5",
     "prop-types": "^15.8.1",
     "qs": "^6.11.2",

apps/codeforafrica/payload.config.ts

@@ -1,25 +1,28 @@
 import path from "path";
 
 import { buildConfig } from "payload/config";
+import { CollectionConfig, GlobalConfig } from "payload/types";
+import { cloudStorage } from "@payloadcms/plugin-cloud-storage";
+import dotenv from "dotenv";
+import seo from "@payloadcms/plugin-seo";
+import nestedDocs from "@payloadcms/plugin-nested-docs";
+import { s3Adapter } from "@payloadcms/plugin-cloud-storage/s3";
+
 import Authors from "./src/payload/collections/Authors";
+import Donors from "./src/payload/collections/Donors";
 import GuidingPrinciples from "./src/payload/collections/GuidingPrinciples";
 import Impact from "./src/payload/collections/Impact";
 import Media from "./src/payload/collections/Media";
 import Members from "./src/payload/collections/Members";
 import Pages from "./src/payload/collections/Pages";
 import Partners from "./src/payload/collections/Partners";
 import Posts from "./src/payload/collections/Posts";
+import Projects from "./src/payload/collections/Projects";
 import Settings from "./src/payload/globals/Settings";
 import Tags from "./src/payload/collections/Tags";
-import Projects from "./src/payload/collections/Projects";
-import Donors from "./src/payload/collections/Donors";
 import Teams from "./src/payload/collections/Teams";
-import { CollectionConfig, GlobalConfig } from "payload/types";
-import dotenv from "dotenv";
-import seo from "@payloadcms/plugin-seo";
-import nestedDocs from "@payloadcms/plugin-nested-docs";
-import { cloudStorage } from "@payloadcms/plugin-cloud-storage";
-import { s3Adapter } from "@payloadcms/plugin-cloud-storage/s3";
+import Users from "./src/payload/collections/Users";
+import { defaultLocale, locales } from "./src/payload/utils/locales";
 
 dotenv.config();
 dotenv.config({ path: "./.env.local" });
@@ -62,10 +65,21 @@ export default buildConfig({
     Posts,
     Tags,
     Teams,
+    Users,
   ] as CollectionConfig[],
   globals: [Settings] as GlobalConfig[],
+  ...(locales?.length
+    ? {
+        localization: {
+          locales,
+          defaultLocale,
+          fallback: true,
+        },
+      }
+    : undefined),
   admin: {
     css: path.resolve(__dirname, "./src/payload/admin/scss/custom.scss"),
+    user: Users.slug,
     webpack: (config) => ({
       ...config,
       resolve: {
@@ -81,6 +95,10 @@ export default buildConfig({
   },
   cors,
   csrf,
+  i18n: {
+    fallbackLng: "en", // default
+    debug: false, // default
+  },
   plugins: [
     cloudStorage({
       collections: {
@@ -105,4 +123,5 @@ export default buildConfig({
         docs.reduce((url, doc) => `${url}/${doc.slug}`, ""),
     }),
   ] as any[],
+  telemetry: process?.env?.NODE_ENV !== "production",
 });

apps/codeforafrica/server.ts

@@ -2,16 +2,18 @@ import path from "path";
 import { spawn } from "child_process";
 import express from "express";
 import next from "next";
+import nodemailerSendgrid from "nodemailer-sendgrid";
 import payload from "payload";
 import { Payload } from "payload/dist/payload";
 import { loadEnvConfig } from "@next/env";
 
 const projectDir = process.cwd();
 loadEnvConfig(projectDir);
 
-const hostname = process.env.NEXT_HOSTNAME || "localhost";
-const PORT = parseInt(process.env.PORT || "3000", 10);
 const dev = process.env.NODE_ENV !== "production";
+const hostname = process.env.NEXT_HOSTNAME || "localhost";
+const port = parseInt(process.env.PORT || "3000", 10);
+const sendGridAPIKey = process.env.SENDGRID_API_KEY;
 
 if (!process.env.NEXT_MANUAL_SIG_HANDLE) {
   process.on("SIGTERM", () => process.exit(0));
@@ -24,6 +26,18 @@ const start = async (): Promise<void> => {
   let localPayload: Payload;
   try {
     localPayload = await payload.init({
+      ...(sendGridAPIKey
+        ? {
+            email: {
+              transportOptions: nodemailerSendgrid({
+                apiKey: sendGridAPIKey,
+              }),
+              fromName: process.env.SENDGRID_FROM_NAME || "Code for Africa CMS",
+              fromAddress:
+                process.env.SENDGRID_FROM_EMAIL || "[email protected]",
+            },
+          }
+        : undefined),
       secret: process.env.PAYLOAD_SECRET,
       mongoURL: process.env.MONGODB_URL,
       express: app,
@@ -37,7 +51,7 @@ const start = async (): Promise<void> => {
   }
 
   if (process.env.NEXT_BUILD) {
-    app.listen(PORT, async () => {
+    app.listen(port, async () => {
       localPayload.logger.info("NextJS is now building...");
       const nextBuild = spawn(
         "pnpm",
@@ -50,7 +64,6 @@ const start = async (): Promise<void> => {
       nextBuild.on("close", (code) => {
         process.exit(code);
       });
-
       nextBuild.on("error", (err) => {
         localPayload.logger.error(err);
         process.exit(1);
@@ -60,7 +73,7 @@ const start = async (): Promise<void> => {
     return;
   }
 
-  const nextApp = next({ dev, hostname, port: PORT });
+  const nextApp = next({ dev, hostname, port });
   const nextHandler = nextApp.getRequestHandler();
   nextApp.prepare().then(() => {
     localPayload.logger.info("NextJS started");
@@ -69,7 +82,7 @@ const start = async (): Promise<void> => {
     app.post("*", (req: any, res: any) => nextHandler(req, res));
     app.put("*", (req: any, res: any) => nextHandler(req, res));
 
-    app.listen(PORT, async () => {
+    app.listen(port, async () => {
       localPayload.logger.info(
         `Next.js App URL: ${process.env.NEXT_PUBLIC_APP_URL}`,
       );

apps/codeforafrica/src/lib/data/common/index.js

@@ -5,15 +5,16 @@ import { imageFromMedia } from "@/codeforafrica/lib/data/utils";
 
 function getNavBar(settings) {
   const {
-    connect: { links: socialLinks = [] },
+    connect: { links = [] },
     primaryLogo: media,
-    primaryNavigation,
+    primaryNavigation: { menus = null, connect },
     title,
   } = settings;
+  const socialLinks = links.filter((link) => link.platform === connect);
 
   return {
     logo: imageFromMedia({ alt: title, ...media }),
-    menus: primaryNavigation?.menus || null,
+    menus,
     socialLinks,
   };
 }

apps/codeforafrica/src/pages/api/v1/disable-draft.page.js

@@ -0,0 +1,5 @@
+// By default, the Draft Mode session ends when the browser is closed.
+// This method clears it manually / on demand.
+export default function handler(req, res) {
+  res.setDraftMode({ enable: false });
+}

apps/codeforafrica/src/pages/api/v1/draft/index.page.js

@@ -0,0 +1,20 @@
+export default async function handler(req, res) {
+  // Since payload and Next.js are running on the same server process, lets
+  // make sure the user requesting to preview, is logged into Payload
+  // See "Tip" on: https://payloadcms.com/docs/authentication/overview#token-based-auth
+  if (!req.user) {
+    return res.status(401).json({ message: "UNAUTHORIZED_USER" });
+  }
+  const { slug } = req.query;
+  res.setDraftMode({ enable: true });
+
+  // Guard against open redirect vulnerabilities
+  // Since slug will be a path, redirect to pathname instead of original slug
+  // just in case
+  const appUrl = new URL(process.env.NEXT_PUBLIC_APP_URL);
+  const requestedUrl = new URL(slug, appUrl);
+  if (requestedUrl.origin !== appUrl.origin) {
+    return res.status(401).json({ message: "UNAUTHORIZED_REDIRECT" });
+  }
+  return res.redirect(requestedUrl.pathname);
+}

apps/codeforafrica/src/payload/access/isAdmin.js

@@ -0,0 +1,11 @@
+import { ROLE_ADMIN } from "./roles";
+
+export const isAdmin = ({ req: { user } }) => {
+  // Return true or false based on if the user has an admin role
+  return Boolean(user?.roles?.includes(ROLE_ADMIN));
+};
+
+export const isAdminFieldLevel = ({ req: { user } }) => {
+  // Return true or false based on if the user has an admin role
+  return Boolean(user?.roles?.includes(ROLE_ADMIN));
+};

apps/codeforafrica/src/payload/access/isAdminOrPublished.js

@@ -0,0 +1,14 @@
+import { ROLE_ADMIN } from "./roles";
+
+export const isAdminOrPublished = ({ req: { user } }) => {
+  if (user?.roles?.includes(ROLE_ADMIN)) {
+    return true;
+  }
+  return {
+    _status: {
+      equals: "published",
+    },
+  };
+};
+
+export default undefined;

apps/codeforafrica/src/payload/access/isAdminOrSelf.js

@@ -0,0 +1,24 @@
+import { ROLE_ADMIN } from "./roles";
+
+export const isAdminOrSelf = ({ req: { user } }) => {
+  // Need to be logged in
+  if (user) {
+    // If user has role of 'admin'
+    if (user.roles?.includes(ROLE_ADMIN)) {
+      return true;
+    }
+    // If any other type of user, only provide access to themselves
+    return {
+      id: {
+        equals: user.id,
+      },
+    };
+  }
+
+  // Reject everyone else
+  return false;
+};
+
+export const isAdminOrSelfFieldLevel = ({ id, req: { user } }) => {
+  return user?.roles?.includes(ROLE_ADMIN) || id === user?.id;
+};

apps/codeforafrica/src/payload/access/roles.js

@@ -0,0 +1,7 @@
+export const ROLE_ADMIN = "admin";
+export const ROLE_EDITOR = "editor";
+export const ROLE_DEFAULT = ROLE_EDITOR;
+export const ROLE_OPTIONS = [
+  { label: "Admin", value: ROLE_ADMIN },
+  { label: "Editor", value: ROLE_EDITOR },
+];

apps/codeforafrica/src/payload/blocks/ContactForm.js

@@ -6,7 +6,6 @@ const ContactForm = {
     {
       name: "embedCode",
       type: "code",
-      label: "Embed Code",
       required: true,
       admin: {
         language: "html",

apps/codeforafrica/src/payload/blocks/CustomPageHeader.js

@@ -7,15 +7,13 @@ const CustomPageHeader = {
   fields: [
     {
       name: "title",
-      label: "Title",
-      required: true,
       type: "text",
+      required: true,
     },
     {
       name: "subtitle",
-      label: "Subtitle",
-      required: true,
       type: "text",
+      required: true,
     },
     image({
       overrides: {

apps/codeforafrica/src/payload/blocks/Error.js

@@ -3,17 +3,15 @@ import richText from "../fields/richText";
 const Error = {
   slug: "error",
   imageURL: "/images/cms/blocks/error.png",
-  imageAltText: "Used in Error page.",
+  imageAltText: "Used to describe errors in error pages.",
   fields: [
     {
       name: "title",
-      label: "Title",
       type: "text",
       required: true,
     },
     richText({
       name: "subtitle",
-      label: "Subtitle",
       admin: {
         elements: ["link"],
       },

apps/codeforafrica/src/payload/blocks/ExternalEmbed.js

@@ -37,7 +37,6 @@ const ExternalEmbed = {
         },
         {
           name: "caption",
-          label: "Caption",
           type: "text",
           localized: true,
           admin: {
@@ -46,7 +45,6 @@ const ExternalEmbed = {
         },
         {
           name: "code",
-          label: "Code",
           type: "code",
           required: true,
           admin: {

apps/codeforafrica/src/payload/blocks/GetInTouch.js

@@ -7,15 +7,13 @@ const GetInTouch = {
   fields: [
     {
       name: "title",
-      label: "Title",
-      required: true,
       type: "text",
+      required: true,
     },
     {
       name: "subtitle",
-      label: "Subtitle",
-      required: true,
       type: "text",
+      required: true,
     },
     linkGroup({ overrides: { name: "action", label: "Action" } }),
   ],

apps/codeforafrica/src/payload/blocks/GuidingPrinciples.js

@@ -5,11 +5,7 @@ const GuidingPrinciples = {
   fields: [
     {
       name: "title",
-      label: {
-        en: "Title",
-      },
       type: "text",
-      localized: true,
       required: true,
     },
     {