Front end for Kano's authentication flow.
This component implements view according to the current User Login Journey as descibe in this working document. Please note this link is not garunteed to be in sync with the component but should be a good guide.
- assetsPath: Path for assets used during the auth flow.
- errors: Keeps track of error messages.
- email: Input value.
- firstName: Input value.
- isForceSignup: Flags if modal can be closed or not. If
isForceSignup
istrue
then thekwc-modal
shouldn't be closable. - newsletter: Flags if user wants to subscribe to newsletter.
- opened: Flags modal is opened
- password: Input value.
- processing: Flags if component is waiting an answer from server or parent component.
- terms: Flags if user has accepted terms and conditions.
- username: Input value.
- worldUrl: Kano world URL.
If assetsPath
is given the modal will look for a motif icon at ${assetsPath}/avatar/judoka-face.svg
and an arrow icon at ${assetsPath}/icons/link-arrow.svg
so you need to provide those files.
A ronseal function. It does what it says on the tin.
Open the kwc-auth
modal. The default view is the login
view. This can be overidden if a valid view name is passed.
- defaultview: one of
login
,signup
,grownups
,password-reset
orusername-reminder
.
Reset the internal state of the auth modal. Essentially
kwc-auth.errors = {};
kwc-auth.firstName = null;
kwc-auth.username = null;
kwc-auth.password = null;
kwc-auth.email = null;
kwc-auth.terms = true;
kwc-auth.newsletter = false;
Router helper functions that allow an external component to trigger a view change to the desired view.
showLogin()
showSignup()
showGrownup()
showEmail()
showDone()
showPasswordReset()
showResetConfirmation()
showUsernameReminder()
This component is very specific to the authentication flow as it is currently specified for the kano
apps. It does not contain any logic for completing the authentication flows, that is defered the the context in which the component is used. The views are for collecting the relevant user data so any parent (probably app specific) component can complete the communicaiton with the api and process any responses.
The first flow is for authenticating a user. (NOTE: This flow may be updated before this doc is!). Either a user authenticates an existing account or creates a new account and is logged in on completion. (See here for more detail.)
The kwc-auth
component implements views for login and signup with links between the two.
- Fields: username, password.
- On submit event:
login
.
- Fields: firstname, username, password.
- On submit event:
submit-signup-info
.
- Fields: email.
- On submit event:
submit-signup-email
.
The kwc-auth
component implements two views to allow a user to enter information in order to recover forgotten credentials. Username recovery flow accepts a valid email address and password recovery asks for a username. (See here for more detail.)
- Fields: username.
- On submit event:
forgot-password
.
- Fields: email.
- On submit event:
forgot-username
.
This component fires the following custom events:
This event is fired when the modal close button or the skip button are clicked.
kw-auth
exposes the on-change-[email|firstname|password|username]
events for the input fields on the auth forms. This allows for parent components to apply context specific validations on user inputs. For example we could check username availability as a user types.
const authElem = document.querySelector('#auth');
authElm.addEventListener('change-username', (e) => {
if(this.delayTimer){
clearTimeout(this.delayTimer);
}
this.delayTimer = setTimeout((function(value) {
return fetch(`${API_URL}/users/username/${value}`)
.then((res) => {
if(res.ok){
authElm.errors.username = "This one is already taken."
}
});
},
}).bind( this, e.detail ), 1000);
});
The detail
property of the event will contain only the current value of the targeted input.
Fired when the done
button is clicked on the final auth modal view. No data is passed.
The event is passed the following detail:
{
type: 'object',
properties: {
username: {
type: 'string'
}
}
}
The event is passed the following detail:
{
type: 'object',
properties: {
password: {
type: 'string'
}
}
}
The event is passed the following detail:
{
type: 'object',
properties: {
username: {
type: 'string'
},
password: {
type: 'string'
}
}
}
The event is passed no data and is followed by a cancel
event.
The event is passed the following detail:
{
type: 'object',
properties: {
firstName: {
type: 'string'
},
username: {
type: 'string'
},
password: {
type: 'string'
},
email: {
type: 'string',
format: 'email'
},
newsletter: {
type: 'boolean'
}
}
}
The event is passed the following detail:
{
type: 'object',
properties: {
firstName: {
type: 'string'
},
username: {
type: 'string'
},
password: {
type: 'string'
}
}
}
- Clone this repository.
- Run
bower i
- Make sure you have the Polymer CLI installed. Then run
polymer serve
to serve your element locally.
$ polymer test --skip-plugin junit-reporter