diff options
author | Mateja <mail@matejamaric.com> | 2021-07-24 18:58:17 +0200 |
---|---|---|
committer | Mateja <mail@matejamaric.com> | 2021-07-24 18:58:17 +0200 |
commit | d30fd3054c66d707a8210872b7db6cf4a1a98793 (patch) | |
tree | 6667713fc67fcaaa4e4dae291d95828fc5e802ad /client/src/views/Login.vue | |
parent | 080ca69a42ae8c510560bd176484adafd2c29a0c (diff) | |
download | mevn-ecommerce-d30fd3054c66d707a8210872b7db6cf4a1a98793.tar.gz mevn-ecommerce-d30fd3054c66d707a8210872b7db6cf4a1a98793.zip |
Added boilerplate pages and `ProductCard` component.
Diffstat (limited to 'client/src/views/Login.vue')
-rw-r--r-- | client/src/views/Login.vue | 77 |
1 files changed, 77 insertions, 0 deletions
diff --git a/client/src/views/Login.vue b/client/src/views/Login.vue new file mode 100644 index 0000000..8789a5e --- /dev/null +++ b/client/src/views/Login.vue @@ -0,0 +1,77 @@ +<template> + <div class="mt-5"> + <div class="row d-flex justify-content-center"> + <div class="col-md-7"> + <div class="card px-5 py-4"> + + <div class="text-center mb-4"> + <h4>Login</h4> + </div> + + <div class="forms-inputs mb-4"> + <span>Email</span> + <input type="text" v-model="email" + :class="{'form-control': true, 'is-invalid' : !validEmail(email) && emailBlured}" + @blur="emailBlured = true"> + <div class="invalid-feedback">A valid email is required!</div> + </div> + + <div class="forms-inputs mb-4"> + <span>Password</span> + <input type="password" v-model="password" + :class="{'form-control': true, 'is-invalid' : !validPassword(password) && passwordBlured}" + @blur="passwordBlured = true"> + <div class="invalid-feedback">Password is required!</div> + </div> + + <div class="forms-inputs mb-4"> + <button @click.stop.prevent="login" class="btn btn-dark w-100">Login</button> + </div> + + </div> + </div> + </div> + </div> +</template> + +<script> +import validator from 'validator'; + +export default { + name: 'Login', + data() { + return { + valid: false, + email: "", + emailBlured : false, + password: "", + passwordBlured:false + } + }, + methods: { + validEmail: (email) => validator.isEmail(email), + validPassword: (password) => password.length, + + validate() { + this.emailBlured = true; + this.passwordBlured = true; + if (this.validEmail(this.email) && this.validPassword(this.password)) { + this.valid = true; + } + }, + + login() { + this.validate(); + if (this.valid) { + alert('Successfully logged in!'); + } + } + } +} +</script> + +<style lang="scss"> + .forms-inputs input:focus { + border: 2px solid #000 + } +</style> |