@/CivicSignalBlog: Add Web Tools authentication form configuration

apps/civicsignalblog/payload.config.ts

@@ -25,6 +25,9 @@ import Actions from "./src/payload/components/actions";
 import Publication from "./src/payload/globals/Publication";
 import Main from "./src/payload/globals/Site/main";
 import Research from "./src/payload/globals/Site/research";
+import Login from "./src/payload/globals/Forms/login";
+import PasswordReset from "./src/payload/globals/Forms/resetPassword";
+import Registration from "./src/payload/globals/Forms/registration";
 import { applicationPages } from "./src/payload/lib/data/common/applications";
 import { defaultLocale, locales } from "./src/payload/utils/locales";
 
@@ -74,7 +77,7 @@ export default buildConfig({
     MediaData,
     Users,
   ] as CollectionConfig[],
-  globals: [Publication, Research, Main] as GlobalConfig[],
+  globals: [Publication, Research, Main, Login, Registration, PasswordReset] as GlobalConfig[],
   ...(locales?.length
     ? {
         localization: {

apps/civicsignalblog/src/payload/fields/formInputFields.js

@@ -0,0 +1,63 @@
+function formInputFields({ minRows, maxRows, validate }) {
+  return {
+    name: "fields",
+    type: "array",
+    label: "Form input fields",
+    minRows,
+    maxRows,
+    validate,
+    labels: {
+      singular: "Field",
+      plural: "Fields",
+    },
+    admin: {
+      className: "array-field-nested",
+      components: {
+        RowLabel: ({ data, index }) => {
+          let label = "";
+          if (data.name) {
+            label = data.name;
+          }
+          if (!label) {
+            label = `Field ${String(index).padStart(2, "0")}`;
+          }
+          return label;
+        },
+      },
+      initCollapsed: true,
+    },
+    fields: [
+      {
+        type: "row",
+        fields: [
+          {
+            name: "name",
+            type: "text",
+            required: true,
+          },
+          {
+            name: "label",
+            type: "text",
+            required: true,
+          },
+        ],
+      },
+      {
+        type: "row",
+        fields: [
+          {
+            name: "errorMessage",
+            type: "text",
+            required: true,
+          },
+          {
+            name: "hint",
+            type: "text",
+          },
+        ],
+      },
+    ],
+  };
+}
+
+export default formInputFields;

apps/civicsignalblog/src/payload/globals/Forms/login/LoginTab.js

@@ -0,0 +1,95 @@
+import formInputFields from "#civicsignalblog/payload/fields/formInputFields";
+import richText from "#civicsignalblog/payload/fields/richText";
+
+const LoginTab = {
+  label: "Login Form",
+  fields: [
+    {
+      type: "collapsible",
+      label: "Title & Description",
+      fields: [
+        {
+          name: "title",
+          type: "text",
+          defaultValue: "Login",
+          required: true,
+          localized: true,
+        },
+      ],
+    },
+    {
+      type: "collapsible",
+      label: "Fields",
+      fields: [
+        formInputFields({
+          minRows: 2,
+          maxRows: 2,
+          validate: (val, args) => {
+            if (val.length < args.minRows)
+              return `You must add ${args.minRows} form input fields`;
+
+            if (!val.some((field) => field.name === "email")) {
+              return "Login form must have a field with email as name";
+            }
+
+            if (!val.some((field) => field.name === "password")) {
+              return "Login form must have a field with password as name";
+            }
+            return true;
+          },
+        }),
+      ],
+    },
+    {
+      type: "collapsible",
+      label: "Buttons",
+      fields: [
+        {
+          type: "row",
+          fields: [
+            {
+              name: "loginButton",
+              type: "text",
+              defaultValue: "Login",
+              required: true,
+              localized: true,
+            },
+            {
+              name: "registrationButton",
+              type: "text",
+              defaultValue: "No Account ? Register Now!",
+              required: true,
+              localized: true,
+            },
+            {
+              name: "forgotPasswordButton",
+              type: "text",
+              defaultValue: "Forgot your password ?",
+              required: true,
+              localized: true,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      type: "collapsible",
+      label: "Messages",
+      fields: [
+        {
+          name: "loginFailed",
+          type: "text",
+          defaultValue: "Your email or password was wrong.",
+          required: true,
+        },
+        richText({
+          name: "needsToActivate",
+          required: true,
+          localized: true,
+        }),
+      ],
+    },
+  ],
+};
+
+export default LoginTab;

apps/civicsignalblog/src/payload/globals/Forms/login/index.js

@@ -0,0 +1,15 @@
+import LoginTab from "./LoginTab";
+
+import settings from "#civicsignalblog/payload/utils/createGlobalSettings";
+
+const Login = settings({
+  slug: `login-form`,
+  label: "Login",
+  group: "Forms",
+  access: {
+    read: () => true,
+  },
+  tabs: [LoginTab],
+});
+
+export default Login;

apps/civicsignalblog/src/payload/globals/Forms/registration/RegistrationTab.js

@@ -0,0 +1,118 @@
+import formInputFields from "#civicsignalblog/payload/fields/formInputFields";
+import richText from "#civicsignalblog/payload/fields/richText";
+
+const RegisterTab = {
+  label: "Registration Form",
+  fields: [
+    {
+      type: "collapsible",
+      label: "Title & Description",
+      fields: [
+        {
+          name: "title",
+          type: "text",
+          defaultValue: "Sign Up",
+          required: true,
+          localized: true,
+        },
+        {
+          name: "description",
+          type: "text",
+          defaultValue: "Create an account to use all our tools for free.",
+          required: true,
+          localized: true,
+        },
+      ],
+    },
+    {
+      type: "collapsible",
+      label: "Fields",
+      fields: [
+        formInputFields({
+          minRows: 5,
+          maxRows: 5,
+          validate: (val, args) => {
+            if (val.length < args.minRows)
+              return `You must add ${args.minRows} form input fields`;
+
+            const requiredFields = [
+              "email",
+              "fullname",
+              "password",
+              "confirm_password",
+              "notes",
+              "terms_of_use",
+            ];
+
+            const missingFields = requiredFields.filter(
+              (fieldName) => !val.some((field) => field.name === fieldName),
+            );
+
+            if (missingFields.length > 0) {
+              return `Registration form must have fields with the following names: ${missingFields.join(", ")}`;
+            }
+
+            return true;
+          },
+        }),
+      ],
+    },
+    {
+      type: "collapsible",
+      label: "Form Messages",
+      fields: [
+        {
+          name: "successFeedback",
+          type: "text",
+          defaultValue: "Successfully signed up.",
+          required: true,
+          localized: true,
+        },
+        {
+          name: "passwordsMismatch",
+          type: "text",
+          defaultValue: "Passwords do not match.",
+          required: true,
+          localized: true,
+        },
+        {
+          name: "passwordTooShort",
+          type: "text",
+          defaultValue: "Passwords must be at least 8 characters long..",
+          required: true,
+          localized: true,
+        },
+        richText({
+          name: "userAlreadyExists",
+          required: true,
+          localized: true,
+        }),
+        richText({
+          name: "signupSuccess",
+          required: true,
+          localized: true,
+        }),
+      ],
+    },
+    {
+      type: "collapsible",
+      label: "Buttons",
+      fields: [
+        {
+          type: "row",
+          fields: [
+            {
+              name: "signUpButton",
+              type: "text",
+              defaultValue: "Sign Up",
+              required: true,
+              localized: true,
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+export default RegisterTab;

apps/civicsignalblog/src/payload/globals/Forms/registration/index.js

@@ -0,0 +1,15 @@
+import RegistrationTab from "./RegistrationTab";
+
+import settings from "#civicsignalblog/payload/utils/createGlobalSettings";
+
+const Registration = settings({
+  slug: `registration-form`,
+  label: "Registration",
+  group: "Forms",
+  access: {
+    read: () => true,
+  },
+  tabs: [RegistrationTab],
+});
+
+export default Registration;