Improved messages for self-signed cert issues

dashboard/src/app/factories/factory-details/information-tab/factory-information/factory-information.controller.ts

@@ -10,10 +10,10 @@
  *   Red Hat, Inc. - initial API and implementation
  */
 'use strict';
-import {CheAPI} from '../../../../../components/api/che-api.factory';
-import {CheNotification} from '../../../../../components/notification/che-notification.factory';
-import {ConfirmDialogService} from '../../../../../components/service/confirm-dialog/confirm-dialog.service';
-import {CheBranding} from '../../../../../components/branding/che-branding.factory';
+import { CheAPI } from '../../../../../components/api/che-api.factory';
+import { CheNotification } from '../../../../../components/notification/che-notification.factory';
+import { ConfirmDialogService } from '../../../../../components/service/confirm-dialog/confirm-dialog.service';
+import { CheBranding } from '../../../../../components/branding/che-branding';
 
 /**
  * Controller for a factory information.
@@ -55,16 +55,16 @@ export class FactoryInformationController {
    * Default constructor that is using resource injection
    */
   constructor($scope: ng.IScope,
-              cheAPI: CheAPI,
-              cheNotification: CheNotification,
-              $location: ng.ILocationService,
-              $log: ng.ILogService,
-              $timeout: ng.ITimeoutService,
-              lodash: any,
-              $filter: ng.IFilterService,
-              $q: ng.IQService,
-              cheBranding: CheBranding,
-              confirmDialogService: ConfirmDialogService) {
+    cheAPI: CheAPI,
+    cheNotification: CheNotification,
+    $location: ng.ILocationService,
+    $log: ng.ILogService,
+    $timeout: ng.ITimeoutService,
+    lodash: any,
+    $filter: ng.IFilterService,
+    $q: ng.IQService,
+    cheBranding: CheBranding,
+    confirmDialogService: ConfirmDialogService) {
     this.cheAPI = cheAPI;
     this.cheNotification = cheNotification;
     this.$location = $location;

dashboard/src/app/index.module.ts

@@ -27,7 +27,6 @@ import {WorkspacesConfig} from './workspaces/workspaces-config';
 import {StacksConfig} from './stacks/stacks-config';
 import {GetStartedConfig} from './get-started/get-started-config';
 import {DemoComponentsController} from './demo-components/demo-components.controller';
-import {CheBranding} from '../components/branding/che-branding.factory';
 import {ChePreferences} from '../components/api/che-preferences.factory';
 import {RoutingRedirect} from '../components/routing/routing-redirect.factory';
 import {RouteHistory} from '../components/routing/route-history.service';
@@ -36,15 +35,21 @@ import {OrganizationsConfig} from './organizations/organizations-config';
 import {TeamsConfig} from './teams/teams-config';
 import {ProfileConfig} from './profile/profile-config';
 import {ResourceFetcherService} from '../components/service/resource-fetcher/resource-fetcher.service';
+import {CheBranding} from '../components/branding/che-branding';
 
 // init module
 const initModule = angular.module('userDashboard', ['ngAnimate', 'ngCookies', 'ngTouch', 'ngSanitize', 'ngResource', 'ngRoute',
   'angular-websocket', 'ui.bootstrap', 'ngMaterial', 'ngMessages', 'angularMoment', 'angular.filter',
   'ngLodash', 'uuid4', 'angularFileUpload', 'ui.gravatar']);
 
+// register singletons which can be used before resumeBootstrap
+const cheBranding = CheBranding.get();
+initModule.constant('cheBranding', cheBranding);
+
 window.name = 'NG_DEFER_BOOTSTRAP!';
 
 declare const Keycloak: Function;
+
 function buildKeycloakConfig(keycloakSettings: any): any {
   const theOidcProvider = keycloakSettings['che.keycloak.oidc_provider'];
   if (!theOidcProvider) {
@@ -60,19 +65,31 @@ function buildKeycloakConfig(keycloakSettings: any): any {
     };
   }
 }
+
 interface IResolveFn<T> {
   (value?: T | PromiseLike<T>): void;
 }
+
 interface IRejectFn<T> {
   (reason?: any): void;
 }
+
 function keycloakLoad(keycloakSettings: any) {
   return new Promise((resolve: IResolveFn<any>, reject: IRejectFn<any>) => {
     const script = document.createElement('script');
     script.async = true;
     script.src = keycloakSettings['che.keycloak.js_adapter_url'];
     script.addEventListener('load', resolve);
-    script.addEventListener('error', () => reject('Error loading script.'));
+    script.addEventListener('error', () => {
+      return cheBranding.ready.then(() => {
+        reject(`<div  class="error-header"><span>Certificate Error</span><a href="/"><i class="fa fa-times"></i></a></div>
+ <div class="error-body"><p>Your Che host may be signed with a self-signed certificate. To resolve this issue, try these possible solutions:</p>
+ <p>1.) Import CA certificate info into your browser. You can find instructions on how to do this in you 
+ <a href="${cheBranding.getDocs().certificate}" target="_blank">Che documentation</a>.</p>
+ <p>2.) Open <a href="${script.src}" target="_blank">the link for your Che host</a> in a new tab and add an exclusion.</p>
+ <br/>After trying each of these solutions, <a href="/">refresh your Dashboard</a> to see if the problem has been resolved.</div>`);
+      });
+    });
     script.addEventListener('abort', () => reject('Script loading aborted.'));
     document.head.appendChild(script);
   });
@@ -124,16 +141,16 @@ function getApis(keycloak: any): Promise<void> {
         if (xhr.status === 200) {
           resolve();
         } else {
-          reject(xhr.responseText ? xhr.responseText : 'Unknown error');
+          reject(xhr.responseText ? xhr.responseText : '<div class="error-header"><span>Unknown error</span><a href="/"><i class="fa fa-times"></i></a></div>');
         }
       };
     });
   });
 }
 function showErrorMessage(errorMessage: string) {
-  const div = document.createElement('p');
-  div.className = 'authorization-error';
-  div.innerHTML = errorMessage + '<br/>Click <a href="/">here</a> to reload page.';
+  const div = document.createElement('div');
+  div.className = 'keycloak-error';
+  div.innerHTML = errorMessage;
   document.querySelector('.main-page-loader').appendChild(div);
 }
 
