<template>
  <v-card>
    <v-toolbar color="primary" class="white--text" flat>
      <v-toolbar-title text-center>Reset Password</v-toolbar-title>
    </v-toolbar>
    <v-card-text>
      <v-alert type="error" v-if="!!resetPasswordError">{{resetPasswordError}}</v-alert>
      <v-alert type="success" v-if="!!resetPasswordMessage">{{resetPasswordMessage}}</v-alert>
      <v-form ref="resetPassword"  v-on:submit.prevent="resetPassword" >
        <v-text-field
          type="password"
          class="textfield-border"
          label="New Password"
          ref="newPassword"
          v-model="newPassword"
          @click="clear()"
          :rules="commonValidationRules.passwordRule"
          required
          prepend-icon="mdi-lock"
        >
        </v-text-field>

        <v-text-field
          type="password"
          class="textfield-border"
          label="Confirm Password"
          ref="confirmPassword"
          v-model="confirmPassword"
          :rules="[passwordConfirmationRule]"
          prepend-icon="mdi-lock"
          required
        >
        </v-text-field>

        <div class="mt-5 text-center">
           <v-hover v-slot:default="{ hover }">
            <v-btn
              large
              block
              :outlined="hover ? false:true"
              :color="hover ? 'primary' : 'primary'"
              class="mt-6 body"
              tile
              @click="resetPassword"
              :disabled="inProgress"
            ><v-progress-circular :size="20" color="primary" indeterminate v-if="inProgress"></v-progress-circular>Reset Password</v-btn>
          </v-hover>
        </div>
      </v-form>
       <v-row>
        <v-col cols="12">
          Already have an account sign in here
          <v-hover v-slot:default="{ hover }">
           <router-link class="text-decoration-none" :to="{name:'LoginPage'}" :class="hover ? 'content-link-hover-color' : 'primary--text'">Sign In</router-link>
          </v-hover>
        </v-col>
      </v-row>
    </v-card-text>
  </v-card>
</template>
<script>
import { createHelpers } from "vuex-map-fields";
import { commonValidationRules } from "@/services/util.service";
const { mapFields } = createHelpers({
  getterType: "registration/getField",
  mutationType: "registration/updateField"
});

export default {
  name: "ResetPasswordComponent",
  data: () => ({
    valid: true,
    confirmPassword: "",
    commonValidationRules: commonValidationRules,
  }),
  computed: {
    ...mapFields([
      "resetOne",
      "resetOne.newPassword",
      "resetPasswordError",
      "inProgress",
      "resetPasswordMessage"
    ]),
    passwordConfirmationRule() {
      return () =>
        this.newPassword === this.confirmPassword || "Password must match";
    },
  },
  methods: {
    resetPassword(e) {
      e.preventDefault();
      if (this.$refs.resetPassword.validate()) {

        this.$store
          .dispatch("registration/resetPassword")
          .then(data => {
            if (data) {
              this.$store.dispatch(
                "auth/prepare",
                "You updated your password."
              );
              this.$router.push({
                name: "SignInPage"
              });
            }
          });
      }
    },
    clear() {
      return (this.confirmPassword = "");
    }
  },
  created() {
    this.token = this.$route.params.token;   
    let userIdAndToken = {
      token : this.token,
      }
    this.$store.dispatch("registration/newResetPassword",{userIdAndToken});
  }
};
</script>
