84 lines
2.5 KiB
TypeScript
84 lines
2.5 KiB
TypeScript
import { json, LoaderFunctionArgs } from "@remix-run/node";
|
|
import { type ApiError, ErrorCode } from "~/lib/api/error";
|
|
import serverRequest, { writeCookie } from "~/lib/request.server";
|
|
import { CallbackResponse } from "~/lib/api/auth";
|
|
import { Form as RemixForm, Link, useLoaderData } from "@remix-run/react";
|
|
import { Trans, useTranslation } from "react-i18next";
|
|
import Form from "react-bootstrap/Form";
|
|
import Button from "react-bootstrap/Button";
|
|
|
|
export const loader = async ({ request }: LoaderFunctionArgs) => {
|
|
const url = new URL(request.url);
|
|
|
|
const code = url.searchParams.get("code");
|
|
const state = url.searchParams.get("state");
|
|
|
|
if (!code || !state)
|
|
throw { status: 400, code: ErrorCode.BadRequest, message: "Missing code or state" } as ApiError;
|
|
|
|
const resp = await serverRequest<CallbackResponse>("POST", "/auth/discord/callback", {
|
|
body: { code, state }
|
|
});
|
|
|
|
if (resp.has_account) {
|
|
return json(
|
|
{ hasAccount: true, user: resp.user!, ticket: null, remoteUser: null },
|
|
{
|
|
headers: {
|
|
"Set-Cookie": writeCookie("pronounscc-token", resp.token!)
|
|
}
|
|
}
|
|
);
|
|
}
|
|
|
|
return json({
|
|
hasAccount: false,
|
|
user: null,
|
|
ticket: resp.ticket!,
|
|
remoteUser: resp.remote_username!
|
|
});
|
|
};
|
|
|
|
// TODO: action function
|
|
|
|
export default function DiscordCallbackPage() {
|
|
const { t } = useTranslation();
|
|
const data = useLoaderData<typeof loader>();
|
|
|
|
if (data.hasAccount) {
|
|
const username = data.user!.username;
|
|
|
|
return (
|
|
<>
|
|
<h1>{t("log-in.callback.success")}</h1>
|
|
<p>
|
|
<Trans t={t} i18nKey={"log-in.callback.success-link"} values={{ username: data.user!.username }}>
|
|
{/* @ts-expect-error react-i18next handles interpolation here */}
|
|
Welcome back, <Link to={`/@${data.user!.username}`}>@{{username}}</Link>!
|
|
</Trans>
|
|
<br />
|
|
{t("log-in.callback.redirect-hint")}
|
|
</p>
|
|
</>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<RemixForm method="POST">
|
|
<Form as="div">
|
|
<Form.Group className="mb-3" controlId="remote-username">
|
|
<Form.Label>{t("log-in.callback.remote-username.discord")}</Form.Label>
|
|
<Form.Control type="text" readOnly={true} value={data.remoteUser!} />
|
|
</Form.Group>
|
|
<Form.Group className="mb-3" controlId="username">
|
|
<Form.Label>{t("log-in.callback.username")}</Form.Label>
|
|
<Form.Control name="username" type="text" required />
|
|
</Form.Group>
|
|
<input type="hidden" name="ticket" value={data.ticket!} />
|
|
<Button variant="primary" type="submit">
|
|
{t("log-in.callback.sign-up-button")}
|
|
</Button>
|
|
</Form>
|
|
</RemixForm>
|
|
);
|
|
}
|