feat(frontend): add, list email

Foxnouns.Frontend/app/routes/settings.auth/route.tsx

@@ -0,0 +1,76 @@
+import i18n from "~/i18next.server";
+import { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
+import { Link, useRouteLoaderData } from "@remix-run/react";
+import { Button, ListGroup } from "react-bootstrap";
+import { loader as settingsLoader } from "~/routes/settings/route";
+import { useTranslation } from "react-i18next";
+import { AuthMethod, MeUser } from "~/lib/api/user";
+
+export const meta: MetaFunction<typeof loader> = ({ data }) => {
+	return [{ title: `${data?.meta.title || "Authentication"} • pronouns.cc` }];
+};
+
+export const loader = async ({ request }: LoaderFunctionArgs) => {
+	const t = await i18n.getFixedT(request);
+	return { meta: { title: t("settings.auth.title") } };
+};
+
+export default function AuthSettings() {
+	const { user } = useRouteLoaderData<typeof settingsLoader>("routes/settings")!;
+
+	return (
+		<div className="px-md-5">
+			<EmailSettings user={user} />
+		</div>
+	);
+}
+
+function EmailSettings({ user }: { user: MeUser }) {
+	const { t } = useTranslation();
+	const oneAuthMethod = user.auth_methods.length === 1;
+	const emails = user.auth_methods.filter((m) => m.type === "EMAIL");
+
+	return (
+		<>
+			<h3>{t("settings.auth.email-addresses")}</h3>
+			{emails.length > 0 && (
+				<>
+					<ListGroup className="pt-2 pb-3">
+						{emails.map((e) => (
+							<EmailRow email={e} key={e.id} disabled={oneAuthMethod} />
+						))}
+					</ListGroup>
+				</>
+			)}
+			{emails.length < 3 && (
+				<p>
+					{/* @ts-expect-error using as=Link causes an error here, even though it runs completely fine */}
+					<Button variant="primary" as={Link} to="/settings/auth/add-email">
+						{emails.length === 0
+							? t("settings.auth.form.add-first-email")
+							: t("settings.auth.form.add-extra-email")}
+					</Button>
+				</p>
+			)}
+		</>
+	);
+}
+
+function EmailRow({ email, disabled }: { email: AuthMethod; disabled: boolean }) {
+	const { t } = useTranslation();
+
+	return (
+		<ListGroup.Item>
+			<div className="row">
+				<div className="col">{email.remote_id}</div>
+				{!disabled && (
+					<div className="col text-end">
+						<Link to={`/settings/auth/remove-method/${email.id}`}>
+							{t("settings.auth.remove-auth-method")}
+						</Link>
+					</div>
+				)}
+			</div>
+		</ListGroup.Item>
+	);
+}

Foxnouns.Frontend/app/routes/settings.auth_.add-email/route.tsx

@@ -0,0 +1,105 @@
+import { ActionFunctionArgs, LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
+import i18n from "~/i18next.server";
+import { json, useActionData, useNavigate, useRouteLoaderData } from "@remix-run/react";
+import { loader as settingsLoader } from "~/routes/settings/route";
+import { useTranslation } from "react-i18next";
+import { useEffect } from "react";
+import { Button, Card, Form } from "react-bootstrap";
+import { Form as RemixForm } from "@remix-run/react/dist/components";
+import { ApiError, ErrorCode } from "~/lib/api/error";
+import { fastRequest, getToken } from "~/lib/request.server";
+import ErrorAlert from "~/components/ErrorAlert";
+
+export const meta: MetaFunction<typeof loader> = ({ data }) => {
+	return [{ title: `${data?.meta.title || "Authentication"} • pronouns.cc` }];
+};
+
+export const loader = async ({ request }: LoaderFunctionArgs) => {
+	const t = await i18n.getFixedT(request);
+	return { meta: { title: t("settings.auth.title") } };
+};
+
+export const action = async ({ request }: ActionFunctionArgs) => {
+	const token = getToken(request)!;
+	const body = await request.formData();
+	const email = body.get("email") as string | null;
+	const password = body.get("password-1") as string | null;
+	const password2 = body.get("password-2") as string | null;
+
+	if (!email || !password || !password2) {
+		return json({
+			error: {
+				status: 400,
+				code: ErrorCode.BadRequest,
+				message: "One or more required fields are missing.",
+			} as ApiError,
+			ok: false,
+		});
+	}
+
+	if (password !== password2) {
+		return json({
+			error: {
+				status: 400,
+				code: ErrorCode.BadRequest,
+				message: "Passwords do not match.",
+			} as ApiError,
+			ok: false,
+		});
+	}
+
+	await fastRequest("POST", "/auth/email/add", {
+		body: { email, password },
+		token,
+		isInternal: true,
+	});
+
+	return json({ error: null, ok: true });
+};
+
+export default function AddEmailPage() {
+	const { t } = useTranslation();
+	const { user } = useRouteLoaderData<typeof settingsLoader>("routes/settings")!;
+	const actionData = useActionData<typeof action>();
+	const navigate = useNavigate();
+	const emails = user.auth_methods.filter((m) => m.type === "EMAIL");
+
+	useEffect(() => {
+		if (emails.length >= 3) {
+			navigate("/settings/auth");
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
+	return (
+		<RemixForm method="POST">
+			<Card body>
+				<Card.Title>
+					{emails.length === 0
+						? t("settings.auth.form.add-first-email")
+						: t("settings.auth.form.add-extra-email")}
+				</Card.Title>
+				{emails.length === 0 && !actionData?.ok && <p>{t("settings.auth.no-email")}</p>}
+				{actionData?.ok && <p>{t("settings.auth.new-email-pending")}</p>}
+				{actionData?.error && <ErrorAlert error={actionData.error} />}
+				<Form as="div">
+					<Form.Group className="mb-3" controlId="email-address">
+						<Form.Label>{t("settings.auth.form.email-address")}</Form.Label>
+						<Form.Control type="email" name="email" required disabled={actionData?.ok} />
+					</Form.Group>
+					<Form.Group className="mb-3" controlId="password-1">
+						<Form.Label>{t("settings.auth.form.password-1")}</Form.Label>
+						<Form.Control type="password" name="password-1" required disabled={actionData?.ok} />
+					</Form.Group>
+					<Form.Group className="mb-3" controlId="password-2">
+						<Form.Label>{t("settings.auth.form.password-2")}</Form.Label>
+						<Form.Control type="password" name="password-2" required disabled={actionData?.ok} />
+					</Form.Group>
+					<Button variant="primary" type="submit">
+						{t("settings.auth.form.add-email-button")}
+					</Button>
+				</Form>
+			</Card>
+		</RemixForm>
+	);
+}

Foxnouns.Frontend/app/routes/settings.auth_.confirm-email.$code/route.tsx

@@ -0,0 +1,38 @@
+import { LoaderFunctionArgs, json } from "@remix-run/node";
+import { baseRequest } from "~/lib/request.server";
+import { useTranslation } from "react-i18next";
+import { useEffect } from "react";
+import { useNavigate } from "@remix-run/react";
+
+export const loader = async ({ params }: LoaderFunctionArgs) => {
+	const state = params.code!;
+
+	const resp = await baseRequest("POST", "/auth/email/callback", {
+		body: { state },
+		isInternal: true,
+	});
+	if (resp.status !== 204) {
+		// TODO: handle non-204 status (this indicates that the email was not linked to an account)
+	}
+
+	return json({ ok: true });
+};
+
+export default function ConfirmEmailPage() {
+	const { t } = useTranslation();
+	const navigate = useNavigate();
+
+	useEffect(() => {
+		setTimeout(() => {
+			navigate("/settings/auth");
+		}, 2000);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
+	return (
+		<>
+			<h3>{t("settings.auth.email-link-success")}</h3>
+			<p>{t("settings.auth.redirect-to-auth-hint")}</p>
+		</>
+	);
+}