feat(frontend): discord registration/login/linking

also moves the registration form found on the mastodon callback page
into a component so we're not repeating the same code for every auth method
This commit is contained in:
sam 2024-11-28 21:35:55 +01:00
parent 4780be3019
commit de733a0682
Signed by: sam
GPG key ID: B4EF20DDE721CAA1
19 changed files with 545 additions and 212 deletions

View file

@ -1,9 +1,9 @@
import { apiRequest } from "$api";
import ApiError, { ErrorCode, type RawApiError } from "$api/error";
import type { AuthResponse, CallbackResponse } from "$api/models/auth.js";
import ApiError, { ErrorCode } from "$api/error";
import type { CallbackResponse } from "$api/models/auth.js";
import { setToken } from "$lib";
import log from "$lib/log.js";
import { isRedirect, redirect } from "@sveltejs/kit";
import createRegisterAction from "$lib/actions/register.js";
import { redirect } from "@sveltejs/kit";
export const load = async ({ parent, params, url, fetch, cookies }) => {
const { meUser } = await parent();
@ -33,30 +33,5 @@ export const load = async ({ parent, params, url, fetch, cookies }) => {
};
export const actions = {
default: async ({ request, fetch, cookies }) => {
const data = await request.formData();
const username = data.get("username") as string | null;
const ticket = data.get("ticket") as string | null;
if (!username || !ticket)
return {
error: { message: "Bad request", code: ErrorCode.BadRequest, status: 403 } as RawApiError,
};
try {
const resp = await apiRequest<AuthResponse>("POST", "/auth/fediverse/register", {
body: { username, ticket },
isInternal: true,
fetch,
});
setToken(cookies, resp.token);
redirect(303, "/auth/welcome");
} catch (e) {
if (isRedirect(e)) throw e;
log.error("Could not sign up user with username %s:", username, e);
if (e instanceof ApiError) return { error: e.obj };
throw e;
}
},
default: createRegisterAction("/auth/fediverse/register"),
};

View file

@ -1,9 +1,7 @@
<script lang="ts">
import { Button, Input, Label } from "@sveltestrap/sveltestrap";
import type { ActionData, PageData } from "./$types";
import { t } from "$lib/i18n";
import { enhance } from "$app/forms";
import ErrorAlert from "$components/ErrorAlert.svelte";
import OauthRegistrationForm from "$components/settings/OauthRegistrationForm.svelte";
type Props = { data: PageData; form: ActionData };
let { data, form }: Props = $props();
@ -14,22 +12,11 @@
</svelte:head>
<div class="container">
<h1>{$t("auth.register-with-mastodon")}</h1>
{#if form?.error}
<ErrorAlert error={form?.error} />
{/if}
<form method="POST" use:enhance>
<div class="mb-3">
<Label>{$t("auth.remote-fediverse-account-label")}</Label>
<Input type="text" readonly value={data.remoteUser} />
</div>
<div class="mb-3">
<Label>{$t("auth.register-username-label")}</Label>
<Input type="text" name="username" required />
</div>
<input type="hidden" name="ticket" value={data.ticket} />
<Button color="primary" type="submit">{$t("auth.register-button")}</Button>
</form>
<OauthRegistrationForm
title={$t("auth.register-with-mastodon")}
remoteLabel={$t("auth.remote-fediverse-account-label")}
remoteUser={data.remoteUser}
ticket={data.ticket}
error={form?.error}
/>
</div>