Merge pull request #144 from humanbeeng/137-ui-fix-logout-flow

137 UI fix logout flow

ui/src/lib/components/Header.svelte

@@ -2,7 +2,6 @@
 	import logo from '$lib/assets/logo-black.svg';
 	import type { User } from '@/types';
 	import ProfileHeader from './ProfileHeader.svelte';
-	import { Button } from './ui/button';
 	export let user: User | null;
 </script>
 
@@ -21,10 +20,6 @@
 			<slot />
 			{#if user}
 				<ProfileHeader {user} />
-			{:else}
-				<Button class="h-8 hidden shadow-sm md:flex" href="/auth/github" variant="default"
-					>Login</Button
-				>
 			{/if}
 		</nav>
 	</div>

ui/src/lib/components/OnlineStatusIndicator.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
 	import { Badge } from '$lib/components/ui/badge/index.js';
 	import { Dot, DotFilled } from 'svelte-radix';
-	export let online = false;
+
+	export let state: 'connecting' | 'online' | 'offline' = 'connecting';
 </script>
 
-{#if online}
+{#if state === 'online'}
 	<Badge
 		variant="outline"
 		class="bg-green-100 text-green-600 dark:bg-green-900/20 dark:text-green-400 py-1 max-h-6 px-0"
@@ -13,7 +14,7 @@
 			<p class="pr-2">Listening</p>
 		</span></Badge
 	>
-{:else}
+{:else if state === 'offline'}
 	<Badge
 		variant="outline"
 		class="bg-red-100 text-red-600 py-1 max-h-6 dark:bg-red-900/20  dark:text-red-400 px-0"
@@ -23,4 +24,14 @@
 			<p class="pr-2">Offline</p>
 		</span>
 	</Badge>
+{:else if state === 'connecting'}
+	<Badge
+		variant="outline"
+		class="bg-red-100 text-red-600 py-1 max-h-6 dark:bg-red-900/20  dark:text-red-400 px-0"
+	>
+		<span class="flex place-items-center">
+			<Dot />
+			<p class="pr-2">Connecting...</p>
+		</span>
+	</Badge>
 {/if}

ui/src/routes/+error.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+</script>
+
+<h1>{$page.status}: {$page.error?.message}</h1>

ui/src/routes/+page.server.ts

@@ -16,33 +16,33 @@ export const load: PageServerLoad = async ({ cookies, fetch }) => {
 	if (cookie) {
 		const fetchUser = async () => {
 			const res = await fetch(`${PUBLIC_BASE_URL}/user`).catch((err) => {
-				throw error(500);
+				return error(500);
 			});
 
 			if (!res.ok) {
-				throw error(res.status, { message: await res.text() });
+				return error(res.status, { message: await res.text() });
 			}
 
 			const user = (await res.json().catch((err) => {
 				console.log('Unable to parse user response', err);
-				throw error(500, { message: 'Something went wrong' });
+				return error(500, { message: 'Something went wrong' });
 			})) as User;
 
 			return user;
 		};
 
 		const fetchUserEndpoints = async () => {
 			const res = await fetch(`${PUBLIC_BASE_URL}/endpoint`).catch((err) => {
-				throw error(500);
+				return error(500);
 			});
 
 			if (!res.ok) {
-				throw error(res.status, { message: await res.text() });
+				return error(res.status, { message: await res.text() });
 			}
 
 			const endpoints = (await res.json().catch((err) => {
 				console.log('Unable to parse user endpoints response', err);
-				throw error(500, { message: 'Something went wrong' });
+				return error(500, { message: 'Something went wrong' });
 			})) as UserEndpointsResponse;
 
 			return endpoints;
@@ -71,7 +71,6 @@ export const actions = {
 			return;
 		}
 
-
 		if (subdomain.toString().length < 4 || subdomain.toString().length > 10) {
 			return fail(400, {
 				error: 'Subdomain length should be between 4 and 10.'

ui/src/routes/+page.svelte

@@ -76,6 +76,9 @@
 			target="_blank"
 			class="hover:underline">Pricing</a
 		>
+
+		<a href="/login" class="underline"> Login </a>
+
 		<a href="https://github.com/humanbeeng/checkpost">
 			<GithubLogo />
 		</a>

ui/src/routes/auth/github/callback/+server.ts

@@ -9,7 +9,7 @@ export async function GET({ url, fetch, cookies }: RequestEvent) {
 
 	const res = await fetch(endpoint).catch((err) => {
 		console.error('Unable to hit auth callback', err);
-		error(500, { message: 'Something went wrong while callback' });
+		return error(500, { message: 'Something went wrong while callback' });
 	});
 
 	if (res.ok) {
@@ -23,8 +23,8 @@ export async function GET({ url, fetch, cookies }: RequestEvent) {
 			secure: process.env.NODE_ENV === 'production'
 		});
 
-		redirect(302, '/onboarding');
+		return redirect(302, '/onboarding');
 	} else {
-		error(401);
+		return error(401);
 	}
 }

ui/src/routes/auth/logout/+page.server.ts

@@ -1,6 +1,6 @@
 import { redirect } from '@sveltejs/kit';
 
 export const load = async ({ cookies }) => {
-	await cookies.delete('token', { path: '/' });
+	cookies.delete('token', { path: '/' });
 	return redirect(302, '/');
 };

ui/src/routes/dashboard/+page.server.ts

@@ -5,7 +5,7 @@ import type { PageServerLoad } from '../$types';
 
 export const load: PageServerLoad = async ({ cookies, fetch }) => {
 	if (!cookies.get('token')) {
-		return redirect(301, '/');
+		return redirect(301, '/auth/logout');
 	}
 
 	const res = await fetch(`${PUBLIC_BASE_URL}/user`).catch((err) => {
@@ -16,6 +16,10 @@ export const load: PageServerLoad = async ({ cookies, fetch }) => {
 	if (!res.ok) {
 		// TODO: Better error handling
 		console.log('err', await res.text());
+
+		if (res.status == 401) {
+			return redirect(301, '/auth/logout');
+		}
 		return {
 			err: { message: 'Unable to fetch user details' }
 		};

ui/src/routes/inspect/[endpoint]/+error.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import Header from '@/components/Header.svelte';
+</script>
+
+<main class="bg-gray-50 h-screen">
+	<Header user={null} />
+	<h1>Custom error page</h1>
+</main>

ui/src/routes/inspect/[endpoint]/+page.server.ts

@@ -1,20 +1,24 @@
 import { PUBLIC_BASE_URL } from '$env/static/public';
 import type { EndpointHistory, User } from '@/types';
-import { error } from '@sveltejs/kit';
+import { error, redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
 
 export const csr = true;
 
-export const load = async ({ fetch, params, cookies }) => {
+export const load: PageServerLoad = async ({ fetch, params, cookies }) => {
 	const endpoint = params.endpoint;
 
 	const fetchEndpointHistory = async () => {
 		const res = await fetch(`${PUBLIC_BASE_URL}/endpoint/history/${endpoint}`).catch((err) => {
 			console.error('Unable to fetch endpoint request history', err);
-			throw error(500);
+			return error(500);
 		});
 
 		if (!res.ok) {
-			throw error(res.status, { message: await res.text() });
+			if (res.status == 401) {
+				return redirect(301, '/auth/logout');
+			}
+			return error(res.status, { message: await res.text() });
 		}
 
 		const endpointHistory = (await res.json().catch((err) => {
@@ -28,16 +32,22 @@ export const load = async ({ fetch, params, cookies }) => {
 		console.log('Fetching user details');
 		const res = await fetch(`${PUBLIC_BASE_URL}/user`).catch((err) => {
 			console.error('Unable to fetch user details', err);
-			throw error(500);
+			return error(500);
 		});
 
 		if (!res.ok) {
-			throw error(res.status, { message: await res.text() });
+			if (res.status == 401) {
+				return redirect(301, '/auth/logout');
+			} else if (res.status == 404) {
+				return redirect(301, '/onboarding');
+			} else if (res.status === 403) {
+				return error(res.status, { message: await res.text() });
+			}
 		}
 
 		const user = (await res.json().catch((err) => {
 			console.error('Unable to parse user response', err);
-			throw error(500, { message: 'Something went wrong' });
+			return error(500, { message: 'Something went wrong' });
 		})) as User;
 
 		return user;

ui/src/routes/inspect/[endpoint]/+page.svelte

@@ -21,7 +21,7 @@
 
 	const endpoint = $page.params.endpoint;
 	let selectedRequest: Request | undefined;
-	let websocketOnline = false;
+	let websocketOnline: 'connecting' | 'offline' | 'online' = 'connecting';
 
 	$endpointHistory = data.endpointHistory;
 	if ($endpointHistory == null) {
@@ -43,7 +43,7 @@
 		// Connection opened
 		socket.addEventListener('open', () => {
 			console.log('Websocket connection established');
-			websocketOnline = true;
+			websocketOnline = 'online';
 		});
 
 		// Listen for messages
@@ -58,12 +58,12 @@
 
 		socket.addEventListener('close', () => {
 			console.log('Websocket connection closed');
-			websocketOnline = false;
+			websocketOnline = 'offline';
 		});
 
 		socket.addEventListener('error', () => {
 			console.log('Websocket connection error');
-			websocketOnline = false;
+			websocketOnline = 'offline';
 		});
 	};
 
@@ -82,7 +82,7 @@
 					<img src={logo} alt="Checkpost logo" />
 					<p class=" tracking-normal font-medium text-md">Checkpost</p>
 				</span>
-				<OnlineStatusIndicator online={websocketOnline} />
+				<OnlineStatusIndicator state={websocketOnline} />
 			</span>
 		</div>
 

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

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import Header from '@/components/Header.svelte';
+	import { Button } from '@/components/ui/button';
+</script>
+
+<div class="h-screen bg-gray-50">
+	<Header user={null} />
+
+	<div class="flex flex-col w-full items-center justify-center mt-72">
+		<!-- Box  -->
+		<div
+			class="rounded-md w-1/2 mx-20 border flex flex-col p-6 gap-3 justify-between xl:w-1/5 shadow-lg backdrop-blur-lg bg-gray-50"
+		>
+			<h1 class="text-xl font-medium">Login</h1>
+			<!-- <h2 class="font-normal text-xl tracking-tight text-gray-600">Login</h2> -->
+			<hr />
+			<div class="flex flex-row gap-3 pt-2">
+				<a href="/auth/github" class="w-full">
+					<Button variant="default" class="w-full">Continue with Github</Button>
+				</a>
+				<!-- <Button variant="default" class="w-full">Google</Button> -->
+			</div>
+		</div>
+	</div>
+</div>

ui/src/routes/onboarding/+page.server.ts

@@ -7,39 +7,47 @@ import type { GenerateEndpointResponse, UserEndpointsResponse } from './types';
 export const load: PageServerLoad = async ({ fetch, cookies }) => {
 	const token = cookies.get('token');
 	if (!token) {
-		return redirect(301, '/');
+		return redirect(301, '/auth/logout');
 	}
 
 	// TODO: Better error handling
 	const fetchUser = async () => {
+		console.log('Fetching user details');
 		const res = await fetch(`${PUBLIC_BASE_URL}/user`).catch((err) => {
-			throw error(500);
+			return error(500);
 		});
 
 		if (!res.ok) {
-			throw error(res.status, { message: await res.text() });
+			if (res.status == 401) {
+				return redirect(301, '/auth/logout');
+			}
+			return error(res.status, { message: await res.text() });
 		}
 
 		const user = (await res.json().catch((err) => {
 			console.log('Unable to parse user response', err);
-			throw error(500, { message: 'Something went wrong' });
+			return error(500, { message: 'Something went wrong' });
 		})) as User;
 
 		return user;
 	};
 
 	const fetchUserEndpoints = async () => {
+		console.log('Fetching user endpoints');
 		const res = await fetch(`${PUBLIC_BASE_URL}/endpoint`).catch((err) => {
-			throw error(500);
+			return error(500);
 		});
 
 		if (!res.ok) {
-			throw error(res.status, { message: await res.text() });
+			if (res.status == 401) {
+				return redirect(301, '/auth/logout');
+			}
+			return error(res.status, { message: await res.text() });
 		}
 
 		const endpoints = (await res.json().catch((err) => {
 			console.log('Unable to parse user endpoints response', err);
-			throw error(500, { message: 'Something went wrong' });
+			return error(500, { message: 'Something went wrong' });
 		})) as UserEndpointsResponse;
 
 		return endpoints;

ui/src/routes/privacy/+page.svelte

@@ -1,8 +1,10 @@
 <script>
 	import Footer from '@/components/Footer.svelte';
+	import Header from '@/components/Header.svelte';
 </script>
 
-<body class="bg-gray-50 w-full min-h-full">
+<body class="bg-gray-50 w-full h-screen">
+	<Header />
 	<div class="flex flex-col justify-center mx-10 lg:mx-64">
 		<h1 class="text-4xl font-bold tracking-tight my-16 text-center">Privacy Policy</h1>
 

ui/src/routes/terms/+page.svelte

@@ -1,8 +1,10 @@
 <script>
 	import Footer from '@/components/Footer.svelte';
+	import Header from '@/components/Header.svelte';
 </script>
 
 <body class="bg-gray-50 w-full min-h-full">
+	<Header />
 	<div class="flex flex-col justify-center mx-10 lg:mx-64">
 		<h1 class="text-4xl font-bold tracking-tight my-16 text-center">Terms of Service</h1>