feat(frontend): register/log in with email
This commit is contained in:
parent
57e1ec09c0
commit
bc7fd6d804
GPG key ID:
B4EF20DDE721CAA1
19 changed files with 598 additions and 380 deletions
|
|
@ -1,63 +1,7 @@
|
|||
import { apiRequest } from "$api";
|
||||
import ApiError, { ErrorCode } from "$api/error";
|
||||
import type { AddAccountResponse, CallbackResponse } from "$api/models/auth";
|
||||
import { setToken } from "$lib";
|
||||
import createRegisterAction from "$lib/actions/register.js";
|
||||
import log from "$lib/log.js";
|
||||
import { isRedirect, redirect } from "@sveltejs/kit";
|
||||
import createCallbackLoader from "$lib/actions/callback";
|
||||
import createRegisterAction from "$lib/actions/register";
|
||||
|
||||
export const load = async ({ url, parent, fetch, cookies }) => {
|
||||
const code = url.searchParams.get("code") as string | null;
|
||||
const state = url.searchParams.get("state") as string | null;
|
||||
if (!code || !state) throw new ApiError(undefined, ErrorCode.BadRequest).obj;
|
||||
|
||||
const { meUser } = await parent();
|
||||
if (meUser) {
|
||||
try {
|
||||
const resp = await apiRequest<AddAccountResponse>(
|
||||
"POST",
|
||||
"/auth/discord/add-account/callback",
|
||||
{
|
||||
isInternal: true,
|
||||
body: { code, state },
|
||||
fetch,
|
||||
cookies,
|
||||
},
|
||||
);
|
||||
|
||||
return { hasAccount: true, isLinkRequest: true, newAuthMethod: resp };
|
||||
} catch (e) {
|
||||
if (e instanceof ApiError) return { isLinkRequest: true, error: e.obj };
|
||||
log.error("error linking new discord account to user %s:", meUser.id, e);
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
const resp = await apiRequest<CallbackResponse>("POST", "/auth/discord/callback", {
|
||||
body: { code, state },
|
||||
isInternal: true,
|
||||
fetch,
|
||||
});
|
||||
|
||||
if (resp.has_account) {
|
||||
setToken(cookies, resp.token!);
|
||||
redirect(303, `/@${resp.user!.username}`);
|
||||
}
|
||||
|
||||
return {
|
||||
hasAccount: false,
|
||||
isLinkRequest: false,
|
||||
ticket: resp.ticket!,
|
||||
remoteUser: resp.remote_username!,
|
||||
};
|
||||
} catch (e) {
|
||||
if (isRedirect(e)) throw e;
|
||||
if (e instanceof ApiError) return { isLinkRequest: false, error: e.obj };
|
||||
log.error("error while requesting discord callback:", e);
|
||||
throw e;
|
||||
}
|
||||
};
|
||||
export const load = createCallbackLoader("discord");
|
||||
|
||||
export const actions = {
|
||||
default: createRegisterAction("/auth/discord/register"),
|
||||
|
|
|
|||
|
|
@ -0,0 +1,53 @@
|
|||
import { apiRequest } from "$api";
|
||||
import ApiError, { ErrorCode, type RawApiError } from "$api/error";
|
||||
import type { AuthResponse } from "$api/models/auth";
|
||||
import { setToken } from "$lib";
|
||||
import createCallbackLoader from "$lib/actions/callback";
|
||||
import log from "$lib/log";
|
||||
import { redirect, isRedirect } from "@sveltejs/kit";
|
||||
|
||||
export const load = createCallbackLoader("email", async ({ params }) => {
|
||||
log.info("params:", params, "code:", params.code);
|
||||
|
||||
return { state: params.code! };
|
||||
});
|
||||
|
||||
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;
|
||||
const password = data.get("password") as string | null;
|
||||
const password2 = data.get("confirm-password") as string | null;
|
||||
|
||||
if (!username || !ticket || !password || !password2)
|
||||
return {
|
||||
error: { message: "Bad request", code: ErrorCode.BadRequest, status: 400 } as RawApiError,
|
||||
};
|
||||
|
||||
if (password !== password2)
|
||||
return {
|
||||
error: {
|
||||
message: "Passwords do not match",
|
||||
code: ErrorCode.BadRequest,
|
||||
status: 400,
|
||||
} as RawApiError,
|
||||
};
|
||||
|
||||
try {
|
||||
const resp = await apiRequest<AuthResponse>("POST", "/auth/email/register", {
|
||||
body: { username, ticket, password },
|
||||
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;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<script lang="ts">
|
||||
import Error from "$components/Error.svelte";
|
||||
import ErrorAlert from "$components/ErrorAlert.svelte";
|
||||
import NewAuthMethod from "$components/settings/NewAuthMethod.svelte";
|
||||
import { t } from "$lib/i18n";
|
||||
import { Label, Input, Button } from "@sveltestrap/sveltestrap";
|
||||
import type { ActionData, PageData } from "./$types";
|
||||
|
||||
type Props = { data: PageData; form: ActionData };
|
||||
let { data, form }: Props = $props();
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{$t("auth.register-with-email")} • pronouns.cc</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="container">
|
||||
{#if data.error}
|
||||
<h1>{$t("auth.register-with-email")}</h1>
|
||||
<Error error={data.error} />
|
||||
{:else if data.isLinkRequest}
|
||||
<NewAuthMethod method={data.newAuthMethod!} user={data.meUser!} />
|
||||
{:else}
|
||||
<h1>{$t("auth.register-with-email")}</h1>
|
||||
|
||||
{#if form?.error}
|
||||
<ErrorAlert error={form.error} />
|
||||
{/if}
|
||||
|
||||
<form method="POST">
|
||||
<div class="mb-3">
|
||||
<Label>{$t("auth.email-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>
|
||||
<div class="mb-3">
|
||||
<Label>{$t("auth.log-in-form-password-label")}</Label>
|
||||
<Input type="password" name="password" required />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<Label>{$t("auth.confirm-password-label")}</Label>
|
||||
<Input type="password" name="confirm-password" required />
|
||||
</div>
|
||||
<input type="hidden" name="ticket" value={data.ticket!} />
|
||||
<Button color="primary" type="submit">{$t("auth.register-button")}</Button>
|
||||
</form>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
@ -1,63 +1,14 @@
|
|||
import { apiRequest } from "$api";
|
||||
import ApiError, { ErrorCode } from "$api/error";
|
||||
import type { AddAccountResponse, CallbackResponse } from "$api/models/auth.js";
|
||||
import { setToken } from "$lib";
|
||||
import createRegisterAction from "$lib/actions/register.js";
|
||||
import log from "$lib/log";
|
||||
import { isRedirect, redirect } from "@sveltejs/kit";
|
||||
import createCallbackLoader from "$lib/actions/callback";
|
||||
import createRegisterAction from "$lib/actions/register";
|
||||
|
||||
export const load = async ({ parent, params, url, fetch, cookies }) => {
|
||||
export const load = createCallbackLoader("fediverse", async ({ params, url }) => {
|
||||
const code = url.searchParams.get("code") as string | null;
|
||||
const state = url.searchParams.get("state") as string | null;
|
||||
if (!code || !state) throw new ApiError(undefined, ErrorCode.BadRequest).obj;
|
||||
|
||||
const { meUser } = await parent();
|
||||
if (meUser) {
|
||||
try {
|
||||
const resp = await apiRequest<AddAccountResponse>(
|
||||
"POST",
|
||||
"/auth/fediverse/add-account/callback",
|
||||
{
|
||||
isInternal: true,
|
||||
body: { code, state, instance: params.instance },
|
||||
fetch,
|
||||
cookies,
|
||||
},
|
||||
);
|
||||
|
||||
return { hasAccount: true, isLinkRequest: true, newAuthMethod: resp };
|
||||
} catch (e) {
|
||||
if (e instanceof ApiError) return { isLinkRequest: true, error: e.obj };
|
||||
log.error("error linking new fediverse account to user %s:", meUser.id, e);
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
const resp = await apiRequest<CallbackResponse>("POST", "/auth/fediverse/callback", {
|
||||
body: { code, state, instance: params.instance },
|
||||
isInternal: true,
|
||||
fetch,
|
||||
});
|
||||
|
||||
if (resp.has_account) {
|
||||
setToken(cookies, resp.token!);
|
||||
redirect(303, `/@${resp.user!.username}`);
|
||||
}
|
||||
|
||||
return {
|
||||
hasAccount: false,
|
||||
isLinkRequest: false,
|
||||
ticket: resp.ticket!,
|
||||
remoteUser: resp.remote_username!,
|
||||
};
|
||||
} catch (e) {
|
||||
if (isRedirect(e)) throw e;
|
||||
if (e instanceof ApiError) return { isLinkRequest: false, error: e.obj };
|
||||
log.error("error while requesting fediverse callback:", e);
|
||||
throw e;
|
||||
}
|
||||
};
|
||||
return { code, state, instance: params.instance! };
|
||||
});
|
||||
|
||||
export const actions = {
|
||||
default: createRegisterAction("/auth/fediverse/register"),
|
||||
|
|
|
|||
35
Foxnouns.Frontend/src/routes/auth/register/+page.server.ts
Normal file
35
Foxnouns.Frontend/src/routes/auth/register/+page.server.ts
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
import { apiRequest, fastRequest } from "$api";
|
||||
import ApiError from "$api/error.js";
|
||||
import type { AuthUrls } from "$api/models/auth";
|
||||
import log from "$lib/log.js";
|
||||
import { redirect } from "@sveltejs/kit";
|
||||
|
||||
export const load = async ({ fetch, parent }) => {
|
||||
const parentData = await parent();
|
||||
if (parentData.meUser) redirect(303, `/@${parentData.meUser.username}`);
|
||||
|
||||
const urls = await apiRequest<AuthUrls>("POST", "/auth/urls", { fetch, isInternal: true });
|
||||
if (!urls.email_enabled) redirect(303, "/");
|
||||
};
|
||||
|
||||
export const actions = {
|
||||
default: async ({ request, fetch, cookies }) => {
|
||||
const body = await request.formData();
|
||||
const email = body.get("email") as string;
|
||||
|
||||
try {
|
||||
await fastRequest("POST", `/auth/email/register/init`, {
|
||||
body: { email },
|
||||
isInternal: true,
|
||||
fetch,
|
||||
cookies,
|
||||
});
|
||||
|
||||
return { ok: true, error: null };
|
||||
} catch (e) {
|
||||
if (e instanceof ApiError) return { ok: false, error: e.obj };
|
||||
log.error("error initiating registration for email %s:", email, e);
|
||||
throw e;
|
||||
}
|
||||
},
|
||||
};
|
||||
29
Foxnouns.Frontend/src/routes/auth/register/+page.svelte
Normal file
29
Foxnouns.Frontend/src/routes/auth/register/+page.svelte
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<script lang="ts">
|
||||
import type { ActionData, PageData } from "./$types";
|
||||
import { t } from "$lib/i18n";
|
||||
import { enhance } from "$app/forms";
|
||||
import { Button, Input, InputGroup } from "@sveltestrap/sveltestrap";
|
||||
import FormStatusMarker from "$components/editor/FormStatusMarker.svelte";
|
||||
|
||||
type Props = { data: PageData; form: ActionData };
|
||||
let { data, form }: Props = $props();
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{$t("auth.register-with-email")} • pronouns.cc</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="container">
|
||||
<div class="mx-auto w-lg-75">
|
||||
<h2>{$t("auth.register-with-email")}</h2>
|
||||
|
||||
<FormStatusMarker {form} successMessage={$t("auth.register-with-email-init-success")} />
|
||||
|
||||
<form method="POST" use:enhance>
|
||||
<InputGroup>
|
||||
<Input name="email" type="email" placeholder={$t("auth.email-label")} />
|
||||
<Button type="submit" color="secondary">{$t("auth.register-with-email-button")}</Button>
|
||||
</InputGroup>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -3,21 +3,23 @@
|
|||
import { Button, Input, InputGroup } from "@sveltestrap/sveltestrap";
|
||||
</script>
|
||||
|
||||
<h3>Link a new Fediverse account</h3>
|
||||
<div class="mx-auto w-lg-75">
|
||||
<h3>Link a new Fediverse account</h3>
|
||||
|
||||
<form method="POST" action="?/add">
|
||||
<InputGroup>
|
||||
<Input
|
||||
name="instance"
|
||||
type="text"
|
||||
placeholder={$t("auth.log-in-with-fediverse-instance-placeholder")}
|
||||
/>
|
||||
<Button type="submit" color="secondary">{$t("auth.log-in-button")}</Button>
|
||||
</InputGroup>
|
||||
<p>
|
||||
{$t("auth.log-in-with-fediverse-error-blurb")}
|
||||
<Button formaction="?/forceRefresh" type="submit" color="link">
|
||||
{$t("auth.log-in-with-fediverse-force-refresh-button")}
|
||||
</Button>
|
||||
</p>
|
||||
</form>
|
||||
<form method="POST" action="?/add">
|
||||
<InputGroup>
|
||||
<Input
|
||||
name="instance"
|
||||
type="text"
|
||||
placeholder={$t("auth.log-in-with-fediverse-instance-placeholder")}
|
||||
/>
|
||||
<Button type="submit" color="secondary">{$t("auth.log-in-button")}</Button>
|
||||
</InputGroup>
|
||||
<p>
|
||||
{$t("auth.log-in-with-fediverse-error-blurb")}
|
||||
<Button formaction="?/forceRefresh" type="submit" color="link">
|
||||
{$t("auth.log-in-with-fediverse-force-refresh-button")}
|
||||
</Button>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
import { Icon } from "@sveltestrap/sveltestrap";
|
||||
import { t } from "$lib/i18n";
|
||||
import { enhance } from "$app/forms";
|
||||
import FormStatusMarker from "$components/editor/FormStatusMarker.svelte";
|
||||
|
||||
type Props = { data: PageData; form: ActionData };
|
||||
let { data, form }: Props = $props();
|
||||
|
|
@ -18,14 +19,7 @@
|
|||
<div class="mx-auto w-lg-75">
|
||||
<h3>{$t("settings.export-title")}</h3>
|
||||
|
||||
{#if form?.ok}
|
||||
<p class="text-success-emphasis">
|
||||
<Icon name="check-circle-fill" />
|
||||
{$t("settings.export-request-success")}
|
||||
</p>
|
||||
{:else if form?.error}
|
||||
<ErrorAlert error={form.error} />
|
||||
{/if}
|
||||
<FormStatusMarker {form} successMessage={$t("settings.export-request-success")} />
|
||||
|
||||
<p>
|
||||
{$t("settings.export-info")}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue