Foxnouns.NET/Foxnouns.Frontend/app/routes/auth.log-in/route.tsx

import {
	MetaFunction,
	json,
	LoaderFunctionArgs,
	redirect,
	ActionFunctionArgs,
} from "@remix-run/node";
import {
	Form as RemixForm,
	ShouldRevalidateFunction,
	useActionData,
	useLoaderData,
} from "@remix-run/react";
import { Form, Button, ButtonGroup, ListGroup } from "react-bootstrap";
import { useTranslation } from "react-i18next";
import i18n from "~/i18next.server";
import serverRequest, { getToken, writeCookie } from "~/lib/request.server";
import { AuthResponse, AuthUrls } from "~/lib/api/auth";
import { ApiError, ErrorCode } from "~/lib/api/error";
import ErrorAlert from "~/components/ErrorAlert";
import { User } from "~/lib/api/user";
import { tokenCookieName } from "~/lib/utils";

export const meta: MetaFunction<typeof loader> = ({ data }) => {
	return [{ title: `${data?.meta.title || "Log in"} • pronouns.cc` }];
};

export const shouldRevalidate: ShouldRevalidateFunction = ({ actionResult }) => {
	return !actionResult;
};

export const loader = async ({ request }: LoaderFunctionArgs) => {
	const t = await i18n.getFixedT(request);
	const token = getToken(request);
	if (token) {
		try {
			await serverRequest<User>("GET", "/users/@me", { token });
			return redirect("/?err=already-logged-in", 303);
		} catch (e) {
			// ignore
		}
	}

	const urls = await serverRequest<AuthUrls>("POST", "/auth/urls", { isInternal: true });

	return json({
		meta: { title: t("log-in.title") },
		urls,
	});
};

export const action = async ({ request }: ActionFunctionArgs) => {
	const body = await request.formData();
	const email = body.get("email") as string | null;
	const password = body.get("password") as string | null;

	try {
		const resp = await serverRequest<AuthResponse>("POST", "/auth/email/login", {
			body: { email, password },
			isInternal: true,
		});

		return redirect("/", {
			status: 303,
			headers: {
				"Set-Cookie": writeCookie(tokenCookieName, resp.token),
			},
		});
	} catch (e) {
		return json({ error: e as ApiError });
	}
};

export default function LoginPage() {
	const { t } = useTranslation();
	const { urls } = useLoaderData<typeof loader>();
	const actionData = useActionData<typeof action>();

	return (
		<>
			<div className="row">
				{!urls.email_enabled && <div className="col-lg-3"></div>}
				{urls.email_enabled && (
					<div className="col col-md mb-4">
						<h2>{t("log-in.form-title")}</h2>
						{actionData?.error && <LoginError error={actionData.error} />}
						<RemixForm action="/auth/log-in" method="POST">
							<Form as="div">
								<Form.Group className="mb-3" controlId="email">
									<Form.Label>{t("log-in.email")}</Form.Label>
									<Form.Control name="email" type="email" required />
								</Form.Group>
								<Form.Group className="mb-3" controlId="password">
									<Form.Label>{t("log-in.password")}</Form.Label>
									<Form.Control name="password" type="password" required />
								</Form.Group>

								<ButtonGroup>
									<Button variant="primary" type="submit">
										{t("log-in.log-in-button")}
									</Button>
									<Button as="a" href="/auth/register" variant="secondary">
										{t("log-in.register-with-email")}
									</Button>
								</ButtonGroup>
							</Form>
						</RemixForm>
					</div>
				)}
				<div className="col col-md">
					<h2>{t("log-in.3rd-party.title")}</h2>
					<p>{t("log-in.3rd-party.desc")}</p>
					<ListGroup>
						{urls.discord && (
							<ListGroup.Item action href={urls.discord}>
								{t("log-in.3rd-party.discord")}
							</ListGroup.Item>
						)}
						{urls.google && (
							<ListGroup.Item action href={urls.google}>
								{t("log-in.3rd-party.google")}
							</ListGroup.Item>
						)}
						{urls.tumblr && (
							<ListGroup.Item action href={urls.tumblr}>
								{t("log-in.3rd-party.tumblr")}
							</ListGroup.Item>
						)}
						<ListGroup.Item action href="/auth/log-in/fediverse">
							{t("log-in.3rd-party.fediverse")}
						</ListGroup.Item>
					</ListGroup>
				</div>
				{!urls.email_enabled && <div className="col-lg-3"></div>}
			</div>
		</>
	);
}

function LoginError({ error }: { error: ApiError }) {
	const { t } = useTranslation();

	if (error.code !== ErrorCode.UserNotFound) return <ErrorAlert error={error} />;

	return <>{t("log-in.invalid-credentials")}</>;
}