The login functionality is fully implemented in our theme helping you to start your project in no time. To login into dashboard you just have to add /login in the URL and fill the login form with one of the credentials (user: [email protected] [email protected] [email protected] secret ).
The src\views\Login.vue is the Vue component which handles the login functinality. You can easily adapt it to your needs.
It uses the auth store located in src\store\auth.module.js.
Login Examples Copy
1 < divclass = " card z-index-0 fadeIn3 fadeInBottom" > 2 < divclass = " card-header p-0 position-relative mt-n4 mx-3 z-index-2" > 3 < divclass = " bg-gradient-success shadow-success border-radius-lg py-3 pe-1" > 4 < h4class = " text-white font-weight-bolder text-center mt-2 mb-0" > 5 Sign in
6 </ h4> 7 < divclass = " row mt-3" > 8 < divclass = " col-2 text-center ms-auto" > 9 < aclass = " btn btn-link px-3" href = " javascript:;" > 10 < iclass = " fab fa-facebook text-white text-lg" > </ i> 11 </ a> 12 </ div> 13 < divclass = " col-2 text-center px-1" > 14 < aclass = " btn btn-link px-3" href = " javascript:;" > 15 < iclass = " fab fa-github text-white text-lg" > </ i> 16 </ a> 17 </ div> 18 < divclass = " col-2 text-center me-auto" > 19 < aclass = " btn btn-link px-3" href = " javascript:;" > 20 < iclass = " fab fa-google text-white text-lg" > </ i> 21 </ a> 22 </ div> 23 </ div> 24 </ div> 25 </ div> 26 < divclass = " card-body" > 27 < Form role= "form" class = "text-start mt-3" : validation- schema= "schema" @submit= "handleLogin"
28 @invalid- submit= "badSubmit" >
29 < divclass = " mb-3" > 30 < material-input-fieldid = " email" v-model: value= " user.email" type = " email" 31 label = " Email" name = " email" /> 32 </ div> 33 < divclass = " mb-3" > 34 < material-input-fieldid = " password" v-model: value= " user.password" type = " password" 35 label = " Password" name = " password" /> 36 </ div> 37 < material-switchid = " rememberMe" name = " Remember Me" > </ material-switch> 38 < divclass = " text-center" > 39 < material-buttonclass = " my-4 mb-2" variant = " gradient" color = " success" full-width > 40 < span> in </ span> 41 </ material-button> 42 </ div> 43 < pclass = " mt-4 text-sm text-center" > 44 Don't have an account?
45 < router-link:to = " { name: ' Signup' }" 46 class = " text-success text-gradient font-weight-bold" > 47 up</ router-link> 48 </ p> 49 < pclass = " text-sm text-center" > 50 < router-link:to = " { name: ' PasswordForgot' }" 51 class = " text-success text-gradient font-weight-bold" > 52 Password</ router-link> 53 </ p> 54 </ Form > 55 </ div> 56 </ div>