<template>
	<div class="install-page">
		<section
			key="register"
			class="install-page__view"
		>
			<h1 class="install-page__title">
				{{ $t("INSTALLER_INSTALL") }}
			</h1>
			<w-form class="install-page__form">
				<section>
					<w-input
						v-model="email"
						class="install-page__input"
						:placeholder="$t('GENERAL_EMAIL')"
						autocomplete="sign-up email"
						name="email"
						round
					/>
					<w-input
						v-model="fullname"
						class="install-page__input"
						:placeholder="$t('GENERAL_FULL_NAME')"
						autocomplete="sign-up name"
						name="name"
						round
					/>
					<w-input
						v-model="password"
						class="install-page__input"
						:placeholder="$t('SIGNIN_PASSWORD')"
						autocomplete="sign-up password"
						password-reveal
						type="password"
						name="password"
						round
					/>
				</section>
				<VindiSpacer />
				<w-button
					round
					color="white"
					class="install-page__button"
					bg-color="secondary"
					type="submit"
					width="100%"
					height="32"
					:loading="loading"
					@click="registerAdmin"
				>
					{{ $t("INSTALLER_CONTINUE") }}
					<w-icon>
						mdi mdi-chevron-right
					</w-icon>
				</w-button>
			</w-form>
		</section>
	</div>
</template>

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

export default Vue.extend({
	layout: 'landing',
	middleware: 'guest',

	asyncData(context) {
		if(!context.store.state.config.installing) {
			context.redirect('/');
		}
	},

	data: () => ({
		fullname: "",
		email: "",
		password: "",
		loading: false,
	}),

	methods: {

		async registerAdmin() {
			if (!this.fullname || !this.email || !this.password) {
				this.$waveui.notify(this.$t('NOTIFICATION_BLANK_FIELDS'), "error");
				return;
			}
			
			this.loading = true;

			const profile = await this.$store.dispatch('signUp', {
				fullname: this.fullname,
				email: this.email,
				password: this.password,
				remember: true,
			});

			if (!profile) {
				this.$waveui.notify(this.$t('NOTIFICATION_INVALID_DETAILS'), 'error');
			} else {
				this.$router.push('/');
			}

			this.loading = false;
		}

	}
});
</script>

<style lang="scss">
.install-page {
	@include glow(rgba(0, 131, 253, 0.8));
	@include rounded('2xl');
	@include padding(8, x);
	@include padding(4, y);

	flex: 1;
	z-index: 2;
	color: white;
	margin: 0 auto;
	max-width: 400px;
	text-align: center;
	background: linear-gradient(
		135deg,
		rgb(2, 198, 255) 0%,
		rgb(105, 67, 255) 100%
	);

	@include dark {
		@include glow(rgba(0, 131, 253, 0.45));
	}

	&__title {
		@include padding(3, y);
		@include font-weight(semibold);
		@include font-size('2xl');

		text-transform: uppercase;
		letter-spacing: 0.1em;
	}

	&__form {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	&__input {
		@include margin(5, y);
	}

	.w-button {
		@include margin(5, t);
	}
}
</style>