TT#4573 Implement login form and language selection dropdown

Add a login mechanism for the ngcp-csc mockup, to send the user to main view if right credentials are given. Add language selection dropdown that stores value to localStorage.

Change-Id: I02e80700a73a7c6e06c03c81402493f3abb3c9fe

classic/src/view/login/Login.js

@@ -14,6 +14,7 @@ Ext.define('NgcpCsc.view.login.Login', {
     autoShow: true,
     standardSubmit: true,
     viewModel: 'login',
+    width: 330,
 
     items: {
         xtype: 'form',
@@ -24,6 +25,7 @@ Ext.define('NgcpCsc.view.login.Login', {
             name: 'username',
             fieldLabel: 'Username',
             allowBlank: false,
+            padding: '10 0 0 15',
             listeners: {
                 specialKey: 'onPressEnter'
             },
@@ -34,16 +36,47 @@ Ext.define('NgcpCsc.view.login.Login', {
             inputType: 'password',
             fieldLabel: 'Password',
             allowBlank: false,
+            padding: '0 0 0 15',
             listeners: {
                 specialKey: 'onPressEnter'
             },
             bind:'{password}'
         }, {
+            xtype: 'combo',
+            fieldLabel: 'Choose language',
+            padding: '0 0 0 15',
+            store: new Ext.data.Store({
+                data: [{
+                    id: "en",
+                    language: 'English'
+                },{
+                    id: "it",
+                    language: 'Italian'
+                },{
+                    id: "de",
+                    language: 'German'
+                },{
+                    id: "fr",
+                    language: 'French'
+                },{
+                    id: "sp",
+                    language: 'Spanish'
+                }]
+            }),
+            queryMode: 'local',
+            valueField: 'id',
+            displayField: 'language',
+            value: localStorage.getItem('languageSelected') || 'en',
+            listeners: {
+                'select': 'languageSelection'
+            }
+        },  {
             xtype: 'displayfield',
             hideEmptyLabel: false,
             itemId: 'login-message',
-            width: 300,
-            value: 'Enter any non-blank password',
+            padding: '0 0 5 15',
+            hidden: true,
+            width: 310,
             bind:'{message}'
         }],
         buttons: [{

classic/src/view/login/LoginController.js

@@ -14,14 +14,24 @@ Ext.define('NgcpCsc.view.login.LoginController', {
         }
     },
 
+    languageSelection: function (cmp, rec) {
+        languageSelected = localStorage.setItem('languageSelected', rec.get('id'));
+    },
+
+    showMessage: function (message) {
+        this.loginFormReset();
+        this.getViewModel().set('message', message);
+        inputMessageComponent.show();
+    },
+
     onLoginClick: function () {
         var inputUsername = this.getViewModel().get('username');
         var inputPassword = this.getViewModel().get('password');
-        var inputMessage = this.getView().down('message');
+        languageSelected = localStorage.getItem('languageSelected') || 'en';
+        inputMessageComponent = this.getView().down('#login-message');
 
         if (inputUsername === 'admin' && inputPassword === 'admin') {
             this.getView().destroy();
-            // TODO: Use
             Ext.create({
                 xtype: 'ngcp-main'
             });
@@ -30,21 +40,17 @@ Ext.define('NgcpCsc.view.login.LoginController', {
                 field: 'password',
                 message: 'Invalid password'
             }]);
-            this.loginFormReset();
-            this.getViewModel().set('message', 'Login failed, please verify username and password.');
+            this.showMessage('Login failed, please verify username and password.');
         } else if (inputUsername === '') {
-            this.loginFormReset();
-            this.getViewModel().set('message', 'Please enter your username.');
+            this.showMessage('Please enter your username.');
         } else if (inputPassword === '') {
-            this.loginFormReset();
-            this.getViewModel().set('message', 'Please enter your password.');
+            this.showMessage('Please enter your password.');
         } else if (inputUsername !== 'admin' && inputPassword !== '') {
             this.lookupReference('login-form').getForm().markInvalid([{
                 field: 'username',
                 message: 'Invalid username'
             }]);
-            this.loginFormReset();
-            this.getViewModel().set('message', 'Login failed, please verify username and password.');
+            this.showMessage('Login failed, please verify username and password.');
         }
     }
 

classic/src/view/main/Main.js

@@ -4,7 +4,8 @@ Ext.define('NgcpCsc.view.main.Main', {
 
     requires: [
         'Ext.button.Segmented',
-        'Ext.list.Tree'
+        'Ext.list.Tree',
+        'Ngcp.csc.view.pages.BlankPage'
     ],
 
     controller: 'main',