tjb-auth
Full blown authentification webcomponent.
Example
https://tjb-webcomponents.github.io/tjb-auth/
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/tjb-auth.min.js'
Include via NPM
Console:
npm i -S tjb-auth
Then in your code:
import 'tjb-auth';
Useage
Attributes
Example:
All attributes:
attribute | example | description |
---|---|---|
postbody | postbody="{ 'lol': 'rofl' }" | Aditional object fields that will be added to any POST request. This will be applied to all requests unless there is already a specific postbody on some request, then it will be ditched |
loginpostbody | postbody="{ 'lol': 'rofl' }" | Aditional object fields that will be added to any POST request. |
loginurl | loginurl="https://jsonplaceholder.typicode.com/users" | The POST URL where the login request should go |
registerpostbody | postbody="{ 'lol': 'rofl' }" | Aditional object fields that will be added to any POST request. |
registerurl | registerurl="https://jsonplaceholder.typicode.com/users" | The POST URL where the register request should go |
mailurl | mailurl="https://jsonplaceholder.typicode.com/users" | The POST URL where the email sending trigger request should go |
resetpostbody | postbody="{ 'lol': 'rofl' }" | Aditional object fields that will be added to any POST request. |
reseturl | reseturl="https://jsonplaceholder.typicode.com/users" | The POST URL where the reset request should go |
verifypostbody | postbody="{ 'lol': 'rofl' }" | Aditional object fields that will be added to any POST request. |
verifyurl | verifyurl="https://jsonplaceholder.typicode.com/users" | The POST URL where the verification request should go |
showlogin | showlogin="false" | wheter or not to show the login panel (will hide all other views) |
showregister | showregister="true" | wheter or not to show the registration panel (will hide all other views) |
showreset | showreset="true" | wheter or not to show the reset panel (will hide all other views) |
showverify | showverify="true" | wheter or not to show the email verification panel (will hide all other views) |
Methods
method | example | description |
---|---|---|
error | .error(area, message) - area @String [login/register/reset/verify] - message @String |
Sets the respective widget (area) in an error state |
success | .success(area, message) - area @String [login/register/reset/verify] - message @String |
Sets the respective widget (area) in a success state |
Events
name | event details | description |
---|---|---|
success | - event (@Object) -- area (@String) -- resp (@Object) |
Triggers when any call was successful. Holds an Object which is has the name of the success calling element and the answer of that POST call. |
error | - event (@Object) -- area (@String) -- resp (@Object) |
Triggers when any call had an error. Holds an Object which is has the name of the error element and the answer of that POST call. |
verify | - body (@Object) | triggered when user sends email verification request. Event is an object which contains all information for potential POST call. |
verify-sendmail | - body (@Object) | triggered when an email request would be send. Event is an object which contains all information for potential POST call. |
verify-success | - resp (@Object) | Triggers when the email verification call returned a success. Holds an Object which is the answer of that POST call. |
verify-error | - resp (@Object) | Triggers when the email verification call returned an error. Holds an Object which is the answer of that POST call. |
reset | - body (@Object) | triggered when user sends passowrd reset request. Event is an object which contains all information for potential POST call. |
reset-sendmail | - body (@Object) | triggered when an email request would be send. Event is an object which contains all information for potential POST call. |
reset-success | - resp (@Object) | Triggers when the password reset call returned a success. Holds an Object which is the answer of that POST call. |
reset-error | - resp (@Object) | Triggers when the password reset call returned a error. Holds an Object which is the answer of that POST call. |
register | - body (@Object) | triggered when user sends register request. Event is an object which contains all information for potential POST call. |
register-success | - resp (@Object) | Triggers when the registration call returned a success. Holds an Object which is the answer of that POST call. |
register-error | - resp (@Object) | Triggers when the registration call returned a error. Holds an Object which is the answer of that POST call. |
login | - body (@Object) | triggered when user sends login request. Event is an object which contains all information for potential POST call. |
login-success | - resp (@Object) | Triggers when the login call returned a success. Holds an Object which is the answer of that POST call. |
login-error | - resp (@Object) | Triggers when the login call returned a error. Holds an Object which is the answer of that POST call. |
Styling
Default public values:
These can be overwritten easily by targetting the element. Example: