<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>