Guest User

Login Vue component

a guest
Apr 25th, 2018
16
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 3.34 KB | None | 0 0
  1. <template>
  2. <div class="container">
  3.     <div class="row justify-content-center">
  4.         <div class="col-md-6">
  5.             <div class="card">
  6.                 <div class="card-header">Login</div>
  7.                 <div class="card-body">
  8.                     <form @submit.prevent="login">
  9.                         <p v-if="errors.length">
  10.                             <b>Please correct the following error(s):</b>
  11.                             <ul>
  12.                                 <li v-for="error in errors">{{ error }}</li>
  13.                             </ul>
  14.                         </p>
  15.                         <div class="form-group">
  16.                             <label for="username">Email ID</label>
  17.                             <input type="email" class="form-control" name="username" id="username" v-model="email" required>
  18.                         </div>
  19.                         <div class="form-group">
  20.                             <label for="password">Password</label>
  21.                             <input type="password" class="form-control" name="password" id="password" v-model="password" required>
  22.                         </div>
  23.  
  24.                         <div class="form-group">
  25.                             <router-link to="/auth/reset" class="btn btn-link">
  26.                                 <i class="fas fa-info-circle"></i> Forgot Your Password?
  27.                             </router-link>
  28.                         </div>
  29.                         <button type="submit" class="btn btn-primary">Login</button>
  30.                     </form>
  31.                 </div>
  32.             </div>
  33.         </div>
  34.     </div>
  35. </div>
  36. </template>
  37.  
  38. <script>
  39.     export default {
  40.         data () {
  41.             return {
  42.                 errors: [],
  43.                 email: '',
  44.                 password: '',
  45.             }
  46.         },
  47.         methods: {
  48.             login: function () {
  49.                 this.errors = [];
  50.                 if (this.emailValidate(this.email) && this.passValidate(this.password)) {
  51.                    this.errors = [];
  52.                     axios.post(api_url + '/auth/login', {
  53.                         'username': this.email,
  54.                         'password': this.password,
  55.                     })
  56.                     .then((res) => {
  57.                         console.log(res.status);
  58.                         if (res.status) {
  59.                             alert('test status');
  60.                         }
  61.                     })
  62.                     .catch((err) => console.error(err));
  63.                 }
  64.             },
  65.             emailValidate: function (email) {
  66.                 var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  67.                 var emailCheck = re.test(String(email).toLowerCase());
  68.                 console.log(emailCheck);
  69.                 if (!emailCheck || emailCheck === '') {
  70.                     this.errors.push("Invalid Email.");
  71.                     return false;
  72.                 }
  73.                 return true;
  74.             },
  75.             passValidate: function (password) {
  76.                 if (password.length < 6) {
  77.                    this.errors.push("Invalid Password.");
  78.                    return false;
  79.                }
  80.                return true;
  81.            }
  82.        }
  83.    }
  84. </script>
Add Comment
Please, Sign In to add comment