<script lang="ts" context="module">
	export const router = false;
</script>

<script lang="ts">
	import { goto } from '$app/navigation';
	import { page } from '$app/stores';
	import { onMount } from 'svelte';
	import { AuthService } from '$lib/pb/all.pb';
	import { noToken } from '$lib/pb/pbutil';
	import { GoogleSpin } from 'svelte-loading-spinners';
	import { auth } from '$lib/stores';

	const perform = (code, state) => {
		AuthService.Token({ state: state, code: code }, noToken())
			.then((res) => {
				$auth.login(res.token);
				window.location.href = '/dashboard';
			})
			.catch((err) => {
				console.log(err);
				goto('/');
			});
	};

	onMount(() => {
		const query = $page.url.searchParams;
		const code = query.get('code'),
			state = query.get('state');
		perform(code, state);
	});
</script>

<svelte:head>
	<title>Authenticating... | CodeQuest</title>
</svelte:head>

<div
	class="absolute -top-10 left-0 w-full h-full flex flex-col gap-4 justify-center items-center pointer-events-none bg-transparent"
>
	<GoogleSpin size="48px" duration="3s" />
	<h1 class="text-2xl font-bold">Processing</h1>
</div>
