<template>
	<div class="w-full max-w-sm lg:mx-auto lg:my-auto p-6 space-y-4 bg-white rounded-lg shadow-md">
		<div class="text-center font-thin text-4xl py-4">AUTOPLEX</div>
		<div class="font-medium text-center text-xl">Sign Up</div>
		<form>
			<div class="space-y-4">
				<div>
					<text-box label="Acess Token" type="text" ref="token" disabled/>
				</div>
				<div>
					<text-box label="Your Name" type="text" ref="name" placeholder="John Doe" :error-message="errors.email"/>
				</div>
				<div>
					<text-box label="Email" type="email" ref="email" placeholder="john@example.com" :error-message="errors.email"/>
				</div>
				<div>
					<text-box label="Password" type="password" ref="password" placeholder="············" :error-message="errors.password"/>
				</div>
				<div>
					<text-box label="Re-type Password" type="password" ref="password" placeholder="············" :error-message="errors.password"/>
				</div>
				<div>
					<button type="submit" class="block w-full rounded-full bg-indigo-500 text-white p-2 focus:outline-none">Register</button>
				</div>
			</div>
		</form>
	</div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import CheckBox from "../components/CheckBox.vue";
import TextBox from "../components/TextBox.vue";

export default defineComponent({
	components: {
		CheckBox,
		TextBox
	},
	computed: {
		accessToken(): string {
			return <string>this.$route.query["access_token"];
		}
	},
	data() {
		return {
			errors: {
				email: "",
				password: ""
			}
		}
	},
	methods: {
		login() {

		}
	},
	mounted() {
		(<any>this.$refs["token"]).inputValue = this.accessToken;
		console.log("The token is", this.accessToken);
	},
	beforeRouteEnter(to, from, next) {
		if (to.query["access_token"] === undefined) {
			next({ name: "Login" });
		} else {
			next();
		}
	}
});
</script>

<style>
	button:focus-visible {
		@apply ring-2 ring-indigo-500 ring-offset-2;
	}
</style>
