Merge pull request #9 from NickRTR/database

Authentication system

package.json

@@ -1,25 +1,27 @@
 {
 	"name": "syntype",
 	"version": "0.0.1",
+	"private": true,
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
-		"package": "svelte-kit package",
 		"preview": "vite preview",
-		"prepare": "svelte-kit sync",
-		"lint": "prettier --check --plugin-search-dir=. .",
-		"format": "prettier --write --plugin-search-dir=. ."
+		"lint": "prettier --check .",
+		"format": "prettier --write ."
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "next",
 		"@sveltejs/kit": "next",
 		"prettier": "^2.6.2",
 		"prettier-plugin-svelte": "^2.7.0",
 		"svelte": "^3.44.0",
-		"vite": "^3.0.0"
+		"vite": "^3.1.0-beta.1",
+		"@supabase/supabase-js": "^1.35.4"
 	},
 	"type": "module",
 	"dependencies": {
+		"cookie": "^0.5.0",
+		"dotenv": "^16.0.1",
 		"svelte-local-storage-store": "^0.2.6"
 	}
 }

src/lib/components/Nav.svelte

@@ -1,47 +1,72 @@
 <script>
-	import Divider from "$lib/components/Divider.svelte";
 	import { settings } from "$lib/persistentStores";
+	import { page } from "$app/stores";
+
+	import Divider from "$lib/components/Divider.svelte";
 </script>
 
 <nav>
