<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]"
               :append-icon="e1 ? 'visibility_off' : 'visibility'"
               :append-icon-cb="() => (e1 = !e1)"
               :type="e1 ? 'password' : 'text'"
               v-model="password"
               label="Current Password">
              </v-text-field>
              <v-text-field
              v-model="npassword"
              :rules="[rules.required, rules.min]"
              :append-icon="e2 ? 'visibility_off' : 'visibility'"
              :append-icon-cb="() => (e2 = !e2)"
              :type="e2 ? 'password' : 'text'" 
              label="New Password"
              ></v-text-field>
              <v-text-field
              v-model="cnpassword"
              :append-icon="e3 ? 'visibility_off' : 'visibility'"
              :append-icon-cb="() => (e3 = !e3)"
              :type="e3 ? 'password' : 'text'"
               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 {

        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'
        },
        npassword: '',
        cnpassword: '',

      };
    },
    methods: {
      reset () {
        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>