unity/resources/js/user/pages/logins/Index.vue

<template>
    <div>
        <div class="vh-100 bg-plum-plate bg-animation">
            <div class="">
                <div  class="app-header header-shadow bg-light text-lighter">
                    <router-link  
                        :to="'/'" 
                        class="btn-link pl-3"
                    >
                        <div class="logo-src" :style='{ background: "url(" + share_url + "favicon.png" + ")" }'></div>
                    </router-link>
                    <div class="pl-3 app-header-title">
                        <h5 class="card-title">Login</h5>
                    </div>
                </div>
                <div class="d-flex justify-content-center align-items-center">
                    <b-col  md="4" class="top-margin-100">
                        <div class="mx-auto p-0 m-0">
                            <form @submit.prevent="onSubmit" @keydown="form.errors.clear($event.target.name)">
                                <div class="modal-content">
                                    <div class="modal-body">
                                        <div class="h5 modal-title text-center">
                                            <div class="m-3 text-center">
                                                <img class="img-fluid big-logo" :src="share_url + 'logo.png'">
                                            </div>
                                        </div>
                                        <!-- ///////////////////////////////////////////////////// -->
                                        <text-input
                                            :input_name="'email'"
                                            :form="form"
                                            :label="'Email'"
                                        >
                                        </text-input>
                                        <!-- ///////////////////////////////////////////////////// -->
                                        <password-input
                                            :input_name="'password'"
                                            :form="form"
                                            :label="'Password'"
                                        >
                                        </password-input>
                                        <!-- ///////////////////////////////////////////////////// -->
                                    </div>
                                    <div class="modal-footer">
                                        <div>
                                            <v-btn
                                              :loading="loading"
                                              :disabled="loading"
                                              :block="true"
                                              type="submit"
                                              color="primary"
                                              class="white--text"
                                              @click="loader = 'loading'"
                                            >
                                                Login
                                            </v-btn>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </b-col>
                </div>
                <div class="footer text-center text-white opacity-8 p-3">
                    Copyright &copy; {{ site_title }}  {{ year }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import TextInput from '../../components/inputs/TextInput';
    import PasswordInput from '../../components/inputs/PasswordInput';

    export default {
        metaInfo() {
            let vm = this;
            return {
                title: Constants.site.title,
                titleTemplate: '%s | ' + vm.$router.currentRoute.name
            }
        },
        components: {
            TextInput,
            PasswordInput
        },
        data() {
            let vm = this;
            return {
                form: new Form({
                    email: '',
                    password: ''
                }),
                site_title: Constants.site.title,
                site_short_title: Constants.site.short_title,
                share_url: ENV.SHARE_URL,

                year: General.getYear(),
                loader: null,
                loading: false
            }
        },
        methods: {
            onSubmit() {
                let vm = this;
                const l = vm.loader
                vm[l] = !vm[l]
                vm.form.post(
                    ENV.API_URL + 'login', 
                    {
                        'App-Key': ENV.APP_KEY
                    }
                )
                .then(response => {
                    localStorage.setItem('user_detail',JSON.stringify(response.data))
                    localStorage.setItem('user_jwt', response.access_token);
                    
                    if (localStorage.getItem('user_jwt') != null) {
                        window.location.replace(ENV.APP_URL);
                    }
                })
                .catch(function (error) {
                    vm[l] = false
                    vm.loader = null;
                });
            }
        },
        created() {
            let vm = this;
        }
    }
</script>