94 lines
3.2 KiB
Vue
94 lines
3.2 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">Sign In</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="userLogin">
|
|
<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="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">
|
|
Don't have an account?
|
|
<nuxt-link
|
|
to="/register"
|
|
class="no-underline text-blue-500 font-bold"
|
|
>Create an Account</nuxt-link
|
|
>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'SignIn',
|
|
options: {
|
|
auth: false, // FIXME: auth: 'guest'
|
|
},
|
|
data: () => ({
|
|
form: {
|
|
username: '',
|
|
password: '',
|
|
},
|
|
}),
|
|
methods: {
|
|
userLogin() {
|
|
this.$auth
|
|
.loginWith('local', {
|
|
data: this.form,
|
|
})
|
|
.then(() => this.$router.push('/'))
|
|
},
|
|
},
|
|
head: () => ({
|
|
title: 'Sign in',
|
|
}),
|
|
}
|
|
</script>
|