Created
July 30, 2020 06:16
-
-
Save techlab23/bfbbd65004637949a6fdedcece278aeb to your computer and use it in GitHub Desktop.
Login component usage (sanctum csrf-cookie route and nuxt login)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div class="flex justify-center items-center h-screen"> | |
<div class="w-full max-w-xs"> | |
<form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"> | |
<div class="mb-4"> | |
<label | |
class="block text-gray-700 text-sm font-bold mb-2" | |
for="username" | |
> | |
Username | |
</label> | |
<input | |
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" | |
id="username" | |
type="text" | |
placeholder="Username" | |
v-model="form.email" | |
/> | |
</div> | |
<div class="mb-6"> | |
<label | |
class="block text-gray-700 text-sm font-bold mb-2" | |
for="password" | |
> | |
Password | |
</label> | |
<input | |
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" | |
id="password" | |
type="password" | |
placeholder="Password" | |
v-model="form.password" | |
/> | |
</div> | |
<div class="flex items-center justify-between"> | |
<button | |
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" | |
type="button" | |
@click.prevent="login" | |
> | |
Sign In | |
</button> | |
<a | |
class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800" | |
href="#" | |
> | |
Forgot Password? | |
</a> | |
</div> | |
</form> | |
<p class="text-center text-gray-500 text-xs"> | |
©2020 Vite.ly. All rights reserved. | |
</p> | |
</div> | |
</div> | |
</template> | |
<script> | |
export default { | |
data() { | |
return { | |
form: { | |
email: "", | |
password: "" | |
} | |
} | |
}, | |
mounted() { | |
this.$axios.$get("/sanctum/csrf-cookie") | |
}, | |
methods: { | |
async login() { | |
await this.$auth.loginWith("local", { data: this.form }) | |
this.$router.push({ path: "/dashboard" }) | |
} | |
} | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment