a

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

@@ -1,11 +1,22 @@
-import { MetaFunction, json, LoaderFunctionArgs, ActionFunction, redirect } from "@remix-run/node";
-import { Form as RemixForm } from "@remix-run/react";
+import {
+	MetaFunction,
+	json,
+	LoaderFunctionArgs,
+	redirect,
+	ActionFunctionArgs,
+} from "@remix-run/node";
+import { Form as RemixForm, Link, useActionData } from "@remix-run/react";
 import Form from "react-bootstrap/Form";
 import Button from "react-bootstrap/Button";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
 import { useTranslation } from "react-i18next";
 import i18n from "~/i18next.server";
-import serverRequest, { writeCookie } from "~/lib/request.server";
+import serverRequest, { getToken, writeCookie } from "~/lib/request.server";
 import { AuthResponse } from "~/lib/api/auth";
+import { ApiError, ErrorCode } from "~/lib/api/error";
+import ErrorAlert from "~/components/ErrorAlert";
+import { User } from "~/lib/api/user";
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
 	return [{ title: `${data?.meta.title || "Log in"} - pronouns.cc` }];
@@ -13,50 +24,85 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
 
 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 });
+
+			throw redirect("/?err=already-logged-in", 303);
+		} catch (e) {
+			// ignore
+		}
+	}
 
 	return json({
 		meta: { title: t("log-in.title") },
 	});
 };
 
-export const action: ActionFunction = async ({ request }) => {
+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;
 
 	console.log(email, password);
 
-	const resp = await serverRequest<AuthResponse>("POST", "/auth/email/login", {
-		body: { email, password },
-	});
+	try {
+		const resp = await serverRequest<AuthResponse>("POST", "/auth/email/login", {
+			body: { email, password },
+		});
 
-	return redirect("/", {
-		status: 303,
-		headers: {
-			"Set-Cookie": writeCookie("pronounscc-token", resp.token),
-		},
-	});
+		return redirect("/", {
+			status: 303,
+			headers: {
+				"Set-Cookie": writeCookie("pronounscc-token", resp.token),
+			},
+		});
+	} catch (e) {
+		return json({ error: e as ApiError });
+	}
 };
 
 export default function LoginPage() {
 	const { t } = useTranslation();
+	const actionData = useActionData<typeof action>();
 
 	return (
-		<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>
+		<Row xs={1} lg="auto">
+			<Col>
+				<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>
 
-				<Button variant="primary" type="submit">
-					{t("log-in.log-in-button")}
-				</Button>
-			</Form>
-		</RemixForm>
+						<Button variant="primary" type="submit">
+							{t("log-in.log-in-button")}
+						</Button>
+						<Button as={Link} to="/auth/register">
+							{t("log-in.register-with-email")}
+						</Button>
+					</Form>
+				</RemixForm>
+			</Col>
+			<Col>
+				<h2>{t("log-in.3rd-party-title")}</h2>
+			</Col>
+		</Row>
 	);
 }
+
+function LoginError({ error }: { error: ApiError }) {
+	const { t } = useTranslation();
+
+	if (error.code !== ErrorCode.UserNotFound) return <ErrorAlert error={error} />;
+
+	return <>{t("log-in.invalid-credentials")}</>;
+}