<script setup>
import { inject, ref } from 'vue';

import Ellipsis from '#/components/loading/ellipsis.vue';

import { post } from '#/src/api.js';

const { urlParsed } = inject('pageContext');
const { userId, token } = urlParsed.search;

const errorMsg = ref(null);
const submitting = ref(false);
const success = ref(false);

async function verify() {
	errorMsg.value = null;
	submitting.value = true;

	try {
		await post('/emails/verify', {
			userId,
			token,
		}, {
			appendErrorMessage: true,
		});

		success.value = true;
	}
	catch (error) {
		errorMsg.value = error.message;
	}
	finally {
		submitting.value = false;
	}
}
</script>

<template>
	<div class="content">
		<Ellipsis v-if="submitting" />

		<strong
			v-else-if="errorMsg"
			class="feedback error"
		>{{ errorMsg }}</strong>

		<strong
			v-else-if="success"
			class="feedback success"
		>Verification successful</strong>

		<button
			v-else
			class="button button-primary"
			@click="verify"
		>Click here to verify your e-mail address</button>
	</div>
</template>

<style scoped>
.content {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-grow: 1;
	padding: 1rem;
}

.button {
	padding: 1rem 1.5rem;
	font-size: 1.1rem;
}

.feedback {
	font-size: 1.1rem;
}

.error {
	color: var(--error);
}

.success {
	color: var(--success);
}
</style>
