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             $('oauth-enroll-auth-view').focus();
  95           }).bind(this));
  96
  97       this.authenticator_.insecureContentBlockedCallback =
  98           (function(url) {
  99             this.showError(
 100                 loadTimeData.getStringF('insecureURLEnrollmentError', url),
 101                 false);
 102           }).bind(this);
 103
 104       this.authenticator_.missingGaiaInfoCallback =
 105           (function() {
 106             this.showError(
 107                 loadTimeData.getString('fatalEnrollmentError'),
 108                 false);
 109           }).bind(this);
 110
 111       $('oauth-enroll-error-card').addEventListener('buttonclick',
 112                                                     this.doRetry_.bind(this));
 113       function doneCallback() {
 114         chrome.send('oauthEnrollClose', ['done']);
 115       };
 116
 117       $('oauth-enroll-attribute-prompt-error-card').addEventListener(
 118           'buttonclick', doneCallback);
 119       $('oauth-enroll-success-card').addEventListener(
 120           'buttonclick', doneCallback);
 121
 122       $('oauth-enroll-cancel-button').addEventListener('click',
 123                                                        this.cancel.bind(this));
 124       $('oauth-enroll-refresh-button').addEventListener('click',
 125                                                         this.cancel.bind(this));
 126
 127       $('oauth-enroll-back-button').addEventListener('click',
 128           (function(e) {
 129             $('oauth-enroll-back-button').hidden = true;
 130             $('oauth-enroll-auth-view').back();
 131             e.preventDefault();
 132           }).bind(this));
 133
 134       $('oauth-enroll-attribute-prompt-card').addEventListener('submit',
 135           this.onAttributesSubmitted.bind(this));
 136
 137       $('oauth-enroll-learn-more-link').addEventListener('click',
 138           function(event) {
 139             chrome.send('oauthEnrollOnLearnMore');
 140           });
 141
 142       $('oauth-enroll-skip-button').addEventListener('click',
 143           this.onSkipButtonClicked.bind(this));
 144     },
 145
 146     /**
 147      * Header text of the screen.
 148      * @type {string}
 149      */
 150     get header() {
 151       return loadTimeData.getString('oauthEnrollScreenTitle');
 152     },
 153
 154     /**
 155      * Buttons in oobe wizard's button strip.
 156      * @type {array} Array of Buttons.
 157      */
 158     get buttons() {
 159       var buttons = [];
 160       var ownerDocument = this.ownerDocument;
 161
 162       function makeButton(id, classes, label, handler) {
 163         var button = ownerDocument.createElement('button');
 164         button.id = id;
 165         button.classList.add('oauth-enroll-button');
 166         button.classList.add.apply(button.classList, classes);
 167         button.textContent = label;
 168         button.addEventListener('click', handler);
 169         buttons.push(button);
 170       }
 171
 172       return buttons;
 173     },
 174
 175     /**
 176      * Event handler that is invoked just before the frame is shown.
 177      * @param {Object} data Screen init payload, contains the signin frame
 178      * URL.
 179      */
 180     onBeforeShow: function(data) {
 181       $('login-header-bar').signinUIState = SIGNIN_UI_STATE.ENROLLMENT;
 182       $('inner-container').classList.add('new-gaia-flow');
 183       var gaiaParams = {};
 184       gaiaParams.gaiaUrl = data.gaiaUrl;
 185       gaiaParams.gaiaPath = 'embedded/setup/chromeos';
 186       gaiaParams.isNewGaiaFlowChromeOS = true;
 187       gaiaParams.needPassword = false;
 188       if (data.management_domain) {
 189         gaiaParams.enterpriseDomain = data.management_domain;
 190         gaiaParams.emailDomain = data.management_domain;
 191       }
 192       gaiaParams.flow = data.flow;
 193       this.authenticator_.load(cr.login.Authenticator.AuthMode.DEFAULT,
 194                                gaiaParams);
 195
 196       var modes = ['manual', 'forced', 'recovery'];
 197       for (var i = 0; i < modes.length; ++i) {
 198         this.classList.toggle('mode-' + modes[i],
 199                               data.enrollment_mode == modes[i]);
 200       }
 201       this.isCancelDisabled = true;
 202       this.showStep(STEP_SIGNIN);
 203     },
 204
 205     onBeforeHide: function() {
 206       $('login-header-bar').signinUIState = SIGNIN_UI_STATE.HIDDEN;
 207     },
 208
 209     /**
 210      * Shows attribute-prompt step with pre-filled asset ID and
 211      * location.
 212      */
 213     showAttributePromptStep: function(annotated_asset_id, annotated_location) {
 214       $('oauth-enroll-asset-id').value = annotated_asset_id;
 215       $('oauth-enroll-location').value = annotated_location;
 216       $('oauth-enroll-back-button').hidden = true;
 217
 218       this.showStep(STEP_ATTRIBUTE_PROMPT);
 219     },
 220
 221     /**
 222      * Cancels enrollment and drops the user back to the login screen.
 223      */
 224     cancel: function() {
 225       if (this.isCancelDisabled)
 226         return;
 227       this.isCancelDisabled = true;
 228       chrome.send('oauthEnrollClose', ['cancel']);
 229     },
 230
 231     /**
 232      * Switches between the different steps in the enrollment flow.
 233      * @param {string} step the steps to show, one of "signin", "working",
 234      * "attribute-prompt", "error", "success".
 235      */
 236     showStep: function(step) {
 237       this.classList.toggle('oauth-enroll-state-' + this.currentStep_, false);
 238       this.classList.toggle('oauth-enroll-state-' + step, true);
 239
 240       var focusElements =
 241           this.querySelectorAll('.oauth-enroll-focus-on-' + step);
 242       for (var i = 0; i < focusElements.length; ++i) {
 243         if (getComputedStyle(focusElements[i])['display'] != 'none') {
 244           focusElements[i].focus();
 245           break;
 246         }
 247       }
 248       this.currentStep_ = step;
 249     },
 250
 251     /**
 252      * Sets an error message and switches to the error screen.
 253      * @param {string} message the error message.
 254      * @param {boolean} retry whether the retry link should be shown.
 255      */
 256     showError: function(message, retry) {
 257       if (this.currentStep_ == STEP_ATTRIBUTE_PROMPT) {
 258         $('oauth-enroll-attribute-prompt-error-card').textContent =
 259           message;
 260         this.showStep(STEP_ATTRIBUTE_PROMPT_ERROR);
 261         return;
 262       }
 263       $('oauth-enroll-error-card').textContent = message;
 264       $('oauth-enroll-error-card').buttonLabel =
 265           retry ? loadTimeData.getString('oauthEnrollRetry') : '';
 266       this.showStep(STEP_ERROR);
 267     },
 268
 269     doReload: function() {
 270       this.authenticator_.reload();
 271     },
 272
 273     /**
 274      * Retries the enrollment process after an error occurred in a previous
 275      * attempt. This goes to the C++ side through |chrome| first to clean up the
 276      * profile, so that the next attempt is performed with a clean state.
 277      */
 278     doRetry_: function() {
 279       chrome.send('oauthEnrollRetry');
 280     },
 281
 282     /**
 283      * Skips the device attribute update,
 284      * shows the successful enrollment step.
 285      */
 286     onSkipButtonClicked: function() {
 287       this.showStep(STEP_SUCCESS);
 288     },
 289
 290     /**
 291      * Uploads the device attributes to server. This goes to C++ side through
 292      * |chrome| and launches the device attribute update negotiation.
 293      */
 294     onAttributesSubmitted: function() {
 295       chrome.send('oauthEnrollAttributes',
 296                   [$('oauth-enroll-asset-id').value,
 297                    $('oauth-enroll-location').value]);
 298     }
 299   };
 300 });