<script>
	import { writable } from 'svelte/store';
	const token = writable('');
	const payload = writable();
	const onSendClick = async () => {
		const response = await fetch('/api/login', { method: 'POST' });
		const data = await response.json();
		$token = data?.token;
	};
	const onReadClick = async () => {
		const response = await fetch('/api/me', {
			method: 'GET',
			headers: {
				Authorization: `Bearer ${$token}`
			}
		});
		$payload = await response.json();
	};
</script>

<h1>Welcome to 3D-Belte</h1>
<p>Visit <a href="/about">about page</a> to read the documentation. First press send, than read.</p>
<div class="body">
	<div class="form">
		<span>JWT Token</span>
		<textarea>{$token}</textarea>
		<span>Payload</span>
		<textarea>{JSON.stringify($payload)}</textarea>
		<button onclick={onSendClick}>send</button>
		<button onclick={onReadClick}>read</button>
	</div>
</div>

<style>
	.body {
		margin: 0;
		padding: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		align-content: center;
	}
	.form {
		width: 500px;
	}
	textarea {
		width: 100%;
		height: 100px;
		border: 1px solid gray;
	}
</style>
