feat: link discord account to existing account

Foxnouns.Frontend/app/components/ErrorAlert.tsx

@@ -140,6 +140,8 @@ export const errorCodeDesc = (t: TFunction, code: ErrorCode) => {
 			return t("error.errors.member-not-found");
 		case ErrorCode.UserNotFound:
 			return t("error.errors.user-not-found");
+		case ErrorCode.AccountAlreadyLinked:
+			return t("error.errors.account-already-linked");
 	}
 
 	return t("error.errors.generic-error");

Foxnouns.Frontend/app/lib/api/error.ts

@@ -16,6 +16,7 @@ export enum ErrorCode {
 	GenericApiError = "GENERIC_API_ERROR",
 	UserNotFound = "USER_NOT_FOUND",
 	MemberNotFound = "MEMBER_NOT_FOUND",
+	AccountAlreadyLinked = "ACCOUNT_ALREADY_LINKED",
 }
 
 export type ValidationError = {

Foxnouns.Frontend/app/lib/api/user.ts

@@ -71,7 +71,6 @@ export type AuthMethod = {
 	type: "DISCORD" | "GOOGLE" | "TUMBLR" | "FEDIVERSE" | "EMAIL";
 	remote_id: string;
 	remote_username?: string;
-	fediverse_instance?: string;
 };
 
 export type CustomPreference = {

Foxnouns.Frontend/app/routes/auth.callback.discord/route.tsx

@@ -5,8 +5,8 @@ import {
 	LoaderFunctionArgs,
 	MetaFunction,
 } from "@remix-run/node";
-import { type ApiError, ErrorCode, firstErrorFor } from "~/lib/api/error";
-import serverRequest, { writeCookie } from "~/lib/request.server";
+import { type ApiError, ErrorCode } from "~/lib/api/error";
+import serverRequest, { getToken, writeCookie } from "~/lib/request.server";
 import { AuthResponse, CallbackResponse } from "~/lib/api/auth";
 import {
 	Form as RemixForm,
@@ -17,12 +17,13 @@ import {
 	useNavigate,
 } from "@remix-run/react";
 import { Trans, useTranslation } from "react-i18next";
-import { Form, Button, Alert } from "react-bootstrap";
-import ErrorAlert from "~/components/ErrorAlert";
+import { Form, Button } from "react-bootstrap";
 import i18n from "~/i18next.server";
 import { tokenCookieName } from "~/lib/utils";
 import { useEffect } from "react";
 import RegisterError from "~/components/RegisterError";
+import { AuthMethod } from "~/lib/api/user";
+import { errorCodeDesc } from "~/components/ErrorAlert";
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
 	return [{ title: `${data?.meta.title || "Log in"} • pronouns.cc` }];
@@ -39,9 +40,43 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
 	const code = url.searchParams.get("code");
 	const state = url.searchParams.get("state");
 
+	const token = getToken(request);
+
 	if (!code || !state)
 		throw { status: 400, code: ErrorCode.BadRequest, message: "Missing code or state" } as ApiError;
 
+	if (token) {
+		try {
+			const resp = await serverRequest<AuthMethod>("POST", "/auth/discord/add-account/callback", {
+				body: { code, state },
+				token,
+				isInternal: true,
+			});
+
+			return json({
+				isLinkRequest: true,
+				meta: { title: t("log-in.callback.title.discord-link") },
+				error: null,
+				hasAccount: false,
+				user: null,
+				ticket: null,
+				remoteUser: null,
+				newAuthMethod: resp,
+			});
+		} catch (e) {
+			return json({
+				isLinkRequest: true,
+				meta: { title: t("log-in.callback.title.discord-link") },
+				error: e as ApiError,
+				hasAccount: false,
+				user: null,
+				ticket: null,
+				remoteUser: null,
+				newAuthMethod: null,
+			});
+		}
+	}
+
 	const resp = await serverRequest<CallbackResponse>("POST", "/auth/discord/callback", {
 		body: { code, state },
 		isInternal: true,
@@ -50,11 +85,14 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
 	if (resp.has_account) {
 		return json(
 			{
+				isLinkRequest: false,
 				meta: { title: t("log-in.callback.title.discord-success") },
+				error: null,
 				hasAccount: true,
 				user: resp.user!,
 				ticket: null,
 				remoteUser: null,
+				newAuthMethod: null,
 			},
 			{
 				headers: {
@@ -65,11 +103,14 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
 	}
 
 	return json({
+		isLinkRequest: false,
 		meta: { title: t("log-in.callback.title.discord-register") },
+		error: null,
 		hasAccount: false,
 		user: null,
 		ticket: resp.ticket!,
 		remoteUser: resp.remote_username!,
+		newAuthMethod: null,
 	});
 };
 
@@ -122,6 +163,30 @@ export default function DiscordCallbackPage() {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
+	if (data.isLinkRequest) {
+		if (data.error) {
+			return (
+				<>
+					<h1>{t("log-in.callback.link-error")}</h1>
+					<p>{errorCodeDesc(t, data.error.code)}</p>
+				</>
+			);
+		}
+
+		const authMethod = data.newAuthMethod!;
+
+		return (
+			<>
+				<h1>{t("log-in.callback.discord-link-success")}</h1>
+				<p>
+					{t("log-in.callback.discord-link-success-hint", {
+						username: authMethod.remote_username ?? authMethod.remote_id,
+					})}
+				</p>
+			</>
+		);
+	}
+
 	if (data.hasAccount) {
 		const username = data.user!.username;
 

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

@@ -23,7 +23,13 @@ export default function AuthSettings() {
 	const { urls } = useLoaderData<typeof loader>();
 	const { user } = useRouteLoaderData<typeof settingsLoader>("routes/settings")!;
 
-	return <div className="px-md-5">{urls.email_enabled && <EmailSettings user={user} />}</div>;
+	return (
+		<div className="px-md-5">
+			{urls.email_enabled && <EmailSettings user={user} />}
+			{urls.discord && <DiscordSettings user={user} />}
+			<FediverseSettings user={user} />
+		</div>
+	);
 }
 
 function EmailSettings({ user }: { user: MeUser }) {
@@ -75,3 +81,86 @@ function EmailRow({ email, disabled }: { email: AuthMethod; disabled: boolean })
 		</ListGroup.Item>
 	);
 }
+
+function DiscordSettings({ user }: { user: MeUser }) {
+	const { t } = useTranslation();
+	const oneAuthMethod = user.auth_methods.length === 1;
+	const discordAccounts = user.auth_methods.filter((m) => m.type === "DISCORD");
+
+	return (
+		<>
+			<h3>{t("settings.auth.discord-accounts")}</h3>
+			{discordAccounts.length > 0 && (
+				<>
+					<ListGroup className="pt-2 pb-3">
+						{discordAccounts.map((a) => (
+							<NonEmailRow account={a} key={a.id} disabled={oneAuthMethod} />
+						))}
+					</ListGroup>
+				</>
+			)}
+			{discordAccounts.length < 3 && (
+				<p>
+					{/* @ts-expect-error as=Link */}
+					<Button variant="primary" as={Link} to="/settings/auth/add-discord-account">
+						{discordAccounts.length === 0
+							? t("settings.auth.form.add-first-discord-account")
+							: t("settings.auth.form.add-extra-discord-account")}
+					</Button>
+				</p>
+			)}
+		</>
+	);
+}
+
+function FediverseSettings({ user }: { user: MeUser }) {
+	const { t } = useTranslation();
+	const oneAuthMethod = user.auth_methods.length === 1;
+	const fediAccounts = user.auth_methods.filter((m) => m.type === "FEDIVERSE");
+
+	return (
+		<>
+			<h3>{t("settings.auth.fediverse-accounts")}</h3>
+			{fediAccounts.length > 0 && (
+				<>
+					<ListGroup className="pt-2 pb-3">
+						{fediAccounts.map((a) => (
+							<NonEmailRow account={a} key={a.id} disabled={oneAuthMethod} />
+						))}
+					</ListGroup>
+				</>
+			)}
+			{fediAccounts.length < 3 && (
+				<p>
+					{/* @ts-expect-error as=Link */}
+					<Button variant="primary" as={Link} to="/settings/auth/add-fediverse-account">
+						{fediAccounts.length === 0
+							? t("settings.auth.form.add-first-fediverse-account")
+							: t("settings.auth.form.add-extra-fediverse-account")}
+					</Button>
+				</p>
+			)}
+		</>
+	);
+}
+
+function NonEmailRow({ account, disabled }: { account: AuthMethod; disabled: boolean }) {
+	const { t } = useTranslation();
+
+	return (
+		<ListGroup.Item>
+			<div className="row">
+				<div className="col">
+					{account.remote_username} {account.type !== "FEDIVERSE" && <>({account.remote_id})</>}
+				</div>
+				{!disabled && (
+					<div className="col text-end">
+						<Link to={`/settings/auth/remove-method/${account.id}`}>
+							{t("settings.auth.remove-auth-method")}
+						</Link>
+					</div>
+				)}
+			</div>
+		</ListGroup.Item>
+	);
+}

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

@@ -0,0 +1,26 @@
+import { LoaderFunctionArgs, redirect, json } from "@remix-run/node";
+import serverRequest, { getToken } from "~/lib/request.server";
+import { ApiError } from "~/lib/api/error";
+import { useLoaderData } from "@remix-run/react";
+import ErrorAlert from "~/components/ErrorAlert";
+
+export const loader = async ({ request }: LoaderFunctionArgs) => {
+	const token = getToken(request);
+
+	try {
+		const { url } = await serverRequest<{ url: string }>("GET", "/auth/discord/add-account", {
+			isInternal: true,
+			token,
+		});
+
+		return redirect(url, 303);
+	} catch (e) {
+		return json({ error: e as ApiError });
+	}
+};
+
+export default function AddDiscordAccountPage() {
+	const { error } = useLoaderData<typeof loader>();
+
+	return <ErrorAlert error={error} />;
+}

Foxnouns.Frontend/public/locales/en.json

@@ -16,7 +16,8 @@
 			"generic-error": "An unknown error occurred.",
 			"internal-server-error": "Server experienced an internal error, please try again later.",
 			"member-not-found": "Member not found, please check your spelling and try again.",
-			"user-not-found": "User not found, please check your spelling and try again."
+			"user-not-found": "User not found, please check your spelling and try again.",
+			"account-already-linked": "This account is already linked with a pronouns.cc account."
 		},
 		"title": "An error occurred",
 		"more-info": "Click here for a more detailed error"
@@ -51,11 +52,15 @@
 			"invalid-username": "Invalid username",
 			"username-taken": "That username is already taken, please try something else.",
 			"title": {
+				"discord-link": "Link a new Discord account",
 				"discord-success": "Log in with Discord",
 				"discord-register": "Register with Discord",
 				"fediverse-success": "Log in with a Fediverse account",
 				"fediverse-register": "Register with a Fediverse account"
 			},
+			"link-error": "Could not link account",
+			"discord-link-success": "Linked a new Discord account!",
+			"discord-link-success-hint": "Successfully linked the Discord account {{username}} with your pronouns.cc account. You can now close this page.",
 			"success": "Successfully logged in!",
 			"success-link": "Welcome back, <1>@{{username}}</1>!",
 			"redirect-hint": "If you're not redirected to your profile in a few seconds, press the link above.",
@@ -126,14 +131,20 @@
 				"email-address": "Email address",
 				"password-1": "Password",
 				"password-2": "Confirm password",
-				"add-email-button": "Add email address"
+				"add-email-button": "Add email address",
+				"add-first-discord-account": "Link a Discord account",
+				"add-extra-discord-account": "Link another Discord account",
+				"add-first-fediverse-account": "Link a Fediverse account",
+				"add-extra-fediverse-account": "Link another Fediverse account"
 			},
 			"no-email": "You haven't linked any email addresses yet. You can add one using this form.",
 			"new-email-pending": "Email address added! Click the link in your inbox to confirm.",
 			"email-link-success": "Email successfully linked",
 			"redirect-to-auth-hint": "You will be redirected back to the authentication page in a few seconds.",
 			"email-addresses": "Email addresses",
-			"remove-auth-method": "Remove"
+			"remove-auth-method": "Remove",
+			"discord-accounts": "Linked Discord accounts",
+			"fediverse-accounts": "Linked Fediverse accounts"
 		},
 		"title": "Settings",
 		"nav": {