sam/Foxnouns.NET
sam/Foxnouns.NET
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

feat: link discord account to existing account

Browse source
This commit is contained in:
sam 2024-11-03 13:53:16 +01:00
parent c4cb08cdc1
commit 201c56c3dd
Signed by: sam
GPG key ID: B4EF20DDE721CAA1
12 changed files with 333 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

2
Foxnouns.Frontend/app/components/ErrorAlert.tsx
View file

@ -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");

1
Foxnouns.Frontend/app/lib/api/error.ts
View file

@ -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 = {

1
Foxnouns.Frontend/app/lib/api/user.ts
View file

@ -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 = {

73
Foxnouns.Frontend/app/routes/auth.callback.discord/route.tsx
View file

@ -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;

91
Foxnouns.Frontend/app/routes/settings.auth/route.tsx
View file

@ -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>
);
}

26
Foxnouns.Frontend/app/routes/settings.auth_.add-discord-account/route.tsx Normal file
View file

@ -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} />;
}