ceri-login-modal

A simple, themed login-modal

Demo

Install

npm install --save-dev ceri-login-modal ceri-toaster ceri-progress ceri-modal ceri-icon

Usage

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

# 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

• setup webpack for ceri-icon. Include ma-person and ma-vpn_key icons.

• load theme file

loginModal = LoginModal(require("ceri-login-modal/materialize"))

For example see dev/materialize.

Development

Clone repository.

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.