ceri-login-modal
Version:
A simple, themed login-modal
90 lines (76 loc) • 2 kB
Markdown
# ceri-login-modal
A simple, themed login-modal
### [Demo](https://ceri-widgets.github.io/ceri-login-modal)
# Install
```sh
npm install --save-dev ceri-login-modal ceri-toaster ceri-progress ceri-modal ceri-icon
```
## Usage
```coffee
LoginModal = require("ceri-login-modal")
# load the theme (see below)
loginModal = LoginModal(
require("ceri-login-modal/materialize"), #theme
{ # optional localization
header: "Login"
name: "Username"
pw: "Password"
button: "login"
error: "Login failed"
timeout: "Login failed"
}
)
# setup your login validation
loginModal.login = (name, pw, cb) ->
# check login
# call cb with the result/false for success/failed
loginModal.timeout = 2000 # change the timeout
# To open
loginModal.open((result) ->
# result will be result from login function above
# or false if modal got closed without proper login
)
```
#### Using Promises
```coffee
# Provide your Promise constructor
LoginModal.Promise = Promise # if you have polyfilled Promise
# your login function must return a promise
loginModal.login = (name, pw) ->
return new Promise((resolve,reject) ->
# check login
# if success
resolve(result)
# if failed
reject()
)
# open will return a promise
loginModal.open().then((result)->
# login success
# result equals result from login function
).catch(->
# abort by user
)
```
## Themes
#### Materialize
- setup [ceri-materialize](https://github.com/ceri-comps/ceri-materialize)
- setup webpack for [ceri-icon](https://github.com/ceri-comps/ceri-icon). Include `ma-person` and `ma-vpn_key` icons.
- load theme file
```coffee
loginModal = LoginModal(require("ceri-login-modal/materialize"))
```
For example see [`dev/materialize`](dev/materialize.coffee).
# Development
Clone repository.
```sh
npm install
npm run dev
```
Browse to `http://localhost:8080/`.
## Notable changes
#### 0.3.0
- use ceri-materialize@2
## License
Copyright (c) 2017 Paul Pflugradt
Licensed under the MIT license.