logout function

11 files changed, 107 insertions, 27 deletions

diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 6376e27f..b096f01e 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -14,9 +14,11 @@
 		<button class="bg-white p-2 rounded-full  w-12 h-12"
 			><Icon icon="clock" style="mx-auto" /></button
 		>
-		<button class="bg-white p-2 rounded-full  w-12 h-12"
+    <a href={`/${$user.username}`}>
+    <button class="bg-white p-2 rounded-full  w-12 h-12"
 			><Icon icon="profile" style="mx-auto" /></button
 		>
+    </a>
 		<button class="bg-white p-2 rounded-full  w-12 h-12"
 			><Icon icon="menu" style="mx-auto" /></button
 		>
diff --git a/src/components/RegisterOrLogin.svelte b/src/components/RegisterOrLogin.svelte
index b42b8d7f..f5764a85 100644
--- a/src/components/RegisterOrLogin.svelte
+++ b/src/components/RegisterOrLogin.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { Icon } from '$comp';
 	import { post } from '$lib/utils';
-	import { token } from '$lib/store';
+	import { user, token } from '$lib/store';
 	import { auth } from '$lib/socket';
 	import { goto } from '$app/navigation';
 
@@ -22,7 +22,7 @@
 		if (!r.token) r = await post('/login', { username, password });
 		$token = r.token;
 		auth();
-		goto('/receive');
+    user.subscribe(() => goto('/receive'));
 	};
 </script>
 
diff --git a/src/lib/socket.js b/src/lib/socket.js
index 9d0c472e..14555bd3 100644
--- a/src/lib/socket.js
+++ b/src/lib/socket.js
@@ -46,6 +46,10 @@ export function connect() {
 	interval = setInterval(() => send('heartbeat'), 5000);
 }
 
+export function close() {
+  if (socket) socket.close();
+} 
+
 function onWebsocketMessage(msg) {
 	let { type, data } = JSON.parse(msg.data);
 	messages(data)[type] && messages(data)[type]();
diff --git a/src/routes/[...path].svelte b/src/routes/[...path].svelte
deleted file mode 100644
index 503316bb..00000000
--- a/src/routes/[...path].svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script>
-	import { Icon } from '$comp';
-</script>
-
-<div class="flex justify-center items-center mt-20">
-	<div class="space-y-5 text-center">
-		<a href="/">
-			<Icon icon="logo" />
-		</a>
-
-		<Icon icon="question" style="mx-auto w-full" />
-
-		<h1 class="font-bold text-5xl">404</h1>
-		<p>Page not found.</p>
-	</div>
-</div>
diff --git a/src/routes/[username].js b/src/routes/[username].js
new file mode 100644
index 00000000..39a216c2
--- /dev/null
+++ b/src/routes/[username].js
@@ -0,0 +1,3 @@
+export async function GET({ params }) {
+  return { body: params }
+}
diff --git a/src/routes/[username].svelte b/src/routes/[username].svelte
new file mode 100644
index 00000000..fe1f7754
--- /dev/null
+++ b/src/routes/[username].svelte
@@ -0,0 +1,27 @@
+<script>
+	import { AppHeader, Icon } from '$comp';
+	import { user } from '$lib/store';
+	export let username;
+
+	console.log($user, username);
+</script>
+
+{#if $user?.username === username}
+	<AppHeader />
+	<div class="flex justify-center items-center mt-20 mb-3 px-3">
+		<div class="space-y-3 w-full md:w-[300px] mx-auto">
+			<div class="text-center">
+				<b>Signed in as {username}</b>
+			</div>
+
+			<div>
+				<a href="/logout" style="cursor: pointer">
+					<button
+						class="bg-primary rounded-xl w-full h-[48px] flex justify-center items-center font-semibold text-sm"
+						><Icon icon="logout" style="mr-2" /> Logout</button
+					>
+				</a>
+			</div>
+		</div>
+	</div>
+{/if}
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 6562db18..c01dc848 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -2,12 +2,27 @@
 	import '../app.css';
 	import { onMount } from 'svelte';
 	import { connect } from '$lib/socket';
-	import { token } from '$lib/store';
-	import { session } from '$app/stores';
+	import { user, token } from '$lib/store';
+	import { page, session } from '$app/stores';
 	import { browser } from '$app/env';
+	import { goto } from '$app/navigation';
 
 	browser && ($token ||= $session.token);
-	onMount(connect);
+	let protectedRoutes = [/receive/];
+	let ready = false;
+
+	onMount(() => {
+		if (protectedRoutes.find((p) => $page.url.pathname.match(p))) {
+			if (!$token) goto('/login');
+      user.subscribe((u) => (ready = true));
+		} else {
+			ready = true;
+		}
+
+		connect();
+	});
 </script>
 
-<slot />
+{#if ready}
+	<slot />
+{/if}
diff --git a/src/routes/logout/done.svelte b/src/routes/logout/done.svelte
new file mode 100644
index 00000000..894c7b99
--- /dev/null
+++ b/src/routes/logout/done.svelte
@@ -0,0 +1,13 @@
+<script>
+  import { onMount } from "svelte";
+  import { user, token } from "$lib/store";
+  import { goto } from "$app/navigation";
+  import { close } from "$lib/socket";
+
+  onMount(() => {
+    $token = null;
+    $user = null;
+    close();
+    goto('/');
+  });
+</script>
diff --git a/src/routes/logout/index.js b/src/routes/logout/index.js
new file mode 100644
index 00000000..80e65f8b
--- /dev/null
+++ b/src/routes/logout/index.js
@@ -0,0 +1,26 @@
+import cookie from "cookie";
+
+const opts = {
+  httpOnly: true,
+  sameSite: "lax",
+  path: "/",
+};
+
+export async function GET({ request: { headers } }) {
+  return {
+    status: 302,
+    headers: {
+      location: "/logout/done",
+      "set-cookie": [
+        cookie.serialize("token", "", {
+          ...opts,
+          expires: new Date(0),
+        }),
+        cookie.serialize("refresh_token", "", {
+          ...opts,
+          expires: new Date(0),
+        }),
+      ],
+    },
+  };
+}
diff --git a/src/routes/logout/index.svelte b/src/routes/logout/index.svelte
new file mode 100644
index 00000000..2c6a7085
--- /dev/null
+++ b/src/routes/logout/index.svelte
@@ -0,0 +1,10 @@
+<script>
+	import { onMount } from 'svelte';
+	import { browser } from '$app/env';
+	import { user, token } from '$lib/store';
+
+	onMount(() => {
+		$user = null;
+		$token = null;
+	});
+</script>
diff --git a/src/routes/receive.svelte b/src/routes/receive.svelte
index 760733a3..0329dea4 100644
--- a/src/routes/receive.svelte
+++ b/src/routes/receive.svelte
@@ -4,10 +4,6 @@
 	import { goto } from '$app/navigation';
 	import { invoiceAmount, invoiceAmountFiat, rate, user } from '$lib/store';
 
-	if (!$user && typeof window !== 'undefined') {
-		window.location = '/login';
-	}
-
 	let useFiat = true;
 	let amountFiat = 0;
 	let amountSats = 0;