tjb-auth-login
Webcomponents login form field to login with given credentials
Example
https://tjb-webcomponents.github.io/tjb-auth-login/
Add to project
You might want to use a Polyfill for WebComponent:
Include via HTML
Include it:
Include via JavaScript
import 'https://tjb-webcomponents.github.io/tjb-auth-login/tjb-auth-login.min.js'
Include via NPM
Console:
npm i -S tjb-auth-login
Then in your code:
import 'tjb-auth-login';
Useage
Attributes
Example:
All attributes:
attribute | example | description |
---|---|---|
postbody | postbody="{ 'foo': 'bar' }" | JSON Object that will be added to the remote login POSt call. |
posturl | posturl="https://jsonplaceholder.typicode.com/users" | URL that will be called with a POST call and credentials as application/json body |
Methods
method | example | description |
---|---|---|
error | .error() | Sets the widget in an error state |
success | .success() | Sets the widget in a success state |
Events
name | details | description |
---|---|---|
redirect | - href (@String) - target (@string) |
triggered when user clicks on links. For instance register link or forgor password link. |
success | - resp (@Object) | when the login call returned a success message |
error | - resp (@Object) | when the login call returned an error message |
login | - body (@Object) | when the login call is triggered. Event holds body (email, password) |
You can listen to events like so: tjbLogin.addEventListener('login/success', (e) => { /* do stuff */ })
.
Styling
Default public values:
These can be overwritten easily by targetting the element. Example: