feat(frontend): start auth pages

Foxnouns.Frontend/src/routes/+page.svelte

@@ -3,17 +3,22 @@
 	export let data: PageData;
 </script>
 
-<h1>Welcome to SvelteKit</h1>
+<svelte:head>
+	<title>pronouns.cc</title>
+</svelte:head>
+
+<h1 class="title">Welcome to SvelteKit</h1>
 <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
 
 <p>
-    are you logged in? {data.user !== undefined}
-    {#if data.user}
-    <br />hello, {data.user.username}!
-    <br />your ID: {data.user.id}
-    {/if}
+	are you logged in? {data.user !== undefined}
+	{#if data.user}
+		<br />hello, {data.user.username}!
+		<br />your ID: {data.user.id}
+	{/if}
 </p>
 
 <p>
-    <strong>stats:</strong> {data.meta.users.total} users, {data.meta.members} members
+	<strong>stats:</strong>
+	{data.meta.users.total} users, {data.meta.members} members
 </p>

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

@@ -0,0 +1,12 @@
+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 };
+};

Foxnouns.Frontend/src/routes/auth/login/+page.svelte

@@ -0,0 +1,53 @@
+<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 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>