Create a page Home.vue in the location: resources\js\components\page
<template>
<div class="widthHeight">
<ProgressBarBlock>
<notifications group="message1" position="top center"/>
<notifications group="message2" position="bottom right" />
<PosLoginBlock>
</div>
</template>
<script>
import PosLoginBlock from "../block/PosLoginBlock.vue"
import ProgressBarBlock from "../block/ProgressBarBlock.vue"
import Vue from "vue"
export default {
data:()=>({
}),
components:{
PosLoginBlock,
ProgressBarBlock
},
created(){
},
methods:{
}
};
</script>
<style scopped>
.widthHeight{
width:100%;
height:100%;
}
</style>
Create a page PosLoginBlock.vue in the location: resources\js\components\block
<template>
<div class="bg loginbg" v-bind:style="loginbg">
<notifications group="message1" position="top center"/>
<notifications group="message2" position="bottom right" />
<div class="login-form">
<h1>Sign In</h1>
<form @submit="login">
<ul class="loginfield">
<p class="msg" v-if="logCheckMsg[0]=='pl'">Please Login First
<p class="msg" v-if="msg['etitle']">{{msg['etitle']}}
<li>
<TextInputKeyboardBlock
:inputs="inputs"
:inputName="'email'"
@onInputFocus="onInputFocus"
@onInputChange="onInputChange"
/>
<span class="errorMsg" v-if="err['email']">{{err['email']}}
</li>
<li>
<span class="errorMsg" v-if="err['pass']">{{err['pass']}}
</li>
<li>
<div class="forgot">
<input type="submit" value="Submit" />
</div>
</li>
</ul>
</form>
</div>
<div class="table-responsive">
</div>
</div>
</template>
<script>
import SimpleKeyboard from "./SimpleKeyboard.vue";
import TextInputKeyboardBlock from "./TextInputKeyboardBlock.vue";
import PassInputKeyboardBlock from "./PassInputKeyboardBlock.vue";
import axios from 'axios';
import manualConfig from "../config/configManual";
import Vue from "vue";
export default {
data: () => ({
imagePath:process.env.MIX_API_URL,
logImg:'',
inputs: {
email:'',
pass:''
},
inputName: "email",
msg:[],
err:[],
status:false,
logCheckMsg:'',
}),
components:{
SimpleKeyboard,
TextInputKeyboardBlock,
PassInputKeyboardBlock
},
created(){
//this.checkIsLog();
this.logCheckMsg = (this.$route.query.msg)? this.$route.query.msg:'';
},
mounted() {
},
methods:{
checkIsLog(){
if(typeof(this.$store.getters.getNotifications.type) !=='undefined' && this.$store.getters.getNotifications.type !== null){
this.$notify({
group: this.$store.getters.getNotifications.group,
type: this.$store.getters.getNotifications.type,
title: 'Message',
text: this.$store.getters.getNotifications.message,
duration: 3000,
speed: 300
});
this.$store.commit('remove_notification');
}
},
login(e){
e.preventDefault();
const email = document.querySelector('#email').value;
const pass = document.getElementById("pass").value;
const checkEmail = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
if (! email.match(checkEmail)) {
this.$set(this.err,"email","Please enter a valid email");
this.status = false;
}else{
this.status = true;
}
if (pass.length<6) {
this.$set(this.err,"pass","Password minimum 6 length");
this.status = false;
}
if(pass==''){
this.$set(this.err,"pass","Please enter password");
this.status = false;
}else{
this.status = true;
}
console.warn(this.err);
if(email && pass && this.status==true){
this.$Progress.start();
/*this.$store.dispatch('userLoginCheck',{
email:email,
password:pass
}).then((response)=>{
this.$Progress.finish();
if(this.$store.getters.getNotifications.type){
this.$notify({
group: this.$store.getters.getNotifications.group,
type: this.$store.getters.getNotifications.type,
title: 'Message',
text: this.$store.getters.getNotifications.message,
duration: 3000,
speed: 300
});
}
this.$store.commit('remove_notification');
if(this.$store.getters.authLoginUser.status !='fail'){
alert(this.$store.getters.authLoginUser.full_name);
//this.$router.push('ad_dashboard');
}else{
//this.$router.push('/');
//this.$set(this.msg,"etitle","Login fail");
//console.warn(this.msg);
}
})
.catch(error => {
console.log(error)
alert("login error");
})*/
axios.post(manualConfig.sitePath+"/api/logincheck",
{
email:email,
password:pass,
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
})
.then((response)=>{
this.$Progress.finish();
if(response.data.status !='fail'){
localStorage.setItem('userData', JSON.stringify(response.data));
this.getMenu(JSON.parse(localStorage.getItem('userData')).role_id);
//this.$router.push('ad_dashboard');
}else if(response.data.status =='mismatch'){
this.$router.push('/');
this.$set(this.msg,"etitle","Password invalid");
}else{
this.$router.push('/');
this.$set(this.msg,"etitle","Login fail");
}
})
.catch(error => {
console.log(error)
})
}
},
onChange(input) {
this.inputs[this.inputName] = input;
},
onKeyPress(button) {
console.log("button", button);
},
onInputChange(input) {
console.log("Input changed directly:", input.target.id);
this.inputs[input.target.id] = input.target.value;
},
onInputFocus(input) {
console.log("Focused input:", input.target.id);
this.inputName = input.target.id;
},
getMenu(roleId){
axios.post(manualConfig.sitePath+"/api/user_menu",
{
role_id:roleId,
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
})
.then((response)=>{
if(JSON.stringify(response.data)){
localStorage.setItem('menuData',JSON.stringify(response.data));
this.$router.push('ad_dashboard');
}
})
.catch(error => {
console.log(error)
alert("menu loading error");
})
}
},
computed: {
loginbg() {
return {
/*'background-image': 'url('+this.imagePath+'/public/images/pos.jpg)',*/
'background-image': 'url('+manualConfig.sitePath+'/public/images/pos.jpg)',
}
}
}
};
</script>
<style scoped>
@media (min-width: 577px) and (max-width: 2000px){
.loginbg{
background-position: 100% 1%;
background-repeat: no-repeat !important;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:relative;
font-family: 'Open Sans', sans-serif;
border:1px solid #000000;
float:left;
width:100%;
height:100%;
}
.loginbg .login-form {
background-color:#4B4352;
opacity:.8;
background-size: 100%;
width:18%;
margin: 2% 41% 0% 41%;
border-radius:10px 10px;
float:left;
}
.loginbg .login-form h1{
text-align:center;
color: #fff !important;
font-size:22px;
font-weight:500;
font-family: 'Open Sans', sans-serif;
margin: 11% auto 0% 39%;
float: left;
}
.loginbg .login-form h2 a{
text-align:right;
color: #fff !important;
font-size:1.15em;
font-weight:500;
font-family: 'Open Sans', sans-serif;
position:absolute;
top:9.5%;
right:11%;
margin:34px 0;
}
.loginbg input[type="text"], input[type="password"] {
font-family: 'Open Sans', sans-serif;
width: 100%;
padding: 5px 15px;
color: #000000;
font-size: 12px;
outline: none;
background: none;
border: none;
height:35px !important;
background: #ffffff;
}
.loginbg input[type="submit"]{
float:left;
font-size:12px;
display: inline-block;
font-weight:600;
color: #ffffff;
transition: 0.1s all;
-webkit-transition: 0.1s all;
-moz-transition: 0.1s all;
-o-transition: 0.1s all;
cursor: pointer;
outline: none;
padding:10px 7px;
margin-top:14px;
font-family: 'Open Sans', sans-serif;
background: #292A58;
width:100%;
border:1px solid #0A5F99;
border-radius:10px 10px;
height:40px !important;
}
.loginbg input[type="submit"]:hover{
background: #06284B;
border:1px solid #0A5F99;
}
.loginbg .forgot{
width:30%;
margin:8% 35%;
}
.loginbg .forgot h3 a{
color:#fff;
font-size:15px;
font-family: 'Open Sans', sans-serif;
float:right;
font-weight:600;
margin-top:19px;
}
.loginbg .forgot h3 a:hover{
color:#FFC600;
}
.loginbg ul.loginfield{
width:90%;
margin: 8% 5% 11% 5%;
padding:0px 0px;
float:left;
}
.loginbg ul.loginfield li{
list-style:none;
margin-bottom:16px;
width:100%;
}
.loginbg .keyboard{
width:56%;
margin:20px 22%;
float:left;
}
.errorMsg{
color:red;
font-size:14px;
text-align:center;
}
.msg{
color:red;
font-size:14px;
text-align:center;
}
}
@media (min-width: 200px) and (max-width: 576px){
.loginbg{
background-position: 100% 50%;
background-repeat: no-repeat !important;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:relative;
font-family: 'Open Sans', sans-serif;
border:1px solid #000000;
float:left;
width:100%;
height:100%;
}
.loginbg .login-form {
background-color:#4B4352;
opacity:.8;
background-size: 100%;
width:90%;
margin: 10% 5% 0% 5%;
border-radius:10px 10px;
float:left;
}
.loginbg .login-form h1{
text-align:center;
color: #fff !important;
font-size:22px;
font-weight:500;
font-family: 'Open Sans', sans-serif;
margin: 11% auto 0% 39%;
float: left;
}
.loginbg .login-form h2 a{
text-align:right;
color: #fff !important;
font-size:1.15em;
font-weight:500;
font-family: 'Open Sans', sans-serif;
position:absolute;
top:9.5%;
right:11%;
margin:34px 0;
}
.loginbg input[type="text"], input[type="password"] {
font-family: 'Open Sans', sans-serif;
width: 100%;
padding: 16px 15px;
color: #000000;
font-size: 12px;
outline: none;
background: none;
border: none;
height:20px !important;
background: #ffffff;
}
.loginbg input[type="submit"]{
float:left;
font-size:12px;
display: inline-block;
font-weight:600;
color: #ffffff;
transition: 0.1s all;
-webkit-transition: 0.1s all;
-moz-transition: 0.1s all;
-o-transition: 0.1s all;
cursor: pointer;
outline: none;
padding:10px 7px;
margin-top:14px;
font-family: 'Open Sans', sans-serif;
background: #292A58;
width:100%;
border:1px solid #0A5F99;
border-radius:10px 10px;
height:40px !important;
}
.loginbg input[type="submit"]:hover{
background: #06284B;
border:1px solid #0A5F99;
}
.loginbg .forgot{
margin: 8% 35%;
width: 30%;
}
.loginbg .forgot h3 a{
color:#fff;
font-size:15px;
font-family: 'Open Sans', sans-serif;
float:right;
font-weight:600;
margin-top:19px;
}
.loginbg .forgot h3 a:hover{
color:#FFC600;
}
.loginbg ul.loginfield{
width:90%;
margin: 8% 5% 11% 5%;
padding:0px 0px;
float:left;
}
.loginbg ul.loginfield li{
list-style:none;
margin-bottom:16px;
width:100%;
}
.loginbg .keyboard{
width:98%;
margin:20px 1%;
float:left;
}
.errorMsg{
color:red;
font-size:11px;
text-align:center;
}
.msg{
color:red;
font-size:11px;
text-align:center;
}
}
</style>
Copy code from vuesimplekeyboard and configManual tutorial
