You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
1.9 KiB
76 lines
1.9 KiB
<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>
|