sign in options

package.json

@@ -14,6 +14,11 @@
   "dependencies": {
     "@fastify/cookie": "^9.3.1",
     "@fastify/static": "^6.12.0",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-brands-svg-icons": "^6.5.1",
+    "@fortawesome/free-regular-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@mcansh/remix-fastify": "^3.2.1",
     "@prisma/client": "^5.8.1",
     "@radix-ui/themes": "^2.0.3",

src/app/components/header.tsx

@@ -37,13 +37,18 @@ export const AppHeader = ({ user }: { user?: { id: string } }) => {
 			<div
 				className={css({
 					display: "grid",
-					justifyContent: "center",
+					gridAutoFlow: "column",
+					justifyContent: "start",
 					alignItems: "center",
+					gap: "8px",
 				})}
 			>
 				<Text size="3" weight="bold" asChild>
 					<Link to="/archives">アーカイブ</Link>
 				</Text>
+				<Text size="3" weight="bold" asChild>
+					<Link to="/sign-in-options">ログイン設定</Link>
+				</Text>
 			</div>
 			<div
 				className={css({

src/app/routes/_base.sign-in-options.tsx

@@ -0,0 +1,107 @@
+import { Button, Code, Text } from "@radix-ui/themes";
+import { css } from "../../../styled-system/css";
+import { json, useLoaderData } from "@remix-run/react";
+import { createDiscordOauthUrl } from "../discord-oauth.server";
+import { assertSession } from "../session.server";
+import type { LoaderFunctionArgs } from "@remix-run/node";
+import { prisma } from "../../shared/prisma.server";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faDiscord } from "@fortawesome/free-brands-svg-icons";
+import { faEnvelope } from "@fortawesome/free-regular-svg-icons";
+
+export const loader = async ({ request }: LoaderFunctionArgs) => {
+	const session = await assertSession(request);
+
+	const { url, setCookie } = createDiscordOauthUrl();
+
+	const userDiscord = await prisma.userDiscord.findUnique({
+		where: { userId: session.user.id },
+		select: {
+			username: true,
+		},
+	});
+	const discordUsername = userDiscord?.username;
+
+	return json(
+		{
+			email: session.user.email,
+			discordUsername,
+			discordOauthUrl: url,
+		},
+		{ headers: [["Set-Cookie", setCookie]] },
+	);
+};
+
+export default function FinishRegistration() {
+	const data = useLoaderData<typeof loader>();
+
+	return (
+		<div
+			className={css({
+				display: "grid",
+				alignContent: "start",
+				justifyContent: "center",
+				gap: "16px",
+			})}
+		>
+			<dl>
+				<Text size="5" weight="bold" asChild>
+					<dt
+						className={css({
+							display: "grid",
+							gridAutoFlow: "column",
+							alignItems: "center",
+							justifyContent: "start",
+							gap: "4px",
+						})}
+					>
+						<FontAwesomeIcon icon={faEnvelope} />
+						<span>Eメールアドレス</span>
+					</dt>
+				</Text>
+				<dd className={css({ marginLeft: "16px" })}>
+					<Code>{data.email}</Code>
+				</dd>
+			</dl>
+			<dl>
+				<Text size="5" weight="bold" asChild>
+					<dt
+						className={css({
+							display: "grid",
+							gridAutoFlow: "column",
+							alignItems: "center",
+							justifyContent: "start",
+							gap: "4px",
+						})}
+					>
+						<FontAwesomeIcon icon={faDiscord} />
+						<span>Discord</span>
+					</dt>
+				</Text>
+				<dd
+					className={css({
+						marginLeft: "16px",
+						display: "grid",
+						gridAutoFlow: "column",
+						justifyContent: "start",
+						alignItems: "center",
+						gap: "16px",
+					})}
+				>
+					{data.discordUsername ? (
+						<>
+							<Code>{data.discordUsername}</Code>
+							<Button asChild>
+								<a href={data.discordOauthUrl}>再連携</a>
+							</Button>
+						</>
+					) : (
+						<Button asChild>
+							<a href={data.discordOauthUrl}>Discordアカウントを連携</a>
+						</Button>
+					)}
+				</dd>
+			</dl>
+		</div>
+	);
+}

src/app/routes/verify-registration.tsx

@@ -7,7 +7,7 @@ export default function VerifyRegistration() {
 	const navigate = useNavigate();
 	const { mutate: verifyToken } = trpc.registration.verify.useMutation({
 		onSuccess: () => {
-			navigate({ pathname: "/finish-registration" });
+			navigate({ pathname: "/sign-in-options" });
 		},
 		onError: (error) => {
 			if (error instanceof TRPCClientError) {