define('application/components/login/username', [
'rofl/widgets/component',
'application/widgets/login/intro',
'application/widgets/login/input',
'rofl/lib/l10n',
'rofl/lib/utils',
'antie/runtimecontext',
'rofl/events/keyevent',
'application/managers/session',
'rofl/analytics/web/google',
'application/managers/halo'
], function (
Component,
Intro,
Input,
L10N,
Utils,
RuntimeContext,
KeyEvent,
SessionManager,
GoogleAnalytics,
HaloManager
) {
'use strict';
var l10n = L10N.getInstance(),
application = RuntimeContext.getCurrentApplication(),
sessionManager = SessionManager.getInstance(),
GA = GoogleAnalytics.getInstance(),
inputConfig = {
title: l10n.get('username.title'),
forgottenLoginButton: l10n.get('username.buttons.forgotten'),
backButton: l10n.get('username.buttons.back'),
nextPageButton: l10n.get('username.buttons.next'),
validationMsg: l10n.get('username.validation.message'),
inputField: {
title: l10n.get('username.inputfield.title'),
type: Input.INPUT_FIELD_TYPES.TEXT,
opts: {
placeholder: l10n.get('username.inputfield.placeholder'),
maxLength: 14,
validateLength: true
}
}
},
modalconfig = {
title: l10n.get('username.modalconfig.title'),
text: l10n.get('username.modalconfig.text'),
buttons: [
{
label: l10n.get('username.modalconfig.label'),
class: 'confirm_button',
button: 'confirmbutton',
labelname: 'confirmButtonLabel'
}
]
};
return Component.extend({
/**
* Initialises the login component.
*/
init: function init () {
init.base.call(this, 'login');
this.addClass('login');
this._build();
this._onSelectBound = Utils.bind(this._onSelect, this);
this._onKeyDownBound = Utils.bind(this._onKeyDown, this);
this._onTextChangeBound = Utils.bind(this._onTextChange, this);
this._onTextValidatedBound = Utils.bind(this._onTextValidated, this);
this._onFocusBound = Utils.bind(this._onFocus, this);
},
/**
* Builds the login component.
*
* @private
*/
_build: function () {
this._buildIntro();
this._buildInput();
},
/**
* Builds the intro widget.
*
* @private
*/
_buildIntro: function () {
var intro = this._intro = new Intro();
this.appendChildWidget(intro);
},
/**
* Builds the input widget.
*
* @private
*/
_buildInput: function () {
var input = this._input = new Input(inputConfig);
this.appendChildWidget(input);
},
/**
* BeforeRender event.
*/
onBeforeRender: function () {
this._loadingTime = application.getDate();
},
/**
* BeforeShow event.
*
* @param {Event} event - Event.
*/
onBeforeShow: function (event) {
var input = this._input,
keyboard = input.getKeyboard().getKeyboard();
if (!event.fromBack) {
keyboard.setText('');
}
this._onTextChange();
input.focus();
this._startUsernamePage = application.getDate();
this.addEventListener('textchange', this._onTextChangeBound);
this.addEventListener('keydown', this._onKeyDownBound);
this.addEventListener('select', this._onSelectBound);
this.addEventListener('textvalidated', this._onTextValidatedBound);
this.addEventListener('focus', this._onFocusBound);
application.hideLoader();
GA.onPageView('login-username');
HaloManager.getInstance()
.getServiceMessage()
.then(function (r) {
if (r) {
application.route('service');
}
});
},
/**
* AfterShow event.
*/
onAfterShow: function () {
var inputField = this._input.getInputField(),
keyboard = this._input.getKeyboard().getKeyboard(),
username = sessionManager.getAccountNumber(),
value = ((application.getDate() - this._loadingTime) / 1000).toFixed(2);
if (username) {
inputField.stopCursorBlink();
keyboard.setText(username);
this._input.getKeyboard().setActiveChildIndex(1);
} else {
inputField.showCursorBlink();
}
inputField.animateFocusBar();
GA.onEvent('page', 'load', {
eventLabel: 'username',
eventValue: value
});
},
/**
* BeforeHide event.
*/
onBeforeHide: function () {
var inputField = this._input.getInputField(),
duration = ((application.getDate() - this._startUsernamePage) / 60000).toFixed(2);
inputField.stopCursorBlink();
inputField.stopFocusbarAnimation();
this.removeEventListener('textchange', this._onTextChangeBound);
this.removeEventListener('select', this._onSelectBound);
this.removeEventListener('keydown', this._onKeyDownBound);
this.removeEventListener('textvalidated', this._onTextValidatedBound);
this.removeEventListener('focus', this._onFocusBound);
GA.onEvent('page', 'time', {
eventLabel: 'login-username',
eventValue: duration
});
},
/**
* KeyDown event.
*
* @param {event} e - Passed onKeyDown event.
*/
_onKeyDown: function (e) {
var keyboard = this._input.getKeyboard().getKeyboard(),
currentText = keyboard.getText(),
character;
switch (e.keyCode) {
case KeyEvent.VK_LEFT:
case KeyEvent.VK_RIGHT:
e.stopPropagation();
e.preventDefault();
break;
case KeyEvent.VK_0:
case KeyEvent.VK_1:
case KeyEvent.VK_2:
case KeyEvent.VK_3:
case KeyEvent.VK_4:
case KeyEvent.VK_5:
case KeyEvent.VK_6:
case KeyEvent.VK_7:
case KeyEvent.VK_8:
case KeyEvent.VK_9:
character = e.keyChar;
currentText += character;
keyboard.setText(currentText);
break;
case KeyEvent.VK_BACK:
this.parentWidget.back();
break;
}
},
/**
* Select event.
*
* @param {event} e - Passed select event.
*/
_onSelect: function (e) {
var username = this.getValue(),
usernameLength = inputConfig.inputField.opts.maxLength,
validationMessage = this._input.getValidationMessage(),
target = e.target;
switch (target.id) {
case 'next':
if (username.length === usernameLength) {
application.route('pin', {username: this.getValue()});
} else {
validationMessage.addClass('visible');
this._input.getInputField().getFocusBar().addClass('redfocus');
}
break;
case 'back':
application.route('landing');
break;
case 'forgotten':
GA.onEvent('Action', 'ForgotCredentials');
application.route('modal', modalconfig);
break;
}
},
/**
* Text Change event.
*
* @private
*/
_onTextChange: function () {
var validationMessage = this._input.getValidationMessage();
validationMessage.removeClass('visible');
this._input.getInputField().getFocusBar().removeClass('redfocus');
},
/**
* Text validate event.
*
* @private
*/
_onTextValidated: function () {
this._input.getButton().focus();
},
/**
* Returns value of the input.
*
* @returns {string} - Value of the inupt.
*/
getValue: function () {
return this._input.getValue();
},
/**
* Focus event.
*
* @param {Object} e - The event data.
* @private
*/
_onFocus: function (e) {
if (e.target.hasClass('input-keys')) {
this._input.getInputField().showCursorBlink();
} else if (e.target.hasClass('kpn-button')) {
this._input.getInputField().stopCursorBlink();
}
}
});
});