ozone-login-form/src/lib/ozone-login-form/ozone-login-form.ts

generic login form for ozone authentication

import 'polymer/polymer.html'
import 'paper-input/paper-input.html'
import 'paper-button/paper-button.html'
import {customElement, property} from 'taktik-polymer-typescript'
import {OzoneApiAuthentication, getOzoneApiAuthentication} from 'ozone-api-authentication'
import './ozone-login-form.html'


/**
 * ### ozone-login-form
 *
 * A generic login form for Ozone.
 * It uses 'ozone-authentication-api' to automatically authenticate to Ozone.
 *
 *
 * ### Usage
 *
 * ```javascript
 * import 'ozone-login-form'
 *
 * ...
 *
 * <ozone-login-form
 *       on-register-clicked="..."
 *       on-password-clicked="..."
 *       align-buttons="right|center|left"
 *       username-label="..."
 *       password-label="..."
 *       register-label="..."
 *       lost-password-label="..."
 *       submit-label="..."
 *       message-on-empty="..."
 *       message-on-invalid="..."
 *       message-on-unknown="..."
 *      >
 * </ozone-login-form>
 *
 * ```
 */
@customElement('ozone-login-form')
export class OzoneLoginForm extends Polymer.Element {

	@property({type: String})
	public username: string = ''

	@property({type: String})
	public password: string = ''

	@property({type: String})
	public errorMessage: string = ''

	@property({type: String})
	public messageOnEmpty: string = 'The username and/or password is empty'

	@property({type: String})
	public messageOnInvalid: string = 'Invalid username and/or password'

	@property({type: String})
	public messageOnUnknown: string = 'Unknown error. Please check your connection'

	@property({type: String, notify: true})
	public alignButtons: string = 'center'

	@property({type: String})
	public usernameLabel: string = 'Username'

	@property({type: String})
	public passwordLabel: string = 'Password'

	@property({type: String})
	public submitLabel: string = 'Login'

	@property({type: String})
	public lostPasswordLabel: string = 'Lost password'

	@property({type: Boolean})
	public showLostPassword: boolean = true

	@property({type: String})
	public registerLabel: string = 'Register'

	@property({type: Boolean})
	public showRegister: boolean = true

	@property({type: Object})
	private api: OzoneApiAuthentication = getOzoneApiAuthentication()

	public register(e: Event): void {
		this.dispatchEvent(new CustomEvent('register-clicked', {}))
	}

	public lostPassword(e: Event): void {
		this.dispatchEvent(new CustomEvent('password-clicked', {detail: {username: this.username}}))
	}

	public submitForm(e: Event): void {

		if (this.dispatchEvent(new CustomEvent('before-submit', {detail: {form: this.$.form}, cancelable: true }))){
			this.validateForm()

			this.api.ozoneConnect(this.username, this.password)
				.then((res: XMLHttpRequest) => {
					//console.log('is success')
					this.dispatchEvent(new CustomEvent('auth-success', {detail: {success: true}}))
					this.set('errorMessage', '')
				})
				.catch((err: XMLHttpRequest) => {
					if (err.status === 400){
						this.set('errorMessage', this.messageOnEmpty)
					}
					else if (err.status === 403) {
						this.set('errorMessage', this.messageOnInvalid)
					}
					else {
						this.set('errorMessage', this.messageOnUnknown)
					}
					this.dispatchEvent(new CustomEvent('auth-error', {
						detail: {
							status: err.status,
							message: this.errorMessage
						}
					}))
				})

		}

	}

	private validateForm(): void {
		this.$.username.validate()
		this.$.password.validate()
		if (!this.username.trim().length) return this.$.username.focus()
		if (!this.password.trim().length) this.$.password.focus()
	}

	private onKeyPress(e: KeyboardEvent): void {
		if (e.key === 'Enter'){

			this.validateForm()
			if (this.$.username.value.trim().length && this.$.password.value.trim().length){
				this.submitForm(e)
			}
		}
	}

}