-	<h1>Syntype</h1>
-	<div class="settings">
-		<p
-			class="disabled"
-			class:enabled={$settings.semicolon}
-			on:click={() => {
-				$settings.semicolon = !$settings.semicolon;
-			}}
-		>
-			semicolon
-		</p>
-		<span class="settingsDivider" />
-		<p
-			on:click={() => {
-				$settings.doubleQuotes = !$settings.doubleQuotes;
-			}}
-		>
-			{#if $settings.doubleQuotes}
-				double quotes
+	<article>
+		<aside class="settings">
+			<p
+				class="disabled"
+				class:enabled={$settings.semicolon}
+				on:click={() => {
+					$settings.semicolon = !$settings.semicolon;
+				}}
+			>
+				semicolon
+			</p>
+			<span class="settingsDivider" />
+			<p
+				on:click={() => {
+					$settings.doubleQuotes = !$settings.doubleQuotes;
+				}}
+			>
+				{#if $settings.doubleQuotes}
+					double quotes
+				{:else}
+					single quotes
+				{/if}
+			</p>
+		</aside>
+		<h1><a href="/" title="Home" sveltekit-data-prefetch>Syntype</a></h1>
+		<aside class="authentication">
+			{#if $page.data.user}
+				<a href="/account" title="authentication" sveltekit-data-prefetch>Dashboard</a>
+				<span class="authDivider" />
+				<a href="/account/logout" title="logout" sveltekit-data-prefetch>Logout</a>
 			{:else}
-				single quotes
+				<a href="/account/login" title="login" sveltekit-data-prefetch>Login</a>
 			{/if}
-		</p>
-	</div>
+		</aside>
+	</article>
 	<Divider />
 </nav>
 
 <style>
+	article {
+		display: grid;
+		grid-template-columns: 1fr 2fr 1fr;
+		align-items: center;
+		padding-inline: 1rem;
+	}
+
 	h1 {
-		margin-top: 0.8rem;
-		margin-bottom: 0;
+		text-align: center;
+		margin-block: 0;
 		font-size: 2rem;
 	}
 
+	h1 a {
+		color: var(--text);
+		text-decoration: none;
+	}
+
 	.settings {
 		margin: 0;
 		display: flex;
-		justify-content: center;
+		justify-content: left;
 	}
 
 	.settings p {
@@ -61,4 +86,17 @@
 	.settingsDivider {
 		margin-inline: 1rem;
 	}
+
+	.authentication {
+		display: flex;
+		justify-content: right;
+	}
+
+	.authentication a {
+		color: var(--text);
+	}
+
+	.authDivider {
+		margin-inline: 0.25rem;
+	}
 </style>

src/lib/supabase.js

@@ -0,0 +1,8 @@
+import dotenv from "dotenv";
+import { createClient } from "@supabase/supabase-js";
+
+dotenv.config();
+
+export const supabase = createClient(process.env["SUPABASE_URL"], process.env["SUPABASE_KEY"]);
+
+export default supabase;

src/routes/(mobile)/mobile/+page.js

@@ -0,0 +1,8 @@
+import { redirect } from "@sveltejs/kit";
+
+export async function load({ parent }) {
+	const { desktop } = await parent();
+	if (desktop === true) {
+		throw redirect(302, "/");
+	}
+}

src/routes/+layout.server.js

@@ -0,0 +1,26 @@
+import { parse } from "cookie";
+import supabase from "$lib/supabase";
+
+export async function load({ request }) {
+	const userAgent = request.headers.get("user-agent");
+	const desktop = !/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
+
+	const cookieString = request.headers.get("cookie");
+	if (cookieString !== null) {
+		const cookies = parse(request.headers.get("cookie"));
+		if (cookies.auth) {
+			const user = await supabase.auth.api.getUser(cookies.auth);
+			return {
+				user: {
+					email: user.user.email,
+					id: user.user.id
+				},
+				desktop
+			};
+		}
+
+		return {
+			desktop
+		};
+	}
+}

src/routes/__layout.svelte → src/routes/+layout.svelte

@@ -3,6 +3,10 @@
 	import Footer from "$lib/components/Footer.svelte";
 </script>
 
+<svelte:head>
+	<title>Syntype</title>
+</svelte:head>
+
 <body>
 	<Nav />
 

src/routes/+page.js

@@ -0,0 +1,8 @@
+import { redirect } from "@sveltejs/kit";
+
+export async function load({ parent }) {
+	const { desktop } = await parent();
+	if (desktop === false) {
+		throw redirect(302, "/mobile");
+	}
+}

src/routes/index.svelte → src/routes/+page.svelte

@@ -1,14 +1,3 @@
-<script context="module">
-	export async function load({ session }) {
-		if (session.desktop === false) {
-			return {
-				status: 302,
-				redirect: "/mobile"
-			};
-		}
-	}
-</script>
-
 <script>
 	import Input from "$lib/components/Input.svelte";
 	import Stats from "$lib/components/Stats.svelte";

src/routes/account/+page.js

@@ -0,0 +1,12 @@
+import { redirect } from "@sveltejs/kit";
+
+export async function load({ parent }) {
+	const { user } = await parent();
+	if (!user) {
+		throw redirect(307, "/account/login");
+	}
+
+	return {
+		user
+	};
+}

src/routes/account/+page.svelte

@@ -0,0 +1,8 @@
+<script>
+	export let data;
+</script>
+
+<body>
+	<h1>Dashboard</h1>
+	<p>Hello {data.user.email}</p>
+</body>

src/routes/account/login/+page.js

@@ -0,0 +1,8 @@
+import { redirect } from "@sveltejs/kit";
+
+export async function load({ parent }) {
+	const { user } = await parent();
+	if (user) {
+		throw redirect(307, "/account");
+	}
+}

src/routes/account/login/+page.server.js

@@ -0,0 +1,20 @@
+import { redirect } from "@sveltejs/kit";
+import supabase from "$lib/supabase";
+
+export async function POST({ request }) {
+	const form = await request.formData();
+	const email = form.get("email");
+
+	const response = await supabase.auth.signIn({ email });
+
+	if (response.error) {
+		return {
+			status: response.error.status,
+			errors: {
+				message: response.error.message
+			}
+		};
+	}
+
+	throw redirect(307, "/account");
+}

src/routes/account/login/+page.svelte

@@ -0,0 +1,102 @@
+<script>
+	let error;
+	let success;
+
+	// this runs on the client when JavaScript is available
+	// so we can just reuse the existing `error` and `success` props
+	async function login(event) {
+		// reset error and success messages
+		error = undefined;
+		success = undefined;
+
+		const form = event.target;
+		const res = await fetch(form.action, {
+			method: form.method,
+			body: new FormData(form),
+			headers: { accept: "application/json" }
+		});
+		let response = await res.json();
+
+		if (response.errors) {
+			error = response.errors.message;
+		} else {
+		}
+
+		form.reset();
+	}
+</script>
+
+<body>
+	<h1>Login / Signup</h1>
+
+	<p id="description">Enter your email address to login or signup. You will then receive an email, maybe tagged as spam, with a confirmation link.</p>
+
+	<form on:submit|preventDefault={login} method="post" autocomplete="off">
+		<div>
+			<input id="email" name="email" placeholder="email" type="email" required />
+		</div>
+
+		<button type="submit">Login</button>
+		{#if error}
+			<p class="error">Error: {error}</p>
+		{/if}
+
+		{#if success}
+			<p class="success">{success}</p>
+		{/if}
+	</form>
+</body>
+
+<style>
+	body {
+		max-width: 400px;
+		margin-inline: auto;
+	}
+
+	#description {
+		margin-block: 0;
+	}
+
+	input {
+		border-radius: 0.7rem;
+		border: 2px solid var(--text);
+		padding: 0.2rem 0.25rem;
+		outline: none;
+		transition: border 0.1s ease-in-out;
+		font-size: 0.95rem;
+		margin-block: 0.75rem;
+	}
+
+	input:hover,
+	input:focus {
+		border-color: var(--accent);
+	}
+
+	button {
+		font-size: 1rem;
+		font-weight: bold;
+		background-color: var(--accent);
+		border-radius: 1rem;
+		padding: 0.6rem 1.1rem;
+		outline: none;
+		border: none;
+		box-shadow: none;
+		transition: box-shadow 0.1s ease-in-out;
+		user-select: none;
+	}
+
+	button:hover,
+	button:focus {
+		box-shadow: 1px 1px 5px white;
+	}
+
+	.error {
+		color: tomato;
+		margin-block: 0.5rem;
+	}
+
+	.success {
+		color: lime;
+		margin-block: 0.5rem;
+	}
+</style>