chrome/browser/resources/chromeos/login/screen_error_message.js

   1 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 /**
   6  * @fileoverview Offline message screen implementation.
   7  */
   8
   9 login.createScreen('ErrorMessageScreen', 'error-message', function() {
  10   var CONTEXT_KEY_ERROR_STATE_CODE = 'error-state-code';
  11   var CONTEXT_KEY_ERROR_STATE_NETWORK = 'error-state-network';
  12   var CONTEXT_KEY_GUEST_SIGNIN_ALLOWED = 'guest-signin-allowed';
  13   var CONTEXT_KEY_OFFLINE_SIGNIN_ALLOWED = 'offline-signin-allowed';
  14   var CONTEXT_KEY_SHOW_CONNECTING_INDICATOR = 'show-connecting-indicator';
  15   var CONTEXT_KEY_UI_STATE = 'ui-state';
  16
  17   var USER_ACTION_CONFIGURE_CERTS = 'configure-certs';
  18   var USER_ACTION_DIAGNOSE = 'diagnose';
  19   var USER_ACTION_LAUNCH_OOBE_GUEST = 'launch-oobe-guest';
  20   var USER_ACTION_LOCAL_STATE_POWERWASH = 'local-state-error-powerwash';
  21   var USER_ACTION_REBOOT = 'reboot';
  22   var USER_ACTION_SHOW_CAPTIVE_PORTAL = 'show-captive-portal';
  23
  24   // Link which starts guest session for captive portal fixing.
  25   /** @const */ var FIX_CAPTIVE_PORTAL_ID = 'captive-portal-fix-link';
  26
  27   /** @const */ var FIX_PROXY_SETTINGS_ID = 'proxy-settings-fix-link';
  28
  29   // Class of the elements which hold current network name.
  30   /** @const */ var CURRENT_NETWORK_NAME_CLASS =
  31       'portal-network-name';
  32
  33   // Link which triggers frame reload.
  34   /** @const */ var RELOAD_PAGE_ID = 'proxy-error-signin-retry-link';
  35
  36   // Array of the possible UI states of the screen. Must be in the
  37   // same order as ErrorScreen::UIState enum values.
  38   /** @const */ var UI_STATES = [
  39     ERROR_SCREEN_UI_STATE.UNKNOWN,
  40     ERROR_SCREEN_UI_STATE.UPDATE,
  41     ERROR_SCREEN_UI_STATE.SIGNIN,
  42     ERROR_SCREEN_UI_STATE.SUPERVISED_USER_CREATION_FLOW,
  43     ERROR_SCREEN_UI_STATE.KIOSK_MODE,
  44     ERROR_SCREEN_UI_STATE.LOCAL_STATE_ERROR,
  45     ERROR_SCREEN_UI_STATE.AUTO_ENROLLMENT_ERROR,
  46     ERROR_SCREEN_UI_STATE.ROLLBACK_ERROR,
  47   ];
  48
  49   // The help topic linked from the auto enrollment error message.
  50   /** @const */ var HELP_TOPIC_AUTO_ENROLLMENT = 4632009;
  51
  52   // Possible error states of the screen.
  53   /** @const */ var ERROR_STATE = {
  54     UNKNOWN: 'error-state-unknown',
  55     PORTAL: 'error-state-portal',
  56     OFFLINE: 'error-state-offline',
  57     PROXY: 'error-state-proxy',
  58     AUTH_EXT_TIMEOUT: 'error-state-auth-ext-timeout',
  59     KIOSK_ONLINE: 'error-state-kiosk-online'
  60   };
  61
  62   // Possible error states of the screen. Must be in the same order as
  63   // ErrorScreen::ErrorState enum values.
  64   /** @const */ var ERROR_STATES = [
  65     ERROR_STATE.UNKNOWN,
  66     ERROR_STATE.PORTAL,
  67     ERROR_STATE.OFFLINE,
  68     ERROR_STATE.PROXY,
  69     ERROR_STATE.AUTH_EXT_TIMEOUT,
  70     ERROR_STATE.NONE,
  71     ERROR_STATE.KIOSK_ONLINE,
  72   ];
  73
  74   return {
  75     EXTERNAL_API: [
  76       'updateLocalizedContent',
  77       'onBeforeShow',
  78       'onBeforeHide',
  79       'allowGuestSignin',
  80       'allowOfflineLogin',
  81       'setUIState',
  82       'setErrorState',
  83       'showConnectingIndicator'
  84     ],
  85
  86     // Error screen initial UI state.
  87     ui_state_: ERROR_SCREEN_UI_STATE.UNKNOWN,
  88
  89     // Error screen initial error state.
  90     error_state_: ERROR_STATE.UNKNOWN,
  91
  92     /** @override */
  93     decorate: function() {
  94       cr.ui.DropDown.decorate($('offline-networks-list'));
  95       this.updateLocalizedContent();
  96
  97       var self = this;
  98       this.context.addObserver(CONTEXT_KEY_ERROR_STATE_CODE,
  99                                function(error_state) {
 100         self.setErrorState(error_state);
 101       });
 102       this.context.addObserver(CONTEXT_KEY_ERROR_STATE_NETWORK,
 103                                function(network) {
 104         self.setNetwork_(network);
 105       });
 106       this.context.addObserver(CONTEXT_KEY_GUEST_SIGNIN_ALLOWED,
 107                                function(allowed) {
 108         self.allowGuestSignin(allowed);
 109       });
 110       this.context.addObserver(CONTEXT_KEY_OFFLINE_SIGNIN_ALLOWED,
 111                                function(allowed) {
 112         self.allowOfflineLogin(allowed);
 113       });
 114       this.context.addObserver(CONTEXT_KEY_SHOW_CONNECTING_INDICATOR,
 115                                function(show) {
 116         self.showConnectingIndicator(show);
 117       });
 118       this.context.addObserver(CONTEXT_KEY_UI_STATE, function(ui_state) {
 119         self.setUIState(ui_state);
 120       });
 121     },
 122
 123     /**
 124      * Updates localized content of the screen that is not updated via template.
 125      */
 126     updateLocalizedContent: function() {
 127       var self = this;
 128       $('auto-enrollment-offline-message-text').innerHTML =
 129           loadTimeData.getStringF(
 130               'autoEnrollmentOfflineMessageBody',
 131               '<b class="' + CURRENT_NETWORK_NAME_CLASS + '"></b>',
 132               '<a id="auto-enrollment-learn-more" class="signin-link" ' +
 133                   '"href="#">',
 134               '</a>');
 135       $('auto-enrollment-learn-more').onclick = function() {
 136         chrome.send('launchHelpApp', [HELP_TOPIC_AUTO_ENROLLMENT]);
 137       };
 138
 139       $('captive-portal-message-text').innerHTML = loadTimeData.getStringF(
 140         'captivePortalMessage',
 141         '<b class="' + CURRENT_NETWORK_NAME_CLASS + '"></b>',
 142         '<a id="' + FIX_CAPTIVE_PORTAL_ID + '" class="signin-link" href="#">',
 143         '</a>');
 144       $(FIX_CAPTIVE_PORTAL_ID).onclick = function() {
 145         self.send(login.Screen.CALLBACK_USER_ACTED,
 146                   USER_ACTION_SHOW_CAPTIVE_PORTAL);
 147       };
 148
 149       $('captive-portal-proxy-message-text').innerHTML =
 150         loadTimeData.getStringF(
 151           'captivePortalProxyMessage',
 152           '<a id="' + FIX_PROXY_SETTINGS_ID + '" class="signin-link" href="#">',
 153           '</a>');
 154       $(FIX_PROXY_SETTINGS_ID).onclick = function() {
 155         chrome.send('openProxySettings');
 156       };
 157       $('update-proxy-message-text').innerHTML = loadTimeData.getStringF(
 158           'updateProxyMessageText',
 159           '<a id="update-proxy-error-fix-proxy" class="signin-link" href="#">',
 160           '</a>');
 161       $('update-proxy-error-fix-proxy').onclick = function() {
 162         chrome.send('openProxySettings');
 163       };
 164       $('signin-proxy-message-text').innerHTML = loadTimeData.getStringF(
 165           'signinProxyMessageText',
 166           '<a id="' + RELOAD_PAGE_ID + '" class="signin-link" href="#">',
 167           '</a>',
 168           '<a id="signin-proxy-error-fix-proxy" class="signin-link" href="#">',
 169           '</a>');
 170       $(RELOAD_PAGE_ID).onclick = function() {
 171         var gaiaScreen = $(SCREEN_GAIA_SIGNIN);
 172         // Schedules an immediate retry.
 173         gaiaScreen.doReload();
 174       };
 175       $('signin-proxy-error-fix-proxy').onclick = function() {
 176         chrome.send('openProxySettings');
 177       };
 178
 179       $('error-guest-signin').innerHTML = loadTimeData.getStringF(
 180           'guestSignin',
 181           '<a id="error-guest-signin-link" class="signin-link" href="#">',
 182           '</a>');
 183       $('error-guest-signin-link').addEventListener(
 184           'click',
 185           this.launchGuestSession_.bind(this));
 186
 187       $('error-guest-signin-fix-network').innerHTML = loadTimeData.getStringF(
 188           'guestSigninFixNetwork',
 189           '<a id="error-guest-fix-network-signin-link" class="signin-link" ' +
 190               'href="#">',
 191           '</a>');
 192       $('error-guest-fix-network-signin-link').addEventListener(
 193           'click',
 194           this.launchGuestSession_.bind(this));
 195
 196       $('error-offline-login').innerHTML = loadTimeData.getStringF(
 197           'offlineLogin',
 198           '<a id="error-offline-login-link" class="signin-link" href="#">',
 199           '</a>');
 200       $('error-offline-login-link').onclick = function() {
 201         chrome.send('offlineLogin');
 202       };
 203
 204       var ellipsis = '';
 205       for (var i = 1; i <= 3; ++i) {
 206         ellipsis +=
 207             '<span id="connecting-indicator-ellipsis-' + i + '"></span>';
 208       }
 209       $('connecting-indicator').innerHTML =
 210           loadTimeData.getStringF('connectingIndicatorText', ellipsis);
 211
 212       this.onContentChange_();
 213     },
 214
 215     /**
 216      * Event handler that is invoked just before the screen in shown.
 217      * @param {Object} data Screen init payload.
 218      */
 219     onBeforeShow: function(data) {
 220       cr.ui.Oobe.clearErrors();
 221       cr.ui.DropDown.show('offline-networks-list', false);
 222     },
 223
 224     /**
 225      * Event handler that is invoked just before the screen is hidden.
 226      */
 227     onBeforeHide: function() {
 228       cr.ui.DropDown.hide('offline-networks-list');
 229     },
 230
 231     /**
 232      * Buttons in oobe wizard's button strip.
 233      * @type {array} Array of Buttons.
 234      */
 235     get buttons() {
 236       var buttons = [];
 237       var self = this;
 238
 239       var rebootButton = this.ownerDocument.createElement('button');
 240       rebootButton.textContent = loadTimeData.getString('rebootButton');
 241       rebootButton.classList.add('show-with-ui-state-kiosk-mode');
 242       rebootButton.addEventListener('click', function(e) {
 243         self.send(login.Screen.CALLBACK_USER_ACTED, USER_ACTION_REBOOT);
 244         e.stopPropagation();
 245       });
 246       buttons.push(rebootButton);
 247
 248       var diagnoseButton = this.ownerDocument.createElement('button');
 249       diagnoseButton.textContent = loadTimeData.getString('diagnoseButton');
 250       diagnoseButton.classList.add('show-with-ui-state-kiosk-mode');
 251       diagnoseButton.addEventListener('click', function(e) {
 252         self.send(login.Screen.CALLBACK_USER_ACTED, USER_ACTION_DIAGNOSE);
 253         e.stopPropagation();
 254       });
 255       buttons.push(diagnoseButton);
 256
 257       var certsButton = this.ownerDocument.createElement('button');
 258       certsButton.textContent = loadTimeData.getString('configureCertsButton');
 259       certsButton.classList.add('show-with-ui-state-kiosk-mode');
 260       certsButton.addEventListener('click', function(e) {
 261         self.send(login.Screen.CALLBACK_USER_ACTED,
 262                   USER_ACTION_CONFIGURE_CERTS);
 263         e.stopPropagation();
 264       });
 265       buttons.push(certsButton);
 266
 267       var continueButton = this.ownerDocument.createElement('button');
 268       continueButton.id = 'continue-network-config-btn';
 269       continueButton.textContent = loadTimeData.getString('continueButton');
 270       continueButton.classList.add('show-with-error-state-kiosk-online');
 271       continueButton.addEventListener('click', function(e) {
 272         chrome.send('continueAppLaunch');
 273         e.stopPropagation();
 274       });
 275       buttons.push(continueButton);
 276
 277       var okButton = this.ownerDocument.createElement('button');
 278       okButton.id = 'ok-error-screen-btn';
 279       okButton.textContent = loadTimeData.getString('okButton');
 280       okButton.classList.add('show-with-ui-state-rollback-error');
 281       okButton.addEventListener('click', function(e) {
 282         chrome.send('cancelOnReset');
 283         e.stopPropagation();
 284       });
 285       buttons.push(okButton);
 286
 287       var spacer = this.ownerDocument.createElement('div');
 288       spacer.classList.add('button-spacer');
 289       spacer.classList.add('show-with-ui-state-kiosk-mode');
 290       buttons.push(spacer);
 291
 292       var powerwashButton = this.ownerDocument.createElement('button');
 293       powerwashButton.id = 'error-message-restart-and-powerwash-button';
 294       powerwashButton.textContent =
 295         loadTimeData.getString('localStateErrorPowerwashButton');
 296       powerwashButton.classList.add('show-with-ui-state-local-state-error');
 297       powerwashButton.addEventListener('click', function(e) {
 298         self.send(login.Screen.CALLBACK_USER_ACTED,
 299                   USER_ACTION_LOCAL_STATE_POWERWASH);
 300         e.stopPropagation();
 301       });
 302       buttons.push(powerwashButton);
 303
 304       return buttons;
 305     },
 306
 307     /**
 308       * Sets current UI state of the screen.
 309       * @param {string} ui_state New UI state of the screen.
 310       * @private
 311       */
 312     setUIState_: function(ui_state) {
 313       this.classList.remove(this.ui_state);
 314       this.ui_state = ui_state;
 315       this.classList.add(this.ui_state);
 316
 317       if (ui_state == ERROR_SCREEN_UI_STATE.LOCAL_STATE_ERROR) {
 318         // Hide header bar and progress dots, because there are no way
 319         // from the error screen about broken local state.
 320         Oobe.getInstance().headerHidden = true;
 321         $('progress-dots').hidden = true;
 322       }
 323       this.onContentChange_();
 324     },
 325
 326     /**
 327       * Sets current error state of the screen.
 328       * @param {string} error_state New error state of the screen.
 329       * @private
 330       */
 331     setErrorState_: function(error_state) {
 332       this.classList.remove(this.error_state);
 333       this.error_state = error_state;
 334       this.classList.add(this.error_state);
 335       this.onContentChange_();
 336     },
 337
 338     /**
 339      * Sets network.
 340      * @param {string} network Name of the current network
 341      * @private
 342      */
 343     setNetwork_: function(network) {
 344       var networkNameElems =
 345           document.getElementsByClassName(CURRENT_NETWORK_NAME_CLASS);
 346       for (var i = 0; i < networkNameElems.length; ++i)
 347         networkNameElems[i].textContent = network;
 348       this.onContentChange_();
 349     },
 350
 351     /* Method called after content of the screen changed.
 352      * @private
 353      */
 354     onContentChange_: function() {
 355       if (Oobe.getInstance().currentScreen === this)
 356         Oobe.getInstance().updateScreenSize(this);
 357     },
 358
 359     /**
 360      * Event handler for guest session launch.
 361      * @private
 362      */
 363     launchGuestSession_: function() {
 364       if (Oobe.getInstance().isOobeUI()) {
 365         this.send(login.Screen.CALLBACK_USER_ACTED,
 366                   USER_ACTION_LAUNCH_OOBE_GUEST);
 367       } else {
 368         chrome.send('launchIncognito');
 369       }
 370     },
 371
 372     /**
 373      * Prepares error screen to show guest signin link.
 374      * @private
 375      */
 376     allowGuestSignin: function(allowed) {
 377       this.classList.toggle('allow-guest-signin', allowed);
 378       this.onContentChange_();
 379     },
 380
 381     /**
 382      * Prepares error screen to show offline login link.
 383      * @private
 384      */
 385     allowOfflineLogin: function(allowed) {
 386       this.classList.toggle('allow-offline-login', allowed);
 387       this.onContentChange_();
 388     },
 389
 390     /**
 391       * Sets current UI state of the screen.
 392       * @param {number} ui_state New UI state of the screen.
 393       * @private
 394       */
 395     setUIState: function(ui_state) {
 396       this.setUIState_(UI_STATES[ui_state]);
 397     },
 398
 399     /**
 400       * Sets current error state of the screen.
 401       * @param {number} error_state New error state of the screen.
 402       * @private
 403       */
 404     setErrorState: function(error_state) {
 405       this.setErrorState_(ERROR_STATES[error_state]);
 406     },
 407
 408     /**
 409      * Updates visibility of the label indicating we're reconnecting.
 410      * @param {boolean} show Whether the label should be shown.
 411      */
 412     showConnectingIndicator: function(show) {
 413       this.classList.toggle('show-connecting-indicator', show);
 414       this.onContentChange_();
 415     }
 416   };
 417 });