Merge branch 'master' of github.com:coinos/coinos-ui-v2

6 files changed, 80 insertions, 21 deletions

diff --git a/src/components/RegisterOrLogin.svelte b/src/components/RegisterOrLogin.svelte
index 77c1d76f..12d7b8b7 100644
--- a/src/components/RegisterOrLogin.svelte
+++ b/src/components/RegisterOrLogin.svelte
@@ -1,9 +1,28 @@
 <script>
 	import { Icon } from '$comp';
+	import { post } from '$lib/utils';
+	import { token } from '$lib/store';
+	import { auth } 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 = async () => {
+		let r = await post(url, { username, password });
+		if (!r.token) r = await post('/login', { username, password });
+		$token = r.token;
+		auth();
+		goto('/receive');
+	};
 </script>
 
 <div class="pt-10">
@@ -15,19 +34,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 ea6d7a8c..9d0c472e 100644
--- a/src/lib/socket.js
+++ b/src/lib/socket.js
@@ -1,9 +1,17 @@
-import { rate, user, ws } from '$lib/store';
-
-const token = import.meta.env.VITE_COINOS_TOKEN;
+import { get } from 'svelte/store';
+import { rate, user, token } from '$lib/store';
 
 let interval, socket;
 
+export const auth = () => {
+	let t = get(token);
+	if (t) send('login', t);
+};
+
+export const send = (type, data) => {
+	socket?.readyState === 1 && socket.send(JSON.stringify({ type, data }));
+};
+
 export const messages = (data) => ({
 	rate() {
 		rate.set(data);
@@ -13,9 +21,7 @@ export const messages = (data) => ({
 		console.log(data);
 	},
 
-	connected() {
-		socket.send(JSON.stringify({ type: 'login', data: token }));
-	},
+	connected: auth,
 
 	login() {
 		user.set(data);
@@ -30,17 +36,14 @@ let currentReconnectDelay = initialReconnectDelay;
 export function connect() {
 	clearInterval(interval);
 
+	if (socket) return auth();
+
 	socket = new WebSocket('ws://localhost:3119/ws');
 	socket.addEventListener('open', onWebsocketOpen);
 	socket.addEventListener('close', onWebsocketClose);
 	socket.addEventListener('message', onWebsocketMessage);
 
-	interval = setInterval(
-		() => socket.readyState === 1 && socket.send(JSON.stringify({ type: 'heartbeat' })),
-		5000
-	);
-
-	ws.set(socket);
+	interval = setInterval(() => send('heartbeat'), 5000);
 }
 
 function onWebsocketMessage(msg) {
@@ -53,7 +56,7 @@ function onWebsocketOpen() {
 }
 
 function onWebsocketClose() {
-	ws.set(null);
+	socket = null;
 	setTimeout(() => {
 		reconnectToWebsocket();
 	}, currentReconnectDelay + Math.floor(Math.random() * 3000));
diff --git a/src/lib/store.js b/src/lib/store.js
index 125ebc42..7b510748 100644
--- a/src/lib/store.js
+++ b/src/lib/store.js
@@ -2,5 +2,5 @@ import { writable } from 'svelte/store';
 
 export const rate = writable();
 export const user = writable();
-export const ws = writable();
 export const invoiceAmount = writable();
+export const token = writable();
diff --git a/src/lib/utils.js b/src/lib/utils.js
index ba0d8335..b1bc24ec 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -1,3 +1,14 @@
+import { browser } from "$app/env";
+
 export function scroll(section) {
 	section.scrollIntoView({ behavior: 'smooth' });
 }
+
+const base = browser ? "" : import.meta.env.VITE_COINOS_URL;
+
+export const post = (url, body) =>
+	fetch(base + url, {
+		method: 'POST',
+		body: JSON.stringify(body),
+		headers: { 'accept': 'application/json', 'content-type': 'application/json' }
+	}).then(r => r.json);
diff --git a/src/routes/login.js b/src/routes/login.js
new file mode 100644
index 00000000..771de9e1
--- /dev/null
+++ b/src/routes/login.js
@@ -0,0 +1,5 @@
+import { post } from '$lib/utils';
+
+export async function POST({ request }) {
+	return { body: await post('/login', await request.json()) };
+}
diff --git a/src/routes/register.js b/src/routes/register.js
new file mode 100644
index 00000000..9f79f94e
--- /dev/null
+++ b/src/routes/register.js
@@ -0,0 +1,6 @@
+import { post } from '$lib/utils';
+
+export async function POST({ request }) {
+	let user = await request.json();
+	return { body: await post('/register', { user }) };
+}