| OLD | NEW |
| 1 // Copyright (c) 2011 The Chromium Authors. All rights reserved. | 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 | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 | 4 |
| 5 /** | 5 /** |
| 6 * @fileoverview Login Screen | 6 * @fileoverview Login Screen |
| 7 * This is the main code for the login screen. | 7 * This is the main code for the login screen. |
| 8 */ | 8 */ |
| 9 | 9 |
| 10 /** | 10 /** |
| (...skipping 104 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 115 // Make a deep copy of the template and clear its ID | 115 // Make a deep copy of the template and clear its ID |
| 116 var containerElement = this.userCardTemplate_.cloneNode(true); | 116 var containerElement = this.userCardTemplate_.cloneNode(true); |
| 117 this.userCardTemplate_.id = null; | 117 this.userCardTemplate_.id = null; |
| 118 | 118 |
| 119 var userElement = containerElement.getElementsByClassName('user')[0]; | 119 var userElement = containerElement.getElementsByClassName('user')[0]; |
| 120 assert(userElement, 'Expected user-template to have a user child'); | 120 assert(userElement, 'Expected user-template to have a user child'); |
| 121 assert(typeof(user.name) == 'string', | 121 assert(typeof(user.name) == 'string', |
| 122 'Expected every user to have a name.'); | 122 'Expected every user to have a name.'); |
| 123 | 123 |
| 124 userElement.setAttribute('display-name', user.name); | 124 userElement.setAttribute('display-name', user.name); |
| 125 userElement.setAttribute('user-name', user.email_address); | 125 userElement.setAttribute('user-name', user.emailAddress); |
| 126 userElement.setAttribute('user-index', index); | 126 userElement.setAttribute('user-index', index); |
| 127 | 127 |
| 128 // Find the span element (if any) and fill it in with the app name | 128 // Find the span element (if any) and fill it in with the app name |
| 129 var span = userElement.querySelector('span'); | 129 var span = userElement.querySelector('span'); |
| 130 if (span) | 130 if (span) |
| 131 span.textContent = user.name; | 131 span.textContent = user.name; |
| 132 | 132 |
| 133 // Fill in the image | 133 // Fill in the image |
| 134 var userImg = userElement.getElementsByClassName('user-image')[0]; | 134 var userImg = userElement.getElementsByClassName('user-image')[0]; |
| 135 if (userImg) { | 135 if (userImg) { |
| 136 userImg.style.backgroundImage = "url('" + user.image_url + "')"; | 136 userImg.style.backgroundImage = "url('" + user.imageUrl + "')"; |
| 137 // We put a click handler just on the user image - so clicking on the | 137 // We put a click handler just on the user image - so clicking on the |
| 138 // margins between users doesn't do anything | 138 // margins between users doesn't do anything |
| 139 var self = this; | 139 var self = this; |
| 140 this.userEvents_.add(userImg, 'click', function(e) { | 140 this.userEvents_.add(userImg, 'click', function(e) { |
| 141 self.userClick(e); | 141 self.userClick(e); |
| 142 }, false); | 142 }, false); |
| 143 } | 143 } |
| 144 var userLoginBox = | 144 var userLoginBox = |
| 145 userElement.getElementsByClassName('user-login-box')[0]; | 145 userElement.getElementsByClassName('user-login-box')[0]; |
| 146 var guestLoginBox = | 146 var guestLoginBox = |
| (...skipping 18 matching lines...) Expand all Loading... |
| 165 containerElement.addEventListener(Slider.EventType.ACTIVATE, | 165 containerElement.addEventListener(Slider.EventType.ACTIVATE, |
| 166 this.guestActivateCard); | 166 this.guestActivateCard); |
| 167 containerElement.addEventListener(Slider.EventType.DEACTIVATE, | 167 containerElement.addEventListener(Slider.EventType.DEACTIVATE, |
| 168 this.guestDeactivateCard); | 168 this.guestDeactivateCard); |
| 169 | 169 |
| 170 userLoginBox.hidden = true; | 170 userLoginBox.hidden = true; |
| 171 | 171 |
| 172 var loginButton = | 172 var loginButton = |
| 173 guestLoginBox.getElementsByClassName('loginbutton')[0]; | 173 guestLoginBox.getElementsByClassName('loginbutton')[0]; |
| 174 loginButton.addEventListener('click', function(e) { | 174 loginButton.addEventListener('click', function(e) { |
| 175 chrome.send('LaunchIncognito', []); | 175 chrome.send('launchIncognito', []); |
| 176 // Don't allow the click to trigger a link or anything | 176 // Don't allow the click to trigger a link or anything |
| 177 e.preventDefault(); | 177 e.preventDefault(); |
| 178 // Prevent the user-frame from receiving the event. | 178 // Prevent the user-frame from receiving the event. |
| 179 e.stopPropagation(); | 179 e.stopPropagation(); |
| 180 }, true); | 180 }, true); |
| 181 } | 181 } |
| 182 | 182 |
| 183 // Insert at the end of the provided page | 183 // Insert at the end of the provided page |
| 184 parent.appendChild(containerElement); | 184 parent.appendChild(containerElement); |
| 185 // Display the container element | 185 // Display the container element |
| (...skipping 95 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 281 $('user-list').removeChild(userCard); | 281 $('user-list').removeChild(userCard); |
| 282 | 282 |
| 283 // Update the user indicies | 283 // Update the user indicies |
| 284 var usersOnList = $('user-list').getElementsByClassName('user-card'); | 284 var usersOnList = $('user-list').getElementsByClassName('user-card'); |
| 285 for (var userIndex = 0; userIndex < usersOnList.length; userIndex++) { | 285 for (var userIndex = 0; userIndex < usersOnList.length; userIndex++) { |
| 286 var uElement = usersOnList[userIndex].getElementsByClassName('user')[0]; | 286 var uElement = usersOnList[userIndex].getElementsByClassName('user')[0]; |
| 287 uElement.setAttribute('user-index', userIndex); | 287 uElement.setAttribute('user-index', userIndex); |
| 288 } | 288 } |
| 289 this.updateSliderCards(); | 289 this.updateSliderCards(); |
| 290 | 290 |
| 291 chrome.send('RemoveUser', [getUserName(userElement)]); | 291 chrome.send('removeUser', [getUserName(userElement)]); |
| 292 }, | 292 }, |
| 293 | 293 |
| 294 /** | 294 /** |
| 295 * Invoked when the user card is activated. | 295 * Invoked when the user card is activated. |
| 296 * @param {Event} e The Activate Card event | 296 * @param {Event} e The Activate Card event |
| 297 */ | 297 */ |
| 298 userActivateCard: function(e) { | 298 userActivateCard: function(e) { |
| 299 var card = e.target; | 299 var card = e.target; |
| 300 var user = card.getElementsByClassName('user')[0]; | 300 var user = card.getElementsByClassName('user')[0]; |
| 301 assert(user, 'user element not found'); | 301 assert(user, 'user element not found'); |
| (...skipping 110 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 412 'The parent element is not a user element.'); | 412 'The parent element is not a user element.'); |
| 413 | 413 |
| 414 var userImg = userElement.getElementsByClassName('user-image')[0]; | 414 var userImg = userElement.getElementsByClassName('user-image')[0]; |
| 415 var userLoginBox = | 415 var userLoginBox = |
| 416 userElement.getElementsByClassName('user-login-box')[0]; | 416 userElement.getElementsByClassName('user-login-box')[0]; |
| 417 var passwordBox = userLoginBox.getElementsByClassName('passwordbox')[0]; | 417 var passwordBox = userLoginBox.getElementsByClassName('passwordbox')[0]; |
| 418 | 418 |
| 419 var userName = getUserName(userElement); | 419 var userName = getUserName(userElement); |
| 420 var password = passwordBox.value; | 420 var password = passwordBox.value; |
| 421 if (password.length > 0) { | 421 if (password.length > 0) { |
| 422 chrome.send('AuthenticateUser', [userName, password]); | 422 chrome.send('authenticateUser', [userName, password]); |
| 423 return false; | 423 return false; |
| 424 } | 424 } |
| 425 } | 425 } |
| 426 return true; | 426 return true; |
| 427 }, | 427 }, |
| 428 | 428 |
| 429 loginKeyDown: function(e) { | 429 loginKeyDown: function(e) { |
| 430 switch (e.keyCode) { | 430 switch (e.keyCode) { |
| 431 // shift key down | 431 // shift key down |
| 432 case 16: | 432 case 16: |
| (...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 466 break; | 466 break; |
| 467 case 'B': | 467 case 'B': |
| 468 if (this.isAltPressed_) { | 468 if (this.isAltPressed_) { |
| 469 var guestElement = | 469 var guestElement = |
| 470 this.guestCard_.getElementsByClassName('user')[0]; | 470 this.guestCard_.getElementsByClassName('user')[0]; |
| 471 var guestIndex = guestElement.getAttribute('user-index'); | 471 var guestIndex = guestElement.getAttribute('user-index'); |
| 472 assert(guestIndex, 'unexpected user without userIndex'); | 472 assert(guestIndex, 'unexpected user without userIndex'); |
| 473 this.slider.currentCardIndex = guestIndex; | 473 this.slider.currentCardIndex = guestIndex; |
| 474 setTimeout(function() { | 474 setTimeout(function() { |
| 475 // TODO(fsamuel): Make this call a common function. | 475 // TODO(fsamuel): Make this call a common function. |
| 476 chrome.send('LaunchIncognito', []); | 476 chrome.send('launchIncognito', []); |
| 477 }, 50); | 477 }, 50); |
| 478 } | 478 } |
| 479 break; | 479 break; |
| 480 default: | 480 default: |
| 481 switch (e.keyCode) { | 481 switch (e.keyCode) { |
| 482 // enter pressed. | 482 // enter pressed. |
| 483 case 13: | 483 case 13: |
| 484 if (this.slider.currentCard == guestCard_) { | 484 if (this.slider.currentCard == guestCard_) { |
| 485 // TODO(fsamuel): Enter Incognito mode | 485 // TODO(fsamuel): Enter Incognito mode |
| 486 } | 486 } |
| (...skipping 116 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 603 e.stopPropagation(); | 603 e.stopPropagation(); |
| 604 if (e.keyCode == 13) { | 604 if (e.keyCode == 13) { |
| 605 if (emailBox.value.length > 0) { | 605 if (emailBox.value.length > 0) { |
| 606 passwordBox.focus(); | 606 passwordBox.focus(); |
| 607 } | 607 } |
| 608 } | 608 } |
| 609 }); | 609 }); |
| 610 | 610 |
| 611 passwordBox.addEventListener('keypress', function(e) { | 611 passwordBox.addEventListener('keypress', function(e) { |
| 612 if (e.keyCode == 13) { | 612 if (e.keyCode == 13) { |
| 613 chrome.send('AuthenticateUser', [emailBox.value, passwordBox.value]); | 613 chrome.send('authenticateUser', [emailBox.value, passwordBox.value]); |
| 614 } | 614 } |
| 615 }, true); | 615 }, true); |
| 616 }, | 616 }, |
| 617 | 617 |
| 618 initialize: function() { | 618 initialize: function() { |
| 619 this.userEvents_ = new EventTracker(); | 619 this.userEvents_ = new EventTracker(); |
| 620 // Request data on the users so we can fill them in. | 620 // Request data on the users so we can fill them in. |
| 621 // Note that this is kicked off asynchronously. 'getUsersCallback' will | 621 // Note that this is kicked off asynchronously. 'getUsersCallback' will |
| 622 // be invoked at some point after this function returns. | 622 // be invoked at some point after this function returns. |
| 623 chrome.send('GetUsers'); | 623 chrome.send('getUsers'); |
| 624 | 624 |
| 625 // Prevent touch events from triggering any sort of native scrolling | 625 // Prevent touch events from triggering any sort of native scrolling |
| 626 document.addEventListener('touchmove', function(e) { | 626 document.addEventListener('touchmove', function(e) { |
| 627 e.preventDefault(); | 627 e.preventDefault(); |
| 628 }, true); | 628 }, true); |
| 629 | 629 |
| 630 this.userCardTemplate_ = $('user-template'); | 630 this.userCardTemplate_ = $('user-template'); |
| 631 this.userCardTemplate_.id = null; | 631 this.userCardTemplate_.id = null; |
| 632 $('user-list').removeChild(this.userCardTemplate_); | 632 $('user-list').removeChild(this.userCardTemplate_); |
| 633 $('user-frame').addEventListener(Slider.EventType.SELECTION_CHANGED, | 633 $('user-frame').addEventListener(Slider.EventType.SELECTION_CHANGED, |
| (...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 665 // call with the appropriate this. | 665 // call with the appropriate this. |
| 666 loginScreenObj.getUsersCallback(users); | 666 loginScreenObj.getUsersCallback(users); |
| 667 } | 667 } |
| 668 loginScreenObj.initialize(); | 668 loginScreenObj.initialize(); |
| 669 }, false); | 669 }, false); |
| 670 | 670 |
| 671 // Disable text selection. | 671 // Disable text selection. |
| 672 document.onselectstart = function(e) { | 672 document.onselectstart = function(e) { |
| 673 e.preventDefault(); | 673 e.preventDefault(); |
| 674 } | 674 } |
| OLD | NEW |