A login/register component for the web apps.
Sign-Up / Sign-In Transition
Validation and Error
Using the component:
Installing
npm i vue-bootstrap-loginImport to Project
// main.js file
import loginMain from 'vue-bootstrap-login/src/components/loginMain'
Vue.component('myLoginComp', loginMain)or
<script>
import loginMain from 'vue-bootstrap-login/src/components/loginMain'
export default {
components: {
myLoginComp: loginMain
}
}
</script>and
<template>
<myLoginComp ...props>
</template>Props
<myLoginComp
v-model=""
btnColor=""
bgColor=""
isDark=""
loginTitle=""
registerTitle=""
titleSize=""
passLength=""
forgotPassLink=""
termsLink=""
isCorrect=""
loginMessage=""
registerMessage=""/>| Prop | Type | Description | Default |
|---|---|---|---|
| value/modelValue (v-model) | Object | email/password/submitType(login/register)/rememberMe | {} |
| bgColor | String | component background color | transparent |
| btnColor | String | buttons background color | linear-gradient(90deg,rgba(6, 154, 231, 1) 0%,rgba(35, 204, 236, 1) 100%) |
| loginTitle | String | - | WELCOME |
| registerTitle | String | - | JOIN US! |
| titleSize | String | css font size | 4rem |
| passLength | Number | minimum password size | 6 |
| forgotPassLink | String | forgot password link | # |
| termsLink | String | registration terms link | # |
| isCorrect | Boolean | sign up / sign in form validation result, when is false login/register button is disabled | true |
| isDark | Boolean | Title and button texts color switch (dark/light) | false |
| loginMessage | String | error message displayed on the login button when isCorrect=false | information is incorrect |
| registerMessage | String | error message displayed on the register button when isCorrect=false | information is incorrect |