Remixifying Payload

[milamer]

Hello everyone,

I am a big fan of Remix and have used it for both personal and company websites. I believe in their philosophy and want to explore the possibility of "remixifying" Payload.

To give you an idea of what this might look like, I have written a single route that demonstrates how it could work. Here is the code for the forgot password route:

// utils in other files

export function BadRequest<T>(data: T, init?: Omit<ResponseInit, "status">) {
  return json(data, { status: 400, ...init });
}
// NotFound, Unauthorized, Forbidden, etc...

function isLocalStrategyDisabled(config: Config) {
  const userCollection = config.collections.find(
    (collection) => collection.slug === config.admin.user
  );
  if (!userCollection) {
    throw InternalServerError(
      `User collection ${config.admin.user} not found.`
    );
  }
  return userCollection.auth.disableLocalStrategy === false;
}

// function that extracts json or form data from request
async function extractRequestData(request: Request, options?: any) {
  try {
    if (request.headers.get("Content-Type") === "application/json") {
      return request.json();
    } else {
      // parseFormData is a function that parses form data into an object
      // it can even handle nested objects, arrays, numbers, null and booleans
      // this is a custom function that I wrote (open source)
      // See [parse-form-data](https://github.com/milamer/parse-nested-form-data)
      return parseFormData(await request.formData(), options);
    }
  } catch (error: unknown) {
    throw BadRequest("Invalid request data");
  }
}

// api/forgot-password.ts (the action will be rexported in admin/forgot-password.tsx)
export async function action({ context, request }: DataFunctionArgs) {
  const data = await extractRequestData(request);
  try {
    const emailSchema = z.object({
      email: z.string().email(),
    });
    const { email } = emailSchema.parse(data);
    await forgotPassword({
      user: context.user,
      payload: context.payload,
      config: context.config,
      data: { email },
    });
  } catch (error: unknown) {
    if (error instanceof z.ZodError) {
      // error in email
      return json({
        success: false,
      });
    }
    if (error instanceof ApiError) {
      switch (error.type) {
        case ApiError.Type.LocalStrategyDisabled:
          throw NotFound();
        case ApiError.Type.LoggedIn:
          throw BadRequest("Cannot request password reset while logged in.");
        default:
        // ignore other errors so we do not leak info if email is present or not
      }
    }
  }

  return json({
    success: true,
  });
}

admin/forgot-password.tsx

import { DataFunctionArgs, json, redirect } from "@remix-run/node";
import { Form, Link, useActionData } from "@remix-run/react";
import * as React from "react";
import { toast } from "react-toastify";
import { useTranslation } from "react-i18next";

export function loader({ context, request }: DataFunctionArgs) {
  if (isLocalStrategyDisabled(context.config)) {
    throw NotFound("Page not found");
  }
  // Cookie Auth for Admin
  // API routes should support jwt AND cookie auth
  const userSession = getUserSession(request);
  if (userSession.isLoggedIn()) {
    throw redirect("/admin/account");
  }

  // could be used to send translations to the client
  return null;
}

const baseClass = "forgot-password";

export default function ForgotPassword() {
  const data = useActionData<typeof action>();
  const { t } = useTranslation("authentication");

  const showToast = data?.success === false;
  React.useEffect(() => {
    if (showToast) {
      toast.error(t("emailNotValid"));
    }
  }, [showToast, t]);

  if (data?.success) {
    return (
      <MinimalTemplate className={baseClass}>
        <h1>{t("emailSent")}</h1>
        <p>{t("checkYourEmailForPasswordReset")}</p>
      </MinimalTemplate>
    );
  }

  return (
    <MinimalTemplate className={baseClass}>
      <Form method="post">
        <h1>{t("forgotPassword")}</h1>
        <p>{t("forgotPasswordEmailInstructions")}</p>
        {/* Missing client side form validation */}
        <Input
          label={t("general:emailAddress")}
          name="email"
          type="email"
          admin={{ autoComplete: "email" }}
          required
        />
        {/* Button should show loading indicator while site is loading
          see [example](https://www.youtube.com/watch?v=y4VLIFjFq8k)
        */}
        <Button>{t("general:submit")}</Button>
      </Form>
      <Link to={`../login`}>{t("backToLogin")}</Link>
    </MinimalTemplate>
  );
}

I think I could spin up most of it rather fast, but would need help with

• build
• dev mode
• tests

I am interested in hearing your thoughts on the idea of "remixifying" payloads. Do you think this is a good idea? Do you have any suggestions for how this could be implemented?

I look forward to hearing your thoughts on this.

Thank you.