Vue-bootstrap-login NPM

A login/register component for the web apps.

Sign-Up / Sign-In Transition

Validation and Error

Using the component:

Installing

   npm i vue-bootstrap-login

Import to Project

// main.js file
import loginMain from 'vue-bootstrap-login/src/components/loginMain'
Vue.component('myLoginComp', loginMain)

<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