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.
105 lines
4.3 KiB
105 lines
4.3 KiB
<template>
|
|
<section class="vh-100 background-color">
|
|
<div class="container py-5 h-100">
|
|
<div class="row justify-content-center align-items-center h-100">
|
|
<div class="col-12 col-lg-9 col-xl-7">
|
|
<div class="card shadow-2-strong card-registration border-2" style="border-radius: 15px;">
|
|
<div class="card-body p-4 p-md-5">
|
|
<h3 class="mb-4 pb-2 pb-md-0 mb-md-5">Login</h3>
|
|
<Form @submit="login" v-slot="{ meta, errors }">
|
|
<div class="row">
|
|
<div class="col-md-12 mb-4 pb-2">
|
|
<div class="form-outline">
|
|
<Field
|
|
v-model="email"
|
|
type="email"
|
|
id="emailAddress"
|
|
name="Email"
|
|
class="form-control form-control-lg"
|
|
:class="errors['Email'] ? 'invalid' : ''"
|
|
rules="required|email"/>
|
|
<label v-if="!errors['Email']" class="form-label" for="email">Email</label>
|
|
<ErrorMessage name="Email" as="label" class="form-label" for="email"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12 mb-4 pb-2">
|
|
<div class="form-outline">
|
|
<Field
|
|
v-model="password"
|
|
type="password"
|
|
id="emailAddress"
|
|
name="Password"
|
|
class="form-control form-control-lg"
|
|
:class="errors['Password'] ? 'invalid' : ''"
|
|
rules="required|min:8"/>
|
|
<label v-if="!errors['Password']" class="form-label" for="password">Password</label>
|
|
<ErrorMessage name="Password" as="label" class="form-label" for="password"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-2 pt-2 center-align">
|
|
<button
|
|
:disabled="!meta.touched || !meta.valid"
|
|
class="btn btn-primary btn-lg"
|
|
type="submit"
|
|
>
|
|
Login
|
|
</button>
|
|
</div>
|
|
|
|
<div class="mt-2 pt-2 center-align">
|
|
<p style="padding-right: 10px;">Don't have an account? </p><router-link :to='{"name": "AdminSignup"}'>Sign up</router-link>
|
|
</div>
|
|
</Form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import { Form, Field, ErrorMessage } from 'vee-validate'
|
|
|
|
export default {
|
|
name: 'AdminLogin',
|
|
data() {
|
|
return {
|
|
email: '',
|
|
password: '',
|
|
}
|
|
},
|
|
|
|
components: {
|
|
Form,
|
|
Field,
|
|
ErrorMessage,
|
|
},
|
|
|
|
methods: {
|
|
async login () {
|
|
try {
|
|
const response = await this.axios.post(
|
|
'/admin/login',
|
|
{
|
|
email: this.email,
|
|
password: this.password,
|
|
}
|
|
)
|
|
|
|
if (response.status === 200) {
|
|
this.$store.dispatch('setUser', response.data)
|
|
this.$router.push({ name: 'AdminUsersList' })
|
|
}
|
|
} catch (error) {
|
|
this.$toast.error('An error occured')
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|