128 lines
4.5 KiB
Vue
128 lines
4.5 KiB
Vue
<template>
|
|
<div
|
|
class="h-screen container mx-auto h-full flex justify-center items-center"
|
|
>
|
|
<div class="w-full md:w-1/2 lg:w-1/3">
|
|
<h1 class="font-semibold text-lg mb-6 text-center">
|
|
Create an Account
|
|
</h1>
|
|
<div
|
|
class="bg-gray-800 border-teal-500 p-8 border-t-8 bg-white mb-6 rounded-lg shadow-lg"
|
|
>
|
|
<form @submit.prevent="register">
|
|
<div
|
|
v-if="showError"
|
|
class="bg-red-500 border-l-4 border-red-700 text-red-200 p-4 mb-4"
|
|
role="alert"
|
|
>
|
|
<p class="font-bold">Error</p>
|
|
<p>{{ error }}</p>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label
|
|
for="username"
|
|
class="font-bold text-grey-darker block mb-2"
|
|
>
|
|
Username
|
|
</label>
|
|
<input
|
|
id="username"
|
|
v-model="form.username"
|
|
name="username"
|
|
class="shadow focus:shadow-outline block appearance-none w-full bg-gray-700 border-gray-500 hover:border-gray-500 px-2 py-2 rounded shadow"
|
|
placeholder="Your Username"
|
|
/>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label
|
|
for="password"
|
|
class="font-bold text-grey-darker block mb-2"
|
|
>
|
|
Password
|
|
</label>
|
|
<input
|
|
id="password"
|
|
v-model="form.password"
|
|
name="password"
|
|
type="password"
|
|
class="shadow focus:shadow-outline block appearance-none w-full bg-gray-700 border-gray-500 hover:border-gray-500 px-2 py-2 rounded shadow"
|
|
placeholder="Your Password"
|
|
/>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label
|
|
for="confirm"
|
|
class="font-bold text-grey-darker block mb-2"
|
|
>
|
|
Confirm your password
|
|
</label>
|
|
<input
|
|
id="confirm"
|
|
v-model="confirm"
|
|
name="confirm"
|
|
type="password"
|
|
class="shadow focus:shadow-outline block appearance-none w-full bg-gray-700 border-gray-500 hover:border-gray-500 px-2 py-2 rounded shadow"
|
|
placeholder="Confirm your Password"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex items-center mt-6">
|
|
<button
|
|
type="submit"
|
|
class="w-full bg-teal-500 hover:bg-teal-400 text-white font-bold py-2 px-4 rounded"
|
|
>
|
|
Sign In
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="text-center">
|
|
<p class="text-gray-200 text-sm">
|
|
Already have an account?
|
|
<nuxt-link
|
|
to="/signin"
|
|
class="no-underline text-blue-500 font-bold"
|
|
>Sign in
|
|
</nuxt-link>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'SignIn',
|
|
options: {
|
|
auth: false, // FIXME: auth: 'guest'
|
|
},
|
|
data: () => ({
|
|
confirm: '',
|
|
form: {
|
|
username: '',
|
|
password: '',
|
|
},
|
|
error: '',
|
|
showError: false,
|
|
}),
|
|
methods: {
|
|
register() {
|
|
this.$axios
|
|
.post('/user', this.form)
|
|
.then(() => this.$router.push('/signin'))
|
|
.catch((e) => {
|
|
if (e.response) {
|
|
this.error = e.response.data.error
|
|
this.showError = true
|
|
}
|
|
})
|
|
},
|
|
},
|
|
head: () => ({
|
|
title: 'Sign in',
|
|
}),
|
|
}
|
|
</script>
|