Merge pull request #1009 from CodeForAfrica/ft/civicsignalblog-auth_f…

…orms

@/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,14 @@ 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/formInputFieldGroup.js

@@ -0,0 +1,55 @@
+function formInputFieldGroup({
+  label,
+  name,
+  includeHintField = false,
+  includeErrorMessageField = true,
+  defaultLabelValue = "",
+  defaultErrorMessage = "",
+  defaultHint = "",
+  additionalFields = [],
+}) {
+  const fields = [
+    {
+      name: `${name}Label`,
+      label: "Label",
+      type: "text",
+      defaultValue: defaultLabelValue,
+      required: true,
+    },
+  ];
+
+  if (includeHintField) {
+    fields.push({
+      name: `${name}Hint`,
+      label: "Hint",
+      type: "text",
+      defaultValue: defaultHint,
+      required: true,
+    });
+  }
+
+  if (includeErrorMessageField) {
+    fields.push({
+      name: `${name}ErrorMessage`,
+      type: "text",
+      label: "Error Message",
+      defaultValue: defaultErrorMessage,
+      required: true,
+    });
+  }
+
+  fields.push(...additionalFields);
+
+  return {
+    type: "collapsible",
+    label,
+    fields: [
+      {
+        type: "row",
+        fields,
+      },
+    ],
+  };
+}
+
+export default formInputFieldGroup;

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

@@ -0,0 +1,90 @@
+import formInputFieldGroup from "#civicsignalblog/payload/fields/formInputFieldGroup";
+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: [
+        formInputFieldGroup({
+          label: "E-mail",
+          name: "email",
+          defaultLabelValue: "Email",
+          defaultErrorMessage: "You need to enter your email address.",
+        }),
+        formInputFieldGroup({
+          label: "Password",
+          name: "password",
+          defaultLabelValue: "Password",
+          defaultErrorMessage: "You need to enter your password.",
+        }),
+      ],
+    },
+    {
+      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,
+        }),
+      ],
+    },
+    {
+      type: "collapsible",
+      label: "Actions",
+      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,
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+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,146 @@
+import formInputFieldGroup from "#civicsignalblog/payload/fields/formInputFieldGroup";
+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: [
+        formInputFieldGroup({
+          label: "E-mail",
+          name: "email",
+          defaultLabelValue: "Email",
+          defaultErrorMessage: "You need to enter a valid email address.",
+        }),
+        formInputFieldGroup({
+          label: "Full Name",
+          name: "fullName",
+          includeErrorMessageField: false,
+          defaultLabelValue: "Full Name",
+        }),
+        formInputFieldGroup({
+          label: "Password",
+          name: "password",
+          defaultLabelValue: "Password",
+          defaultErrorMessage: "You need to enter your password.",
+          additionalFields: [
+            {
+              name: "passwordsMismatch",
+              type: "text",
+              required: true,
+              defaultValue: "You need to enter your password.",
+              localized: true,
+            },
+            {
+              name: "passwordTooShort",
+              type: "text",
+              required: true,
+              defaultValue: "Passwords must be at least 8 characters long.",
+              localized: true,
+            },
+          ],
+        }),
+        formInputFieldGroup({
+          label: "Confirm Password",
+          name: "confirmPassword",
+          defaultLabelValue: "Confirm Password",
+          includeErrorMessageField: false,
+        }),
+        formInputFieldGroup({
+          label: "Notes",
+          name: "notes",
+          defaultHint:
+            "Tell us a little about what you want to use Media Cloud for",
+          defaultLabelValue: "Notes",
+          defaultErrorMessage:
+            "You have to tell us a little about why you want to use Media Cloud.",
+          includeHintField: true,
+        }),
+        {
+          type: "collapsible",
+          label: "Consent",
+          fields: [
+            richText({
+              name: "consentLabel",
+              label: "Label",
+              required: true,
+              localized: true,
+            }),
+            {
+              name: "consentError",
+              type: "text",
+              defaultValue: "You must agree to our Terms and Policies",
+              required: true,
+              localized: true,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      type: "collapsible",
+      label: "Messages",
+      fields: [
+        {
+          name: "successFeedback",
+          type: "text",
+          defaultValue: "Successfully signed up.",
+          required: true,
+          localized: true,
+        },
+        richText({
+          name: "userAlreadyExists",
+          required: true,
+          localized: true,
+        }),
+        richText({
+          name: "signupSuccess",
+          required: true,
+          localized: true,
+        }),
+      ],
+    },
+    {
+      type: "collapsible",
+      label: "Actions",
+      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;