<template>
  <v-dialog
    v-model="dialog"
    persistent
    max-width="600"
    overlay-color="white"
    content-class="rounded-xl"
  >
    <template v-slot:activator="{ on, attrs }">
      <v-btn
        dark
        depressed
        x-small
        color="accent"
        class="body-2"
        min-width="150"
        @click.native.stop.prevent="dialog = true"
        v-bind="attrs"
        v-on="on"
      >
        Reset Password
      </v-btn>
    </template>

    <v-card>
      <v-card-title class="accent white--text pt-10 pb-4 text-h5 pl-9">
        Reset Password
      </v-card-title>
      <v-card-text>
        <v-container fluid>
          <v-form ref="form" v-model="form.valid" lazy-validation>
            <v-row no-gutters>
              <v-col cols="12">
                <div class="text-h5 text--primary mb-3">New Password</div>
                <v-text-field
                  label="Type password"
                  v-model="form.password"
                  :append-icon="form.show ? 'mdi-eye' : 'mdi-eye-off'"
                  :type="form.show ? 'text' : 'password'"
                  solo flat outlined
                  @click:append="form.show = !form.show"
                  :rules="[value => !!value || 'Password is required.']"
                ></v-text-field>
              </v-col>
              <v-col cols="12">
                <div class="text-h5 text--primary mb-3">Repeat New Password</div>
                <v-text-field
                  label="Repeat password"
                  v-model="form.password2"
                  :append-icon="form.show ? 'mdi-eye' : 'mdi-eye-off'"
                  :type="form.show ? 'text' : 'password'"
                  solo flat outlined
                  @click:append="form.show = !form.show"
                  :rules="[value => !!value || 'Password is required.',
                         value => value === form.password || 'Password does not match.']"
                ></v-text-field>
              </v-col>
            </v-row>
          </v-form>
        </v-container>
      </v-card-text>
      <v-card-actions class="pa-10">
        <v-btn
          text
          @click="onClose"
        >
          Cancel
        </v-btn>
        <v-spacer></v-spacer>
        <v-btn color="primary"
               min-width="150"
               depressed
               :loading="loading"
               @click="onSubmit"
        >
          Continue
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  name: "ResetPassword",
  data: () => ({
    dialog: false,
    form: {
      valid: true,
      show: false,
      password: '',
      password2: '',
    },
    loading: false,
  }),
  methods: {
    onSubmit() {
      this.error = false
      this.loading = true

      if (this.$refs.form.validate()) {
        this.$http.post(`/auth/${ this.$store.getters['site/getTeam'].id }/update-password`, {
          password: this.form.password
        }).then(() => {
          this.$snackbar.showMessage({
            content: `Password successfully changed.`
          })
          this.onClose()
        }).catch(() => {
          this.$snackbar.showMessage({
            content: 'Something went wrong, please try again!', color: 'warning'
          })
        }).finally(() => this.loading = false)
      } else {
        // set error alert visible
        this.dialogError = true
        this.error = true
        this.loading = false
      }
    },
    onClose() {
      this.dialog = false
      this.$refs.form.reset()
    },
  }
}
</script>

<style scoped>

</style>