SuddenImpactRecords/Frontend/vue/src/components/admin/AdminLogin.vue

<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>