<template>
<div class="registration">
<router-link :to="{name : 'home'}">
home
</router-link>|
<router-link :to="{name : 'login'}">
loginForm
</router-link>
<router-view />
<!-- @submit.prevent="send()" -->
<form class="form" @submit.prevent="send()">
<div class="form-row">
<div class="col">
<label>Username</label>
<input type="text"
class="form-control"
name="username"
id="username"
v-model="$v.username.$model"
@keyup="$v.username.$touch()"
>
<div v-if="!$v.username.error" class="invalid-feedback" role="alert">
<span v-if="!$v.username.unique" style="color:#fff" >Already Exists</span>
<span v-if="!$v.username.username" style="color:#fff" >OK : username available</span>
</div>
</div>
<div class="col">
<label>E-mail</label>
<input type="email" name="email" v-model.trim="$v.email.$model"
class="form-control" required>
<div class="error" v-if="!$v.email.isUnique" style="color:#fff">format e-mail not valid</div>
</div>
<div class="form-group" :class="{ 'form-group--error': $v.password.$error }">
<div class="col" >
<label for="">Password</label>
<input type="password"
id="password"
name="password"
:characters="'a-z,A-Z,0-9,#'"
v-model.trim="$v.password.$model"
class="form-control" required>
<!-- <div class="error" v-if="!$v.password.required" style="color:#fff">Password is required.</div> -->
<div class="error" v-if="!$v.password.minLength" style="color:#fff">Password must have at least {{ $v.password.$params.minLength.min }} letters.</div>
<div class="togglepass">
<button @click="generate()" id="generatebtn">generate </button>
<input type="checkbox" @click="togglePassword()">Show Password
</div>
</div>
<div class="col">
<label for="">Confirm Password</label>
<input type="password"
name="repeatPassword"
:characters="'a-z,A-Z,0-9,#'"
v-model.trim="$v.repeatPassword.$model"
class="form-control" required>
<!-- <div class="error" v-if="!$v.password.required" style="color:#fff">Password is required.</div> -->
<!-- <div class="error" v-if="!$v.repeatPassword.minLength" style="color:#fff">Password must have at least {{ $v.repeatPassword.$params.minLength.min }} letters.</div> -->
<div class="error" v-if="!$v.repeatPassword.sameAsPassword" style="color:#fff">Passwords must be identical.</div>
<tree-view :data="$v" :options="{rootObjectKey: '$v', maxDepth: 2}"></tree-view>
</div>
</div>
<!-- <--$v.$invalid-->
<button class="btn btn-primary"
:disabled="$v.$invalid" >Sign in</button>
<button class="btn btn-primary" @click="clearData()">Clear</button>
<span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>
</div>
</form>
</div>
</template>
<script>
import {mapGetters,mapActions} from 'vuex'
import { required,minLength,email,sameAs} from 'vuelidate/lib/validators'
import axios from 'axios'
export default {
data(){
return {
results : "",
username: "",
email:'',
password : '',
repeatPassword: '',
nodata : false,
message : '',
is_disable:false,
emailRegex : RegExp(
/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
),
allData : [],
action : '',
msgAlert: '',
catchValue : {username :''}
}},
validations: {
password: {
required,
minLength: minLength(8)
},
repeatPassword: {
sameAsPassword: sameAs('password')
},
email :{
required,
email,
isUnique(value){
if(value == '' ) return true;
return new Promise((resolve) =>{
setTimeout(() => {
resolve(this.emailRegex.test(value))
},350 + Math.random() * 300)
})
},
},
username:{
required,
minLength: minLength(3),
unique : value => {
if(value == '') return true;
return new Promise((resolve) =>{
if(value.length >= 3){
axios.post('
http://localhost:81/api2.ph',{
username : value
})
.then(response =>
{
console.log(response.data);
resolve(false)
}
).catch(
error =>{
console.log(error)
}
)
}
})
}
},
},
props :{
size: {
type: String,
default: '8'
},
characters: {
type: String,
default: 'a-z,A-Z,0-9,#'
},
},
computed :{
...mapGetters('registration',
['getUser',
'getMail',
'getPassword']
),
},
methods:{
togglePassword(){
var x = document.getElementById("password");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
},
generate () {
let charactersArray = this.characters.split(',');
let CharacterSet = '';
let pass = '';
if( charactersArray.indexOf('a-z') >= 0) {
CharacterSet += 'abcdefghijklmnopqrstuvwxyz';
}
if( charactersArray.indexOf('A-Z') >= 0) {
CharacterSet += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
}
if( charactersArray.indexOf('0-9') >= 0) {
CharacterSet += '0123456789';
}
if( charactersArray.indexOf('#') >= 0) {
CharacterSet += '![]{}()%&*$#^<>~@|';
}
for(let i=0; i < this.size; i++) {
pass += CharacterSet.charAt(Math.floor(Math.random() * CharacterSet.length));
}
this.password= pass;
},
...mapActions('registration',
['setProfile']
),
allValidate()
{
if(this.validatePassword()){
return true;
}
},
send ()
{
if(this.username != ""
&& this.email != ""
&& this.password != ""
&& !this.$v.$invalid)
{
axios.post('
http://localhost:81/api.ph', {
username : this.username,
email : this.email,
password : this.password
})
.then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
})
}else{
alert("fill all fields")
}
},
clearData()
{
this.username=""
this.email=""
this.password=""
this.repeatPassword= ""
}
},
}
</script>
<style scoped>
.form{
position: relative;
top:40px;
left:20%;
width:400px;
display:flex;
justify-content: center;
border: 1px solid ;
height: 500px;
border-radius: 6px;
background-color:#0D4263 ;
}
.form .form-row{
position: relative;
top:20px;
justify-content: center;
display: table;
height: 100%;
}
.form-row button{
margin-top:10px;
width:80px;
height:60px;
}
.form-row input{
border-radius: 7px;
}
.form-row label {
color : #fff;
}
.list-group{
position: relative;
top:40px;
left:66%;
width:400px;
height:200px;
}
.togglepass{
position: relative;
top:1px;
color:#fff;
}
#generatebtn{
height:26px;
background:#0D4263;
color:#fff;
margin-right:10px;
display: inline-block;
outline: none;
border: 1px solid #fff;
margin-bottom: 15px;
}
table{
position: fixed;
top:16%;
left:62%;
width:400px;
height:500px;
border-radius: 6px;
background-color:#0D4263 ;
display: block;
overflow: scroll;
}
table th,td{
border: 1px solid #fff;
color:#fff;
}
.success
{
font-weight: bold;
color:#009933;
background-color: #ccffcc;
border:1px solid #009933;
}
.danger
{
font-weight: bold;
color:#ff0000;
background-color: #ffe6e6;
border:1px solid #ff0000;
}
</style>