<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 align-center justify-center>
          <v-flex xs12 sm8 md6 lg4>
          <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">
              <v-card-text>
            <v-form class="mt-5">
            <v-text-field type="password" label="Password"></v-text-field>
            <v-text-field type="password" label="New Password"></v-text-field>
            <v-text-field type="password" label="Confirm Password"></v-text-field>
                </v-form>
              </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-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 {
      show1: false,
      loading: false,
      valid: false,
      model: {
        custom: {
          password: '',
          npassword: '',
          cnpassword: '',
        }
      }
    };
  },
  methods: {
    reset () {
      this.loading = true;
      setTimeout(() => {
        this.$router.push('/dashboard');
      }, 1000);
    }
  }
};
</script>
<style>
img{
position:absolute;
top:13px;
left:50px

}
</style>