| OLD | NEW |
|---|
| (Empty) |
| 1 // Copyright (c) 2013 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 Locally managed user creation flow screen. | |
| 7 */ | |
| 8 | |
| 9 login.createScreen('LocallyManagedUserCreationScreen', | |
| 10 'managed-user-creation', function() { | |
| 11 var MAX_NAME_LENGTH = 50; | |
| 12 var UserImagesGrid = options.UserImagesGrid; | |
| 13 var ButtonImages = UserImagesGrid.ButtonImages; | |
| 14 | |
| 15 var ManagerPod = cr.ui.define(function() { | |
| 16 var node = $('managed-user-creation-manager-template').cloneNode(true); | |
| 17 node.removeAttribute('id'); | |
| 18 node.removeAttribute('hidden'); | |
| 19 return node; | |
| 20 }); | |
| 21 | |
| 22 ManagerPod.userImageSalt_ = {}; | |
| 23 | |
| 24 /** | |
| 25 * UI element for displaying single account in list of possible managers for | |
| 26 * new locally managed user. | |
| 27 * @type {Object} | |
| 28 */ | |
| 29 ManagerPod.prototype = { | |
| 30 __proto__: HTMLDivElement.prototype, | |
| 31 | |
| 32 /** @override */ | |
| 33 decorate: function() { | |
| 34 // Mousedown has to be used instead of click to be able to prevent 'focus' | |
| 35 // event later. | |
| 36 this.addEventListener('mousedown', | |
| 37 this.handleMouseDown_.bind(this)); | |
| 38 var screen = $('managed-user-creation'); | |
| 39 var managerPod = this; | |
| 40 var managerPodList = screen.managerList_; | |
| 41 var hideManagerPasswordError = function(element) { | |
| 42 managerPod.passwordElement.classList.remove('password-error'); | |
| 43 $('bubble').hide(); | |
| 44 }; | |
| 45 | |
| 46 screen.configureTextInput( | |
| 47 this.passwordElement, | |
| 48 screen.updateNextButtonForManager_.bind(screen), | |
| 49 screen.validIfNotEmpty_.bind(screen), | |
| 50 function(element) { | |
| 51 screen.getScreenButton('next').focus(); | |
| 52 }, | |
| 53 hideManagerPasswordError); | |
| 54 | |
| 55 this.passwordElement.addEventListener('keydown', function(e) { | |
| 56 switch (e.keyIdentifier) { | |
| 57 case 'Up': | |
| 58 managerPodList.selectNextPod(-1); | |
| 59 e.stopPropagation(); | |
| 60 break; | |
| 61 case 'Down': | |
| 62 managerPodList.selectNextPod(+1); | |
| 63 e.stopPropagation(); | |
| 64 break; | |
| 65 } | |
| 66 }); | |
| 67 }, | |
| 68 | |
| 69 /** | |
| 70 * Updates UI elements from user data. | |
| 71 */ | |
| 72 update: function() { | |
| 73 this.imageElement.src = 'chrome://userimage/' + this.user.username + | |
| 74 '?id=' + ManagerPod.userImageSalt_[this.user.username]; | |
| 75 | |
| 76 this.nameElement.textContent = this.user.displayName; | |
| 77 this.emailElement.textContent = this.user.emailAddress; | |
| 78 }, | |
| 79 | |
| 80 showPasswordError: function() { | |
| 81 this.passwordElement.classList.add('password-error'); | |
| 82 $('bubble').showTextForElement( | |
| 83 this.passwordElement, | |
| 84 loadTimeData.getString('createManagedUserWrongManagerPasswordText'), | |
| 85 cr.ui.Bubble.Attachment.BOTTOM, | |
| 86 24, 4); | |
| 87 }, | |
| 88 | |
| 89 /** | |
| 90 * Brings focus to password field. | |
| 91 */ | |
| 92 focusInput: function() { | |
| 93 this.passwordElement.focus(); | |
| 94 }, | |
| 95 | |
| 96 /** | |
| 97 * Gets image element. | |
| 98 * @type {!HTMLImageElement} | |
| 99 */ | |
| 100 get imageElement() { | |
| 101 return this.querySelector('.managed-user-creation-manager-image'); | |
| 102 }, | |
| 103 | |
| 104 /** | |
| 105 * Gets name element. | |
| 106 * @type {!HTMLDivElement} | |
| 107 */ | |
| 108 get nameElement() { | |
| 109 return this.querySelector('.managed-user-creation-manager-name'); | |
| 110 }, | |
| 111 | |
| 112 /** | |
| 113 * Gets e-mail element. | |
| 114 * @type {!HTMLDivElement} | |
| 115 */ | |
| 116 get emailElement() { | |
| 117 return this.querySelector('.managed-user-creation-manager-email'); | |
| 118 }, | |
| 119 | |
| 120 /** | |
| 121 * Gets password element. | |
| 122 * @type {!HTMLDivElement} | |
| 123 */ | |
| 124 get passwordElement() { | |
| 125 return this.querySelector('.managed-user-creation-manager-password'); | |
| 126 }, | |
| 127 | |
| 128 /** | |
| 129 * Gets password enclosing block. | |
| 130 * @type {!HTMLDivElement} | |
| 131 */ | |
| 132 get passwordBlock() { | |
| 133 return this.querySelector('.password-block'); | |
| 134 }, | |
| 135 | |
| 136 /** @override */ | |
| 137 handleMouseDown_: function(e) { | |
| 138 this.parentNode.selectPod(this); | |
| 139 // Prevent default so that we don't trigger 'focus' event. | |
| 140 e.preventDefault(); | |
| 141 }, | |
| 142 | |
| 143 /** | |
| 144 * The user that this pod represents. | |
| 145 * @type {!Object} | |
| 146 */ | |
| 147 user_: undefined, | |
| 148 get user() { | |
| 149 return this.user_; | |
| 150 }, | |
| 151 set user(userDict) { | |
| 152 this.user_ = userDict; | |
| 153 this.update(); | |
| 154 }, | |
| 155 }; | |
| 156 | |
| 157 var ManagerPodList = cr.ui.define('div'); | |
| 158 | |
| 159 /** | |
| 160 * UI element for selecting manager account for new managed user. | |
| 161 * @type {Object} | |
| 162 */ | |
| 163 ManagerPodList.prototype = { | |
| 164 __proto__: HTMLDivElement.prototype, | |
| 165 | |
| 166 selectedPod_: null, | |
| 167 | |
| 168 /** @override */ | |
| 169 decorate: function() { | |
| 170 }, | |
| 171 | |
| 172 /** | |
| 173 * Returns all the pods in this pod list. | |
| 174 * @type {NodeList} | |
| 175 */ | |
| 176 get pods() { | |
| 177 return this.children; | |
| 178 }, | |
| 179 | |
| 180 addPod: function(manager) { | |
| 181 var managerPod = new ManagerPod({user: manager}); | |
| 182 this.appendChild(managerPod); | |
| 183 managerPod.update(); | |
| 184 }, | |
| 185 | |
| 186 clearPods: function() { | |
| 187 this.innerHTML = ''; | |
| 188 this.selectedPod_ = null; | |
| 189 }, | |
| 190 | |
| 191 selectPod: function(podToSelect) { | |
| 192 if ((this.selectedPod_ == podToSelect) && !!podToSelect) { | |
| 193 podToSelect.focusInput(); | |
| 194 return; | |
| 195 } | |
| 196 this.selectedPod_ = podToSelect; | |
| 197 for (var i = 0, pod; pod = this.pods[i]; ++i) { | |
| 198 if (pod != podToSelect) { | |
| 199 pod.classList.remove('focused'); | |
| 200 pod.passwordElement.value = ''; | |
| 201 pod.passwordBlock.hidden = true; | |
| 202 } | |
| 203 } | |
| 204 if (!podToSelect) | |
| 205 return; | |
| 206 podToSelect.classList.add('focused'); | |
| 207 podToSelect.passwordBlock.hidden = false; | |
| 208 podToSelect.passwordElement.value = ''; | |
| 209 podToSelect.focusInput(); | |
| 210 chrome.send('managerSelectedOnLocallyManagedUserCreationFlow', | |
| 211 [podToSelect.user.username]); | |
| 212 }, | |
| 213 | |
| 214 /** | |
| 215 * Select pod next to currently selected one in given |direction|. | |
| 216 * @param {integer} direction - +1 for selecting pod below current, -1 for | |
| 217 * selecting pod above current. | |
| 218 * @type {boolean} returns if selected pod has changed. | |
| 219 */ | |
| 220 selectNextPod: function(direction) { | |
| 221 if (!this.selectedPod_) | |
| 222 return false; | |
| 223 var index = -1; | |
| 224 for (var i = 0, pod; pod = this.pods[i]; ++i) { | |
| 225 if (pod == this.selectedPod_) { | |
| 226 index = i; | |
| 227 break; | |
| 228 } | |
| 229 } | |
| 230 if (-1 == index) | |
| 231 return false; | |
| 232 index = index + direction; | |
| 233 if (index < 0 || index >= this.pods.length) | |
| 234 return false; | |
| 235 this.selectPod(this.pods[index]); | |
| 236 return true; | |
| 237 } | |
| 238 }; | |
| 239 | |
| 240 var ImportPod = cr.ui.define(function() { | |
| 241 var node = $('managed-user-creation-import-template').cloneNode(true); | |
| 242 node.removeAttribute('id'); | |
| 243 node.removeAttribute('hidden'); | |
| 244 return node; | |
| 245 }); | |
| 246 | |
| 247 /** | |
| 248 * UI element for displaying single supervised user in list of possible users | |
| 249 * for importing existing users. | |
| 250 * @type {Object} | |
| 251 */ | |
| 252 ImportPod.prototype = { | |
| 253 __proto__: HTMLDivElement.prototype, | |
| 254 | |
| 255 /** @override */ | |
| 256 decorate: function() { | |
| 257 // Mousedown has to be used instead of click to be able to prevent 'focus' | |
| 258 // event later. | |
| 259 this.addEventListener('mousedown', this.handleMouseDown_.bind(this)); | |
| 260 var screen = $('managed-user-creation'); | |
| 261 var importList = screen.importList_; | |
| 262 }, | |
| 263 | |
| 264 /** | |
| 265 * Updates UI elements from user data. | |
| 266 */ | |
| 267 update: function() { | |
| 268 this.imageElement.src = this.user.avatarurl; | |
| 269 this.nameElement.textContent = this.user.name; | |
| 270 if (this.user.exists) { | |
| 271 if (this.user.conflict == 'imported') { | |
| 272 this.nameElement.textContent = | |
| 273 loadTimeData.getStringF('importUserExists', this.user.name); | |
| 274 } else { | |
| 275 this.nameElement.textContent = | |
| 276 loadTimeData.getStringF('importUsernameExists', this.user.name); | |
| 277 } | |
| 278 } | |
| 279 this.classList.toggle('imported', this.user.exists); | |
| 280 }, | |
| 281 | |
| 282 /** | |
| 283 * Gets image element. | |
| 284 * @type {!HTMLImageElement} | |
| 285 */ | |
| 286 get imageElement() { | |
| 287 return this.querySelector('.import-pod-image'); | |
| 288 }, | |
| 289 | |
| 290 /** | |
| 291 * Gets name element. | |
| 292 * @type {!HTMLDivElement} | |
| 293 */ | |
| 294 get nameElement() { | |
| 295 return this.querySelector('.import-pod-name'); | |
| 296 }, | |
| 297 | |
| 298 /** @override */ | |
| 299 handleMouseDown_: function(e) { | |
| 300 this.parentNode.selectPod(this); | |
| 301 // Prevent default so that we don't trigger 'focus' event. | |
| 302 e.preventDefault(); | |
| 303 }, | |
| 304 | |
| 305 /** | |
| 306 * The user that this pod represents. | |
| 307 * @type {Object} | |
| 308 */ | |
| 309 user_: undefined, | |
| 310 | |
| 311 get user() { | |
| 312 return this.user_; | |
| 313 }, | |
| 314 | |
| 315 set user(userDict) { | |
| 316 this.user_ = userDict; | |
| 317 this.update(); | |
| 318 }, | |
| 319 }; | |
| 320 | |
| 321 var ImportPodList = cr.ui.define('div'); | |
| 322 | |
| 323 /** | |
| 324 * UI element for selecting existing supervised user for import. | |
| 325 * @type {Object} | |
| 326 */ | |
| 327 ImportPodList.prototype = { | |
| 328 __proto__: HTMLDivElement.prototype, | |
| 329 | |
| 330 selectedPod_: null, | |
| 331 | |
| 332 /** @override */ | |
| 333 decorate: function() { | |
| 334 this.setAttribute('tabIndex', 0); | |
| 335 this.classList.add('nofocus'); | |
| 336 var importList = this; | |
| 337 var screen = $('managed-user-creation'); | |
| 338 | |
| 339 this.addEventListener('focus', function(e) { | |
| 340 if (importList.selectedPod_ == null) { | |
| 341 if (importList.pods.length > 0) | |
| 342 importList.selectPod(importList.pods[0]); | |
| 343 } | |
| 344 }); | |
| 345 | |
| 346 this.addEventListener('keydown', function(e) { | |
| 347 switch (e.keyIdentifier) { | |
| 348 case 'Up': | |
| 349 importList.selectNextPod(-1); | |
| 350 e.stopPropagation(); | |
| 351 break; | |
| 352 case 'Enter': | |
| 353 if (importList.selectedPod_ != null) | |
| 354 screen.importSupervisedUser_(); | |
| 355 e.stopPropagation(); | |
| 356 break; | |
| 357 case 'Down': | |
| 358 importList.selectNextPod(+1); | |
| 359 e.stopPropagation(); | |
| 360 break; | |
| 361 } | |
| 362 }); | |
| 363 }, | |
| 364 | |
| 365 /** | |
| 366 * Returns all the pods in this pod list. | |
| 367 * @type {NodeList} | |
| 368 */ | |
| 369 get pods() { | |
| 370 return this.children; | |
| 371 }, | |
| 372 | |
| 373 /** | |
| 374 * Returns selected pod. | |
| 375 * @type {Node} | |
| 376 */ | |
| 377 get selectedPod() { | |
| 378 return this.selectedPod_; | |
| 379 }, | |
| 380 | |
| 381 addPod: function(user) { | |
| 382 var importPod = new ImportPod({user: user}); | |
| 383 this.appendChild(importPod); | |
| 384 importPod.update(); | |
| 385 }, | |
| 386 | |
| 387 clearPods: function() { | |
| 388 this.innerHTML = ''; | |
| 389 this.selectedPod_ = null; | |
| 390 }, | |
| 391 | |
| 392 scrollIntoView: function(pod) { | |
| 393 scroller = this.parentNode; | |
| 394 var itemHeight = pod.getBoundingClientRect().height; | |
| 395 var scrollTop = scroller.scrollTop; | |
| 396 var top = pod.offsetTop - scroller.offsetTop; | |
| 397 var clientHeight = scroller.clientHeight; | |
| 398 | |
| 399 var self = scroller; | |
| 400 | |
| 401 // Function to adjust the tops of viewport and row. | |
| 402 function scrollToAdjustTop() { | |
| 403 self.scrollTop = top; | |
| 404 return true; | |
| 405 }; | |
| 406 // Function to adjust the bottoms of viewport and row. | |
| 407 function scrollToAdjustBottom() { | |
| 408 var cs = getComputedStyle(self); | |
| 409 var paddingY = parseInt(cs.paddingTop, 10) + | |
| 410 parseInt(cs.paddingBottom, 10); | |
| 411 | |
| 412 if (top + itemHeight > scrollTop + clientHeight - paddingY) { | |
| 413 self.scrollTop = top + itemHeight - clientHeight + paddingY; | |
| 414 return true; | |
| 415 } | |
| 416 return false; | |
| 417 }; | |
| 418 | |
| 419 // Check if the entire of given indexed row can be shown in the viewport. | |
| 420 if (itemHeight <= clientHeight) { | |
| 421 if (top < scrollTop) | |
| 422 return scrollToAdjustTop(); | |
| 423 if (scrollTop + clientHeight < top + itemHeight) | |
| 424 return scrollToAdjustBottom(); | |
| 425 } else { | |
| 426 if (scrollTop < top) | |
| 427 return scrollToAdjustTop(); | |
| 428 if (top + itemHeight < scrollTop + clientHeight) | |
| 429 return scrollToAdjustBottom(); | |
| 430 } | |
| 431 return false; | |
| 432 }, | |
| 433 | |
| 434 /** | |
| 435 * @param {Element} podToSelect - pod to select, can be null. | |
| 436 */ | |
| 437 selectPod: function(podToSelect) { | |
| 438 if ((this.selectedPod_ == podToSelect) && !!podToSelect) { | |
| 439 return; | |
| 440 } | |
| 441 this.selectedPod_ = podToSelect; | |
| 442 for (var i = 0; i < this.pods.length; i++) { | |
| 443 var pod = this.pods[i]; | |
| 444 if (pod != podToSelect) | |
| 445 pod.classList.remove('focused'); | |
| 446 } | |
| 447 if (!podToSelect) | |
| 448 return; | |
| 449 podToSelect.classList.add('focused'); | |
| 450 podToSelect.focus(); | |
| 451 var screen = $('managed-user-creation'); | |
| 452 if (!this.selectedPod_) { | |
| 453 screen.getScreenButton('import').disabled = true; | |
| 454 } else { | |
| 455 screen.getScreenButton('import').disabled = | |
| 456 this.selectedPod_.user.exists; | |
| 457 if (!this.selectedPod_.user.exists) { | |
| 458 chrome.send('userSelectedForImportInManagedUserCreationFlow', | |
| 459 [podToSelect.user.id]); | |
| 460 } | |
| 461 } | |
| 462 }, | |
| 463 | |
| 464 selectNextPod: function(direction) { | |
| 465 if (!this.selectedPod_) | |
| 466 return false; | |
| 467 var index = -1; | |
| 468 for (var i = 0, pod; pod = this.pods[i]; ++i) { | |
| 469 if (pod == this.selectedPod_) { | |
| 470 index = i; | |
| 471 break; | |
| 472 } | |
| 473 } | |
| 474 if (-1 == index) | |
| 475 return false; | |
| 476 index = index + direction; | |
| 477 if (index < 0 || index >= this.pods.length) | |
| 478 return false; | |
| 479 this.selectPod(this.pods[index]); | |
| 480 return true; | |
| 481 }, | |
| 482 | |
| 483 selectUser: function(user_id) { | |
| 484 for (var i = 0, pod; pod = this.pods[i]; ++i) { | |
| 485 if (pod.user.id == user_id) { | |
| 486 this.selectPod(pod); | |
| 487 this.scrollIntoView(pod); | |
| 488 break; | |
| 489 } | |
| 490 } | |
| 491 }, | |
| 492 }; | |
| 493 | |
| 494 return { | |
| 495 EXTERNAL_API: [ | |
| 496 'loadManagers', | |
| 497 'managedUserSuggestImport', | |
| 498 'managedUserNameError', | |
| 499 'managedUserNameOk', | |
| 500 'showErrorPage', | |
| 501 'showIntroPage', | |
| 502 'showManagerPage', | |
| 503 'showManagerPasswordError', | |
| 504 'showPasswordError', | |
| 505 'showProgress', | |
| 506 'showStatusError', | |
| 507 'showTutorialPage', | |
| 508 'showUsernamePage', | |
| 509 'showPage', | |
| 510 'setDefaultImages', | |
| 511 'setCameraPresent', | |
| 512 'setExistingManagedUsers', | |
| 513 ], | |
| 514 | |
| 515 lastVerifiedName_: null, | |
| 516 lastIncorrectUserName_: null, | |
| 517 managerList_: null, | |
| 518 importList_: null, | |
| 519 | |
| 520 currentPage_: null, | |
| 521 imagesRequested_: false, | |
| 522 | |
| 523 // Contains data that can be auto-shared with handler. | |
| 524 context_: {}, | |
| 525 | |
| 526 /** @override */ | |
| 527 decorate: function() { | |
| 528 this.managerList_ = new ManagerPodList(); | |
| 529 $('managed-user-creation-managers-pane').appendChild(this.managerList_); | |
| 530 | |
| 531 this.importList_ = new ImportPodList(); | |
| 532 $('managed-user-creation-import-pane').appendChild(this.importList_); | |
| 533 | |
| 534 var userNameField = $('managed-user-creation-name'); | |
| 535 var passwordField = $('managed-user-creation-password'); | |
| 536 var password2Field = $('managed-user-creation-password-confirm'); | |
| 537 | |
| 538 var creationScreen = this; | |
| 539 | |
| 540 var hideUserPasswordError = function(element) { | |
| 541 $('bubble').hide(); | |
| 542 $('managed-user-creation-password').classList.remove('password-error'); | |
| 543 }; | |
| 544 | |
| 545 this.configureTextInput(userNameField, | |
| 546 this.checkUserName_.bind(this), | |
| 547 this.validIfNotEmpty_.bind(this), | |
| 548 function(element) { | |
| 549 passwordField.focus(); | |
| 550 }, | |
| 551 this.clearUserNameError_.bind(this)); | |
| 552 this.configureTextInput(passwordField, | |
| 553 this.updateNextButtonForUser_.bind(this), | |
| 554 this.validIfNotEmpty_.bind(this), | |
| 555 function(element) { | |
| 556 password2Field.focus(); | |
| 557 }, | |
| 558 hideUserPasswordError); | |
| 559 this.configureTextInput(password2Field, | |
| 560 this.updateNextButtonForUser_.bind(this), | |
| 561 this.validIfNotEmpty_.bind(this), | |
| 562 function(element) { | |
| 563 creationScreen.getScreenButton('next').focus(); | |
| 564 }, | |
| 565 hideUserPasswordError); | |
| 566 | |
| 567 this.getScreenButton('error').addEventListener('click', function(e) { | |
| 568 creationScreen.handleErrorButtonPressed_(); | |
| 569 e.stopPropagation(); | |
| 570 }); | |
| 571 | |
| 572 /* | |
| 573 TODO(antrim) : this is an explicit code duplications with UserImageScreen. | |
| 574 It should be removed by issue 251179. | |
| 575 */ | |
| 576 var imageGrid = this.getScreenElement('image-grid'); | |
| 577 UserImagesGrid.decorate(imageGrid); | |
| 578 | |
| 579 // Preview image will track the selected item's URL. | |
| 580 var previewElement = this.getScreenElement('image-preview'); | |
| 581 previewElement.oncontextmenu = function(e) { e.preventDefault(); }; | |
| 582 | |
| 583 imageGrid.previewElement = previewElement; | |
| 584 imageGrid.selectionType = 'default'; | |
| 585 imageGrid.flipPhotoElement = this.getScreenElement('flip-photo'); | |
| 586 | |
| 587 imageGrid.addEventListener('activate', | |
| 588 this.handleActivate_.bind(this)); | |
| 589 imageGrid.addEventListener('select', | |
| 590 this.handleSelect_.bind(this)); | |
| 591 imageGrid.addEventListener('phototaken', | |
| 592 this.handlePhotoTaken_.bind(this)); | |
| 593 imageGrid.addEventListener('photoupdated', | |
| 594 this.handlePhotoUpdated_.bind(this)); | |
| 595 // Set the title for camera item in the grid. | |
| 596 imageGrid.setCameraTitles( | |
| 597 loadTimeData.getString('takePhoto'), | |
| 598 loadTimeData.getString('photoFromCamera')); | |
| 599 | |
| 600 this.getScreenElement('take-photo').addEventListener( | |
| 601 'click', this.handleTakePhoto_.bind(this)); | |
| 602 this.getScreenElement('discard-photo').addEventListener( | |
| 603 'click', this.handleDiscardPhoto_.bind(this)); | |
| 604 | |
| 605 // Toggle 'animation' class for the duration of WebKit transition. | |
| 606 this.getScreenElement('flip-photo').addEventListener( | |
| 607 'click', this.handleFlipPhoto_.bind(this)); | |
| 608 this.getScreenElement('image-stream-crop').addEventListener( | |
| 609 'webkitTransitionEnd', function(e) { | |
| 610 previewElement.classList.remove('animation'); | |
| 611 }); | |
| 612 this.getScreenElement('image-preview-img').addEventListener( | |
| 613 'webkitTransitionEnd', function(e) { | |
| 614 previewElement.classList.remove('animation'); | |
| 615 }); | |
| 616 }, | |
| 617 | |
| 618 buttonIds: [], | |
| 619 | |
| 620 /** | |
| 621 * Creates button for adding to controls. | |
| 622 * @param {string} buttonId -- id for button, have to be unique within | |
| 623 * screen. Actual id will be prefixed with screen name and appended with | |
| 624 * '-button'. Use getScreenButton(buttonId) to find it later. | |
| 625 * @param {string} i18nPrefix -- screen prefix for i18n values. | |
| 626 * @param {function} callback -- will be called on button press with | |
| 627 * buttonId parameter. | |
| 628 * @param {array} pages -- list of pages where this button should be | |
| 629 * displayed. | |
| 630 * @param {array} classes -- list of additional CSS classes for button. | |
| 631 */ | |
| 632 makeButton: function(buttonId, i18nPrefix, callback, pages, classes) { | |
| 633 var capitalizedId = buttonId.charAt(0).toUpperCase() + buttonId.slice(1); | |
| 634 this.buttonIds.push(buttonId); | |
| 635 var result = this.ownerDocument.createElement('button'); | |
| 636 result.id = this.name() + '-' + buttonId + '-button'; | |
| 637 result.classList.add('screen-control-button'); | |
| 638 for (var i = 0; i < classes.length; i++) { | |
| 639 result.classList.add(classes[i]); | |
| 640 } | |
| 641 result.textContent = loadTimeData. | |
| 642 getString(i18nPrefix + capitalizedId + 'ButtonTitle'); | |
| 643 result.addEventListener('click', function(e) { | |
| 644 callback(buttonId); | |
| 645 e.stopPropagation(); | |
| 646 }); | |
| 647 result.pages = pages; | |
| 648 return result; | |
| 649 }, | |
| 650 | |
| 651 /** | |
| 652 * Simple validator for |configureTextInput|. | |
| 653 * Element is considered valid if it has any text. | |
| 654 * @param {Element} element - element to be validated. | |
| 655 * @return {boolean} - true, if element has any text. | |
| 656 */ | |
| 657 validIfNotEmpty_: function(element) { | |
| 658 return (element.value.length > 0); | |
| 659 }, | |
| 660 | |
| 661 /** | |
| 662 * Configure text-input |element|. | |
| 663 * @param {Element} element - element to be configured. | |
| 664 * @param {function(element)} inputChangeListener - function that will be | |
| 665 * called upon any button press/release. | |
| 666 * @param {function(element)} validator - function that will be called when | |
| 667 * Enter is pressed. If it returns |true| then advance to next element. | |
| 668 * @param {function(element)} moveFocus - function that will determine next | |
| 669 * element and move focus to it. | |
| 670 * @param {function(element)} errorHider - function that is called upon | |
| 671 * every button press, so that any associated error can be hidden. | |
| 672 */ | |
| 673 configureTextInput: function(element, | |
| 674 inputChangeListener, | |
| 675 validator, | |
| 676 moveFocus, | |
| 677 errorHider) { | |
| 678 element.addEventListener('keydown', function(e) { | |
| 679 if (e.keyIdentifier == 'Enter') { | |
| 680 var dataValid = true; | |
| 681 if (validator) | |
| 682 dataValid = validator(element); | |
| 683 if (!dataValid) { | |
| 684 element.focus(); | |
| 685 } else { | |
| 686 if (moveFocus) | |
| 687 moveFocus(element); | |
| 688 } | |
| 689 e.stopPropagation(); | |
| 690 return; | |
| 691 } | |
| 692 if (errorHider) | |
| 693 errorHider(element); | |
| 694 if (inputChangeListener) | |
| 695 inputChangeListener(element); | |
| 696 }); | |
| 697 element.addEventListener('keyup', function(e) { | |
| 698 if (inputChangeListener) | |
| 699 inputChangeListener(element); | |
| 700 }); | |
| 701 }, | |
| 702 | |
| 703 /** | |
| 704 * Makes element from template. | |
| 705 * @param {string} templateId -- template will be looked up within screen | |
| 706 * by class with name "template-<templateId>". | |
| 707 * @param {string} elementId -- id for result, uinque within screen. Actual | |
| 708 * id will be prefixed with screen name. Use getScreenElement(id) to find | |
| 709 * it later. | |
| 710 */ | |
| 711 makeFromTemplate: function(templateId, elementId) { | |
| 712 var templateClassName = 'template-' + templateId; | |
| 713 var templateNode = this.querySelector('.' + templateClassName); | |
| 714 var screenPrefix = this.name() + '-'; | |
| 715 var result = templateNode.cloneNode(true); | |
| 716 result.classList.remove(templateClassName); | |
| 717 result.id = screenPrefix + elementId; | |
| 718 return result; | |
| 719 }, | |
| 720 | |
| 721 /** | |
| 722 * @param {string} buttonId -- id of button to be found, | |
| 723 * @return {Element} button created by makeButton with given buttonId. | |
| 724 */ | |
| 725 getScreenButton: function(buttonId) { | |
| 726 var fullId = this.name() + '-' + buttonId + '-button'; | |
| 727 return this.getScreenElement(buttonId + '-button'); | |
| 728 }, | |
| 729 | |
| 730 /** | |
| 731 * @param {string} elementId -- id of element to be found, | |
| 732 * @return {Element} button created by makeFromTemplate with elementId. | |
| 733 */ | |
| 734 getScreenElement: function(elementId) { | |
| 735 var fullId = this.name() + '-' + elementId; | |
| 736 return $(fullId); | |
| 737 }, | |
| 738 | |
| 739 /** | |
| 740 * Screen controls. | |
| 741 * @type {!Array} Array of Buttons. | |
| 742 */ | |
| 743 get buttons() { | |
| 744 var links = this.ownerDocument.createElement('div'); | |
| 745 var buttons = this.ownerDocument.createElement('div'); | |
| 746 links.classList.add('controls-links'); | |
| 747 buttons.classList.add('controls-buttons'); | |
| 748 | |
| 749 var importLink = this.makeFromTemplate('import-supervised-user-link', | |
| 750 'import-link'); | |
| 751 importLink.hidden = true; | |
| 752 links.appendChild(importLink); | |
| 753 | |
| 754 var linkElement = importLink.querySelector('.signin-link'); | |
| 755 linkElement.addEventListener('click', | |
| 756 this.importLinkPressed_.bind(this)); | |
| 757 | |
| 758 var createLink = this.makeFromTemplate('create-supervised-user-link', | |
| 759 'create-link'); | |
| 760 createLink.hidden = true; | |
| 761 links.appendChild(createLink); | |
| 762 | |
| 763 var status = this.makeFromTemplate('status-container', 'status'); | |
| 764 buttons.appendChild(status); | |
| 765 | |
| 766 linkElement = createLink.querySelector('.signin-link'); | |
| 767 linkElement.addEventListener('click', | |
| 768 this.createLinkPressed_.bind(this)); | |
| 769 | |
| 770 buttons.appendChild(this.makeButton( | |
| 771 'start', | |
| 772 'managedUserCreationFlow', | |
| 773 this.startButtonPressed_.bind(this), | |
| 774 ['intro'], | |
| 775 ['custom-appearance', 'button-fancy', 'button-blue'])); | |
| 776 | |
| 777 buttons.appendChild(this.makeButton( | |
| 778 'prev', | |
| 779 'managedUserCreationFlow', | |
| 780 this.prevButtonPressed_.bind(this), | |
| 781 ['manager'], | |
| 782 [])); | |
| 783 | |
| 784 buttons.appendChild(this.makeButton( | |
| 785 'next', | |
| 786 'managedUserCreationFlow', | |
| 787 this.nextButtonPressed_.bind(this), | |
| 788 ['manager', 'username'], | |
| 789 [])); | |
| 790 | |
| 791 buttons.appendChild(this.makeButton( | |
| 792 'import', | |
| 793 'managedUserCreationFlow', | |
| 794 this.importButtonPressed_.bind(this), | |
| 795 ['import', 'import-password'], | |
| 796 [])); | |
| 797 | |
| 798 buttons.appendChild(this.makeButton( | |
| 799 'gotit', | |
| 800 'managedUserCreationFlow', | |
| 801 this.gotItButtonPressed_.bind(this), | |
| 802 ['created'], | |
| 803 ['custom-appearance', 'button-fancy', 'button-blue'])); | |
| 804 return [links, buttons]; | |
| 805 }, | |
| 806 | |
| 807 /** | |
| 808 * Does sanity check and calls backend with current user name/password pair | |
| 809 * to authenticate manager. May result in showManagerPasswordError. | |
| 810 * @private | |
| 811 */ | |
| 812 validateAndLogInAsManager_: function() { | |
| 813 var selectedPod = this.managerList_.selectedPod_; | |
| 814 if (null == selectedPod) | |
| 815 return; | |
| 816 | |
| 817 var managerId = selectedPod.user.username; | |
| 818 var managerDisplayId = selectedPod.user.emailAddress; | |
| 819 var managerPassword = selectedPod.passwordElement.value; | |
| 820 if (managerPassword.length == 0) | |
| 821 return; | |
| 822 if (this.disabled) | |
| 823 return; | |
| 824 this.disabled = true; | |
| 825 this.context_.managerId = managerId; | |
| 826 this.context_.managerDisplayId = managerDisplayId; | |
| 827 this.context_.managerName = selectedPod.user.displayName; | |
| 828 chrome.send('authenticateManagerInLocallyManagedUserCreationFlow', | |
| 829 [managerId, managerPassword]); | |
| 830 }, | |
| 831 | |
| 832 /** | |
| 833 * Does sanity check and calls backend with user display name/password pair | |
| 834 * to create a user. | |
| 835 * @private | |
| 836 */ | |
| 837 validateAndCreateLocallyManagedUser_: function() { | |
| 838 var firstPassword = $('managed-user-creation-password').value; | |
| 839 var secondPassword = | |
| 840 $('managed-user-creation-password-confirm').value; | |
| 841 var userName = $('managed-user-creation-name').value; | |
| 842 if (firstPassword != secondPassword) { | |
| 843 this.showPasswordError( | |
| 844 loadTimeData.getString('createManagedUserPasswordMismatchError')); | |
| 845 return; | |
| 846 } | |
| 847 if (this.disabled) | |
| 848 return; | |
| 849 this.disabled = true; | |
| 850 | |
| 851 this.context_.managedName = userName; | |
| 852 chrome.send('specifyLocallyManagedUserCreationFlowUserData', | |
| 853 [userName, firstPassword]); | |
| 854 }, | |
| 855 | |
| 856 /** | |
| 857 * Does sanity check and calls backend with selected existing supervised | |
| 858 * user id to import user. | |
| 859 * @private | |
| 860 */ | |
| 861 importSupervisedUser_: function() { | |
| 862 if (this.disabled) | |
| 863 return; | |
| 864 if (this.currentPage_ == 'import-password') { | |
| 865 var firstPassword = this.getScreenElement('password').value; | |
| 866 var secondPassword = this.getScreenElement('password-confirm').value; | |
| 867 if (firstPassword != secondPassword) { | |
| 868 this.showPasswordError( | |
| 869 loadTimeData.getString('createManagedUserPasswordMismatchError')); | |
| 870 return; | |
| 871 } | |
| 872 var userId = this.context_.importUserId; | |
| 873 this.disabled = true; | |
| 874 chrome.send('importSupervisedUserWithPassword', | |
| 875 [userId, firstPassword]); | |
| 876 return; | |
| 877 } else { | |
| 878 var selectedPod = this.importList_.selectedPod_; | |
| 879 if (!selectedPod) | |
| 880 return; | |
| 881 var user = selectedPod.user; | |
| 882 var userId = user.id; | |
| 883 | |
| 884 this.context_.importUserId = userId; | |
| 885 this.context_.managedName = user.name; | |
| 886 this.context_.selectedImageUrl = user.avatarurl; | |
| 887 if (!user.needPassword) { | |
| 888 this.disabled = true; | |
| 889 chrome.send('importSupervisedUser', [userId]); | |
| 890 } else { | |
| 891 this.setVisiblePage_('import-password'); | |
| 892 } | |
| 893 } | |
| 894 }, | |
| 895 | |
| 896 /** | |
| 897 * Calls backend part to check if current user name is valid/not taken. | |
| 898 * Results in call to either managedUserNameOk or managedUserNameError. | |
| 899 * @private | |
| 900 */ | |
| 901 checkUserName_: function() { | |
| 902 var userName = this.getScreenElement('name').value; | |
| 903 | |
| 904 // Avoid flickering | |
| 905 if (userName == this.lastIncorrectUserName_ || | |
| 906 userName == this.lastVerifiedName_) { | |
| 907 return; | |
| 908 } | |
| 909 if (userName.length > 0) { | |
| 910 chrome.send('checkLocallyManagedUserName', [userName]); | |
| 911 } else { | |
| 912 this.nameErrorVisible = false; | |
| 913 this.lastVerifiedName_ = null; | |
| 914 this.lastIncorrectUserName_ = null; | |
| 915 this.updateNextButtonForUser_(); | |
| 916 } | |
| 917 }, | |
| 918 | |
| 919 /** | |
| 920 * Called by backend part in case of successful name validation. | |
| 921 * @param {string} name - name that was validated. | |
| 922 */ | |
| 923 managedUserNameOk: function(name) { | |
| 924 this.lastVerifiedName_ = name; | |
| 925 this.lastIncorrectUserName_ = null; | |
| 926 if ($('managed-user-creation-name').value == name) | |
| 927 this.clearUserNameError_(); | |
| 928 this.updateNextButtonForUser_(); | |
| 929 }, | |
| 930 | |
| 931 /** | |
| 932 * Called by backend part in case of name validation failure. | |
| 933 * @param {string} name - name that was validated. | |
| 934 * @param {string} errorText - reason why this name is invalid. | |
| 935 */ | |
| 936 managedUserNameError: function(name, errorText) { | |
| 937 this.disabled = false; | |
| 938 this.lastIncorrectUserName_ = name; | |
| 939 this.lastVerifiedName_ = null; | |
| 940 | |
| 941 var userNameField = $('managed-user-creation-name'); | |
| 942 if (userNameField.value == this.lastIncorrectUserName_) { | |
| 943 this.nameErrorVisible = true; | |
| 944 $('bubble').showTextForElement( | |
| 945 $('managed-user-creation-name'), | |
| 946 errorText, | |
| 947 cr.ui.Bubble.Attachment.RIGHT, | |
| 948 12, 4); | |
| 949 this.setButtonDisabledStatus('next', true); | |
| 950 } | |
| 951 }, | |
| 952 | |
| 953 managedUserSuggestImport: function(name, user_id) { | |
| 954 this.disabled = false; | |
| 955 this.lastIncorrectUserName_ = name; | |
| 956 this.lastVerifiedName_ = null; | |
| 957 | |
| 958 var userNameField = $('managed-user-creation-name'); | |
| 959 var creationScreen = this; | |
| 960 | |
| 961 if (userNameField.value == this.lastIncorrectUserName_) { | |
| 962 this.nameErrorVisible = true; | |
| 963 var link = this.ownerDocument.createElement('div'); | |
| 964 link.innerHTML = loadTimeData.getStringF( | |
| 965 'importBubbleText', | |
| 966 '<a class="signin-link" href="#">', | |
| 967 name, | |
| 968 '</a>'); | |
| 969 link.querySelector('.signin-link').addEventListener('click', | |
| 970 function(e) { | |
| 971 creationScreen.handleSuggestImport_(user_id); | |
| 972 e.stopPropagation(); | |
| 973 }); | |
| 974 $('bubble').showContentForElement( | |
| 975 $('managed-user-creation-name'), | |
| 976 cr.ui.Bubble.Attachment.RIGHT, | |
| 977 link, | |
| 978 12, 4); | |
| 979 this.setButtonDisabledStatus('next', true); | |
| 980 } | |
| 981 }, | |
| 982 | |
| 983 /** | |
| 984 * Clears user name error, if name is no more guaranteed to be invalid. | |
| 985 * @private | |
| 986 */ | |
| 987 clearUserNameError_: function() { | |
| 988 // Avoid flickering | |
| 989 if ($('managed-user-creation-name').value == | |
| 990 this.lastIncorrectUserName_) { | |
| 991 return; | |
| 992 } | |
| 993 this.nameErrorVisible = false; | |
| 994 }, | |
| 995 | |
| 996 /** | |
| 997 * Called by backend part in case of password validation failure. | |
| 998 * @param {string} errorText - reason why this password is invalid. | |
| 999 */ | |
| 1000 showPasswordError: function(errorText) { | |
| 1001 $('bubble').showTextForElement( | |
| 1002 $('managed-user-creation-password'), | |
| 1003 errorText, | |
| 1004 cr.ui.Bubble.Attachment.RIGHT, | |
| 1005 12, 4); | |
| 1006 $('managed-user-creation-password').classList.add('password-error'); | |
| 1007 $('managed-user-creation-password').focus(); | |
| 1008 this.disabled = false; | |
| 1009 this.setButtonDisabledStatus('next', true); | |
| 1010 }, | |
| 1011 | |
| 1012 /** | |
| 1013 * True if user name error should be displayed. | |
| 1014 * @type {boolean} | |
| 1015 */ | |
| 1016 set nameErrorVisible(value) { | |
| 1017 $('managed-user-creation-name'). | |
| 1018 classList.toggle('duplicate-name', value); | |
| 1019 if (!value) | |
| 1020 $('bubble').hide(); | |
| 1021 }, | |
| 1022 | |
| 1023 /** | |
| 1024 * Updates state of Continue button after minimal checks. | |
| 1025 * @return {boolean} true, if form seems to be valid. | |
| 1026 * @private | |
| 1027 */ | |
| 1028 updateNextButtonForManager_: function() { | |
| 1029 var selectedPod = this.managerList_.selectedPod_; | |
| 1030 canProceed = null != selectedPod && | |
| 1031 selectedPod.passwordElement.value.length > 0; | |
| 1032 | |
| 1033 this.setButtonDisabledStatus('next', !canProceed); | |
| 1034 return canProceed; | |
| 1035 }, | |
| 1036 | |
| 1037 /** | |
| 1038 * Updates state of Continue button after minimal checks. | |
| 1039 * @return {boolean} true, if form seems to be valid. | |
| 1040 * @private | |
| 1041 */ | |
| 1042 updateNextButtonForUser_: function() { | |
| 1043 var firstPassword = this.getScreenElement('password').value; | |
| 1044 var secondPassword = this.getScreenElement('password-confirm').value; | |
| 1045 var userName = this.getScreenElement('name').value; | |
| 1046 | |
| 1047 var passwordOk = (firstPassword.length > 0) && | |
| 1048 (firstPassword.length == secondPassword.length); | |
| 1049 | |
| 1050 if (this.currentPage_ == 'import-password') { | |
| 1051 this.setButtonDisabledStatus('import', !passwordOk); | |
| 1052 return passwordOk; | |
| 1053 } | |
| 1054 var imageGrid = this.getScreenElement('image-grid'); | |
| 1055 var imageChosen = !(imageGrid.selectionType == 'camera' && | |
| 1056 imageGrid.cameraLive); | |
| 1057 var canProceed = | |
| 1058 passwordOk && | |
| 1059 (userName.length > 0) && | |
| 1060 this.lastVerifiedName_ && | |
| 1061 (userName == this.lastVerifiedName_) && | |
| 1062 imageChosen; | |
| 1063 | |
| 1064 this.setButtonDisabledStatus('next', !canProceed); | |
| 1065 return canProceed; | |
| 1066 }, | |
| 1067 | |
| 1068 showSelectedManagerPasswordError_: function() { | |
| 1069 var selectedPod = this.managerList_.selectedPod_; | |
| 1070 selectedPod.showPasswordError(); | |
| 1071 selectedPod.passwordElement.value = ''; | |
| 1072 selectedPod.focusInput(); | |
| 1073 this.updateNextButtonForManager_(); | |
| 1074 }, | |
| 1075 | |
| 1076 /** | |
| 1077 * Enables one particular subpage and hides the rest. | |
| 1078 * @param {string} visiblePage - name of subpage. | |
| 1079 * @private | |
| 1080 */ | |
| 1081 setVisiblePage_: function(visiblePage) { | |
| 1082 this.disabled = false; | |
| 1083 this.updateText_(); | |
| 1084 $('bubble').hide(); | |
| 1085 if (!this.imagesRequested_) { | |
| 1086 chrome.send('supervisedUserGetImages'); | |
| 1087 this.imagesRequested_ = true; | |
| 1088 } | |
| 1089 var pageNames = ['intro', | |
| 1090 'manager', | |
| 1091 'username', | |
| 1092 'import', | |
| 1093 'error', | |
| 1094 'created']; | |
| 1095 var pageButtons = {'intro' : 'start', | |
| 1096 'error' : 'error', | |
| 1097 'import' : 'import', | |
| 1098 'import-password' : 'import', | |
| 1099 'created' : 'gotit'}; | |
| 1100 this.hideStatus_(); | |
| 1101 var pageToDisplay = visiblePage; | |
| 1102 if (visiblePage == 'import-password') | |
| 1103 pageToDisplay = 'username'; | |
| 1104 | |
| 1105 for (i in pageNames) { | |
| 1106 var pageName = pageNames[i]; | |
| 1107 var page = $('managed-user-creation-' + pageName); | |
| 1108 page.hidden = (pageName != pageToDisplay); | |
| 1109 if (pageName == pageToDisplay) | |
| 1110 $('step-logo').hidden = page.classList.contains('step-no-logo'); | |
| 1111 } | |
| 1112 | |
| 1113 for (i in this.buttonIds) { | |
| 1114 var button = this.getScreenButton(this.buttonIds[i]); | |
| 1115 button.hidden = button.pages.indexOf(visiblePage) < 0; | |
| 1116 button.disabled = false; | |
| 1117 } | |
| 1118 | |
| 1119 var pagesWithCancel = ['intro', 'manager', 'username', 'import-password', | |
| 1120 'error', 'import']; | |
| 1121 $('login-header-bar').allowCancel = | |
| 1122 pagesWithCancel.indexOf(visiblePage) > 0; | |
| 1123 $('cancel-add-user-button').disabled = false; | |
| 1124 | |
| 1125 this.getScreenElement('import-link').hidden = true; | |
| 1126 this.getScreenElement('create-link').hidden = true; | |
| 1127 | |
| 1128 if (pageButtons[visiblePage]) | |
| 1129 this.getScreenButton(pageButtons[visiblePage]).focus(); | |
| 1130 | |
| 1131 this.currentPage_ = visiblePage; | |
| 1132 | |
| 1133 if (visiblePage == 'manager' || visiblePage == 'intro') { | |
| 1134 $('managed-user-creation-password').classList.remove('password-error'); | |
| 1135 if (this.managerList_.pods.length > 0) | |
| 1136 this.managerList_.selectPod(this.managerList_.pods[0]); | |
| 1137 } | |
| 1138 | |
| 1139 if (visiblePage == 'username' || visiblePage == 'import-password') { | |
| 1140 var elements = this.getScreenElement(pageToDisplay). | |
| 1141 querySelectorAll('.hide-on-import'); | |
| 1142 for (var i = 0; i < elements.length; i++) { | |
| 1143 elements[i].classList.toggle('hidden-on-import', | |
| 1144 visiblePage == 'import-password'); | |
| 1145 } | |
| 1146 } | |
| 1147 if (visiblePage == 'username') { | |
| 1148 var imageGrid = this.getScreenElement('image-grid'); | |
| 1149 // select some image. | |
| 1150 var selected = this.imagesData_[ | |
| 1151 Math.floor(Math.random() * this.imagesData_.length)]; | |
| 1152 this.context_.selectedImageUrl = selected.url; | |
| 1153 imageGrid.selectedItemUrl = selected.url; | |
| 1154 chrome.send('supervisedUserSelectImage', | |
| 1155 [selected.url, 'default']); | |
| 1156 this.getScreenElement('image-grid').redraw(); | |
| 1157 this.checkUserName_(); | |
| 1158 this.updateNextButtonForUser_(); | |
| 1159 this.getScreenElement('name').focus(); | |
| 1160 this.getScreenElement('import-link').hidden = | |
| 1161 this.importList_.pods.length == 0; | |
| 1162 } else if (visiblePage == 'import-password') { | |
| 1163 var imageGrid = this.getScreenElement('image-grid'); | |
| 1164 var selected; | |
| 1165 if ('selectedImageUrl' in this.context_) { | |
| 1166 selected = this.context_.selectedImageUrl; | |
| 1167 } else { | |
| 1168 // select some image. | |
| 1169 selected = this.imagesData_[ | |
| 1170 Math.floor(Math.random() * this.imagesData_.length)].url; | |
| 1171 chrome.send('supervisedUserSelectImage', | |
| 1172 [selected, 'default']); | |
| 1173 } | |
| 1174 imageGrid.selectedItemUrl = selected; | |
| 1175 this.getScreenElement('image-grid').redraw(); | |
| 1176 | |
| 1177 this.updateNextButtonForUser_(); | |
| 1178 | |
| 1179 this.getScreenElement('password').focus(); | |
| 1180 this.getScreenElement('import-link').hidden = true; | |
| 1181 } else { | |
| 1182 this.getScreenElement('image-grid').stopCamera(); | |
| 1183 } | |
| 1184 if (visiblePage == 'import') { | |
| 1185 this.getScreenElement('create-link').hidden = false; | |
| 1186 this.getScreenButton('import').disabled = | |
| 1187 !this.importList_.selectedPod_ || | |
| 1188 this.importList_.selectedPod_.user.exists; | |
| 1189 } | |
| 1190 chrome.send('currentSupervisedUserPage', [this.currentPage_]); | |
| 1191 }, | |
| 1192 | |
| 1193 setButtonDisabledStatus: function(buttonName, status) { | |
| 1194 var button = $('managed-user-creation-' + buttonName + '-button'); | |
| 1195 button.disabled = status; | |
| 1196 }, | |
| 1197 | |
| 1198 gotItButtonPressed_: function() { | |
| 1199 chrome.send('finishLocalManagedUserCreation'); | |
| 1200 }, | |
| 1201 | |
| 1202 handleErrorButtonPressed_: function() { | |
| 1203 chrome.send('abortLocalManagedUserCreation'); | |
| 1204 }, | |
| 1205 | |
| 1206 startButtonPressed_: function() { | |
| 1207 this.setVisiblePage_('manager'); | |
| 1208 this.setButtonDisabledStatus('next', true); | |
| 1209 }, | |
| 1210 | |
| 1211 nextButtonPressed_: function() { | |
| 1212 if (this.currentPage_ == 'manager') { | |
| 1213 this.validateAndLogInAsManager_(); | |
| 1214 return; | |
| 1215 } | |
| 1216 if (this.currentPage_ == 'username') { | |
| 1217 this.validateAndCreateLocallyManagedUser_(); | |
| 1218 } | |
| 1219 }, | |
| 1220 | |
| 1221 importButtonPressed_: function() { | |
| 1222 this.importSupervisedUser_(); | |
| 1223 }, | |
| 1224 | |
| 1225 importLinkPressed_: function() { | |
| 1226 this.setVisiblePage_('import'); | |
| 1227 }, | |
| 1228 | |
| 1229 handleSuggestImport_: function(user_id) { | |
| 1230 this.setVisiblePage_('import'); | |
| 1231 this.importList_.selectUser(user_id); | |
| 1232 }, | |
| 1233 | |
| 1234 createLinkPressed_: function() { | |
| 1235 this.setVisiblePage_('username'); | |
| 1236 this.lastIncorrectUserName_ = null; | |
| 1237 this.lastVerifiedName_ = null; | |
| 1238 this.checkUserName_(); | |
| 1239 }, | |
| 1240 | |
| 1241 prevButtonPressed_: function() { | |
| 1242 this.setVisiblePage_('intro'); | |
| 1243 }, | |
| 1244 | |
| 1245 showProgress: function(text) { | |
| 1246 var status = this.getScreenElement('status'); | |
| 1247 var statusText = status.querySelector('.id-text'); | |
| 1248 statusText.textContent = text; | |
| 1249 statusText.classList.remove('error'); | |
| 1250 status.querySelector('.id-spinner').hidden = false; | |
| 1251 status.hidden = false; | |
| 1252 this.getScreenElement('import-link').hidden = true; | |
| 1253 this.getScreenElement('create-link').hidden = true; | |
| 1254 }, | |
| 1255 | |
| 1256 showStatusError: function(text) { | |
| 1257 var status = this.getScreenElement('status'); | |
| 1258 var statusText = status.querySelector('.id-text'); | |
| 1259 statusText.textContent = text; | |
| 1260 statusText.classList.add('error'); | |
| 1261 status.querySelector('.id-spinner').hidden = true; | |
| 1262 status.hidden = false; | |
| 1263 this.getScreenElement('import-link').hidden = true; | |
| 1264 this.getScreenElement('create-link').hidden = true; | |
| 1265 }, | |
| 1266 | |
| 1267 hideStatus_: function() { | |
| 1268 var status = this.getScreenElement('status'); | |
| 1269 status.hidden = true; | |
| 1270 }, | |
| 1271 | |
| 1272 /** | |
| 1273 * Updates state of login header so that necessary buttons are displayed. | |
| 1274 **/ | |
| 1275 onBeforeShow: function(data) { | |
| 1276 $('login-header-bar').signinUIState = | |
| 1277 SIGNIN_UI_STATE.MANAGED_USER_CREATION_FLOW; | |
| 1278 if (data['managers']) { | |
| 1279 this.loadManagers(data['managers']); | |
| 1280 } | |
| 1281 var imageGrid = this.getScreenElement('image-grid'); | |
| 1282 imageGrid.updateAndFocus(); | |
| 1283 }, | |
| 1284 | |
| 1285 /** | |
| 1286 * Update state of login header so that necessary buttons are displayed. | |
| 1287 */ | |
| 1288 onBeforeHide: function() { | |
| 1289 $('login-header-bar').signinUIState = SIGNIN_UI_STATE.HIDDEN; | |
| 1290 this.getScreenElement('image-grid').stopCamera(); | |
| 1291 }, | |
| 1292 | |
| 1293 /** | |
| 1294 * Returns a control which should receive an initial focus. | |
| 1295 */ | |
| 1296 get defaultControl() { | |
| 1297 return $('managed-user-creation-name'); | |
| 1298 }, | |
| 1299 | |
| 1300 /** | |
| 1301 * True if the the screen is disabled (handles no user interaction). | |
| 1302 * @type {boolean} | |
| 1303 */ | |
| 1304 disabled_: false, | |
| 1305 | |
| 1306 get disabled() { | |
| 1307 return this.disabled_; | |
| 1308 }, | |
| 1309 | |
| 1310 set disabled(value) { | |
| 1311 this.disabled_ = value; | |
| 1312 var controls = this.querySelectorAll('button,input'); | |
| 1313 for (var i = 0, control; control = controls[i]; ++i) { | |
| 1314 control.disabled = value; | |
| 1315 } | |
| 1316 $('login-header-bar').disabled = value; | |
| 1317 $('cancel-add-user-button').disabled = false; | |
| 1318 }, | |
| 1319 | |
| 1320 /** | |
| 1321 * Called by backend part to propagate list of possible managers. | |
| 1322 * @param {Array} userList - list of users that can be managers. | |
| 1323 */ | |
| 1324 loadManagers: function(userList) { | |
| 1325 $('managed-user-creation-managers-block').hidden = false; | |
| 1326 this.managerList_.clearPods(); | |
| 1327 for (var i = 0; i < userList.length; ++i) | |
| 1328 this.managerList_.addPod(userList[i]); | |
| 1329 if (userList.length > 0) | |
| 1330 this.managerList_.selectPod(this.managerList_.pods[0]); | |
| 1331 }, | |
| 1332 | |
| 1333 /** | |
| 1334 * Cancels user creation and drops to user screen (either sign). | |
| 1335 */ | |
| 1336 cancel: function() { | |
| 1337 var notSignedInPages = ['intro', 'manager']; | |
| 1338 var postCreationPages = ['created']; | |
| 1339 if (notSignedInPages.indexOf(this.currentPage_) >= 0) { | |
| 1340 // Make sure no manager password is kept: | |
| 1341 this.managerList_.clearPods(); | |
| 1342 | |
| 1343 $('pod-row').loadLastWallpaper(); | |
| 1344 | |
| 1345 Oobe.showScreen({id: SCREEN_ACCOUNT_PICKER}); | |
| 1346 Oobe.resetSigninUI(true); | |
| 1347 return; | |
| 1348 } | |
| 1349 if (postCreationPages.indexOf(this.currentPage_) >= 0) { | |
| 1350 chrome.send('finishLocalManagedUserCreation'); | |
| 1351 return; | |
| 1352 } | |
| 1353 chrome.send('abortLocalManagedUserCreation'); | |
| 1354 }, | |
| 1355 | |
| 1356 updateText_: function() { | |
| 1357 var managerDisplayId = this.context_.managerDisplayId; | |
| 1358 this.updateElementText_('intro-alternate-text', | |
| 1359 'createManagedUserIntroAlternateText'); | |
| 1360 this.updateElementText_('created-text-1', | |
| 1361 'createManagedUserCreatedText1', | |
| 1362 this.context_.managedName); | |
| 1363 // TODO(antrim): Move wrapping with strong in grd file, and eliminate this | |
| 1364 //call. | |
| 1365 this.updateElementText_('created-text-2', | |
| 1366 'createManagedUserCreatedText2', | |
| 1367 this.wrapStrong( | |
| 1368 loadTimeData.getString('managementURL')), | |
| 1369 this.context_.managedName); | |
| 1370 this.updateElementText_('created-text-3', | |
| 1371 'createManagedUserCreatedText3', | |
| 1372 managerDisplayId); | |
| 1373 this.updateElementText_('name-explanation', | |
| 1374 'createManagedUserNameExplanation', | |
| 1375 managerDisplayId); | |
| 1376 }, | |
| 1377 | |
| 1378 wrapStrong: function(original) { | |
| 1379 if (original == undefined) | |
| 1380 return original; | |
| 1381 return '<strong>' + original + '</strong>'; | |
| 1382 }, | |
| 1383 | |
| 1384 updateElementText_: function(localId, templateName) { | |
| 1385 var args = Array.prototype.slice.call(arguments); | |
| 1386 args.shift(); | |
| 1387 this.getScreenElement(localId).innerHTML = | |
| 1388 loadTimeData.getStringF.apply(loadTimeData, args); | |
| 1389 }, | |
| 1390 | |
| 1391 showIntroPage: function() { | |
| 1392 $('managed-user-creation-password').value = ''; | |
| 1393 $('managed-user-creation-password-confirm').value = ''; | |
| 1394 $('managed-user-creation-name').value = ''; | |
| 1395 | |
| 1396 this.lastVerifiedName_ = null; | |
| 1397 this.lastIncorrectUserName_ = null; | |
| 1398 this.passwordErrorVisible = false; | |
| 1399 $('managed-user-creation-password').classList.remove('password-error'); | |
| 1400 this.nameErrorVisible = false; | |
| 1401 | |
| 1402 this.setVisiblePage_('intro'); | |
| 1403 }, | |
| 1404 | |
| 1405 showManagerPage: function() { | |
| 1406 this.setVisiblePage_('manager'); | |
| 1407 }, | |
| 1408 | |
| 1409 showUsernamePage: function() { | |
| 1410 this.setVisiblePage_('username'); | |
| 1411 }, | |
| 1412 | |
| 1413 showTutorialPage: function() { | |
| 1414 this.setVisiblePage_('created'); | |
| 1415 }, | |
| 1416 | |
| 1417 showPage: function(page) { | |
| 1418 this.setVisiblePage_(page); | |
| 1419 }, | |
| 1420 | |
| 1421 showErrorPage: function(errorTitle, errorText, errorButtonText) { | |
| 1422 this.disabled = false; | |
| 1423 $('managed-user-creation-error-title').innerHTML = errorTitle; | |
| 1424 $('managed-user-creation-error-text').innerHTML = errorText; | |
| 1425 $('managed-user-creation-error-button').textContent = errorButtonText; | |
| 1426 this.setVisiblePage_('error'); | |
| 1427 }, | |
| 1428 | |
| 1429 showManagerPasswordError: function() { | |
| 1430 this.disabled = false; | |
| 1431 this.showSelectedManagerPasswordError_(); | |
| 1432 }, | |
| 1433 | |
| 1434 /* | |
| 1435 TODO(antrim) : this is an explicit code duplications with UserImageScreen. | |
| 1436 It should be removed by issue 251179. | |
| 1437 */ | |
| 1438 /** | |
| 1439 * Currently selected user image index (take photo button is with zero | |
| 1440 * index). | |
| 1441 * @type {number} | |
| 1442 */ | |
| 1443 selectedUserImage_: -1, | |
| 1444 imagesData: [], | |
| 1445 | |
| 1446 setDefaultImages: function(imagesData) { | |
| 1447 var imageGrid = this.getScreenElement('image-grid'); | |
| 1448 for (var i = 0, data; data = imagesData[i]; i++) { | |
| 1449 var item = imageGrid.addItem(data.url, data.title); | |
| 1450 item.type = 'default'; | |
| 1451 item.author = data.author || ''; | |
| 1452 item.website = data.website || ''; | |
| 1453 } | |
| 1454 this.imagesData_ = imagesData; | |
| 1455 }, | |
| 1456 | |
| 1457 | |
| 1458 handleActivate_: function() { | |
| 1459 var imageGrid = this.getScreenElement('image-grid'); | |
| 1460 if (imageGrid.selectedItemUrl == ButtonImages.TAKE_PHOTO) { | |
| 1461 this.handleTakePhoto_(); | |
| 1462 return; | |
| 1463 } | |
| 1464 this.nextButtonPressed_(); | |
| 1465 }, | |
| 1466 | |
| 1467 /** | |
| 1468 * Handles selection change. | |
| 1469 * @param {Event} e Selection change event. | |
| 1470 * @private | |
| 1471 */ | |
| 1472 handleSelect_: function(e) { | |
| 1473 var imageGrid = this.getScreenElement('image-grid'); | |
| 1474 this.updateNextButtonForUser_(); | |
| 1475 | |
| 1476 $('managed-user-creation-flip-photo').tabIndex = | |
| 1477 (imageGrid.selectionType == 'camera') ? 0 : -1; | |
| 1478 if (imageGrid.cameraLive || imageGrid.selectionType != 'camera') | |
| 1479 imageGrid.previewElement.classList.remove('phototaken'); | |
| 1480 else | |
| 1481 imageGrid.previewElement.classList.add('phototaken'); | |
| 1482 | |
| 1483 if (!imageGrid.cameraLive || imageGrid.selectionType != 'camera') { | |
| 1484 this.context_.selectedImageUrl = imageGrid.selectedItemUrl; | |
| 1485 chrome.send('supervisedUserSelectImage', | |
| 1486 [imageGrid.selectedItemUrl, imageGrid.selectionType]); | |
| 1487 } | |
| 1488 // Start/stop camera on (de)selection. | |
| 1489 if (!imageGrid.inProgramSelection && | |
| 1490 imageGrid.selectionType != e.oldSelectionType) { | |
| 1491 if (imageGrid.selectionType == 'camera') { | |
| 1492 // Programmatic selection of camera item is done in | |
| 1493 // startCamera callback where streaming is started by itself. | |
| 1494 imageGrid.startCamera( | |
| 1495 function() { | |
| 1496 // Start capture if camera is still the selected item. | |
| 1497 $('managed-user-creation-image-preview-img').classList.toggle( | |
| 1498 'animated-transform', true); | |
| 1499 return imageGrid.selectedItem == imageGrid.cameraImage; | |
| 1500 }); | |
| 1501 } else { | |
| 1502 $('managed-user-creation-image-preview-img').classList.toggle( | |
| 1503 'animated-transform', false); | |
| 1504 imageGrid.stopCamera(); | |
| 1505 } | |
| 1506 } | |
| 1507 }, | |
| 1508 | |
| 1509 /** | |
| 1510 * Handle camera-photo flip. | |
| 1511 */ | |
| 1512 handleFlipPhoto_: function() { | |
| 1513 var imageGrid = this.getScreenElement('image-grid'); | |
| 1514 imageGrid.previewElement.classList.add('animation'); | |
| 1515 imageGrid.flipPhoto = !imageGrid.flipPhoto; | |
| 1516 var flipMessageId = imageGrid.flipPhoto ? | |
| 1517 'photoFlippedAccessibleText' : 'photoFlippedBackAccessibleText'; | |
| 1518 announceAccessibleMessage(loadTimeData.getString(flipMessageId)); | |
| 1519 }, | |
| 1520 | |
| 1521 /** | |
| 1522 * Handle photo capture from the live camera stream. | |
| 1523 */ | |
| 1524 handleTakePhoto_: function(e) { | |
| 1525 this.getScreenElement('image-grid').takePhoto(); | |
| 1526 chrome.send('supervisedUserTakePhoto'); | |
| 1527 }, | |
| 1528 | |
| 1529 handlePhotoTaken_: function(e) { | |
| 1530 chrome.send('supervisedUserPhotoTaken', [e.dataURL]); | |
| 1531 announceAccessibleMessage( | |
| 1532 loadTimeData.getString('photoCaptureAccessibleText')); | |
| 1533 }, | |
| 1534 | |
| 1535 /** | |
| 1536 * Handle photo updated event. | |
| 1537 * @param {Event} e Event with 'dataURL' property containing a data URL. | |
| 1538 */ | |
| 1539 handlePhotoUpdated_: function(e) { | |
| 1540 chrome.send('supervisedUserPhotoTaken', [e.dataURL]); | |
| 1541 }, | |
| 1542 | |
| 1543 /** | |
| 1544 * Handle discarding the captured photo. | |
| 1545 */ | |
| 1546 handleDiscardPhoto_: function(e) { | |
| 1547 var imageGrid = this.getScreenElement('image-grid'); | |
| 1548 imageGrid.discardPhoto(); | |
| 1549 chrome.send('supervisedUserDiscardPhoto'); | |
| 1550 announceAccessibleMessage( | |
| 1551 loadTimeData.getString('photoDiscardAccessibleText')); | |
| 1552 }, | |
| 1553 | |
| 1554 setCameraPresent: function(present) { | |
| 1555 this.getScreenElement('image-grid').cameraPresent = present; | |
| 1556 }, | |
| 1557 | |
| 1558 setExistingManagedUsers: function(users) { | |
| 1559 var selectedUser = null; | |
| 1560 // Store selected user | |
| 1561 if (this.importList_.selectedPod) | |
| 1562 selectedUser = this.importList_.selectedPod.user.id; | |
| 1563 | |
| 1564 var userList = users; | |
| 1565 userList.sort(function(a, b) { | |
| 1566 // Put existing users last. | |
| 1567 if (a.exists != b.exists) | |
| 1568 return a.exists ? 1 : -1; | |
| 1569 // Sort rest by name. | |
| 1570 return a.name.localeCompare(b.name, [], {sensitivity: 'base'}); | |
| 1571 }); | |
| 1572 | |
| 1573 this.importList_.clearPods(); | |
| 1574 var selectedIndex = -1; | |
| 1575 for (var i = 0; i < userList.length; ++i) { | |
| 1576 this.importList_.addPod(userList[i]); | |
| 1577 if (selectedUser == userList[i].id) | |
| 1578 selectedIndex = i; | |
| 1579 } | |
| 1580 | |
| 1581 if (userList.length == 1) | |
| 1582 this.importList_.selectPod(this.importList_.pods[0]); | |
| 1583 | |
| 1584 if (selectedIndex >= 0) | |
| 1585 this.importList_.selectPod(this.importList_.pods[selectedIndex]); | |
| 1586 | |
| 1587 if (this.currentPage_ == 'username') | |
| 1588 this.getScreenElement('import-link').hidden = (userList.length == 0); | |
| 1589 }, | |
| 1590 }; | |
| 1591 }); | |
| 1592 | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 403343002:
Rename "managed (mode|user)" to "supervised user" (part 8) (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src