Work on login

app/auth/validate.js

@@ -0,0 +1,14 @@
+import jwt from 'jsonwebtoken'
+
+const JWT_SECRET = 'put-your-JWT-secret-here'; // you can set this w/ an environment variable
+
+export const authValidate = function(req) {
+	try {
+		return jwt.verify(req.cookies.ds, JWT_SECRET)
+	} catch (error) {
+		return {
+			unauthorized: true,
+			message: 'Unauthorized',
+		}
+	}
+}

app/server.js

@@ -3,10 +3,10 @@ import express from 'express';
 import bodyParser from 'body-parser';
 import cookieParser from 'cookie-parser';
 import { authSetup } from './auth/setup';
+import { authValidate } from './auth/validate';
 import sapper from 'sapper';
 import compression from 'compression';
 import { Store } from 'svelte/store.js';
-// import { validate } from '../routes/_services/auth-check.js';
 import { manifest } from './manifest/server.js';
 
 const { PORT, NODE_ENV } = process.env;
@@ -25,9 +25,8 @@ authSetup(app)
 app.use(sapper({
 	manifest,
 	store: req => {
-		// const user = validate(req);
+		const user = authValidate(req);
-		// return new Store({ user: user.unauthorized ? null : user });
+		return new Store({ user: user.unauthorized ? null : user });
-		return new Store({ user: null });
 	},
 }))
 

routes/login.html

@@ -3,3 +3,57 @@
 </svelte:head>
 
 <h1>Log In</h1>
+
+<form on:submit=submit(event)>
+	<div class="border">
+		<label>
+			<input ref:username placeholder="Username" type="text" name="username" required="required">
+		</label>
+		<label>
+			<input ref:password placeholder="Password" type="password" name="password" required="required">
+		</label>
+	</div>
+	<button type="submit" class="button">Log In</button>
+</form>
+
+<script>
+	export default {
+		methods: {
+			submit: async function(event) {
+				event.preventDefault();
+				const response = await fetch('/auth/local/login', {
+					method: 'POST',
+					headers: { 'Content-Type': 'application/json' },
+					credentials: 'same-origin',
+					body: JSON.stringify({ username: this.refs.username.value, password: this.refs.password.value })
+				});
+				const user = await response.json();
+				this.store.set({ user });
+				window.location = '/';
+			}
+		}
+	};
+</script>
+
+<style>
+	.border {
+		margin: 0 0 1em;
+		padding: 1em;
+		border: 1px solid #aa1e1e;
+	}
+	label {
+		display: flex;
+	}
+	input[type="text"],
+	input[type="password"] {
+		margin: 0.5em 0;
+		padding: 1em 4.5em 1em 1em;
+		width: 100%;
+	}
+	.button {
+		width: 100%;
+		margin: 0 0 1em;
+		padding: 1.2em;
+		font-size: 1em;
+	}
+</style>

routes/signup.html

@@ -2,38 +2,37 @@
 	<title>Sign Up</title>
 </svelte:head>
 
-<div class="signup">
+<h1>Sign Up</h1>
-	<h1>Sign Up</h1>
+
-	<form on:submit="signup(event)">
+<form on:submit="signup(event)">
-		<div class="border">
+	<div class="border">
-			<h2>Pick a username, email, and password</h2>
+		<h2>Pick a username, email, and password</h2>
-			<label data-valid={usernameValid}>
+		<label data-valid={usernameValid}>
-				<input ref:username bind:value=username type="text" name="username" placeholder="Pick a username" required="required">
+			<input ref:username bind:value=username type="text" name="username" placeholder="Pick a username" required="required">
-				{#if usernameValid === false}
+			{#if usernameValid === false}
-					<div class="message">{usernameMessage}</div>
+				<div class="message">{usernameMessage}</div>
-				{/if}
+			{/if}
-			</label>
+		</label>
-			<label data-valid={emailValid}>
+		<label data-valid={emailValid}>
-				<input bind:value=email type="email" name="email" placeholder="Email Address" required="required">
+			<input bind:value=email type="email" name="email" placeholder="Email Address" required="required">
-				{#if emailValid === false}
+			{#if emailValid === false}
-					<div class="message">{emailMessage}</div>
+				<div class="message">{emailMessage}</div>
-				{/if}
+			{/if}
-			</label>
+		</label>
-			<label data-valid={passwordValid}>
+		<label data-valid={passwordValid}>
-				<input bind:value=password type="password" name="password" placeholder="Create a password" required="required">
+			<input bind:value=password type="password" name="password" placeholder="Create a password" required="required">
-				{#if passwordValid === false}
+			{#if passwordValid === false}
-					<div class="message">{passwordMessage}</div>
+				<div class="message">{passwordMessage}</div>
-				{/if}
+			{/if}
-			</label>
+		</label>
-		</div>
+	</div>
-		<button class="button primary {submittable ? '' : 'disabled'}" type="submit">Sign Up</button>
+	<button class="button primary {submittable ? '' : 'disabled'}" type="submit">Sign Up</button>
-	</form>
+</form>
-	<div class="divider"></div>
+
-	<h3>
+<h3>
-		Already have an account?&nbsp;&nbsp;
+	Already have an account?&nbsp;&nbsp;
-		<a href="/login">Log In</a>
+	<a href="/login">Log In</a>
-	</h3>
+</h3>
-</div>
 
 <script>
 	// THIS IS BROKEN FOR SOME WACKO REASON, SO JUST INLINING IT:
@@ -169,27 +168,20 @@
 	label[data-valid="false"]::after {
 		background-image: url(/svg/valid-bad.svg);
 	}
-	.popup {
-		position: absolute;
-		width: 100%;
-		margin: -2.5rem 0 0 1.2rem;
-	}
 	input[type="text"],
 	input[type="email"],
 	input[type="password"] {
-		margin: 0 0 1rem;
+		margin: 0.5em 0;
-		padding: 1rem 4.5rem 1rem 1rem;
+		padding: 1em 4.5em 1em 1em;
 		width: 100%;
 	}
-	input[type="password"] {
-		margin: 0;
-	}
 	.message {
-		padding: 1rem 3rem 1rem 1rem;
+		padding: 1em 3em 1em 1em;
 	}
 	.button {
 		width: 100%;
-		margin: 0 0 6px;
+		margin: 0 0 1em;
-		padding: 1.2rem;
+		padding: 1.2em;
+		font-size: 1em;
 	}
 </style>