| OLD | NEW |
| (Empty) |
| 1 // Copyright (c) 2011 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 cr.define('options', function() { | |
| 6 const OptionsPage = options.OptionsPage; | |
| 7 | |
| 8 // Variable to track if a captcha challenge was issued. If this gets set to | |
| 9 // true, it stays that way until we are told about successful login from | |
| 10 // the browser. This means subsequent errors (like invalid password) are | |
| 11 // rendered in the captcha state, which is basically identical except we | |
| 12 // don't show the top error blurb "Error Signing in" or the "Create | |
| 13 // account" link. | |
| 14 var captchaChallengeActive_ = false; | |
| 15 | |
| 16 // True if the synced account uses a custom passphrase. | |
| 17 var usePassphrase_ = false; | |
| 18 | |
| 19 /** | |
| 20 * SyncSetupOverlay class | |
| 21 * Encapsulated handling of the 'Sync Setup' overlay page. | |
| 22 * @class | |
| 23 */ | |
| 24 function SyncSetupOverlay() { | |
| 25 OptionsPage.call(this, 'syncSetup', | |
| 26 templateData.syncSetupOverlayTitle, | |
| 27 'sync-setup-overlay'); | |
| 28 } | |
| 29 | |
| 30 cr.addSingletonGetter(SyncSetupOverlay); | |
| 31 | |
| 32 SyncSetupOverlay.prototype = { | |
| 33 __proto__: OptionsPage.prototype, | |
| 34 | |
| 35 /** | |
| 36 * Initializes the page. | |
| 37 */ | |
| 38 initializePage: function() { | |
| 39 OptionsPage.prototype.initializePage.call(this); | |
| 40 | |
| 41 var acct_text = $('gaia-account-text'); | |
| 42 var translated_text = acct_text.textContent; | |
| 43 var posGoogle = translated_text.indexOf('Google'); | |
| 44 if (posGoogle != -1) { | |
| 45 var ltr = templateData['textdirection'] == 'ltr'; | |
| 46 var googleIsAtEndOfSentence = posGoogle != 0; | |
| 47 if (googleIsAtEndOfSentence == ltr) { | |
| 48 // We're in ltr and in the translation the word 'Google' is AFTER the | |
| 49 // word 'Account' OR we're in rtl and 'Google' is BEFORE 'Account'. | |
| 50 var logo_td = $('gaia-logo'); | |
| 51 logo_td.parentNode.appendChild(logo_td); | |
| 52 } | |
| 53 acct_text.textContent = translated_text.replace('Google',''); | |
| 54 } | |
| 55 | |
| 56 var self = this; | |
| 57 $('gaia-login-form').onsubmit = function() { | |
| 58 self.sendCredentialsAndClose_(); | |
| 59 return false; | |
| 60 }; | |
| 61 $('google-option').onchange = $('explicit-option').onchange = function() { | |
| 62 self.onPassphraseRadioChanged_(); | |
| 63 }; | |
| 64 $('choose-datatypes-cancel').onclick = | |
| 65 $('sync-setup-cancel').onclick = | |
| 66 $('confirm-everything-cancel').onclick = | |
| 67 $('stop-syncing-cancel').onclick = function() { | |
| 68 self.closeOverlay_(); | |
| 69 }; | |
| 70 $('confirm-everything-ok').onclick = function() { | |
| 71 self.sendConfiguration_(); | |
| 72 }; | |
| 73 $('stop-syncing-ok').onclick = function() { | |
| 74 chrome.send('stopSyncing'); | |
| 75 self.closeOverlay_(); | |
| 76 }; | |
| 77 }, | |
| 78 | |
| 79 showOverlay_: function() { | |
| 80 OptionsPage.navigateToPage('syncSetup'); | |
| 81 }, | |
| 82 | |
| 83 closeOverlay_: function() { | |
| 84 OptionsPage.closeOverlay(); | |
| 85 }, | |
| 86 | |
| 87 /** @inheritDoc */ | |
| 88 didShowPage: function() { | |
| 89 chrome.send('SyncSetupAttachHandler'); | |
| 90 }, | |
| 91 | |
| 92 /** @inheritDoc */ | |
| 93 didClosePage: function() { | |
| 94 chrome.send('SyncSetupDidClosePage'); | |
| 95 }, | |
| 96 | |
| 97 sendPassphraseAndClose_: function() { | |
| 98 var f = $('choose-data-types-form'); | |
| 99 var result = JSON.stringify({"passphrase": f.passphrase.value}); | |
| 100 chrome.send('SyncSetupPassphrase', [result]); | |
| 101 return false; | |
| 102 }, | |
| 103 | |
| 104 getEncryptionRadioCheckedValue_: function() { | |
| 105 var f = $('choose-data-types-form'); | |
| 106 for (var i = 0; i < f.encrypt.length; ++i) { | |
| 107 if (f.encrypt[i].checked) { | |
| 108 return f.encrypt[i].value; | |
| 109 } | |
| 110 } | |
| 111 | |
| 112 return undefined; | |
| 113 }, | |
| 114 | |
| 115 getPassphraseRadioCheckedValue_: function() { | |
| 116 var f = $('choose-data-types-form'); | |
| 117 for (var i = 0; i < f.option.length; ++i) { | |
| 118 if (f.option[i].checked) { | |
| 119 return f.option[i].value; | |
| 120 } | |
| 121 } | |
| 122 | |
| 123 return undefined; | |
| 124 }, | |
| 125 | |
| 126 disableEncryptionRadioGroup_: function() { | |
| 127 var f = $('choose-data-types-form'); | |
| 128 for (var i = 0; i < f.encrypt.length; ++i) | |
| 129 f.encrypt[i].disabled = true; | |
| 130 }, | |
| 131 | |
| 132 onPassphraseRadioChanged_: function() { | |
| 133 var visible = this.getPassphraseRadioCheckedValue_() == "explicit"; | |
| 134 $('sync-custom-passphrase').hidden = !visible; | |
| 135 }, | |
| 136 | |
| 137 checkAllDataTypeCheckboxes_: function() { | |
| 138 var checkboxes = document.getElementsByName("dataTypeCheckbox"); | |
| 139 for (var i = 0; i < checkboxes.length; i++) { | |
| 140 // Only check the visible ones (since there's no way to uncheck | |
| 141 // the invisible ones). | |
| 142 if (checkboxes[i].parentElement.className == "sync-item-show") { | |
| 143 checkboxes[i].checked = true; | |
| 144 } | |
| 145 } | |
| 146 }, | |
| 147 | |
| 148 setDataTypeCheckboxesEnabled_: function(enabled) { | |
| 149 var checkboxes = document.getElementsByName("dataTypeCheckbox"); | |
| 150 var labels = document.getElementsByName("dataTypeLabel"); | |
| 151 for (var i = 0; i < checkboxes.length; i++) { | |
| 152 checkboxes[i].disabled = !enabled; | |
| 153 if (checkboxes[i].disabled) { | |
| 154 labels[i].className = "sync-label-inactive"; | |
| 155 } else { | |
| 156 labels[i].className = "sync-label-active"; | |
| 157 } | |
| 158 } | |
| 159 }, | |
| 160 | |
| 161 setCheckboxesToKeepEverythingSynced_: function(value) { | |
| 162 this.setDataTypeCheckboxesEnabled_(!value); | |
| 163 if (value) | |
| 164 this.checkAllDataTypeCheckboxes_(); | |
| 165 }, | |
| 166 | |
| 167 // Returns true if at least one data type is enabled and no data types are | |
| 168 // checked. (If all data type checkboxes are disabled, it's because "keep | |
| 169 // everything synced" is checked.) | |
| 170 noDataTypesChecked_: function() { | |
| 171 var checkboxes = document.getElementsByName("dataTypeCheckbox"); | |
| 172 var atLeastOneChecked = false; | |
| 173 var atLeastOneEnabled = false; | |
| 174 for (var i = 0; i < checkboxes.length; i++) { | |
| 175 if (!checkboxes[i].disabled && | |
| 176 checkboxes[i].parentElement.className == "sync-item-show") { | |
| 177 atLeastOneEnabled = true; | |
| 178 if (checkboxes[i].checked) { | |
| 179 atLeastOneChecked = true; | |
| 180 } | |
| 181 } | |
| 182 } | |
| 183 | |
| 184 return atLeastOneEnabled && !atLeastOneChecked; | |
| 185 }, | |
| 186 | |
| 187 checkPassphraseMatch_: function() { | |
| 188 var emptyError = $('empty-error'); | |
| 189 var mismatchError = $('mismatch-error'); | |
| 190 emptyError.hidden = true; | |
| 191 mismatchError.hidden = true; | |
| 192 | |
| 193 var f = $('choose-data-types-form'); | |
| 194 if (this.getPassphraseRadioCheckedValue_() != "explicit" || | |
| 195 f.option[0].disabled) | |
| 196 return true; | |
| 197 | |
| 198 var customPassphrase = $('custom-passphrase'); | |
| 199 if (customPassphrase.value.length == 0) { | |
| 200 emptyError.hidden = false; | |
| 201 return false; | |
| 202 } | |
| 203 | |
| 204 var confirmPassphrase = $('confirm-passphrase'); | |
| 205 if (confirmPassphrase.value != customPassphrase.value) { | |
| 206 mismatchError.hidden = false; | |
| 207 return false; | |
| 208 } | |
| 209 | |
| 210 return true; | |
| 211 }, | |
| 212 | |
| 213 sendConfiguration_: function() { | |
| 214 // Trying to submit, so hide previous errors. | |
| 215 $('aborted-text').hidden = true; | |
| 216 $('error-text').hidden = true; | |
| 217 | |
| 218 if (this.noDataTypesChecked_()) { | |
| 219 $('error-text').hidden = false; | |
| 220 return; | |
| 221 } | |
| 222 | |
| 223 var f = $('choose-data-types-form'); | |
| 224 if (!this.checkPassphraseMatch_()) | |
| 225 return; | |
| 226 | |
| 227 // Don't allow the user to tweak the settings once we send the | |
| 228 // configuration to the backend. | |
| 229 this.setInputElementsDisabledState_(true); | |
| 230 | |
| 231 var syncAll = | |
| 232 document.getElementById('sync-select-datatypes').selectedIndex == 0; | |
| 233 var usePassphrase = this.getPassphraseRadioCheckedValue_() == 'explicit'; | |
| 234 var encryptAllData = this.getEncryptionRadioCheckedValue_() == 'all'; | |
| 235 | |
| 236 // These values need to be kept in sync with where they are read in | |
| 237 // SyncSetupFlow::GetDataTypeChoiceData(). | |
| 238 var result = JSON.stringify({ | |
| 239 "keepEverythingSynced": syncAll, | |
| 240 "syncBookmarks": syncAll || $('bookmarks-checkbox').checked, | |
| 241 "syncPreferences": syncAll || $('preferences-checkbox').checked, | |
| 242 "syncThemes": syncAll || $('themes-checkbox').checked, | |
| 243 "syncPasswords": syncAll || $('passwords-checkbox').checked, | |
| 244 "syncAutofill": syncAll || $('autofill-checkbox').checked, | |
| 245 "syncExtensions": syncAll || $('extensions-checkbox').checked, | |
| 246 "syncTypedUrls": syncAll || $('typed-urls-checkbox').checked, | |
| 247 "syncApps": syncAll || $('apps-checkbox').checked, | |
| 248 "syncSessions": syncAll || $('sessions-checkbox').checked, | |
| 249 "encryptAllData": encryptAllData, | |
| 250 "usePassphrase": usePassphrase, | |
| 251 "passphrase": $('custom-passphrase').value | |
| 252 }); | |
| 253 chrome.send('SyncSetupConfigure', [result]); | |
| 254 }, | |
| 255 | |
| 256 /** | |
| 257 * Sets the disabled property of all input elements within the 'Customize | |
| 258 * Sync Preferences' screen. This is used to prohibit the user from changing | |
| 259 * the inputs after confirming the customized sync preferences, or resetting | |
| 260 * the state when re-showing the dialog. | |
| 261 * @param disabled True if controls should be set to disabled. | |
| 262 * @private | |
| 263 */ | |
| 264 setInputElementsDisabledState_: function(disabled) { | |
| 265 var configureElements = | |
| 266 $('customize-sync-preferences').querySelectorAll('input'); | |
| 267 for (var i = 0; i < configureElements.length; i++) | |
| 268 configureElements[i].disabled = disabled; | |
| 269 $('sync-select-datatypes').disabled = disabled; | |
| 270 | |
| 271 var self = this; | |
| 272 this.animateDisableLink_($('customize-link'), disabled, function() { | |
| 273 self.showCustomizePage_(null, true); | |
| 274 }); | |
| 275 | |
| 276 this.animateDisableLink_($('use-default-link'), disabled, function() { | |
| 277 self.showSyncEverythingPage_(); | |
| 278 }); | |
| 279 }, | |
| 280 | |
| 281 /** | |
| 282 * Animate a link being enabled/disabled. The link is hidden by animating | |
| 283 * its opacity, but to ensure the user doesn't click it during that time, | |
| 284 * its onclick handler is changed to null as well. | |
| 285 * @param elt The anchor element to enable/disable. | |
| 286 * @param disabled True if the link should be disabled. | |
| 287 * @param enabledFunction The onclick handler when the link is enabled. | |
| 288 * @private | |
| 289 */ | |
| 290 animateDisableLink_: function(elt, disabled, enabledFunction) { | |
| 291 if (disabled) { | |
| 292 elt.classList.add('transparent'); | |
| 293 elt.onclick = null; | |
| 294 elt.addEventListener('webkitTransitionEnd', function f(e) { | |
| 295 if (e.propertyName != 'opacity') | |
| 296 return; | |
| 297 elt.removeEventListener('webkitTransitionEnd', f); | |
| 298 elt.classList.remove('transparent'); | |
| 299 elt.hidden = true; | |
| 300 }); | |
| 301 } else { | |
| 302 elt.hidden = false; | |
| 303 elt.onclick = enabledFunction; | |
| 304 } | |
| 305 }, | |
| 306 | |
| 307 setChooseDataTypesCheckboxes_: function(args) { | |
| 308 var datatypeSelect = document.getElementById('sync-select-datatypes'); | |
| 309 datatypeSelect.selectedIndex = args.keepEverythingSynced ? 0 : 1; | |
| 310 | |
| 311 $('bookmarks-checkbox').checked = args.syncBookmarks; | |
| 312 $('preferences-checkbox').checked = args.syncPreferences; | |
| 313 $('themes-checkbox').checked = args.syncThemes; | |
| 314 | |
| 315 if (args.passwordsRegistered) { | |
| 316 $('passwords-checkbox').checked = args.syncPasswords; | |
| 317 $('passwords-item').className = "sync-item-show"; | |
| 318 } else { | |
| 319 $('passwords-item').className = "sync-item-hide"; | |
| 320 } | |
| 321 if (args.autofillRegistered) { | |
| 322 $('autofill-checkbox').checked = args.syncAutofill; | |
| 323 $('autofill-item').className = "sync-item-show"; | |
| 324 } else { | |
| 325 $('autofill-item').className = "sync-item-hide"; | |
| 326 } | |
| 327 if (args.extensionsRegistered) { | |
| 328 $('extensions-checkbox').checked = args.syncExtensions; | |
| 329 $('extensions-item').className = "sync-item-show"; | |
| 330 } else { | |
| 331 $('extensions-item').className = "sync-item-hide"; | |
| 332 } | |
| 333 if (args.typedUrlsRegistered) { | |
| 334 $('typed-urls-checkbox').checked = args.syncTypedUrls; | |
| 335 $('omnibox-item').className = "sync-item-show"; | |
| 336 } else { | |
| 337 $('omnibox-item').className = "sync-item-hide"; | |
| 338 } | |
| 339 if (args.appsRegistered) { | |
| 340 $('apps-checkbox').checked = args.syncApps; | |
| 341 $('apps-item').className = "sync-item-show"; | |
| 342 } else { | |
| 343 $('apps-item').className = "sync-item-hide"; | |
| 344 } | |
| 345 | |
| 346 this.setCheckboxesToKeepEverythingSynced_(args.keepEverythingSynced); | |
| 347 if (args.sessionsRegistered) { | |
| 348 $('sessions-checkbox').checked = args.syncSessions; | |
| 349 $('sessions-item').className = "sync-item-show"; | |
| 350 } else { | |
| 351 $('sessions-item').className = "sync-item-hide"; | |
| 352 } | |
| 353 }, | |
| 354 | |
| 355 setEncryptionRadios_: function(args) { | |
| 356 if (args['encryptAllData']) { | |
| 357 $('encrypt-all-option').checked = true; | |
| 358 this.disableEncryptionRadioGroup_(); | |
| 359 } else { | |
| 360 $('encrypt-sensitive-option').checked = true; | |
| 361 } | |
| 362 }, | |
| 363 | |
| 364 setPassphraseRadios_: function(args) { | |
| 365 if (args['usePassphrase']) { | |
| 366 $('explicit-option').checked = true; | |
| 367 | |
| 368 // The passphrase, once set, cannot be unset, but we show a reset link. | |
| 369 $('explicit-option').disabled = true; | |
| 370 $('google-option').disabled = true; | |
| 371 $('sync-custom-passphrase').hidden = true; | |
| 372 } else { | |
| 373 $('google-option').checked = true; | |
| 374 } | |
| 375 }, | |
| 376 | |
| 377 setErrorState_: function(args) { | |
| 378 if (!args.was_aborted) | |
| 379 return; | |
| 380 | |
| 381 $('aborted-text').hidden = false; | |
| 382 $('choose-datatypes-ok').disabled = true; | |
| 383 }, | |
| 384 | |
| 385 setCheckboxesAndErrors_: function(args) { | |
| 386 this.setChooseDataTypesCheckboxes_(args); | |
| 387 this.setEncryptionRadios_(args); | |
| 388 this.setPassphraseRadios_(args); | |
| 389 this.setErrorState_(args); | |
| 390 }, | |
| 391 | |
| 392 showConfigure_: function(args) { | |
| 393 var datatypeSelect = document.getElementById('sync-select-datatypes'); | |
| 394 var self = this; | |
| 395 datatypeSelect.onchange = function() { | |
| 396 var syncAll = this.selectedIndex == 0; | |
| 397 self.setCheckboxesToKeepEverythingSynced_(syncAll); | |
| 398 }; | |
| 399 | |
| 400 this.resetPage_('sync-setup-configure'); | |
| 401 $('sync-setup-configure').hidden = false; | |
| 402 | |
| 403 // onsubmit is changed when submitting a passphrase. Reset it to its | |
| 404 // default. | |
| 405 $('choose-data-types-form').onsubmit = function() { | |
| 406 self.sendConfiguration_(); | |
| 407 return false; | |
| 408 }; | |
| 409 | |
| 410 if (args) { | |
| 411 if (!args['encryptionEnabled']) | |
| 412 $('customize-sync-encryption').hidden = true; | |
| 413 this.setCheckboxesAndErrors_(args); | |
| 414 | |
| 415 // Whether to display the 'Sync everything' confirmation page or the | |
| 416 // customize data types page. | |
| 417 var keepEverythingSynced = args['keepEverythingSynced']; | |
| 418 this.usePassphrase_ = args['usePassphrase']; | |
| 419 if (args['showSyncEverythingPage'] == false || this.usePassphrase_ || | |
| 420 keepEverythingSynced == false || args['show_passphrase']) { | |
| 421 this.showCustomizePage_(args, keepEverythingSynced); | |
| 422 } else { | |
| 423 this.showSyncEverythingPage_(); | |
| 424 } | |
| 425 } | |
| 426 }, | |
| 427 | |
| 428 showSyncEverythingPage_: function() { | |
| 429 $('confirm-sync-preferences').hidden = false; | |
| 430 $('customize-sync-preferences').hidden = true; | |
| 431 | |
| 432 // Reset the selection to 'Sync everything'. | |
| 433 $('sync-select-datatypes').selectedIndex = 0; | |
| 434 | |
| 435 // The default state is to sync everything. | |
| 436 this.setCheckboxesToKeepEverythingSynced_(true); | |
| 437 | |
| 438 // If the account is not synced with a custom passphrase, reset the | |
| 439 // passphrase radio when switching to the 'Sync everything' page. | |
| 440 if (!this.usePassphrase_) { | |
| 441 $('google-option').checked = true; | |
| 442 $('sync-custom-passphrase').hidden = true; | |
| 443 } | |
| 444 | |
| 445 $('confirm-everything-ok').focus(); | |
| 446 }, | |
| 447 | |
| 448 /** | |
| 449 * Reveals the UI for entering a custom passphrase after initial setup. This | |
| 450 * may happen if the user forgot to enter the correct (or any) custom | |
| 451 * passphrase during initial setup. | |
| 452 * @param {Array} args The args that contain the passphrase UI | |
| 453 * configuration. | |
| 454 * @private | |
| 455 */ | |
| 456 showPassphraseContainer_: function(args) { | |
| 457 $('choose-data-types-form').onsubmit = | |
| 458 this.sendPassphraseAndClose_.bind(this); | |
| 459 $('sync-custom-passphrase-container').hidden = true; | |
| 460 $('sync-existing-passphrase-container').hidden = false; | |
| 461 | |
| 462 if (args["passphrase_creation_rejected"]) | |
| 463 $('passphrase-rejected-body').hidden = false; | |
| 464 else | |
| 465 $('normal-body').hidden = false; | |
| 466 | |
| 467 if (args["passphrase_setting_rejected"]) | |
| 468 $('incorrect-passphrase').hidden = false; | |
| 469 | |
| 470 $('sync-passphrase-warning').hidden = false; | |
| 471 | |
| 472 $('passphrase').focus(); | |
| 473 }, | |
| 474 | |
| 475 showCustomizePage_: function(args, syncEverything) { | |
| 476 $('confirm-sync-preferences').hidden = true; | |
| 477 $('customize-sync-preferences').hidden = false; | |
| 478 | |
| 479 $('sync-custom-passphrase-container').hidden = false; | |
| 480 $('sync-existing-passphrase-container').hidden = true; | |
| 481 | |
| 482 // If the user has selected the 'Customize' page on initial set up, it's | |
| 483 // likely he intends to change the data types. Select the | |
| 484 // 'Choose data types' option in this case. | |
| 485 var index = syncEverything ? 0 : 1; | |
| 486 document.getElementById('sync-select-datatypes').selectedIndex = index; | |
| 487 this.setDataTypeCheckboxesEnabled_(!syncEverything); | |
| 488 | |
| 489 // The passphrase input may need to take over focus from the OK button, so | |
| 490 // set focus before that logic. | |
| 491 $('choose-datatypes-ok').focus(); | |
| 492 | |
| 493 if (args && args['show_passphrase']) | |
| 494 this.showPassphraseContainer_(args); | |
| 495 }, | |
| 496 | |
| 497 attach_: function() { | |
| 498 chrome.send('SyncSetupAttachHandler'); | |
| 499 }, | |
| 500 | |
| 501 showSyncSetupPage_: function(page, args) { | |
| 502 if (page == 'settingUp') { | |
| 503 this.setThrobbersVisible_(true); | |
| 504 return; | |
| 505 } else { | |
| 506 this.setThrobbersVisible_(false); | |
| 507 } | |
| 508 | |
| 509 // Hide an existing visible overlay. | |
| 510 var overlay = $('sync-setup-overlay'); | |
| 511 for (var i = 0; i < overlay.children.length; i++) | |
| 512 overlay.children[i].hidden = true; | |
| 513 | |
| 514 this.setInputElementsDisabledState_(false); | |
| 515 | |
| 516 if (page == 'login') | |
| 517 this.showGaiaLogin_(args); | |
| 518 else if (page == 'configure' || page == 'passphrase') | |
| 519 this.showConfigure_(args); | |
| 520 | |
| 521 if (page == 'done') | |
| 522 this.closeOverlay_(); | |
| 523 else | |
| 524 this.showOverlay_(); | |
| 525 }, | |
| 526 | |
| 527 setThrobbersVisible_: function(visible) { | |
| 528 var throbbers = document.getElementsByClassName("throbber"); | |
| 529 for (var i = 0; i < throbbers.length; i++) | |
| 530 throbbers[i].style.visibility = visible ? "visible" : "hidden"; | |
| 531 }, | |
| 532 | |
| 533 loginSetFocus_: function() { | |
| 534 var email = $('gaia-email'); | |
| 535 var passwd = $('gaia-passwd'); | |
| 536 if (email && (email.value == null || email.value == "")) { | |
| 537 email.focus(); | |
| 538 } else if (passwd) { | |
| 539 passwd.focus(); | |
| 540 } | |
| 541 }, | |
| 542 | |
| 543 showAccessCodeRequired_: function() { | |
| 544 $('password-row').hidden = true; | |
| 545 $('email-row').hidden = true; | |
| 546 $('create-account-cell').style.visibility = "hidden"; | |
| 547 | |
| 548 $('access-code-label-row').hidden = false; | |
| 549 $('access-code-input-row').hidden = false; | |
| 550 $('access-code-help-row').hidden = false; | |
| 551 $('access-code').disabled = false; | |
| 552 }, | |
| 553 | |
| 554 showCaptcha_: function(args) { | |
| 555 this.captchaChallengeActive_ = true; | |
| 556 | |
| 557 // The captcha takes up lots of space, so make room. | |
| 558 $('top-blurb-error').hidden = true; | |
| 559 $('create-account-div').hidden = true; | |
| 560 $('create-account-cell').hidden = true; | |
| 561 | |
| 562 // It's showtime for the captcha now. | |
| 563 $('captcha-div').hidden = false; | |
| 564 $('gaia-email').disabled = true; | |
| 565 $('gaia-passwd').disabled = false; | |
| 566 $('captcha-value').disabled = false; | |
| 567 $('captcha-wrapper').style.backgroundImage = url(args.captchaUrl); | |
| 568 }, | |
| 569 | |
| 570 /** | |
| 571 * Reset the state of all descendant elements of a root element to their | |
| 572 * initial state. | |
| 573 * The initial state is specified by adding a class to the descendant | |
| 574 * element in sync_setup_overlay.html. | |
| 575 * @param pageElementId The root page element id. | |
| 576 * @private | |
| 577 */ | |
| 578 resetPage_: function(pageElementId) { | |
| 579 var page = $(pageElementId); | |
| 580 var forEach = function(arr, fn) { | |
| 581 var length = arr.length; | |
| 582 for (var i = 0; i < length; i++) { | |
| 583 fn(arr[i]); | |
| 584 } | |
| 585 }; | |
| 586 | |
| 587 forEach(page.getElementsByClassName('reset-hidden'), | |
| 588 function(elt) { elt.hidden = true; }); | |
| 589 forEach(page.getElementsByClassName('reset-shown'), | |
| 590 function(elt) { elt.hidden = false; }); | |
| 591 forEach(page.getElementsByClassName('reset-disabled'), | |
| 592 function(elt) { elt.disabled = true; }); | |
| 593 forEach(page.getElementsByClassName('reset-enabled'), | |
| 594 function(elt) { elt.disabled = false; }); | |
| 595 forEach(page.getElementsByClassName('reset-visibility-hidden'), | |
| 596 function(elt) { elt.style.visibility = 'hidden'; }); | |
| 597 forEach(page.getElementsByClassName('reset-value'), | |
| 598 function(elt) { elt.value = ''; }); | |
| 599 forEach(page.getElementsByClassName('reset-opaque'), | |
| 600 function(elt) { elt.classList.remove('transparent'); }); | |
| 601 }, | |
| 602 | |
| 603 showGaiaLogin_: function(args) { | |
| 604 this.resetPage_('sync-setup-login'); | |
| 605 $('sync-setup-login').hidden = false; | |
| 606 | |
| 607 var f = $('gaia-login-form'); | |
| 608 var email = $('gaia-email'); | |
| 609 var passwd = $('gaia-passwd'); | |
| 610 if (f) { | |
| 611 if (args.user != undefined) { | |
| 612 if (email.value != args.user) | |
| 613 passwd.value = ""; // Reset the password field | |
| 614 email.value = args.user; | |
| 615 } | |
| 616 | |
| 617 if (!args.editable_user) { | |
| 618 email.hidden = true; | |
| 619 var span = $('email-readonly'); | |
| 620 span.textContent = email.value; | |
| 621 span.hidden = false; | |
| 622 $('create-account-div').hidden = true; | |
| 623 } | |
| 624 | |
| 625 f.accessCode.disabled = true; | |
| 626 } | |
| 627 | |
| 628 if (1 == args.error) { | |
| 629 var access_code = document.getElementById('access-code'); | |
| 630 if (access_code.value && access_code.value != "") { | |
| 631 $('errormsg-0-access-code').hidden = false; | |
| 632 this.showAccessCodeRequired_(); | |
| 633 } else { | |
| 634 $('errormsg-1-password').hidden = false; | |
| 635 } | |
| 636 this.setBlurbError_(args.error_message); | |
| 637 } else if (3 == args.error) { | |
| 638 $('errormsg-0-connection').hidden = false; | |
| 639 this.setBlurbError_(args.error_message); | |
| 640 } else if (4 == args.error) { | |
| 641 this.showCaptcha_(args); | |
| 642 } else if (8 == args.error) { | |
| 643 this.showAccessCodeRequired_(); | |
| 644 } else if (args.error_message) { | |
| 645 this.setBlurbError_(args.error_message); | |
| 646 } | |
| 647 | |
| 648 $('sign-in').disabled = false; | |
| 649 $('sign-in').value = templateData['signin']; | |
| 650 this.loginSetFocus_(); | |
| 651 }, | |
| 652 | |
| 653 resetErrorVisibility_: function() { | |
| 654 $("errormsg-0-email").hidden = true; | |
| 655 $("errormsg-0-password").hidden = true; | |
| 656 $("errormsg-1-password").hidden = true; | |
| 657 $("errormsg-0-connection").hidden = true; | |
| 658 $("errormsg-0-access-code").hidden = true; | |
| 659 }, | |
| 660 | |
| 661 setBlurbError_: function(error_message) { | |
| 662 if (this.captchaChallengeActive_) | |
| 663 return; // No blurb in captcha challenge mode. | |
| 664 | |
| 665 if (error_message) { | |
| 666 $('error-signing-in').hidden = true; | |
| 667 $('error-custom').hidden = false; | |
| 668 $('error-custom').textContent = error_message; | |
| 669 } else { | |
| 670 $('error-signing-in').hidden = false; | |
| 671 $('error-custom').hidden = true; | |
| 672 } | |
| 673 | |
| 674 $('top-blurb-error').style.visibility = "visible"; | |
| 675 $('gaia-email').disabled = false; | |
| 676 $('gaia-passwd').disabled = false; | |
| 677 }, | |
| 678 | |
| 679 setErrorVisibility_: function() { | |
| 680 this.resetErrorVisibility_(); | |
| 681 var f = $('gaia-login-form'); | |
| 682 var email = $('gaia-email'); | |
| 683 var passwd = $('gaia-passwd'); | |
| 684 if (null == email.value || "" == email.value) { | |
| 685 $('errormsg-0-email').hidden = false; | |
| 686 this.setBlurbError_(); | |
| 687 return false; | |
| 688 } | |
| 689 // Don't enforce password being non-blank when checking access code (it | |
| 690 // will have been cleared when the page was displayed). | |
| 691 if (f.accessCode.disabled && (null == passwd.value || | |
| 692 "" == passwd.value)) { | |
| 693 $('errormsg-0-password').hidden = false; | |
| 694 this.setBlurbError_(); | |
| 695 return false; | |
| 696 } | |
| 697 if (!f.accessCode.disabled && (null == f.accessCode.value || | |
| 698 "" == f.accessCode.value)) { | |
| 699 $('errormsg-0-password').hidden = false; | |
| 700 return false; | |
| 701 } | |
| 702 return true; | |
| 703 }, | |
| 704 | |
| 705 sendCredentialsAndClose_: function() { | |
| 706 if (!this.setErrorVisibility_()) { | |
| 707 return false; | |
| 708 } | |
| 709 | |
| 710 $('gaia-email').disabled = true; | |
| 711 $('gaia-passwd').disabled = true; | |
| 712 $('captcha-value').disabled = true; | |
| 713 $('access-code').disabled = true; | |
| 714 | |
| 715 $('logging-in-throbber').style.visibility = "visible"; | |
| 716 | |
| 717 var f = $('gaia-login-form'); | |
| 718 var email = $('gaia-email'); | |
| 719 var passwd = $('gaia-passwd'); | |
| 720 var result = JSON.stringify({"user" : email.value, | |
| 721 "pass" : passwd.value, | |
| 722 "captcha" : f.captchaValue.value, | |
| 723 "access_code" : f.accessCode.value}); | |
| 724 $('sign-in').disabled = true; | |
| 725 chrome.send('SyncSetupSubmitAuth', [result]); | |
| 726 }, | |
| 727 | |
| 728 showSuccessAndClose_: function() { | |
| 729 $('sign-in').value = localStrings.getString('loginSuccess'); | |
| 730 setTimeout(this.closeOverlay_, 1600); | |
| 731 }, | |
| 732 | |
| 733 showSuccessAndSettingUp_: function() { | |
| 734 $('sign-in').value = localStrings.getString('settingUp'); | |
| 735 }, | |
| 736 | |
| 737 /** | |
| 738 * Displays the stop syncing dialog. | |
| 739 * @private | |
| 740 */ | |
| 741 showStopSyncingUI_: function() { | |
| 742 // Hide any visible children of the overlay. | |
| 743 var overlay = $('sync-setup-overlay'); | |
| 744 for (var i = 0; i < overlay.children.length; i++) | |
| 745 overlay.children[i].hidden = true; | |
| 746 | |
| 747 // Bypass OptionsPage.navigateToPage because it will call didShowPage | |
| 748 // which will set its own visible page, based on the flow state. | |
| 749 this.visible = true; | |
| 750 | |
| 751 $('sync-setup-stop-syncing').hidden = false; | |
| 752 $('stop-syncing-cancel').focus(); | |
| 753 }, | |
| 754 | |
| 755 /** | |
| 756 * Steps into the appropriate Sync Setup error UI. | |
| 757 * @private | |
| 758 */ | |
| 759 showErrorUI_: function() { | |
| 760 chrome.send('SyncSetupShowErrorUI'); | |
| 761 }, | |
| 762 | |
| 763 /** | |
| 764 * Determines the appropriate page to show in the Sync Setup UI based on | |
| 765 * the state of the Sync backend. | |
| 766 * @private | |
| 767 */ | |
| 768 showSetupUI_: function() { | |
| 769 chrome.send('SyncSetupShowSetupUI'); | |
| 770 }, | |
| 771 }; | |
| 772 | |
| 773 SyncSetupOverlay.showErrorUI = function() { | |
| 774 SyncSetupOverlay.getInstance().showErrorUI_(); | |
| 775 }; | |
| 776 | |
| 777 SyncSetupOverlay.showSetupUI = function() { | |
| 778 SyncSetupOverlay.getInstance().showSetupUI_(); | |
| 779 }; | |
| 780 | |
| 781 SyncSetupOverlay.showSyncSetupPage = function(page, args) { | |
| 782 SyncSetupOverlay.getInstance().showSyncSetupPage_(page, args); | |
| 783 }; | |
| 784 | |
| 785 SyncSetupOverlay.showSuccessAndClose = function() { | |
| 786 SyncSetupOverlay.getInstance().showSuccessAndClose_(); | |
| 787 }; | |
| 788 | |
| 789 SyncSetupOverlay.showSuccessAndSettingUp = function() { | |
| 790 SyncSetupOverlay.getInstance().showSuccessAndSettingUp_(); | |
| 791 }; | |
| 792 | |
| 793 SyncSetupOverlay.showStopSyncingUI = function() { | |
| 794 SyncSetupOverlay.getInstance().showStopSyncingUI_(); | |
| 795 }; | |
| 796 | |
| 797 // Export | |
| 798 return { | |
| 799 SyncSetupOverlay: SyncSetupOverlay | |
| 800 }; | |
| 801 }); | |
| OLD | NEW |