feat(frontend): start auth pages
This commit is contained in:
parent
25540f2de2
commit
9ca4392526
17 changed files with 217 additions and 16 deletions
|
|
@ -16,8 +16,10 @@
|
|||
"@sveltejs/adapter-node": "^5.0.1",
|
||||
"@sveltejs/kit": "^2.0.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^3.0.0",
|
||||
"@sveltestrap/sveltestrap": "^6.2.7",
|
||||
"@tabler/icons-svelte": "^3.5.0",
|
||||
"@types/eslint": "^8.56.7",
|
||||
"bootstrap-icons": "^1.11.3",
|
||||
"bulma": "^1.0.1",
|
||||
"eslint": "^9.0.0",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
BIN
Foxnouns.Frontend/static/default/512.webp
Normal file
BIN
Foxnouns.Frontend/static/default/512.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
2
Foxnouns.Frontend/static/favicon.svg
Normal file
2
Foxnouns.Frontend/static/favicon.svg
Normal 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 |
34
Foxnouns.Frontend/static/logo.svg
Normal file
34
Foxnouns.Frontend/static/logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.9 KiB |
5
Foxnouns.Frontend/static/robots.txt
Normal file
5
Foxnouns.Frontend/static/robots.txt
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
User-agent: *
|
||||
Disallow: /@*
|
||||
Disallow: /auth
|
||||
Disallow: /settings
|
||||
Disallow: /edit
|
||||
|
|
@ -244,6 +244,11 @@
|
|||
resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.25.tgz#f077fdc0b5d0078d30893396ff4827a13f99e817"
|
||||
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":
|
||||
version "25.0.8"
|
||||
resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-25.0.8.tgz#c77e608ab112a666b7f2a6bea625c73224f7dd34"
|
||||
|
|
@ -412,6 +417,13 @@
|
|||
svelte-hmr "^0.16.0"
|
||||
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":
|
||||
version "3.5.0"
|
||||
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"
|
||||
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:
|
||||
version "1.1.11"
|
||||
resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
|
||||
|
|
|
|||
Loading…
Reference in a new issue