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

      <!-- <v-toolbar color="grey lighten">

        <v-toolbar-items>
      <img src="/static/ana@2x.png" height="36" alt="ana">
      </v-toolbar-items>

    </v-toolbar> -->

      <!-- <v-content>  -->

      <app-toolbar class="app--toolbar"></app-toolbar> 

        <v-container fluid fill-height>

          <v-layout>

            <v-flex xs12 sm8 md8 lg5 offset-sm2 offset-lg3>

            <v-toolbar color="black" dark>
            <v-spacer></v-spacer>
            <v-toolbar-title>Change 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-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/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>