feat(frontend): start auth pages

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

View file

@ -16,8 +16,10 @@
"@sveltejs/adapter-node": "^5.0.1", "@sveltejs/adapter-node": "^5.0.1",
"@sveltejs/kit": "^2.0.0", "@sveltejs/kit": "^2.0.0",
"@sveltejs/vite-plugin-svelte": "^3.0.0", "@sveltejs/vite-plugin-svelte": "^3.0.0",
"@sveltestrap/sveltestrap": "^6.2.7",
"@tabler/icons-svelte": "^3.5.0", "@tabler/icons-svelte": "^3.5.0",
"@types/eslint": "^8.56.7", "@types/eslint": "^8.56.7",
"bootstrap-icons": "^1.11.3",
"bulma": "^1.0.1", "bulma": "^1.0.1",
"eslint": "^9.0.0", "eslint": "^9.0.0",
"eslint-config-prettier": "^9.1.0", "eslint-config-prettier": "^9.1.0",

View file

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <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" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<script> <script>
let theme = localStorage.getItem("pronounscc-theme"); let theme = localStorage.getItem("pronounscc-theme");

View file

@ -5,3 +5,4 @@
@import "@fontsource/firago/400.css"; @import "@fontsource/firago/400.css";
@import "@fontsource/firago/400-italic.css"; @import "@fontsource/firago/400-italic.css";
@import "@fontsource/firago/700.css"; @import "@fontsource/firago/700.css";
@import "bootstrap-icons/font/bootstrap-icons.css";

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

View file

@ -1,8 +1,9 @@
<script lang="ts"> <script lang="ts">
let isOpen = false; let isOpen = false;
export let right = false;
</script> </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> <button class="navbar-link" on:click={() => (isOpen = !isOpen)}><slot name="label" /></button>
<div class="navbar-dropdown"> <div class="navbar-dropdown">
<slot /> <slot />

View file

