Ramen-login-module NPM

ramen-login-module

Vue.js Login Component for ordent/ramenauth backend service.

Installation

npm install ramen-login-module

Usage

Import directly on your template

import LoginComponent from 'ramen-login-module'
export default {
	// ...
	components: {
		LoginComponent
	}
	// ...
}

Use Nuxt.js plugin

// '/plugin/RamenLoginModule.js'
import Vue from 'vue'
import LoginComponent from 'ramen-login-module';
Vue.use(LoginComponent)

Example Usage

<!-- 'YourPage.vue' -->
<template>
	<LoginComponent
		secretKey="yourSecretKey"
		apiURL="yourURLEndpoint"
		@loginSuccess="actionSuccessLogin"
		@loginError="actionErrorLogin"
		/>
</template>

Options

Property Name	Type	Description	Default
apiURL	String	required; endpoint used for login.	none
secretKey	String	required; a string-based key to be used later for login.	none
icon	Boolean	show/hide ALL icon.	true
emailText	String	label for email input	Email
passwordText	String	label for password input	Password
buttonText	String	label for login button	Login
errorText	Object	label for error validation (errorEmailFormat, errorEmailRequired, errorPasswordRequired)	{ errorEmailFormat: 'Wrong email format', errorEmailRequired: 'Email is required', errorPasswordRequired: 'Password is required' }
emailClass	String	custom class that can be added to email input	none
passwordClass	String	custom class that can be added to password input	none
buttonClass	String	custom class that can be added to login button	none
wrapperClass	String	custom class that overwrites the current default wrapper class	login-wrapper
inputGroupClass	String	custom class that can be added to input field group(label+input)	field

Listeners

Listener Name	Type	Description	Default
loginSuccess	function	handler function after success login. Default handler is redirect to home page ('/')
loginError	function	handler function when failed to login. Default handler is doing `window.alert` the error response