<template>
    <v-app id="login">

      <app-toolbar class="app--toolbar"></app-toolbar>
      <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>Technology Succes</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-text-field
                      :rules="[rules.required]"
                      v-model="adminChangePasswordcredentials.oldPassword"
                      label="Old Password"
                    ></v-text-field>
                    <v-text-field
                      v-model="adminChangePasswordcredentials.newPassword"
                      :rules="[rules.required]"
                      label="New 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";
  import AppToolbar from "@/components/pageHeader/AppToolbar";

  export default {

    components: {

      AppToolbar

    },

    data() {

      return {

        snackbar: false,

        y: "top",
        x: "right",
        mode: "",

        timeout: 4000,

        text: "",

        adminChangePasswordcredentials: {},

        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;

        var userdata = {

          oldPassword: this.adminChangePasswordcredentials.oldPassword,
          newPassword: this.adminChangePasswordcredentials.newPassword
        };
        http()
          .put("/schoolChangePassword", userdata, {
            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>