@ -24,7 +24,7 @@
}; };
</script> </script>
<nav class="navbar is-transparent" aria-label="Main navigation"> <nav class="navbar" aria-label="Main navigation">
<div class="navbar-brand"> <div class="navbar-brand">
<a href="/" class="navbar-item"> <a href="/" class="navbar-item">
<Logo /> <Logo />
@ -49,14 +49,10 @@
<DropdownItem href="/@{user.username}">View profile</DropdownItem> <DropdownItem href="/@{user.username}">View profile</DropdownItem>
<DropdownItem href="/settings">Settings</DropdownItem> <DropdownItem href="/settings">Settings</DropdownItem>
<DropdownItem divider /> <DropdownItem divider />
<DropdownItem href="/logout">Log out</DropdownItem> <DropdownItem href="/auth/logout">Log out</DropdownItem>
</Dropdown> </Dropdown>
{:else} {:else}
<Dropdown> <a href="/auth/login" class="navbar-item">Log in or sign up</a>
<span slot="label">Not logged in</span>
<DropdownItem href="/login">Log in</DropdownItem>
<DropdownItem href="/register">Sign up</DropdownItem>
</Dropdown>
{/if} {/if}
<button class="navbar-item" on:click={() => toggleTheme()}> <button class="navbar-item" on:click={() => toggleTheme()}>
{#if $themeStore === "dark"} {#if $themeStore === "dark"}

View file

@ -3,17 +3,22 @@
export let data: PageData; export let data: PageData;
</script> </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>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
<p> <p>
are you logged in? {data.user !== undefined} are you logged in? {data.user !== undefined}
{#if data.user} {#if data.user}
<br />hello, {data.user.username}! <br />hello, {data.user.username}!
<br />your ID: {data.user.id} <br />your ID: {data.user.id}
{/if} {/if}
</p> </p>
<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> </p>

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

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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

View file

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.5 47.5" style="enable-background:new 0 0 47.5 47.5;" xml:space="preserve" version="1.1" id="svg2"><metadata id="metadata8"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/></cc:Work></rdf:RDF></metadata><defs id="defs6"><clipPath id="clipPath16" clipPathUnits="userSpaceOnUse"><path id="path18" d="M 0,38 38,38 38,0 0,0 0,38 Z"/></clipPath></defs><g transform="matrix(1.25,0,0,-1.25,0,47.5)" id="g10"><g id="g12"><g clip-path="url(#clipPath16)" id="g14"><g transform="translate(35.3467,20.1069)" id="g20"><path id="path22" style="fill:#aa8ed6;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 -8.899,3.294 -3.323,10.891 c -0.128,0.42 -0.516,0.708 -0.956,0.708 -0.439,0 -0.828,-0.288 -0.956,-0.708 L -17.456,3.294 -26.356,0 c -0.393,-0.146 -0.653,-0.52 -0.653,-0.938 0,-0.418 0.26,-0.793 0.653,-0.937 l 8.896,-3.293 3.323,-11.223 c 0.126,-0.425 0.516,-0.716 0.959,-0.716 0.443,0 0.833,0.291 0.959,0.716 l 3.324,11.223 8.896,3.293 c 0.392,0.144 0.652,0.519 0.652,0.937 C 0.653,-0.52 0.393,-0.146 0,0"/></g><g transform="translate(15.3472,9.1064)" id="g24"><path id="path26" style="fill:#fcab40;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 -2.313,0.856 -0.9,3.3 c -0.119,0.436 -0.514,0.738 -0.965,0.738 -0.451,0 -0.846,-0.302 -0.965,-0.738 l -0.9,-3.3 L -8.356,0 c -0.393,-0.145 -0.653,-0.52 -0.653,-0.937 0,-0.418 0.26,-0.793 0.653,-0.938 l 2.301,-0.853 0.907,-3.622 c 0.111,-0.444 0.511,-0.756 0.97,-0.756 0.458,0 0.858,0.312 0.97,0.756 L -2.301,-2.728 0,-1.875 c 0.393,0.145 0.653,0.52 0.653,0.938 C 0.653,-0.52 0.393,-0.145 0,0"/></g><g transform="translate(11.0093,30.769)" id="g28"><path id="path30" style="fill:#5dadec;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M 0,0 -2.365,0.875 -3.24,3.24 c -0.146,0.393 -0.52,0.653 -0.938,0.653 -0.419,0 -0.793,-0.26 -0.938,-0.653 L -5.992,0.875 -8.356,0 c -0.393,-0.146 -0.653,-0.52 -0.653,-0.938 0,-0.418 0.26,-0.792 0.653,-0.938 l 2.364,-0.875 0.876,-2.365 c 0.145,-0.393 0.519,-0.653 0.938,-0.653 0.418,0 0.792,0.26 0.938,0.653 L -2.365,-2.751 0,-1.876 c 0.393,0.146 0.653,0.52 0.653,0.938 C 0.653,-0.52 0.393,-0.146 0,0"/></g></g></g></g></svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 7.9 KiB

View file

@ -0,0 +1,5 @@
User-agent: *
Disallow: /@*
Disallow: /auth
Disallow: /settings
Disallow: /edit

View file

@ -244,6 +244,11 @@
resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.25.tgz#f077fdc0b5d0078d30893396ff4827a13f99e817" resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.25.tgz#f077fdc0b5d0078d30893396ff4827a13f99e817"
integrity sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ== integrity sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==
"@popperjs/core@^2.11.8":
version "2.11.8"
resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
"@rollup/plugin-commonjs@^25.0.7": "@rollup/plugin-commonjs@^25.0.7":
version "25.0.8" version "25.0.8"
resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-25.0.8.tgz#c77e608ab112a666b7f2a6bea625c73224f7dd34" resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-25.0.8.tgz#c77e608ab112a666b7f2a6bea625c73224f7dd34"
@ -412,6 +417,13 @@
svelte-hmr "^0.16.0" svelte-hmr "^0.16.0"
vitefu "^0.2.5" vitefu "^0.2.5"
"@sveltestrap/sveltestrap@^6.2.7":
version "6.2.7"
resolved "https://registry.yarnpkg.com/@sveltestrap/sveltestrap/-/sveltestrap-6.2.7.tgz#5b2736cbee2db973f02b09d2e9d5bf819418f1f9"
integrity sha512-WwLLfAFUb42BGuRrf3Vbct30bQMzlEMMipN/MfxhjuLTmLQeW9muVJfPyvjtWS+mY+RjkSCoHvAp/ZobP1NLlQ==
dependencies:
"@popperjs/core" "^2.11.8"
"@tabler/icons-svelte@^3.5.0": "@tabler/icons-svelte@^3.5.0":
version "3.5.0" version "3.5.0"
resolved "https://registry.yarnpkg.com/@tabler/icons-svelte/-/icons-svelte-3.5.0.tgz#02efede4ce0ed680e0835878c6c02cd63daf9d9a" resolved "https://registry.yarnpkg.com/@tabler/icons-svelte/-/icons-svelte-3.5.0.tgz#02efede4ce0ed680e0835878c6c02cd63daf9d9a"
@ -612,6 +624,11 @@ binary-extensions@^2.0.0:
resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522" resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522"
integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw== integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==
bootstrap-icons@^1.11.3:
version "1.11.3"
resolved "https://registry.yarnpkg.com/bootstrap-icons/-/bootstrap-icons-1.11.3.tgz#03f9cb754ec005c52f9ee616e2e84a82cab3084b"
integrity sha512-+3lpHrCw/it2/7lBL15VR0HEumaBss0+f/Lb6ZvHISn1mlK83jjFpooTLsMWbIjJMDjDjOExMsTxnXSIT4k4ww==
brace-expansion@^1.1.7: brace-expansion@^1.1.7:
version "1.1.11" version "1.1.11"
resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd" resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"