TT#17984 CSC JWT client implmentation followup

Previous implementatation was still using dummy data.
With this changes the integration of JWT iin the client is completed.

Change-Id: I4dde4fc209ec878d87e6477d70cf7a5b02fb9b34

app.js

@@ -2,20 +2,25 @@
 Ext.Ajax.on("beforerequest", function(con, options) {
     con.setUseDefaultXhrHeader(false);
     con.setWithCredentials(true);
-    if (options.params && localStorage.getItem('jwt_token')) {
+    if (options.params && localStorage.getItem('jwt')) {
         delete options.params.page;
         delete options.params.start;
         delete options.params.limit;
-        options.params['jwt_token'] = localStorage.getItem('jwt_token');
+        this.setDefaultHeaders({
+            'Authorization': 'Bearer ' + localStorage.getItem('jwt')
+        });
     }
 });
 
-// in case of 401, user is redirected to login screen
+// in case of 401 or 403, user is redirected to login screen
 Ext.Ajax.on("requestexception", function(con, response) {
     var httpStatus = response.status;
     switch (httpStatus) {
         case 401:
-            NgcpCsc.getApplication().showLogin();
+        case 403:
+            if (response.request.url !== '/login_jwt/') {
+                NgcpCsc.getApplication().showLogin();
+            }
             break;
     }
 });
@@ -40,21 +45,30 @@ Ext.application({
         if (mainCmp) {
             mainCmp.destroy();
         }
+        window.location.hash = '';
         Ext.create({
             xtype: 'ngcp-login'
         });
-        localStorage.removeItem('jwt_token');
-        localStorage.removeItem('subscriber_id');
-        localStorage.removeItem('type');
-        localStorage.removeItem('username');
-        window.location.hash = '';
+        localStorage.removeItem('jwt');
     },
 
     showMain: function() {
+        var me = this;
+        var winLogin = Ext.ComponentQuery.query('[name=loginWin]')[0];
+        var loginCont = Ext.ComponentQuery.query('[id=loginCont]')[0];
+        if (winLogin) {
+            winLogin.destroy();
+        }
+        if (loginCont) {
+            loginCont.destroy();
+        }
+        window.location.hash = '';
         Ext.create({
             xtype: 'ngcp-main'
         });
-        window.location.hash = '#inbox';
+        Ext.Function.defer(function() {
+            me.redirectTo('inbox');
+        }, 100)
     }
 
 });

app/proxy/NgcpApi.js

