wire up the login backend

6 files changed, 68 insertions, 12 deletions

diff --git a/src/components/RegisterOrLogin.svelte b/src/components/RegisterOrLogin.svelte
index 77c1d76f..7cc41709 100644
--- a/src/components/RegisterOrLogin.svelte
+++ b/src/components/RegisterOrLogin.svelte
@@ -1,9 +1,29 @@
 <script>
 	import { Icon } from '$comp';
+	import { post } from '$lib/utils';
+	import { token } from '$lib/store';
+	import { connect } from '$lib/socket';
+	import { goto } from '$app/navigation';
 
 	export let page;
 
+	let username, password;
+
 	let revealPassword = false;
+
+	let url = {
+		Register: '/register',
+		'Sign in': '/login'
+	}[page];
+
+	let submit = () =>
+		post(url, { username, password }).then((r) =>
+			r.json().then((r) => {
+				$token = r.token;
+				connect();
+				goto('/receive');
+			})
+		);
 </script>
 
 <div class="pt-10">
@@ -15,19 +35,34 @@
 		<div class="shadow-xl rounded-3xl p-10 pb-12 space-y-5 w-full mx-5 md:mx-0 md:w-[400px]">
 			<h1 class="text-2xl font-bold text-center">{page}</h1>
 
-			<form class="space-y-5">
+			<form class="space-y-5" on:submit|preventDefault={submit}>
 				<div>
 					<label for="username" class="font-semibold">Username</label>
-					<input type="text" required class="bg-primary p-4 rounded-2xl w-full" />
+					<input
+						type="text"
+						required
+						class="bg-primary p-4 rounded-2xl w-full"
+						bind:value={username}
+					/>
 				</div>
 
 				<div class="relative">
 					<label for="password" class="block font-semibold">Password</label>
-					<input
-						type={revealPassword ? 'text' : 'password'}
-						required
-						class="block bg-primary p-4 rounded-2xl w-full"
-					/>
+					{#if revealPassword}
+						<input
+							type="text"
+							required
+							class="block bg-primary p-4 rounded-2xl w-full"
+							bind:value={password}
+						/>
+					{:else}
+						<input
+							type="password"
+							required
+							class="block bg-primary p-4 rounded-2xl w-full"
+							bind:value={password}
+						/>
+					{/if}
 					<button
 						type="button"
 						on:click={() => (revealPassword = !revealPassword)}
diff --git a/src/lib/socket.js b/src/lib/socket.js
index 38efd2ec..efc2651b 100644
--- a/src/lib/socket.js
+++ b/src/lib/socket.js
@@ -1,7 +1,5 @@
-import { rate, user, ws } from '$lib/store';
-
-const token =
-	'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImJvYiIsImlhdCI6MTY1ODc5NDkxMX0._zFTEADrbLffcXa5sIMrJtJ483VdIiYmsdt2ofibxu4';
+import { get } from "svelte/store";
+import { rate, user, token, ws } from '$lib/store';
 
 let interval, socket;
 
@@ -15,7 +13,7 @@ export const messages = (data) => ({
 	},
 
 	connected() {
-		socket.send(JSON.stringify({ type: 'login', data: token }));
+		socket.send(JSON.stringify({ type: 'login', data: { token: get(token) } }));
 	},
 
 	login() {
@@ -31,6 +29,7 @@ let currentReconnectDelay = initialReconnectDelay;
 export function connect() {
 	clearInterval(interval);
 
+  if (socket) socket.close();
 	socket = new WebSocket('ws://localhost:3119/ws');
 	socket.addEventListener('open', onWebsocketOpen);
 	socket.addEventListener('close', onWebsocketClose);
diff --git a/src/lib/store.js b/src/lib/store.js
index 120acc77..3963f55a 100644
--- a/src/lib/store.js
+++ b/src/lib/store.js
@@ -2,4 +2,5 @@ import { writable } from 'svelte/store';
 
 export const rate = writable();
 export const user = writable();
+export const token = writable();
 export const ws = writable();
diff --git a/src/lib/utils.js b/src/lib/utils.js
index ba0d8335..595d2dd8 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -1,3 +1,10 @@
 export function scroll(section) {
 	section.scrollIntoView({ behavior: 'smooth' });
 }
+
+export const post = (url, body) =>
+	fetch(url, {
+		method: 'POST',
+		body: JSON.stringify(body),
+		headers: { 'accept': 'application/json', 'content-type': 'application/json' }
+	});
diff --git a/src/routes/login.js b/src/routes/login.js
new file mode 100644
index 00000000..e8c74365
--- /dev/null
+++ b/src/routes/login.js
@@ -0,0 +1,13 @@
+import got from 'got';
+
+export async function POST({ request }) {
+  let json = await request.json();
+
+  let body = await got
+		.post('http://localhost:3119/login', {
+			json
+		})
+		.json();
+
+	return { body };
+}
diff --git a/src/routes/register.svelte b/src/routes/register.svelte
index 69ec5fd2..60a81ced 100644
--- a/src/routes/register.svelte
+++ b/src/routes/register.svelte
@@ -1,5 +1,6 @@
 <script>
 	import { RegisterOrLogin } from '$comp';
+  import { post } from "$lib/utils";
 </script>
 
 <RegisterOrLogin page="Register" />