<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>  -->
      <v-container fluid fill-height>
        <v-layout>
          <v-flex xs12 sm8 md6 lg7 offset-xs2>
          <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-xs2>  
            <v-form class="mt-3" >
            <v-text-field 
             :rules="[rules.required, rules.min]"
           
             v-model="adminChangePasswordcredentials.password"
             label="Current Password">
            </v-text-field>
            <v-text-field
            v-model="adminChangePasswordcredentials.NewPassword"
            :rules="[rules.required, rules.min]"
           
            label="New Password"
            ></v-text-field>
            <v-text-field
            v-model="adminChangePasswordcredentials.ConifrmPassword"
           :rules="[rules.required, rules.min]"
             label="Confirm Password"
             ></v-text-field>
            </v-form></v-flex>
              </v-card-text>
          <v-card-actions>
            
          <v-flex text-sm-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"
                 v-model="snackbar"
                 color="green"
                  >
                 {{ text }}
              <v-icon
               flat
               @click="snackbar = false"
               
             >
              close
               </v-icon>
               </v-snackbar>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    <!-- </v-content>
     <v-footer class="pa-4" color="grey darken-2">
  
  </v-footer> -->
  </v-app>
</template>
<script>
import axios from 'axios';
export default {
  data () {
    return {
      adminChangePasswordcredentials: {},
      e1: true,
      e2: true,
      e3: true,
      snackbar: false,
      timeout: 1000,
      loading: false,
      valid: false,
      text: 'Password Changed',
      password: '',
      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'
      },
      NewPassword: '',
      ConfirmPassword: '',
    };
  },
  methods: {
    reset () {
      console.log('=clicked==', this.adminChangePasswordcredentials);
      this.loading = true;
      this.snackbar = true;
      setTimeout(() => {
        
        this.$router.push('/dashboard');
        
      }, 2000);
      
    }
  }
};
</script>
<style scoped>
img{
position:absolute;
top:13px;
left:50px;
}
.v-btn--large {
    padding: 0px 74px;
}
</style>
