tjb-auth-verify
Webcomponents verify form field to verify with given credentials
Example
https://tjb-webcomponents.github.io/tjb-auth-verify/
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-verify/tjb-auth-verify.min.js'
Include via NPM
Console:
npm i -S tjb-auth-verify
Then in your code:
import 'tjb-auth-verify';
Useage
Attributes
Example:
All attributes:
attribute | example | description |
---|---|---|
postbody | postbody="{ 'foo': 'bar' }" | JSON Object that will be added to the remote verify POSt call. |
posturl | posturl="https://jsonplaceholder.typicode.com/users" | URL that will be called with a POST call and credentials as application/json body |
mailurl | mailurl="https://jsonplaceholder.typicode.com/users" | URL that will be called with a POST call as application/json body. The component will send out a POST on initialization |
email="foo@bar.baz" | E-Mail that will be used for calls |
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 verify link or forgor password link. |
success | - resp (@Object) | when the verify (post) call returned a success message |
success-email | - resp (@Object) | when the email call returned a success message |
error | - resp (@Object) | when the verify (post) call returned an error message |
sendmail | - body (@Object) | triggered on sendmail request. Hold the body of the potential request (email) |
verify | - body (@Object) | triggered on verification request. Hold the body of the potential request (email, key) |
You can listen to events like so: tjbVerify.addEventListener('verify/success', (e) => { /* do stuff */ })
.
Styling
Default public values:
These can be overwritten easily by targetting the element. Example: