Vue.component('login', {
    template: `
<div>

    <div v-if="show_create_form">

        <form @onSubmit="submit">
            <div class="form-group">
                <label for="email">البريد الإلكتروني</label>
                <input type="email" v-model="email" id="email" required class="form-control" placeholder="البريد الإلكتروني">
            </div>
            <div class="form-group">
                <label for="password">كلمة السر</label>
                <input type="password" id="password" class="form-control" v-model="password" placeholder="كلمة السر">
                <a href="https://feehla.com/ar/login/forgot_password" style="color:#000;display:inline-block;"><small class="help-block form-text">نسيت كلمة السر؟</small></a>
            </div>

            <a @click="submit" class="btn btn-primary" v-if="!is_loading">تسجيل الدخول</a>
            <div class="loader" v-if="is_loading"></div>

            <div class="v-divider"></div>
            <div v-if="show_error">
            
                  <b-alert show variant="warning">
                  فشل تسجيل الدخول، الرجاء التأكد من صحة البريد الإلكتروني وكلمة السر.
</b-alert>

            </div>
        </form>

    </div>

    <div class="v-divider"></div>

    <div v-if="show_success_form">

        <div style="font-size:20px;">
            <br />
            <div style="text-align:center">
                <span style="color:green"><i class="fas fa-check"></i></span>
            </div>
            <br /> سيتم تحويلك للصفحة الرئيسية.
        </div>

    </div>

</div>

`,
    props: ['api_url', 'site_url'],
    data: function () {
        return {
            valid: true,
            name: '',
            password: '',
            password_show: true,
            requiredRules: [
                v => !!v || 'This field is required',
            ],
            passwordRules: [
                v => !!v || 'Password is required',
            ],
            email: '',
            emailRules: [
                v => !!v || 'E-mail is required',
                v => /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid'
            ],
            select: null,
            checkbox: false,
            show_error: false,
            error_msg: '',
            is_loading: false,
            show_create_form: true,
            show_success_form: false,
        }

    },
    watch: {},
    methods: {
        submit() {
                this.is_loading = true;

                // Native form submission is not yet supported

                var thisCompo = this;

                axios.post(this.api_url + '/users/auth', {
                    'email': thisCompo.email,
                    'password': thisCompo.password,
                }).then(function (response) {
                    var responseRes = response.data;
                    if (responseRes.success) {
                        setCookie("access_token", responseRes.data.access_token, 900);
                        unsetCookie("enaseej_scid");
                        unsetCookie("enaseej_wlid");
                        thisCompo.show_create_form = false;
                        thisCompo.show_success_form = true;


                        window.location = thisCompo.site_url;


                    } else {
                        thisCompo.show_error = true;

                    }

                    thisCompo.is_loading = false;
                })
                    .catch(function (error) {
                        console.log(error);
                    });

        },
        clear() {
            this.$refs.form.reset()
        }
    }
});