<template>
  <v-app id="login">
    <v-container fluid fill-height>
      <v-layout>
        <v-flex xs12 sm8 md8 lg5 offset-sm2 offset-lg3 class="mt-5">
          <v-toolbar class="fixcolors mt-5" dark>
            <v-spacer></v-spacer>
            <v-toolbar-title>Reset Password</v-toolbar-title>
            <v-spacer></v-spacer>
          </v-toolbar>
          <v-card class="elevation-1 pa-3" id="form">
            <v-card-text>
              <v-flex xs12 sm8 md8 lg8 offset-sm2>
                <v-form class="mt-3" ref="form" v-model="valid" lazy-validation>
                  <v-select
                    :rules="userRule"
                    label="Select User"
                    :items="getRoles"
                    item-text="name"
                    item-value="name"
                    v-model="resetPassword.name"
                    @change="getUsers(resetPassword.name)"
                  ></v-select>
                  <v-select
                    :rules="userNameRule"
                    label="Select User Name"
                    :items="getUsersName"
                    item-text="email"
                    item-value="email"
                    v-model="resetPassword.email"
                  ></v-select>
                  <v-text-field
                    :rules="newPasswordRule"
                    v-model="resetPassword.newPassword"
                    :error-messages="errors.collect('resetPassword.newPassword')"
                    v-validate="'required'"
                    data-vv-name="resetPassword.newPassword"
                    label="New Password"
                  ></v-text-field>
                  <v-text-field
                    v-model="resetPassword.confirmPassword"
                    :rules="rePasswordRule"
                    :error-messages="errors.collect('password2')"
                    v-validate="{ required: false, is: resetPassword.newPassword }"
                    data-vv-name="password2"
                    data-vv-as="password"
                    label="Re-Password"
                  ></v-text-field>
                </v-form>
              </v-flex>
            </v-card-text>
            <v-card-actions>
              <v-flex text-xs-center>
                <v-btn
                  class="mt-3"
                  round
                  color="black"
                  dark
                  large
                  :loading="loading"
                  @click="reset"
                >Reset Password</v-btn>
              </v-flex>
            </v-card-actions>
            <v-snackbar
              :timeout="timeout"
              :top="y === 'top'"
              :right="x === 'right'"
              :vertical="mode === 'vertical'"
              v-model="snackbar"
              :color="color"
            >{{ text }}</v-snackbar>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</template>
<script>
import http from "@/Services/http.js";

export default {
  data() {
    return {
      snackbar: false,
      y: "top",
      x: "right",
      mode: "",
      timeout: 4000,
      text: "",
      color: "",
      password2: "",
      resetPassword: {},
      getUsersName: [],
      getRoles: [],
      valid: true,
      loading: false,
      text: "Password Changed",
      newPassword: "",
      userRule: [v => !!v || "User is required"],
      userNameRule: [v => !!v || "User Name is required"],
      newPasswordRule: [v => !!v || "New Password is required"],
      rePasswordRule: [v => !!v || "Re-Password is required"]
    };
  },
  mounted() {
    this.token = this.$store.state.token;
    this.getRole();
  },
  methods: {
    reset() {
      if (
        this.$refs.form.validate() &&
        this.resetPassword.confirmPassword === this.resetPassword.newPassword
      ) {
        this.loading = true;
        this.resetPassword.roleName = this.resetPassword.name;
        http()
          .put("/resetPasswordOfUsers", this.resetPassword, {
            headers: { Authorization: "Bearer " + this.token }
          })
          .then(response => {
            this.loading = false;
            this.snackbar = true;
            this.text = "Successfully Restet password !!";
            this.color = "green";
            this.clear();
          })
          .catch(error => {
            // console.log("err====>",err);
            this.snackbar = true;
            this.text = "User Not Found or Incorrect currentPassword";
            this.color = "error";
            this.loading = false;
          });
      }
    },
    getRole() {
      this.showLoader = true;
      http()
        .get("/getRolesList", {
          headers: { Authorization: "Bearer " + this.token }
        })
        .then(response => {
          for (let i = 0; i < response.data.data.length; i++) {
            if (
              response.data.data[i].name != "SUPERADMIN" &&
              response.data.data[i].name != "ADMIN"
            ) {
              this.getRoles.push(response.data.data[i]);
              this.showLoader = false;
            }
          }
        })
        .catch(error => {
          this.showLoader = false;
          if (error.response.status === 401) {
            this.$router.replace({ path: "/" });
            this.$store.dispatch("setToken", null);
            this.$store.dispatch("Id", null);
          }
        });
    },
    clear() {
      this.$refs.form.reset();
    },
    getUsers(roles) {
      this.showLoader = true;
      http()
        .get("/getUserWithRole", {
          params: {
            name: roles
          },
          headers: { Authorization: "Bearer " + this.token }
        })
        .then(response => {
          this.getUsersName = response.data.data;
        })
        .catch(error => {
          this.showLoader = false;
          if (error.response.status === 401) {
            this.$router.replace({ path: "/" });
            this.$store.dispatch("setToken", null);
            this.$store.dispatch("Id", null);
          }
        });
    }
  }
};
</script>
<style scoped>
img {
  position: absolute;
  top: 13px;
  left: 50px;
}
.v-btn--large {
  padding: 0px 74px;
}
@media screen and (max-width: 769px) {
  .v-btn--large {
    font-size: 14px;
    height: 44px;
    padding: 0 32px;
  }
}
</style>
