Skip to content

KanoComponents/kwc-auth

Repository files navigation

<kwc-auth>

Purpose

Front end for Kano's authentication flow.

27/02/2019: Starting refactor to allow for new GDPR and COPPA compliant flow. This will involve the following tasks:

  • remove unnecessary properties
  • remove unnecessary styles
  • Align with brand styles
  • Remove Polymer dependency
  • Add lit-html dependency
  • Investigation on need for typescript
  • Remove Behaviour dep
  • Move behaviour / validation into utility
  • Ensure tabbing and accessability is as expected
  • Show/hide password feature
  • Check username available on blur
  • Validation of other inputs on blur

24/05/2018: The README is out of date. Please proceed with caution.

This component implements view according to the current User Login Journey as descibe in this working document. Please note this link is not guarenteed to be in sync with the component but should be a good guide.

Properties

API

kwc-auth#reset()

Reset the internal state of the auth modal. Essentially

kwc-auth#show*

Auth Flows and Views

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.

Login | Signup

login

signup

grownups

Forget credentials

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.)

password-reset

username-reminder

## Installation
 * Clone this repository.
 * Run `yarn`

 * To serve locally `yarn serve` - the site will be served on http://localhost:4000/demo

 * If you'd like to change the port that it's running on use `yarn serve --port=4040`

 * yarn add --dev typescript
 * Watch file changes: yarn tsc --watch

## Running Tests

$ yarn test

or to serve your tests while you work 

$ yarn serve-test