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

feat(frontend): start auth pages

Browse source
This commit is contained in:
sam 2024-06-12 03:54:25 +02:00
parent 25540f2de2
commit 2a7bd746aa
Signed by: sam
GPG key ID: B4EF20DDE721CAA1
17 changed files with 217 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

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

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