<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">
                  <v-select :rules="[rules.required]" label="Select Users" :tems="users"></v-select>
                  <v-select :rules="[rules.required]" label="Select Users Name" :tems="usersName"></v-select>
                  <v-text-field
                    :rules="[rules.required]"
                    v-model="user.oldPassword"
                    label="New Password"
                  ></v-text-field>
                  <v-text-field
                    v-model="user.newPassword"
                    :rules="[rules.required]"
                    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: "",
      user: {},
      users: [],
      usersName: [],
      e1: true,
      e2: true,
      e3: true,
      loading: false,
      valid: false,
      text: "Password Changed",
      currentPassword: "",
      newPassword: "",
      confirmPassword: "",
      rules: {
        required: value => !!value || "This password field is Required."
        // min: v => (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/).test(v) && v.length >= 8 || 'Min 8 characters upper case lower case symbol required'
      }
    };
  },
  methods: {
    reset() {
      var token = this.$store.state.token;
      http()
        .put("/schoolChangePassword", {
          headers: { Authorization: "Bearer " + token }
        })
        .then(response => {
          this.loading = true;
          if ((this.snackbar = true)) {
            this.text = "Successfully changed password !!";
            console.log("snackbar", response.data.message);
          }
          setTimeout(() => {
            this.$router.push("/dashboard");
          }, 2000);
        })
        .catch(err => {
          // console.log("err====>",err);
          this.text = "User Not Found or Incorrect currentPassword";
          this.snackbar = true;
          this.loading = false;
        });
    }
  },
  computed: {
    color() {
      return this.loading ? "success" : "error";
    }
  }
};
</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>
