Vue Login

By ukmodak | May 18th 2022 09:26:00 AM | viewed 360 times

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

bONEandALL
Visitor

Total : 18979

Today :8

Today Visit Country :

  • Germany
  • Singapore
  • United States
  • Russia