<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 lg5>
          <v-toolbar color="black" dark>
          <v-spacer></v-spacer>
          <v-toolbar-title>Admin Login</v-toolbar-title>
          <v-spacer></v-spacer>
        </v-toolbar>
         
            <v-card class="elevation-1 pa-1">
               <v-card-text>
               <v-flex xs12 sm8 md8 lg8 offset-xs2>   
                 <v-form ref="form" v-model="valid" lazy-validation>                           
                 <v-text-field
                 v-model="username"
                 :rules="nameRules"
                 label="Username"
                 required
                 ></v-text-field>
              <v-text-field
                :rules="[rules.required, rules.min]"
                v-model="password"
                :append-icon="e1 ? 'visibility_off' : 'visibility'"
                :append-icon-cb="() => (e1 = !e1)"
                :type="e1 ? 'password' : 'text'"
                name="input-10-1"
                label="Password"
                counter
                
              ></v-text-field>
    
              </v-form></v-flex>
            </v-card-text>
            <v-flex xs12 sm8 md8 lg8 offset-xs2>   
             <v-checkbox :label="`Remember me`" 
                v-model="remember"></v-checkbox>
                <h5 id="fp"> <router-link to="/forgetpassword">Forget Password</router-link></h5>
            </v-flex>
            
             <v-flex class="mt-3 text-md-center">
                <v-btn round color="black" dark large @click="login" :loading="loading">Login</v-btn>
                </v-flex>
            </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,
      loading: false,
      remember: false,
      valid: false,
      username: '',
      nameRules: [
        v => !!v || 'Username is required',
      //  v => v.length >0 
      ],
      // email: '',
      // erules: {
      //   required: value => !!value || 'This email field is Required.', 
      //   em: v => (v.length > 0 && /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'Email must be valid') 
      // },
      password: '',
      rules: {
        required: value => !!value || 'password 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'
        
      } 
    };
  },
  methods: {
    login () {
      console.log('=clicked==');
      this.loading = true;
      setTimeout(() => {
        this.$router.push('/dashboard');
      }, 1000);
    }
    // created () {
    //   axios.get(`http://jsonplaceholder.typicode.com/posts`)
    //     .then(response => {
          
    //       this.posts = response.data;
    //     })
    //     .catch(e => {
    //       this.errors.push(e);
    //     });
    // }
  }
};
</script>

<style scoped lang="css">
  #login{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    z-index: 0;
  }
</style>
<style scoped>
img{
position:absolute;
top:13px;
left:50px;
}
.v-btn--large {
    padding: 0px 84px;
}
#fp{
  position: absolute;
  top: 193px;
  right: 128px;
  color: black;
}
a{
color: #696969;
}


</style>