@@ -148,21 +165,27 @@ angular.element(document).ready(() => {
   const promise = new Promise((resolve: IResolveFn<any>, reject: IRejectFn<any>) => {
     angular.element.get('/api/keycloak/settings').then(resolve, reject);
   });
+  let hasCertificateError = false;
   promise.then((keycloakSettings: any) => {
     keycloakAuth.config = buildKeycloakConfig(keycloakSettings);
 
     // load Keycloak
     return keycloakLoad(keycloakSettings).then(() => {
       // init Keycloak
-      let theUseNonce: boolean;
+      let theUseNonce = false;
       if (typeof keycloakSettings['che.keycloak.use_nonce'] === 'string') {
         theUseNonce = keycloakSettings['che.keycloak.use_nonce'].toLowerCase() === 'true';
       }
-      let initOptions = {
+      const initOptions = {
         useNonce: theUseNonce,
         redirectUrl: keycloakSettings['che.keycloak.redirect_url.dashboard']
       };
       return keycloakInit(keycloakAuth.config, initOptions);
+    }).catch((error: any) => {
+      if (keycloakSettings['che.keycloak.js_adapter_url']) {
+        hasCertificateError = true;
+      }
+      return Promise.reject(error);
     }).then((keycloak: any) => {
       keycloakAuth.isPresent = true;
       keycloakAuth.keycloak = keycloak;
@@ -171,16 +194,24 @@ angular.element(document).ready(() => {
       /* tslint:enable */
     });
   }).catch((error: any) => {
+    if (hasCertificateError) {
+      return Promise.reject(error);
+    }
     console.error('Keycloak initialization failed with error: ', error);
   }).then(() => {
     const keycloak = (window as any)._keycloak;
     // try to reach the API
     // to check if user is authorized to do that
     return getApis(keycloak);
   }).then(() => {
-    (angular as any).resumeBootstrap();
+    cheBranding.ready.then(() => {
+      (angular as any).resumeBootstrap();
+    });
   }).catch((error: string) => {
     console.error(`Can't GET "/api". ${error ? 'Error: ' : ''}`, error);
+    if (!hasCertificateError) {
+      error = `${error}<div class="error-body">Click <a href="/">here</a> to reload page.</div>`
+    }
     showErrorMessage(error);
   });
 });
@@ -195,7 +226,7 @@ initModule.config(['$routeProvider', ($routeProvider: che.route.IRouteProvider)
     if (angular.isUndefined(route.resolve)) {
       route.resolve = {};
     }
-    (route.resolve as any).app = ['cheBranding', '$q', 'chePreferences', (cheBranding: CheBranding, $q: ng.IQService, chePreferences: ChePreferences) => {
+    (route.resolve as any).app = ['$q', 'chePreferences', ($q: ng.IQService, chePreferences: ChePreferences) => {
       const deferred = $q.defer();
       if (chePreferences.getPreferences()) {
         deferred.resolve();
@@ -280,11 +311,11 @@ initModule.run([
     routeHistory: RouteHistory,
     routingRedirect: RoutingRedirect,
   ) => {
-
     $rootScope.hideLoader = false;
     $rootScope.waitingLoaded = false;
     $rootScope.showIDE = false;
     $rootScope.hideNavbar = false;
+    $rootScope.branding = cheBranding.all;
 
     // here only to create instances of these components
     /* tslint:disable */

dashboard/src/app/index.styl

@@ -273,10 +273,46 @@ md-tabs-wrapper
   font-size 12px
   border-radius 2px
 
-.authorization-error
-  color: $error-color
+.keycloak-error
   font-weight: 600
-  width: 100%
-  text-align: center
+  border-radius: 2px
+  font-size: 16px
+  color: $black-color
+  background-color: $white-color
   position: absolute
   top: 50%
+  left: 25%;
+  width: 50%;
+  transform: translate(0, -50%)
+  .error-header
+    display inline-block
+    margin 0
+    padding 0
+    width 100%
+    height 40px
+    line-height 40px
+    text-align center
+    vertical-align middle
+    border-radius 2px 2px 0 0
+    color $white-color
+    background $error-color
+    span
+      font-size 22px
+      font-weight 600
+      color inherit
+    a
+      float right
+      width 40px
+      color inherit
+      font-size 20px
+      text-align center
+  .error-body
+    border-radius 0 0 2px 2px
+    text-align center
+    color $black-color
+    background-color $white-color
+    margin 15px
+    p
+      text-align left
+    a
+      color $link-color

dashboard/src/app/navbar/recent-workspaces/recent-workspaces.controller.spec.ts

@@ -10,11 +10,11 @@
  *   Red Hat, Inc. - initial API and implementation
  */
 'use strict';
-import {CheWorkspace} from '../../../components/api/workspace/che-workspace.factory';
-import {CheAPIBuilder} from '../../../components/api/builder/che-api-builder.factory';
-import {CheHttpBackend} from '../../../components/api/test/che-http-backend';
+import { CheWorkspace } from '../../../components/api/workspace/che-workspace.factory';
+import { CheAPIBuilder } from '../../../components/api/builder/che-api-builder.factory';
+import { CheHttpBackend } from '../../../components/api/test/che-http-backend';
 import IdeSvc from '../../ide/ide.service';
-import {CheBranding} from '../../../components/branding/che-branding.factory';
+import { CheBranding } from '../../../components/branding/che-branding';
 import { NavbarRecentWorkspacesController } from './recent-workspaces.controller';
 
 /**
@@ -59,7 +59,13 @@ describe('NavbarRecentWorkspacesController', () => {
 
     let scope = $rootScope.$new();
     navbarRecentWorkspacesController = $controller('NavbarRecentWorkspacesController', {
-      ideSvc: IdeSvc, cheWorkspace: cheWorkspace, cheBranding: cheBranding, $window: $window, $log: $log, $scope: scope, $rootScope: $rootScope
+      ideSvc: IdeSvc,
+      cheWorkspace: cheWorkspace,
+      cheBranding: cheBranding,
+      $window: $window,
+      $log: $log,
+      $scope: scope,
+      $rootScope: $rootScope
     });
 
     workspaces = [];
@@ -68,7 +74,10 @@ describe('NavbarRecentWorkspacesController', () => {
       let wrkspName = 'testName' + i;
       let wrkspCreateDate = new Date(2001, 1, 1, i, 1).toString();
       let wrkspUpdateDate = new Date(2001, 1, 1, i, 2).toString();
-      let wrkspAttr = <che.IWorkspaceAttributes>{'created': Date.parse(wrkspCreateDate), 'updated': Date.parse(wrkspUpdateDate)};
+      let wrkspAttr = <che.IWorkspaceAttributes>{
+        'created': Date.parse(wrkspCreateDate),
+        'updated': Date.parse(wrkspUpdateDate)
+      };
       let workspace = apiBuilder.getWorkspaceBuilder().withId(wrkspId).withAttributes(wrkspAttr).withName(wrkspName).build();
       workspaces.push(workspace);
     }
@@ -101,40 +110,40 @@ describe('NavbarRecentWorkspacesController', () => {
    * Check sorting rule for recent workspaces
    */
   it('Check very recent workspaces', inject(() => {
-      // get recentWorkspaces
-      let recentWorkspaces = navbarRecentWorkspacesController.getRecentWorkspaces();
-
-      // check max length
-      expect(recentWorkspaces.length).toEqual(navbarRecentWorkspacesController.maxItemsNumber);
-
-      // prepare test objects
-      let testWorkspaces: Array<che.IWorkspace> = angular.copy(workspaces);
-      testWorkspaces.sort((workspace1: che.IWorkspace, workspace2: che.IWorkspace) => {
-        return workspace2.attributes.updated - workspace1.attributes.updated;
-      });
-      let veryRecentWorkspaceId = testWorkspaces[testWorkspaces.length - 1].id;
-
-      // check default sorting
-      let lastPosition = recentWorkspaces.length - 1;
-      for (let i = 0; i < lastPosition; i++) {
-        expect(recentWorkspaces[i].id).toEqual(testWorkspaces[i].id);
-      }
-      // check the last one workspace is equal to the last test workspace and not equal to the very recent workspace,
-      // because we are going to update very recent workspace in controller and sorting rule should be changed
-      expect(recentWorkspaces[lastPosition].id).toEqual(testWorkspaces[lastPosition].id);
-      expect(recentWorkspaces[lastPosition].id).not.toEqual(veryRecentWorkspaceId);
-
-      // update very recent workspace
-      navbarRecentWorkspacesController.updateRecentWorkspace(veryRecentWorkspaceId);
-      recentWorkspaces = navbarRecentWorkspacesController.getRecentWorkspaces();
-
-      // check sorting with veryRecentWorkspace
-      for (let i = 0; i < lastPosition; i++) {
-        expect(recentWorkspaces[i].id).toEqual(testWorkspaces[i].id);
-      }
-      // check the last one workspace is equal to the very recent workspace and not equal to the last test workspace
-      expect(recentWorkspaces[lastPosition].id).not.toEqual(testWorkspaces[lastPosition].id);
-      expect(recentWorkspaces[lastPosition].id).toEqual(veryRecentWorkspaceId);
-    })
+    // get recentWorkspaces
+    let recentWorkspaces = navbarRecentWorkspacesController.getRecentWorkspaces();
+
+    // check max length
+    expect(recentWorkspaces.length).toEqual(navbarRecentWorkspacesController.maxItemsNumber);
+
+    // prepare test objects
+    let testWorkspaces: Array<che.IWorkspace> = angular.copy(workspaces);
+    testWorkspaces.sort((workspace1: che.IWorkspace, workspace2: che.IWorkspace) => {
+      return workspace2.attributes.updated - workspace1.attributes.updated;
+    });
+    let veryRecentWorkspaceId = testWorkspaces[testWorkspaces.length - 1].id;
+
+    // check default sorting
+    let lastPosition = recentWorkspaces.length - 1;
+    for (let i = 0; i < lastPosition; i++) {
+      expect(recentWorkspaces[i].id).toEqual(testWorkspaces[i].id);
+    }
+    // check the last one workspace is equal to the last test workspace and not equal to the very recent workspace,
+    // because we are going to update very recent workspace in controller and sorting rule should be changed
+    expect(recentWorkspaces[lastPosition].id).toEqual(testWorkspaces[lastPosition].id);
+    expect(recentWorkspaces[lastPosition].id).not.toEqual(veryRecentWorkspaceId);
+
+    // update very recent workspace
+    navbarRecentWorkspacesController.updateRecentWorkspace(veryRecentWorkspaceId);
+    recentWorkspaces = navbarRecentWorkspacesController.getRecentWorkspaces();
+
+    // check sorting with veryRecentWorkspace
+    for (let i = 0; i < lastPosition; i++) {
+      expect(recentWorkspaces[i].id).toEqual(testWorkspaces[i].id);
+    }
+    // check the last one workspace is equal to the very recent workspace and not equal to the last test workspace
+    expect(recentWorkspaces[lastPosition].id).not.toEqual(testWorkspaces[lastPosition].id);
+    expect(recentWorkspaces[lastPosition].id).toEqual(veryRecentWorkspaceId);
+  })
   );
 });

dashboard/src/app/navbar/recent-workspaces/recent-workspaces.controller.ts

@@ -12,7 +12,7 @@
 'use strict';
 import { CheWorkspace } from '../../../components/api/workspace/che-workspace.factory';
 import IdeSvc from '../../../app/ide/ide.service';
-import { CheBranding } from '../../../components/branding/che-branding.factory';
+import { CheBranding } from '../../../components/branding/che-branding';
 import { WorkspacesService } from '../../workspaces/workspaces.service';
 import { CheNotification } from '../../../components/notification/che-notification.factory';
 import { WorkspaceDetailsService } from '../../workspaces/workspace-details/workspace-details.service';