<template>
<div id="registration">
  <h3>Registration form</h3>

  <div class="field">
    <label class="label">Username:</label>
    <input v-model="userName" v-validate="'required'" type="text" placeholder="Username" name="userName"/>
    <span v-show="errors.has('userName')">{{errors.first('userName')}}</span>
  </div>

  <div class="field">
    <label class="label">Name:</label>
    <input v-model="name" v-validate="'required'" type="text" placeholder="Name" name="name"/>
    <span v-show="errors.has('name')">{{errors.first('name')}}</span>
  </div>

  <div class="field">
    <label class="label">Last Name:</label>
    <input v-model="lastName" v-validate="'required'" type="text" placeholder="Last name" name="lastName"/>
    <span v-show="errors.has('lastName')">{{errors.first('lastName')}}</span>
  </div>

  <div class="field">
    <label class="label">Password:</label>
    <input v-model="password" v-validate="'required'" type="text" placeholder="Password" name="password"/>
    <span v-show="errors.has('password')">{{errors.first('password')}}</span>
  </div>

  <div class="field">
    <label class="label">Confirm password:</label>
    <input v-model="passwordConfirm" v-validate="'required|passwordConfirm'" type="text" placeholder="Confirm password" name="passwordConfirm"/>
    <span v-show="errors.has('passwordConfirm')">{{errors.first('passwordConfirm')}}</span>
  </div>



  <div class="field">
    <label class="label">E-mail</label>
    <input v-model="email" v-validate="'required|email'" type="text" name="email" placeholder="Email"/>
    <span v-show="errors.has('email')">{{ errors.first('email') }}</span>
  </div>

  <div class="field">
    <label class="label">Age</label>
    <input  v-validate="'required|age'" type="text" name="age" placeholder="Age"/>
    <span v-show="errors.has('age')">{{ errors.first('age') }}</span>
  </div>
</div>
</template>

<script>
import { Validator } from 'vee-validate';

Validator.extend('age',{
  getMessage:(field)=>{
    return 'Majmunuu moras da imas vise od 10 godina!!!'
  },
  validate:(value)=> {
    return parseInt(value)>=10;
  }


});

Validator.extend('passwordConfirm',{
  getMessage:(field)=>{
    return 'Password se razlikuje !!!'
  },
  validate:(value)=> {
  console.log("Ovo je uneseno: "+value);
  console.log("Ovo je password: "+this.password);
    return this.password==value;
  }


});


export default{
  data(){
    return {
      userName:'',
      name:'',
      lastName:'',
      email:'',
      password:'',
      passwordConfirm:'',
      phone:'',
      adress:{
        city:'',
        street:'',
        number:''
      }
    }
  },

}
</script>

<style scoped>
h3{
color:#e99b63;
}
#registration{

border-radius:2px;
padding:10px;
width:30%;
margin:10px auto;


}
#registration span{
display:block;
color:red;
}
#registration input{
width:100%;
padding:10px;
box-sizing: border-box;
margin-top:10px;
margin-bottom:5px;
border-radius:5px;
border:none;
border:1px solid #e99b63;
}
label{

}
</style>