<template>
    <div class="disp-center popup-vue-fit-md" style="overflow: auto; width: 420px"><!--NEED CLASSES FOR MODAL -->
        <!--NEED H4 FOR CLOSE BUTTON -->
        <h4 class="btnx"
            style="font-family: arial !important;"
            @click="_closePopup(this)">
            X
        </h4>
        <div>
            <h2 id="title" class="text-center">Profile</h2>
            <hr style="margin: 10px 0"> 
            <div class="disp-style-col">
                <div class="disp-style-col div-conf" style="margin-bottom: 20px">
                    <label>Current Password
                        <input v-model="txt_pass_org" id="txt_pass_org" @keyup="enable_btnconf()" type="password" class="form-control" placeholder="Current Password"> 
                    </label>
                    <label>New Password
                        <input v-model="txt_pass_new" id="txt_pass_new" @keyup="enable_btnconf()" type="password" class="form-control" placeholder="New Password"> 
                    </label>
                    <label>Confirm Password
                        <input v-model="txt_pass_conf" id="txt_pass_conf" @keyup="enable_btnconf()" type="password" class="form-control" placeholder="Confirm Password">
                    </label>
                </div>
                <button :disabled="this.disable_btn_conf" @click="verify_match()" class="git-btn-modal git-btn-success">Confirm</button>
            </div>
        </div>
    </div>
</template>
<script>
    export default{
        data() {
            return {
                //DATA HERE
                disable_btn_conf: true,
                txt_pass_org: "",
                txt_pass_new: "",
                txt_pass_conf: "",
            }
        },
        mounted() {
        },
        methods: {
            enable_btnconf() {
                this.disable_btn_conf = this.txt_pass_new !== this.txt_pass_conf || this.txt_pass_new.length < 6 || this.txt_pass_conf.length < 6;
            },
            verify_match() {
                this.$loading(true);
                this._vueGETfromParam(
                    'user_credentials',
                    'authenticate',
                    {
                        user: this.$cookies.get('email'),
                        pass: $('#txt_pass_org').val()
                    },
                response => {
                    try {
                        response = JSON.parse(response);
                    } catch { }

                    if (response.result === 'success') {
                        if (this.txt_pass_new !== '' && this.txt_pass_new.length > 5) {
                            this._vuePATCH('user_credentials', this.$cookies.get('uid'), { password: this.txt_pass_new }, response => {
                                if (response === 'success') {
                                    this.$fire({
                                        title: "Success!",
                                        text: "Password changed successfully!",
                                        type: "success",
                                        timer: 3000
                                    });
                                    this._closePopup('modal_main_profile');
                                }
                                else
                                    this.$alert("Error! " + JSON.stringify(response));
                                    
                                this.$loading(false);
                            });
                        }
                        else {
                            this.showErrorMsg({
                                title: 'Error!',
                                message: "Error! New password must be at least 6 characters long!"
                            });
                            this.$loading(false);
                        }
                    }
                    else if (response.result === 'error') {
                        this.showErrorMsg({
                            title: 'Error!',
                            message: 'Current password is invalid!'
                        });
                        this.$loading(false);
                    }
                    else {
                        this.showErrorMsg({
                            title: 'Error!',
                            message: JSON.stringify(response)
                        });
                        this.$loading(false);
                    }
                });
            }
        }
    }
</script>
<style lang="css" scoped>
    .div-conf label {
        margin-bottom: 0px;
    }
    .form-group {
        margin-bottom: 4px;
    }
</style>    