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

switch to another frontend framework wheeeeeeeeeeee

Browse source
This commit is contained in:
sam 2024-09-05 22:29:12 +02:00
parent fa3c1ccaa7
commit c4adf6918c
Signed by: sam
GPG key ID: B4EF20DDE721CAA1
58 changed files with 6246 additions and 1703 deletions
Download patch file Download diff file Expand all files Collapse all files

12
Foxnouns.Frontend/src/routes/auth/login/+page.server.ts
View file

@ -1,12 +0,0 @@
import request from "$lib/request.js";
type UrlsResponse = {
discord: string | null;
google: string | null;
tumblr: string | null;
};
export const load = async ({ fetch }) => {
const urls = await request<UrlsResponse>(fetch, "POST", "/auth/urls");
return { urls };
};

53
Foxnouns.Frontend/src/routes/auth/login/+page.svelte
View file

@ -1,53 +0,0 @@
<script lang="ts">
import type { PageData } from "./$types";
export let data: PageData;
$: hasUrls = !!(data.urls.discord || data.urls.google || data.urls.tumblr);
</script>
<div class="container mt-6">
<div class="fixed-grid has-1-cols has-2-cols-desktop">
<div class="grid">
<div class="cell">
<p class="title">Log in with email address</p>
<form method="POST" action="?/login">
<div class="field">
<label for="email" class="label">Email address</label>
<div class="control">
<input type="email" id="email" class="input" placeholder="Email address" />
</div>
</div>
<div class="field">
<label for="password" class="label">Password</label>
<div class="control">
<input type="password" id="password" class="input" placeholder="Password" />
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button class="button is-primary">Log in</button>
</div>
<div class="control">
<a href="/auth/signup" class="button">Sign up</a>
</div>
</div>
</form>
</div>
{#if hasUrls}
<div class="cell">
<p class="title">Log in with third-party provider</p>
<ul>
{#if data.urls.discord}
<li><a href={data.urls.discord}>Log in with Discord</a></li>
{/if}
{#if data.urls.google}
<li><a href={data.urls.google}>Log in with Google</a></li>
{/if}
{#if data.urls.tumblr}
<li><a href={data.urls.tumblr}>Log in with Tumblr</a></li>
{/if}
</ul>
</div>
{/if}
</div>
</div>
</div>

51
Foxnouns.Frontend/src/routes/auth/login/discord/+page.server.ts
View file

@ -1,51 +0,0 @@
import request from "$lib/request";
import type { AuthResponse, CallbackResponse } from "$lib/api/auth";
export const load = async ({ fetch, url, cookies, parent }) => {
const data = await parent();
if (data.user) {
return { loggedIn: true, token: data.token, user: data.user };
}
const resp = await request<AuthResponse | CallbackResponse>(
fetch,
"POST",
"/auth/discord/callback",
{
body: {
code: url.searchParams.get("code"),
state: url.searchParams.get("state"),
},
},
);
if ("token" in resp) {
const authResp = resp as AuthResponse;
cookies.set("pronounscc-token", authResp.token, { path: "/" });
return { loggedIn: true, token: authResp.token, user: authResp.user };
}
const callbackResp = resp as CallbackResponse;
return {
loggedIn: false,
hasAccount: callbackResp.has_account,
ticket: resp.ticket,
remoteUsername: resp.remote_username,
};
};
export const actions = {
register: async ({ cookies, request: req, fetch, locals }) => {
const data = await req.formData();
const username = data.get("username");
const ticket = data.get("ticket");
const resp = await request<AuthResponse>(fetch, "POST", "/auth/discord/register", {
body: { username, ticket },
});
cookies.set("pronounscc-token", resp.token, { path: "/" });
locals.token = resp.token;
return { token: resp.token, user: resp.user };
},
};

79
Foxnouns.Frontend/src/routes/auth/login/discord/+page.svelte
View file

@ -1,79 +0,0 @@
<script lang="ts">
import { onMount } from "svelte";
import { goto } from "$app/navigation";
import { enhance } from "$app/forms";
import type { PageData, ActionData } from "./$types";
export let data: PageData;
export let form: ActionData;
onMount(async () => {
if (data.user) {
await new Promise((r) => setTimeout(r, 3000));
await goto(`/@${data.user.username}`);
}
});
const redirectOnForm = async (action: ActionData) => {
if (form?.user) {
await new Promise((r) => setTimeout(r, 3000));
await goto(`/@${form.user.username}`);
}
};
$: redirectOnForm(form);
</script>
<div class="container">
{#if form?.user}
<h1 class="title">Successfully created account!</h1>
<p>Welcome, <strong>@{form.user.username}</strong>!</p>
<p>
You should automatically be redirected to your profile in a few seconds. If you're not
redirected, please press the link above.
</p>
{:else if data.loggedIn}
<h1 class="title">Successfully logged in!</h1>
<p>You are now logged in as <a href="/@{data.user?.username}">@{data.user?.username}</a>.</p>
<p>
You should automatically be redirected to your profile in a few seconds. If you're not
redirected, please press the link above.
</p>
{:else}
<h1 class="title">Finish signing up with a Discord account</h1>
<form method="POST" action="?/register" use:enhance>
<div class="field">
<label for="remote_username" class="label">Discord username</label>
<div class="control">
<input
type="text"
name="remote_username"
id="remote_username"
class="input"
value={data.remoteUsername}
disabled
/>
</div>
</div>
<div class="field">
<label for="username" class="label">Username</label>
<div class="control">
<input type="text" name="username" id="username" class="input" placeholder="Username" />
</div>
</div>
<input
type="text"
name="ticket"
id="ticket"
class="hidden"
style="display: hidden;"
value={data.ticket}
/>
<div class="field">
<div class="control">
<button class="button is-primary">Sign up</button>
</div>
</div>
</form>
{/if}
</div>