<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 lg6>
          <v-toolbar color="black" dark>
          <v-spacer></v-spacer>
          
          <v-toolbar-title>Forget Password</v-toolbar-title>
          <v-spacer></v-spacer>
          
        </v-toolbar>
            <v-card class="elevation-1 pa-1">
              <v-card-text>
               
                <h5 class="text-md-center"> Not to Worry! Enter to your registered Email ID. </h5>
                <h5 class="text-md-center"> We'll send you a reset.</h5>
                <v-flex xs12 sm8 md6 lg6 offset-xs3>                           
                <v-form class="mt-4">
                <div class="custom-input-align">
                <v-text-field 
                  class="text-md-center"
                  v-validate="'required|email'" 
                  v-model="userForgotPasswordcredentials.email" 
                  :error-messages="errors.collect('email')" 
                  label="Enter Your email ID" 
                  data-vv-name="email" 
                  required>
                </v-text-field>
                </div>
                  
              </v-form></v-flex>
              </v-card-text>
              <v-card-actions>
              

                
                <v-flex text-sm-center>
                  
                <v-btn round class="mt-1" color="black" dark large @click="reset">Send Request</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: () => ({
    userForgotPasswordcredentials: {},
    text: 'Link send to your Email address',
    snackbar: false,
    timeout: 1000,
    loading: false,
    email: ''
  }),

  methods: {
    reset () {
      var userdata = {
        "email":this.userForgotPasswordcredentials.email,
      }
      axios.post('http://18.208.28.55:3000/v1/adminForgotPassword',userdata)
        .then(response => {
            window.localStorage.setItem("value1", true);
          console.log("response=====>",response.data.data);
       }).catch(err => {
           console.log("err====>",err);
       })
    //  console.log('=clicked==', this.userForgotPasswordcredentials);
    //   this.loading = true;
    //   this.snackbar = true;
    //   setTimeout(() => {
    //     this.$router.push('/');
    //   }, 1000);
    }
  }

};
</script>
<style scoped lang="css">
  #login {
    height: 50%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    z-index: 0;
  }
img{
position:absolute;
top:13px;
left:50px;
}
.v-btn--large {
    padding: 0px 74px;
}
</style>