<template>
      <v-dialog v-model="showdialog" persistent  max-width="400">
        <v-card>
            <v-card-title style="color:#fff" class="headline grey darken-1">Ganti Password</v-card-title>
            <v-card-text>
               <v-layout pa-2 class="grey lighten-2" row>
               <v-flex xs12>
                   <v-text-field :append-icon="show_saat_ini ? 'mdi-eye' : 'mdi-eye-off'"
                     :type="show_saat_ini ? 'text' : 'password'"
                     label="Password saat ini :"
                     v-model="current_password"
                     class="input-group--focused"
                     @click:append="show_saat_ini = !show_saat_ini"
                     ></v-text-field>

                   <v-text-field :append-icon="show_new ? 'mdi-eye' : 'mdi-eye-off'"
                     :type="show_new ? 'text' : 'password'"
                     label="Password baru :"
                     v-model="new_password"
                     class="input-group--focused"
                     @click:append="show_new= !show_new"
                     ></v-text-field>
                   <v-text-field :append-icon="show_re_new ? 'mdi-eye' : 'mdi-eye-off'"
                     :type="show_re_new ? 'text' : 'password'"
                     label="Konfirmasi Password baru :"
                     v-model="re_new_password"
                     class="input-group--focused"
                     @click:append="show_re_new= !show_re_new"
                     ></v-text-field>
                  <v-alert v-show="message != ''" :type="type">
                     {{message}}
                  </v-alert>
               </v-flex>
               </v-layout>

            </v-card-text>
            <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="grey darken-1" flat @click="showdialog = false">Tutup</v-btn>
            <v-btn dark color="grey darken-1"  @click="update_password()">Ganti Password</v-btn>
            
            </v-card-actions>
        </v-card>
      </v-dialog>
</template>
<style scoped>
</style>
<script>

module.exports = {
   data() {
      return {
         current_password : ''
         ,new_password : ''
         ,re_new_password : ''
         ,show_saat_ini : false
         ,show_new: false
         ,show_re_new: false
         ,type : 'error'
      }
   }
   ,methods : {
      async update_password() {
         if (this.current_password == this.new_password) {
            this.message = "Password lama dan Password baru masih sama."      
            return
         }
         if (this.re_new_password != this.new_password) {
            this.message = "Password dan Konfirmasi Password tidak sama."      
            return
         }
         let prm = { token: window.one_token(), old : this.current_password ,new : this.new_password } 
         await this.$store.dispatch("system/change_password",prm)
         if (this.message == "" ) {
            this.type = "success"
            this.message = "Password berhasil diubah, silahkan login lagi."
            let self = this
            setTimeout(function() {
               window.one_logout('/one-ui/test/vuex/one-login')
            },1000)
         }
      }
   }
   ,computed: {
      message : {
         get(){ return this.$store.state.system.change_password_error }
         ,set(v) { this.$store.commit("system/update_change_password_error",v) }
      }
      ,showdialog : {
         get(){ return this.$store.state.system.change_password_dialog }
         ,set(v) { this.$store.commit("system/update_change_password_dialog",v) }
      }
   }
}
</script>