@@ -9,10 +9,6 @@ proxy: {
 Ext.define('NgcpCsc.proxy.NgcpApi', {
     extend: 'Ext.data.proxy.Ajax',
     alias: 'proxy.ngcp-api',
-    /* temporary authentication, should be bound to auth token once implemented*/
-    withCredentials: true,
-    username: 'administrator',
-    password: 'administrator',
     baseApiUrl: '/api/',
     autoLoad: true,
     appendId: false,
@@ -35,7 +31,7 @@ Ext.define('NgcpCsc.proxy.NgcpApi', {
                 me.headers = {
                     'Content-Type': 'application/json'
                 };
-                url = Ext.String.format('{0}{1}/{2}?{3}', me.baseApiUrl, me.route, me.subscriberId, me.params);
+                url = Ext.String.format('{0}{1}/{2}?{3}', me.baseApiUrl, me.route, localStorage.getItem('subscriber_id'), me.params);
                 break;
             case 'update':
                 me.headers = (me.actionMethods.update == 'PUT') ? {
@@ -45,7 +41,7 @@ Ext.define('NgcpCsc.proxy.NgcpApi', {
                 };
 
                 records = request._records;
-                url = Ext.String.format('{0}{1}/{2}', me.baseApiUrl, me.route, me.subscriberId || records[0].get('id'));
+                url = Ext.String.format('{0}{1}/{2}', me.baseApiUrl, me.route, localStorage.getItem('subscriber_id'));
                 break;
         }
         request._url = url;

app/store/CallBlocking.js

@@ -10,7 +10,6 @@ Ext.define('NgcpCsc.store.CallBlocking', {
     proxy: {
         type: 'ngcp-api',
         route: 'subscriberpreferences',
-        subscriberId: localStorage.getItem('subscriber_id'),
         actionMethods: {
             read: 'GET',
             update: 'PATCH'

classic/src/Application.js

@@ -41,9 +41,19 @@ Ext.define('NgcpCsc.Application', {
 
     launch: function() {
         Ext.tip.QuickTipManager.init();
-        // TODO to be replaced with request
-        if (localStorage.getItem('jwt_token')) {
-            this.showMain()
+        if (localStorage.getItem('username') && localStorage.getItem('password') && localStorage.getItem('jwt')) {
+            // checks that the jwt token is valid
+            Ext.Ajax.request({
+                url: '/login_jwt/',
+                method: 'POST',
+                jsonData: {
+                    username: localStorage.getItem('username'),
+                    password: localStorage.getItem('password')
+                },
+                success: this.showMain,
+                failure: this.showLogin,
+                scope: this
+            });
         } else {
             this.showLogin();
         }

classic/src/view/login/Login.js

@@ -1,6 +1,7 @@
 Ext.define('NgcpCsc.view.login.Login', {
     extend: 'Ext.window.Window',
     controller: 'login',
+    name: 'loginWin',
     autoShow: true,
     bodyPadding: 20,
     closable: false,

classic/src/view/login/LoginContainer.js

@@ -1,10 +1,14 @@
 Ext.define('NgcpCsc.view.login.LoginContiner', {
     extend: 'Ext.container.Viewport',
+    id: 'loginCont',
     xtype: 'ngcp-login',
     cls: 'login-container',
-    listeners:{
-        render:function(){
-            Ext.create('NgcpCsc.view.login.Login');
+    listeners: {
+        afterrender: function() {
+            var winLogin = Ext.ComponentQuery.query('[name=loginWin]')[0];
+            if (!winLogin) {
+                Ext.create('NgcpCsc.view.login.Login');
+            }
         }
     }
 });

classic/src/view/login/LoginController.js

@@ -5,8 +5,7 @@ Ext.define('NgcpCsc.view.login.LoginController', {
     onPressEnter: function(field, e) {
         var inputUsername = this.getViewModel().get('username');
         var inputPassword = this.getViewModel().get('password');
-        var isAdminUser = inputUsername == 'admin' && inputPassword == 'admin'; // hardcoded credentials TODO remove when jwt is ready in backend
-        if (e.getKey() == e.ENTER && isAdminUser) {
+        if (e.getKey() == e.ENTER) {
             this.onLoginClick();
         }
     },
@@ -27,8 +26,8 @@ Ext.define('NgcpCsc.view.login.LoginController', {
         var inputUsername = this.getViewModel().get('username');
         var inputPassword = this.getViewModel().get('password');
         Ext.Ajax.request({
-            url: Ext.manifest.resources.path + '/data/auth.json', // will be '/login_jwt/',
-            method: 'GET', // will be POST
+            url: '/login_jwt/',
+            method: 'POST',
             jsonData: {
                 username: inputUsername,
                 password: inputPassword
@@ -40,21 +39,19 @@ Ext.define('NgcpCsc.view.login.LoginController', {
     },
 
     successLogin: function(response) {
-        var data = Ext.decode(response.responseText).data;
-        if (data.token) {
+        var data = Ext.decode(response.responseText);
+        if (data.jwt) {
             localStorage.setItem('username', this.getViewModel().get('username'));
+            localStorage.setItem('password', this.getViewModel().get('password'));
             localStorage.setItem('subscriber_id', data.subscriber_id);
-            localStorage.setItem('jwt_token', data.token);
+            localStorage.setItem('jwt', data.jwt);
             localStorage.setItem('type', data.type || 'admin'); // this is the user Role, which shows/hides the modules in navigation tree
-            this.getView().close();
-            Ext.create({
-                xtype: 'ngcp-main'
-            });
+            NgcpCsc.app.showMain();
         }
     },
 
     unsuccessLogin: function(response) {
-        localStorage.removeItem('jwt_token');
+        localStorage.removeItem('jwt');
         Ext.Msg.alert('Error', 'Username or Password not valid!');
     }
 });

classic/src/view/login/LoginModel.js

@@ -9,15 +9,12 @@ Ext.define('NgcpCsc.view.login.LoginModel', {
     // left inline by purpose until auth specs
     data: {
         username: localStorage.getItem('username') || '',
-        password: localStorage.getItem('password') || '',
-        defaultCredentials: ['admin', 'restricted', 'host']
+        password: localStorage.getItem('password') || ''
     },
 
     formulas: {
         authValid: function(get) {
-            return (get('username') == get('password') &&
-                get('defaultCredentials').indexOf(get('username')) > -1 &&
-                get('defaultCredentials').indexOf(get('password')) > -1);
+            return ( get('username').length > 0 && get('password').length > 0);
         }
     }
 

classic/src/view/main/MainController.js

@@ -37,7 +37,7 @@ Ext.define('NgcpCsc.view.main.MainController', {
             store = navigationList.getStore(),
             node = store.findNode('routeId', hashTag) ||
             store.findNode('viewType', hashTag) || 'inbox',
-            view = (node && node.get('viewType')),
+            view = (node && Ext.isObject(node) && node.get('viewType')),
             lastView = me.lastView,
             existingItem = mainCard.child('component[routeId=' + hashTag + ']'),
             newView;
@@ -246,7 +246,7 @@ Ext.define('NgcpCsc.view.main.MainController', {
     },
 
     logout: function() {
-        localStorage.removeItem('jwt_token');
+        localStorage.removeItem('jwt');
         location.reload();
     },