feat(frontend): start auth pages
This commit is contained in:
parent
25540f2de2
commit
2a7bd746aa
GPG key ID:
B4EF20DDE721CAA1
17 changed files with 217 additions and 16 deletions
|
|
@ -2,7 +2,7 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<script>
|
||||
let theme = localStorage.getItem("pronounscc-theme");
|
||||
|
|
|
|||
|
|
@ -5,3 +5,4 @@
|
|||
@import "@fontsource/firago/400.css";
|
||||
@import "@fontsource/firago/400-italic.css";
|
||||
@import "@fontsource/firago/700.css";
|
||||
@import "bootstrap-icons/font/bootstrap-icons.css";
|
||||
|
|
|
|||
73
Foxnouns.Frontend/src/error.html
Normal file
73
Foxnouns.Frontend/src/error.html
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Internal error occurred</title>
|
||||
<style>
|
||||
body {
|
||||
font-size: 1.2em;
|
||||
font-family: sans-serif;
|
||||
margin: 40px auto;
|
||||
max-width: 650px;
|
||||
|
||||
background-color: #ffffff;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
a:link,
|
||||
a:visited {
|
||||
color: #0d6efd;
|
||||
}
|
||||
|
||||
.logo {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info {
|
||||
color: rgba(33, 37, 41, 0.75);
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background-color: #212529;
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
a:link,
|
||||
a:visited {
|
||||
color: #6ea8fe;
|
||||
}
|
||||
|
||||
.info {
|
||||
color: rgba(173, 181, 189, 0.75);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<p class="logo">
|
||||
<img src="/logo.svg" alt="pronouns.cc logo" width="50%" />
|
||||
</p>
|
||||
<h1>Internal error occurred</h1>
|
||||
<p>An internal error has occurred. Don't worry, it's (probably) not your fault.</p>
|
||||
<p>
|
||||
If this is the first time this is happening, try reloading the page. Otherwise, check the
|
||||
<a href="https://status.pronouns.cc/" target="_blank">status page</a> for updates.
|
||||
</p>
|
||||
</div>
|
||||
<p class="info">
|
||||
<strong>Status:</strong> %sveltekit.status%<br />
|
||||
<strong>Error message:</strong> %sveltekit.error.message%
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,8 +1,9 @@
|
|||
<script lang="ts">
|
||||
let isOpen = false;
|
||||
export let right = false;
|
||||
</script>
|
||||
|
||||
<div class={"navbar-item has-dropdown" + (isOpen ? " is-active" : "")}>
|
||||
<div class={"navbar-item has-dropdown" + (isOpen ? " is-active" : "") + (right ? " is-right" : "")}>
|
||||
<button class="navbar-link" on:click={() => (isOpen = !isOpen)}><slot name="label" /></button>
|
||||
<div class="navbar-dropdown">
|
||||
<slot />
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<nav class="navbar is-transparent" aria-label="Main navigation">
|
||||
<nav class="navbar" aria-label="Main navigation">
|
||||
<div class="navbar-brand">
|
||||
<a href="/" class="navbar-item">
|
||||
<Logo />
|
||||
|
|
@ -49,14 +49,10 @@
|
|||
<DropdownItem href="/@{user.username}">View profile</DropdownItem>
|
||||
<DropdownItem href="/settings">Settings</DropdownItem>
|
||||
<DropdownItem divider />
|
||||
<DropdownItem href="/logout">Log out</DropdownItem>
|
||||
<DropdownItem href="/auth/logout">Log out</DropdownItem>
|
||||
</Dropdown>
|
||||
{:else}
|
||||
<Dropdown>
|
||||
<span slot="label">Not logged in</span>
|
||||
<DropdownItem href="/login">Log in</DropdownItem>
|
||||
<DropdownItem href="/register">Sign up</DropdownItem>
|
||||
</Dropdown>
|
||||
<a href="/auth/login" class="navbar-item">Log in or sign up</a>
|
||||
{/if}
|
||||
<button class="navbar-item" on:click={() => toggleTheme()}>
|
||||
{#if $themeStore === "dark"}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
12
Foxnouns.Frontend/src/routes/auth/login/+page.server.ts
Normal file
12
Foxnouns.Frontend/src/routes/auth/login/+page.server.ts
Normal 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
53
Foxnouns.Frontend/src/routes/auth/login/+page.svelte
Normal 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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue