143 lines
4.1 KiB
TypeScript
143 lines
4.1 KiB
TypeScript
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>
|
|
</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")}</>;
|
|
}
|