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

   1 // Copyright 2015 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 login.createScreen('OAuthEnrollmentScreen', 'oauth-enrollment', function() {
   6   /** @const */ var STEP_SIGNIN = 'signin';
   7   /** @const */ var STEP_WORKING = 'working';
   8   /** @const */ var STEP_ATTRIBUTE_PROMPT = 'attribute-prompt';
   9   /** @const */ var STEP_ERROR = 'error';
  10   /** @const */ var STEP_SUCCESS = 'success';
  11
  12   /* TODO(dzhioev): define this step on C++ side.
  13   /** @const */ var STEP_ATTRIBUTE_PROMPT_ERROR = 'attribute-prompt-error';
  14
  15   /** @const */ var HELP_TOPIC_ENROLLMENT = 4631259;
  16
  17   return {
  18     EXTERNAL_API: [
  19       'showStep',
  20       'showError',
  21       'doReload',
  22       'showAttributePromptStep',
  23     ],
  24
  25     /**
  26      * Authenticator object that wraps GAIA webview.
  27      */
  28     authenticator_: null,
  29
  30     /**
  31      * The current step. This is the last value passed to showStep().
  32      */
  33     currentStep_: null,
  34
  35     /**
  36      * We block esc, back button and cancel button until gaia is loaded to
  37      * prevent multiple cancel events.
  38      */
  39     isCancelDisabled_: null,
  40
  41     get isCancelDisabled() { return this.isCancelDisabled_ },
  42     set isCancelDisabled(disabled) {
  43       if (disabled == this.isCancelDisabled)
  44         return;
  45       this.isCancelDisabled_ = disabled;
  46     },
  47
  48     /** @override */
  49     decorate: function() {
  50       var webview = document.createElement('webview');
  51       webview.id = webview.name = 'oauth-enroll-auth-view';
  52       webview.classList.toggle('oauth-enroll-focus-on-signin', true);
  53       $('oauth-enroll-auth-view-container').appendChild(webview);
  54       this.authenticator_ = new cr.login.Authenticator(webview);
  55
  56       this.authenticator_.addEventListener('ready',
  57           (function() {
  58             if (this.currentStep_ != STEP_SIGNIN)
  59               return;
  60             this.isCancelDisabled = false;
  61             chrome.send('frameLoadingCompleted', [0]);
  62           }).bind(this));
  63
  64       this.authenticator_.addEventListener('authCompleted',
  65           (function(e) {
  66             var detail = e.detail;
  67             if (!detail.email || !detail.authCode) {
  68               this.showError(
  69                   loadTimeData.getString('fatalEnrollmentError'),
  70                   false);
  71               return;
  72             }
  73             chrome.send('oauthEnrollCompleteLogin', [detail.email,
  74                                                      detail.authCode]);
  75           }).bind(this));
  76
  77       this.authenticator_.addEventListener('authFlowChange',
  78           (function(e) {
  79             var isSAML = this.authenticator_.authFlow ==
  80                              cr.login.Authenticator.AuthFlow.SAML;
  81             if (isSAML) {
  82               $('oauth-saml-notice-message').textContent =
  83                   loadTimeData.getStringF('samlNotice',
  84                                           this.authenticator_.authDomain);
  85             }
  86             this.classList.toggle('saml', isSAML);
  87             if (Oobe.getInstance().currentScreen == this)
  88               Oobe.getInstance().updateScreenSize(this);
  89           }).bind(this));
  90
  91       this.authenticator_.addEventListener('backButton',
  92           (function(e) {
  93             $('oauth-enroll-back-button').hidden = !e.detail;
  94           }).bind(this));
  95
  96       this.authenticator_.insecureContentBlockedCallback =
  97           (function(url) {
  98             this.showError(
  99                 loadTimeData.getStringF('insecureURLEnrollmentError', url),
 100                 false);
 101           }).bind(this);
 102
 103       this.authenticator_.missingGaiaInfoCallback =
 104           (function() {
 105             this.showError(
 106                 loadTimeData.getString('fatalEnrollmentError'),
 107                 false);
 108           }).bind(this);
 109
 110       $('oauth-enroll-error-card').addEventListener('buttonclick',
 111                                                     this.doRetry_.bind(this));
 112       function doneCallback() {
 113         chrome.send('oauthEnrollClose', ['done']);
 114       };
 115
 116       $('oauth-enroll-attribute-prompt-error-card').addEventListener(
 117           'buttonclick', doneCallback);
 118       $('oauth-enroll-success-card').addEventListener(
 119           'buttonclick', doneCallback);
 120
 121       $('oauth-enroll-cancel-button').addEventListener('click',
 122                                                        this.cancel.bind(this));
 123       $('oauth-enroll-refresh-button').addEventListener('click',
 124                                                         this.cancel.bind(this));
 125
 126       $('oauth-enroll-back-button').addEventListener('click',
 127           (function(e) {
 128             $('oauth-enroll-back-button').hidden = true;
 129             $('oauth-enroll-auth-view').back();
 130             e.preventDefault();
 131           }).bind(this));
 132
 133       $('oauth-enroll-attribute-prompt-card').addEventListener('submit',
 134           this.onAttributesSubmitted.bind(this));
 135
 136       $('oauth-enroll-learn-more-link').addEventListener('click',
 137           function(event) {
 138             chrome.send('oauthEnrollOnLearnMore');
 139           });
 140
 141       $('oauth-enroll-skip-button').addEventListener('click',
 142           this.onSkipButtonClicked.bind(this));
 143     },
 144
 145     /**
 146      * Header text of the screen.
 147      * @type {string}
 148      */
 149     get header() {
 150       return loadTimeData.getString('oauthEnrollScreenTitle');
 151     },
 152
 153     /**
 154      * Buttons in oobe wizard's button strip.
 155      * @type {array} Array of Buttons.
 156      */
 157     get buttons() {
 158       var buttons = [];
 159       var ownerDocument = this.ownerDocument;
 160
 161       function makeButton(id, classes, label, handler) {
 162         var button = ownerDocument.createElement('button');
 163         button.id = id;
 164         button.classList.add('oauth-enroll-button');
 165         button.classList.add.apply(button.classList, classes);
 166         button.textContent = label;
 167         button.addEventListener('click', handler);
 168         buttons.push(button);
 169       }
 170
 171       return buttons;
 172     },
 173
 174     /**
 175      * Event handler that is invoked just before the frame is shown.
 176      * @param {Object} data Screen init payload, contains the signin frame
 177      * URL.
 178      */
 179     onBeforeShow: function(data) {
 180       $('login-header-bar').signinUIState = SIGNIN_UI_STATE.ENROLLMENT;
 181       $('inner-container').classList.add('new-gaia-flow');
 182       var gaiaParams = {};
 183       gaiaParams.gaiaUrl = data.gaiaUrl;
 184       gaiaParams.gaiaPath = 'embedded/setup/chromeos';
 185       gaiaParams.isNewGaiaFlowChromeOS = true;
 186       gaiaParams.needPassword = false;
 187       if (data.management_domain) {
 188         gaiaParams.enterpriseDomain = data.management_domain;
 189         gaiaParams.emailDomain = data.management_domain;
 190       }
 191       gaiaParams.flow = data.flow;
 192       this.authenticator_.load(cr.login.Authenticator.AuthMode.DEFAULT,
 193                                gaiaParams);
 194
 195       var modes = ['manual', 'forced', 'recovery'];
 196       for (var i = 0; i < modes.length; ++i) {
 197         this.classList.toggle('mode-' + modes[i],
 198                               data.enrollment_mode == modes[i]);
 199       }
 200       this.isCancelDisabled = true;
 201       this.showStep(STEP_SIGNIN);
 202     },
 203
 204     onBeforeHide: function() {
 205       $('login-header-bar').signinUIState = SIGNIN_UI_STATE.HIDDEN;
 206     },
 207
 208     /**
 209      * Shows attribute-prompt step with pre-filled asset ID and
 210      * location.
 211      */
 212     showAttributePromptStep: function(annotated_asset_id, annotated_location) {
 213       $('oauth-enroll-asset-id').value = annotated_asset_id;
 214       $('oauth-enroll-location').value = annotated_location;
 215       $('oauth-enroll-back-button').hidden = true;
 216
 217       this.showStep(STEP_ATTRIBUTE_PROMPT);
 218     },
 219
 220     /**
 221      * Cancels enrollment and drops the user back to the login screen.
 222      */
 223     cancel: function() {
 224       if (this.isCancelDisabled)
 225         return;
 226       this.isCancelDisabled = true;
 227       chrome.send('oauthEnrollClose', ['cancel']);
 228     },
 229
 230     /**
 231      * Switches between the different steps in the enrollment flow.
 232      * @param {string} step the steps to show, one of "signin", "working",
 233      * "attribute-prompt", "error", "success".
 234      */
 235     showStep: function(step) {
 236       this.classList.toggle('oauth-enroll-state-' + this.currentStep_, false);
 237       this.classList.toggle('oauth-enroll-state-' + step, true);
 238
 239       var focusElements =
 240           this.querySelectorAll('.oauth-enroll-focus-on-' + step);
 241       for (var i = 0; i < focusElements.length; ++i) {
 242         if (getComputedStyle(focusElements[i])['display'] != 'none') {
 243           focusElements[i].focus();
 244           break;
 245         }
 246       }
 247       this.currentStep_ = step;
 248     },
 249
 250     /**
 251      * Sets an error message and switches to the error screen.
 252      * @param {string} message the error message.
 253      * @param {boolean} retry whether the retry link should be shown.
 254      */
 255     showError: function(message, retry) {
 256       if (this.currentStep_ == STEP_ATTRIBUTE_PROMPT) {
 257         $('oauth-enroll-attribute-prompt-error-card').textContent =
 258           message;
 259         this.showStep(STEP_ATTRIBUTE_PROMPT_ERROR);
 260         return;
 261       }
 262       $('oauth-enroll-error-card').textContent = message;
 263       $('oauth-enroll-error-card').buttonLabel =
 264           retry ? loadTimeData.getString('oauthEnrollRetry') : '';
 265       this.showStep(STEP_ERROR);
 266     },
 267
 268     doReload: function() {
 269       this.authenticator_.reload();
 270     },
 271
 272     /**
 273      * Retries the enrollment process after an error occurred in a previous
 274      * attempt. This goes to the C++ side through |chrome| first to clean up the
 275      * profile, so that the next attempt is performed with a clean state.
 276      */
 277     doRetry_: function() {
 278       chrome.send('oauthEnrollRetry');
 279     },
 280
 281     /**
 282      * Skips the device attribute update,
 283      * shows the successful enrollment step.
 284      */
 285     onSkipButtonClicked: function() {
 286       this.showStep(STEP_SUCCESS);
 287     },
 288
 289     /**
 290      * Uploads the device attributes to server. This goes to C++ side through
 291      * |chrome| and launches the device attribute update negotiation.
 292      */
 293     onAttributesSubmitted: function() {
 294       chrome.send('oauthEnrollAttributes',
 295                   [$('oauth-enroll-asset-id').value,
 296                    $('oauth-enroll-location').value]);
 297     }
 298   };
 299 });