<template>
    <section>
        <div class="container mt-5">
            <div class="row align-items-center justify-content-center">
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body">
                            <h5>Log in Form</h5>
                           <b-form class="my-4">
                                <b-form-group class="mb-4">
                                    <b-form-input  v-model="form.email" type="email" placeholder="Username or Email" required></b-form-input>
                                </b-form-group>

                                <b-form-group class="mb-4">
                                    <b-form-input v-model="form.password" type="password" placeholder="Password" required></b-form-input>
                                </b-form-group>

                                <!-- <b-form-group class="mb-4">
                                    <b-link href="#" to="">Forgot your Password?</b-link>
                                </b-form-group> -->

                                <div class="text-center">
                                    <b-button @click="onSubmit" class="text-white px-4" variant="primary">Log in</b-button>
                                </div>
                            </b-form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>
<script>
import ApiService from '@/services/api.service';
export default {
    data() {
        return {
            form: {
                email: null,
                password: null
            },
        }
    },
    mounted(){
        window.localStorage.removeItem('user');
    },
    methods: {
        onSubmit(){
            setTimeout(() => {
        // send login request
        ApiService.post('login', this.form)
          // go to which page after successfully login
          .then(({data}) => {
            if (data.user != null) {
              window.localStorage.setItem('user',JSON.stringify(data.user));
              this.$router.push({ name: "dashboard" });
            } else {
                window.localStorage.removeItem('user');
                window.location.reload();
            }
          })
          .catch(() => {
            window.localStorage.removeItem('user');
            window.location.reload();
          });
      }, 2000);
        }
    },
}
</script>
<style>
    body {
        background: rgb(247 247 247);
    }
</style>