<template>
	<div>
		<div class="verified-box shade-0--bg">
			<div class="verified-box__title">
				Success!
			</div>
			<div class="verified-box__body">
				You've verified your email address.
			</div>
			<spacer />
			<w-button
				bg-color="accent-1"
				color="white"
				class="verified-box__button"
				route="/"
			>
				Continue to homepage
			</w-button>
		</div>
	</div>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
	layout: 'landing',
	
	// TODO Fix this
	// async beforeRouteEnter(to, _from, next) {
	// 	const code = to.params.code;

	// 	// Verify the account
	// 	const res = await api.query(gql`
	// 		mutation ($code: String!) {
	// 			verifyAccount(code: $code)
	// 		}
	// 	`, { code });

	// 	if(!res.verifyAccount) {
	// 		next('/');
	// 		return;
	// 	}

	// 	next();
	// },
});
</script>

<style lang="scss">
.verified-box {
	@include glow(rgba(185, 185, 185, 0.8));
	@include rounded('2xl');
	@include padding(8, x);
	@include padding(4, y);

	@include dark {
		@include glow(rgba(0, 0, 0, 0.6));
	}

	height: 14rem;
	text-align: center;
	flex-direction: column;
	display: flex;

	&__title {
		@include font-weight(bold);
		@include font-size('2xl');
		@include padding(4, t);
		@include padding(2, b);
	}

	&__body {
		@include font-size('base');
	}

	&__button {
		@include margin(2, b);
	}
}
</style>