# ramen-login-module

> Custom Login element for ramen-auth API

Latest version **0.1.12** (published 2020-05-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install ramen-login-module
pnpm add ramen-login-module
yarn add ramen-login-module
bun add ramen-login-module
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.12 |
| Published | 2020-05-04 |
| First published | 2019-11-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 5.5 MB |
| Known vulnerabilities | 0 (+26 in 2 direct dependencies) |
| Install scripts | no |
| Maintainers | kurukururuu |

## Links

- npm: https://www.npmjs.com/package/ramen-login-module
- npm.io page: https://npm.io/package/ramen-login-module

## Dependencies (4)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [axios](https://npm.io/package/axios.md) ^0.19.2
- [bulma](https://npm.io/package/bulma.md) ^0.8.0
- [core-js](https://npm.io/package/core-js.md) ^3.6.4

## Recent versions

- 0.1.12 (latest) — 2020-05-04
- 0.1.11 — 2020-05-04
- 0.1.10 — 2020-03-17
- 0.1.9 — 2020-03-17
- 0.1.8 — 2020-02-11
- 0.1.7 — 2020-02-11
- 0.1.6 — 2020-02-11
- 0.1.5 — 2020-02-11
- 0.1.4 — 2019-11-08
- 0.1.3 — 2019-11-08
- 0.1.2 — 2019-11-08
- 0.1.1 — 2019-11-08
- 0.1.0 — 2019-11-08

## README

# ramen-login-module
Vue.js Login Component for [ordent/ramenauth](https://github.com/ordent/ramenauth) backend service.

## Installation
```
npm install ramen-login-module
```

## Usage
* Import directly on your template
```javascript
import LoginComponent from 'ramen-login-module'
export default {
	// ...
	components: {
		LoginComponent
	}
	// ...
}
```
* Use Nuxt.js plugin
```javascript
// '/plugin/RamenLoginModule.js'
import Vue from 'vue'
import LoginComponent from 'ramen-login-module';
Vue.use(LoginComponent)
```

## Example Usage
```html
<!-- '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 <b>overwrites</b> 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 	|          	|

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

## License
[MIT](https://choosealicense.com/licenses/mit/)

---
_Source: https://npm.io/package/ramen-login-module · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._