atasistro
/
pingcrm
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update login form to use the new Inertia form

This commit is contained in:
Jonathan Reinink 2020-12-22 12:03:21 -05:00
parent 27272fb7d2
commit b06166827f
1 changed files with 6 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
resources/js/Pages/Auth/Login.vue
View File

@ -2,12 +2,12 @@
<div class="p-6 bg-indigo-800 min-h-screen flex justify-center items-center"> <div class="p-6 bg-indigo-800 min-h-screen flex justify-center items-center">
<div class="w-full max-w-md"> <div class="w-full max-w-md">
<logo class="block mx-auto w-full max-w-xs fill-white" height="50" /> <logo class="block mx-auto w-full max-w-xs fill-white" height="50" />
<form class="mt-8 bg-white rounded-lg shadow-xl overflow-hidden" @submit.prevent="submit"> <form class="mt-8 bg-white rounded-lg shadow-xl overflow-hidden" @submit.prevent="form.post(route('login.attempt'))">
<div class="px-10 py-12"> <div class="px-10 py-12">
<h1 class="text-center font-bold text-3xl">Welcome Back!</h1> <h1 class="text-center font-bold text-3xl">Welcome Back!</h1>
<div class="mx-auto mt-6 w-24 border-b-2" /> <div class="mx-auto mt-6 w-24 border-b-2" />
<text-input v-model="form.email" :error="errors.email" class="mt-10" label="Email" type="email" autofocus autocapitalize="off" /> <text-input v-model="form.email" :error="form.errors.email" class="mt-10" label="Email" type="email" autofocus autocapitalize="off" />
<text-input v-model="form.password" class="mt-6" label="Password" type="password" /> <text-input v-model="form.password" :error="form.errors.password" class="mt-6" label="Password" type="password" />
<label class="mt-6 select-none flex items-center" for="remember"> <label class="mt-6 select-none flex items-center" for="remember">
<input id="remember" v-model="form.remember" class="mr-1" type="checkbox"> <input id="remember" v-model="form.remember" class="mr-1" type="checkbox">
<span class="text-sm">Remember Me</span> <span class="text-sm">Remember Me</span>
@ -15,7 +15,7 @@
</div> </div>
<div class="px-10 py-4 bg-gray-100 border-t border-gray-200 flex justify-between items-center"> <div class="px-10 py-4 bg-gray-100 border-t border-gray-200 flex justify-between items-center">
<a class="hover:underline" tabindex="-1" href="#reset-password">Forget password?</a> <a class="hover:underline" tabindex="-1" href="#reset-password">Forget password?</a>
<loading-button :loading="sending" class="btn-indigo" type="submit">Login</loading-button> <loading-button :loading="form.processing" class="btn-indigo" type="submit">Login</loading-button>
</div> </div>
</form> </form>
</div> </div>
@ -34,32 +34,14 @@ export default {
Logo, Logo,
TextInput, TextInput,
}, },
props: {
errors: Object,
},
data() { data() {
return { return {
sending: false, form: this.$inertia.form({
form: {
email: 'johndoe@example.com', email: 'johndoe@example.com',
password: 'secret', password: 'secret',
remember: null, remember: null,
}, }),
} }
}, },
methods: {
submit() {
const data = {
email: this.form.email,
password: this.form.password,
remember: this.form.remember,
}
this.$inertia.post(this.route('login.attempt'), data, {
onStart: () => this.sending = true,
onFinish: () => this.sending = false,
})
},
},
} }
</script> </script>