OLD | NEW |
1 // Copyright 2014 The Chromium Authors. All rights reserved. | 1 // Copyright 2014 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 User pod row implementation. | 6 * @fileoverview User pod row implementation. |
7 */ | 7 */ |
8 | 8 |
9 cr.define('login', function() { | 9 cr.define('login', function() { |
10 /** | 10 /** |
(...skipping 141 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
152 * @type {Object} | 152 * @type {Object} |
153 */ | 153 */ |
154 UserPod.userImageSalt_ = {}; | 154 UserPod.userImageSalt_ = {}; |
155 | 155 |
156 UserPod.prototype = { | 156 UserPod.prototype = { |
157 __proto__: HTMLDivElement.prototype, | 157 __proto__: HTMLDivElement.prototype, |
158 | 158 |
159 /** @override */ | 159 /** @override */ |
160 decorate: function() { | 160 decorate: function() { |
161 this.tabIndex = UserPodTabOrder.POD_INPUT; | 161 this.tabIndex = UserPodTabOrder.POD_INPUT; |
162 this.customButtonElement.tabIndex = UserPodTabOrder.POD_INPUT; | |
163 this.actionBoxAreaElement.tabIndex = UserPodTabOrder.ACTION_BOX; | 162 this.actionBoxAreaElement.tabIndex = UserPodTabOrder.ACTION_BOX; |
164 | 163 |
165 this.addEventListener('keydown', this.handlePodKeyDown_.bind(this)); | 164 this.addEventListener('keydown', this.handlePodKeyDown_.bind(this)); |
166 this.addEventListener('click', this.handleClickOnPod_.bind(this)); | 165 this.addEventListener('click', this.handleClickOnPod_.bind(this)); |
167 | 166 |
168 this.signinButtonElement.addEventListener('click', | 167 this.signinButtonElement.addEventListener('click', |
169 this.activate.bind(this)); | 168 this.activate.bind(this)); |
170 | 169 |
171 this.actionBoxAreaElement.addEventListener('mousedown', | 170 this.actionBoxAreaElement.addEventListener('mousedown', |
172 stopEventPropagation); | 171 stopEventPropagation); |
173 this.actionBoxAreaElement.addEventListener('click', | 172 this.actionBoxAreaElement.addEventListener('click', |
174 this.handleActionAreaButtonClick_.bind(this)); | 173 this.handleActionAreaButtonClick_.bind(this)); |
175 this.actionBoxAreaElement.addEventListener('keydown', | 174 this.actionBoxAreaElement.addEventListener('keydown', |
176 this.handleActionAreaButtonKeyDown_.bind(this)); | 175 this.handleActionAreaButtonKeyDown_.bind(this)); |
177 | 176 |
178 this.actionBoxMenuRemoveElement.addEventListener('click', | 177 this.actionBoxMenuRemoveElement.addEventListener('click', |
179 this.handleRemoveCommandClick_.bind(this)); | 178 this.handleRemoveCommandClick_.bind(this)); |
180 this.actionBoxMenuRemoveElement.addEventListener('keydown', | 179 this.actionBoxMenuRemoveElement.addEventListener('keydown', |
181 this.handleRemoveCommandKeyDown_.bind(this)); | 180 this.handleRemoveCommandKeyDown_.bind(this)); |
182 this.actionBoxMenuRemoveElement.addEventListener('blur', | 181 this.actionBoxMenuRemoveElement.addEventListener('blur', |
183 this.handleRemoveCommandBlur_.bind(this)); | 182 this.handleRemoveCommandBlur_.bind(this)); |
184 | 183 |
185 if (this.actionBoxRemoveUserWarningButtonElement) { | 184 if (this.actionBoxRemoveUserWarningButtonElement) { |
186 this.actionBoxRemoveUserWarningButtonElement.addEventListener( | 185 this.actionBoxRemoveUserWarningButtonElement.addEventListener( |
187 'click', | 186 'click', |
188 this.handleRemoveUserConfirmationClick_.bind(this)); | 187 this.handleRemoveUserConfirmationClick_.bind(this)); |
189 } | 188 } |
190 | |
191 this.customButtonElement.addEventListener('click', | |
192 this.handleCustomButtonClick_.bind(this)); | |
193 }, | 189 }, |
194 | 190 |
195 /** | 191 /** |
196 * Initializes the pod after its properties set and added to a pod row. | 192 * Initializes the pod after its properties set and added to a pod row. |
197 */ | 193 */ |
198 initialize: function() { | 194 initialize: function() { |
199 this.passwordElement.addEventListener('keydown', | 195 this.passwordElement.addEventListener('keydown', |
200 this.parentNode.handleKeyDown.bind(this.parentNode)); | 196 this.parentNode.handleKeyDown.bind(this.parentNode)); |
201 this.passwordElement.addEventListener('keypress', | 197 this.passwordElement.addEventListener('keypress', |
202 this.handlePasswordKeyPress_.bind(this)); | 198 this.handlePasswordKeyPress_.bind(this)); |
(...skipping 222 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
425 | 421 |
426 /** | 422 /** |
427 * Gets the locked user indicator box. | 423 * Gets the locked user indicator box. |
428 * @type {!HTMLInputElement} | 424 * @type {!HTMLInputElement} |
429 */ | 425 */ |
430 get lockedIndicatorElement() { | 426 get lockedIndicatorElement() { |
431 return this.querySelector('.locked-indicator'); | 427 return this.querySelector('.locked-indicator'); |
432 }, | 428 }, |
433 | 429 |
434 /** | 430 /** |
435 * Gets the custom button. This button is normally hidden, but can be shown | 431 * Gets the custom icon. This icon is normally hidden, but can be shown |
436 * using the chrome.screenlockPrivate API. | 432 * using the chrome.screenlockPrivate API. |
437 * @type {!HTMLInputElement} | 433 * @type {!HTMLDivElement} |
438 */ | 434 */ |
439 get customButtonElement() { | 435 get customIconElement() { |
440 return this.querySelector('.custom-button'); | 436 return this.querySelector('.custom-icon'); |
441 }, | 437 }, |
442 | 438 |
443 /** | 439 /** |
444 * Updates the user pod element. | 440 * Updates the user pod element. |
445 */ | 441 */ |
446 update: function() { | 442 update: function() { |
447 this.imageElement.src = 'chrome://userimage/' + this.user.username + | 443 this.imageElement.src = 'chrome://userimage/' + this.user.username + |
448 '?id=' + UserPod.userImageSalt_[this.user.username]; | 444 '?id=' + UserPod.userImageSalt_[this.user.username]; |
449 | 445 |
450 this.nameElement.textContent = this.user_.displayName; | 446 this.nameElement.textContent = this.user_.displayName; |
451 this.signedInIndicatorElement.hidden = !this.user_.signedIn; | 447 this.signedInIndicatorElement.hidden = !this.user_.signedIn; |
452 | 448 |
453 this.signinButtonElement.hidden = !this.isAuthTypeOnlineSignIn; | 449 this.signinButtonElement.hidden = !this.isAuthTypeOnlineSignIn; |
454 this.customButtonElement.tabIndex = UserPodTabOrder.POD_INPUT; | 450 if (this.isAuthTypeUserClick) |
455 if (this.isAuthTypeUserClick) { | |
456 this.passwordLabelElement.textContent = this.authValue; | 451 this.passwordLabelElement.textContent = this.authValue; |
457 this.customButtonElement.tabIndex = -1; | |
458 } | |
459 | 452 |
460 this.updateActionBoxArea(); | 453 this.updateActionBoxArea(); |
461 | 454 |
462 this.passwordElement.setAttribute('aria-label', loadTimeData.getStringF( | 455 this.passwordElement.setAttribute('aria-label', loadTimeData.getStringF( |
463 'passwordFieldAccessibleName', this.user_.emailAddress)); | 456 'passwordFieldAccessibleName', this.user_.emailAddress)); |
464 | 457 |
465 this.customizeUserPodPerUserType(); | 458 this.customizeUserPodPerUserType(); |
466 }, | 459 }, |
467 | 460 |
468 updateActionBoxArea: function() { | 461 updateActionBoxArea: function() { |
(...skipping 199 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
668 /** | 661 /** |
669 * Activates the pod. | 662 * Activates the pod. |
670 * @param {Event} e Event object. | 663 * @param {Event} e Event object. |
671 * @return {boolean} True if activated successfully. | 664 * @return {boolean} True if activated successfully. |
672 */ | 665 */ |
673 activate: function(e) { | 666 activate: function(e) { |
674 if (this.isAuthTypeOnlineSignIn) { | 667 if (this.isAuthTypeOnlineSignIn) { |
675 this.showSigninUI(); | 668 this.showSigninUI(); |
676 } else if (this.isAuthTypeUserClick) { | 669 } else if (this.isAuthTypeUserClick) { |
677 Oobe.disableSigninUI(); | 670 Oobe.disableSigninUI(); |
678 chrome.send('authenticateUser', [this.user.username, '']); | 671 chrome.send('attemptUnlock', [this.user.username]); |
679 } else if (this.isAuthTypePassword) { | 672 } else if (this.isAuthTypePassword) { |
680 if (!this.passwordElement.value) | 673 if (!this.passwordElement.value) |
681 return false; | 674 return false; |
682 Oobe.disableSigninUI(); | 675 Oobe.disableSigninUI(); |
683 chrome.send('authenticateUser', | 676 chrome.send('authenticateUser', |
684 [this.user.username, this.passwordElement.value]); | 677 [this.user.username, this.passwordElement.value]); |
685 } else { | 678 } else { |
686 console.error('Activating user pod with invalid authentication type: ' + | 679 console.error('Activating user pod with invalid authentication type: ' + |
687 this.authType); | 680 this.authType); |
688 } | 681 } |
(...skipping 185 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
874 handlePodKeyDown_: function(e) { | 867 handlePodKeyDown_: function(e) { |
875 if (!this.isAuthTypeUserClick || this.disabled) | 868 if (!this.isAuthTypeUserClick || this.disabled) |
876 return; | 869 return; |
877 switch (e.keyIdentifier) { | 870 switch (e.keyIdentifier) { |
878 case 'Enter': | 871 case 'Enter': |
879 case 'U+0020': // Space | 872 case 'U+0020': // Space |
880 if (this.parentNode.isFocused(this)) | 873 if (this.parentNode.isFocused(this)) |
881 this.parentNode.setActivatedPod(this); | 874 this.parentNode.setActivatedPod(this); |
882 break; | 875 break; |
883 } | 876 } |
884 }, | |
885 | |
886 /** | |
887 * Called when the custom button is clicked. | |
888 */ | |
889 handleCustomButtonClick_: function() { | |
890 chrome.send('customButtonClicked', [this.user.username]); | |
891 } | 877 } |
892 }; | 878 }; |
893 | 879 |
894 /** | 880 /** |
895 * Creates a public account user pod. | 881 * Creates a public account user pod. |
896 * @constructor | 882 * @constructor |
897 * @extends {UserPod} | 883 * @extends {UserPod} |
898 */ | 884 */ |
899 var PublicAccountUserPod = cr.ui.define(function() { | 885 var PublicAccountUserPod = cr.ui.define(function() { |
900 var node = UserPod(); | 886 var node = UserPod(); |
(...skipping 236 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1137 update: function() { | 1123 update: function() { |
1138 this.imageElement.src = this.user.userImage; | 1124 this.imageElement.src = this.user.userImage; |
1139 this.nameElement.textContent = this.user.displayName; | 1125 this.nameElement.textContent = this.user.displayName; |
1140 | 1126 |
1141 var isLockedUser = this.user.needsSignin; | 1127 var isLockedUser = this.user.needsSignin; |
1142 this.signinButtonElement.hidden = true; | 1128 this.signinButtonElement.hidden = true; |
1143 this.lockedIndicatorElement.hidden = !isLockedUser; | 1129 this.lockedIndicatorElement.hidden = !isLockedUser; |
1144 this.passwordElement.hidden = !isLockedUser; | 1130 this.passwordElement.hidden = !isLockedUser; |
1145 this.nameElement.hidden = isLockedUser; | 1131 this.nameElement.hidden = isLockedUser; |
1146 | 1132 |
1147 if (this.isAuthTypeUserClick) { | 1133 if (this.isAuthTypeUserClick) |
1148 this.passwordLabelElement.textContent = this.authValue; | 1134 this.passwordLabelElement.textContent = this.authValue; |
1149 this.customButtonElement.tabIndex = -1; | |
1150 } | |
1151 | 1135 |
1152 UserPod.prototype.updateActionBoxArea.call(this); | 1136 UserPod.prototype.updateActionBoxArea.call(this); |
1153 }, | 1137 }, |
1154 | 1138 |
1155 /** @override */ | 1139 /** @override */ |
1156 focusInput: function() { | 1140 focusInput: function() { |
1157 // For focused pods, display the name unless the pod is locked. | 1141 // For focused pods, display the name unless the pod is locked. |
1158 var isLockedUser = this.user.needsSignin; | 1142 var isLockedUser = this.user.needsSignin; |
1159 this.signinButtonElement.hidden = true; | 1143 this.signinButtonElement.hidden = true; |
1160 this.lockedIndicatorElement.hidden = !isLockedUser; | 1144 this.lockedIndicatorElement.hidden = !isLockedUser; |
(...skipping 496 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1657 */ | 1641 */ |
1658 setShouldShowApps: function(shouldShowApps) { | 1642 setShouldShowApps: function(shouldShowApps) { |
1659 if (this.shouldShowApps_ == shouldShowApps) | 1643 if (this.shouldShowApps_ == shouldShowApps) |
1660 return; | 1644 return; |
1661 | 1645 |
1662 this.shouldShowApps_ = shouldShowApps; | 1646 this.shouldShowApps_ = shouldShowApps; |
1663 this.rebuildPods(); | 1647 this.rebuildPods(); |
1664 }, | 1648 }, |
1665 | 1649 |
1666 /** | 1650 /** |
1667 * Shows a button on a user pod with an icon. Clicking on this button | 1651 * Shows a custom icon on a user pod besides the input field. |
1668 * triggers an event used by the chrome.screenlockPrivate API. | |
1669 * @param {string} username Username of pod to add button | 1652 * @param {string} username Username of pod to add button |
1670 * @param {string} iconURL URL of the button icon | 1653 * @param {string} iconURL URL of the button icon |
1671 */ | 1654 */ |
1672 showUserPodButton: function(username, iconURL) { | 1655 showUserPodCustomIcon: function(username, iconURL) { |
1673 var pod = this.getPodWithUsername_(username); | 1656 var pod = this.getPodWithUsername_(username); |
1674 if (pod == null) { | 1657 if (pod == null) { |
1675 console.error('Unable to show user pod button for ' + username + | 1658 console.error('Unable to show user pod button for ' + username + |
1676 ': user pod not found.'); | 1659 ': user pod not found.'); |
1677 return; | 1660 return; |
1678 } | 1661 } |
1679 | 1662 |
1680 pod.customButtonElement.hidden = false; | 1663 pod.customIconElement.hidden = false; |
1681 var icon = | 1664 pod.customIconElement.style.backgroundImage = url(iconURL); |
1682 pod.customButtonElement.querySelector('.custom-button-icon'); | |
1683 icon.src = iconURL; | |
1684 }, | 1665 }, |
1685 | 1666 |
1686 /** | 1667 /** |
1687 * Hides button from user pod added by showUserPodButton(). | 1668 * Hides the custom icon in the user pod added by showUserPodCustomIcon(). |
1688 * @param {string} username Username of pod to remove button | 1669 * @param {string} username Username of pod to remove button |
1689 */ | 1670 */ |
1690 hideUserPodButton: function(username) { | 1671 hideUserPodCustomIcon: function(username) { |
1691 var pod = this.getPodWithUsername_(username); | 1672 var pod = this.getPodWithUsername_(username); |
1692 if (pod == null) { | 1673 if (pod == null) { |
1693 console.error('Unable to hide user pod button for ' + username + | 1674 console.error('Unable to hide user pod button for ' + username + |
1694 ': user pod not found.'); | 1675 ': user pod not found.'); |
1695 return; | 1676 return; |
1696 } | 1677 } |
1697 | 1678 |
1698 pod.customButtonElement.hidden = true; | 1679 pod.customIconElement.hidden = true; |
1699 }, | 1680 }, |
1700 | 1681 |
1701 /** | 1682 /** |
1702 * Sets the authentication type used to authenticate the user. | 1683 * Sets the authentication type used to authenticate the user. |
1703 * @param {string} username Username of selected user | 1684 * @param {string} username Username of selected user |
1704 * @param {number} authType Authentication type, must be one of the | 1685 * @param {number} authType Authentication type, must be one of the |
1705 * values listed in AUTH_TYPE enum. | 1686 * values listed in AUTH_TYPE enum. |
1706 * @param {string} value The initial value to use for authentication. | 1687 * @param {string} value The initial value to use for authentication. |
1707 */ | 1688 */ |
1708 setAuthType: function(username, authType, value) { | 1689 setAuthType: function(username, authType, value) { |
(...skipping 12 matching lines...) Expand all Loading... |
1721 showEasyUnlockBubble: function() { | 1702 showEasyUnlockBubble: function() { |
1722 if (!this.focusedPod_) { | 1703 if (!this.focusedPod_) { |
1723 console.error('No focused pod to show Easy Unlock bubble.'); | 1704 console.error('No focused pod to show Easy Unlock bubble.'); |
1724 return; | 1705 return; |
1725 } | 1706 } |
1726 | 1707 |
1727 var bubbleContent = document.createElement('div'); | 1708 var bubbleContent = document.createElement('div'); |
1728 bubbleContent.classList.add('easy-unlock-button-content'); | 1709 bubbleContent.classList.add('easy-unlock-button-content'); |
1729 bubbleContent.textContent = loadTimeData.getString('easyUnlockTooltip'); | 1710 bubbleContent.textContent = loadTimeData.getString('easyUnlockTooltip'); |
1730 | 1711 |
1731 var attachElement = this.focusedPod_.customButtonElement; | 1712 var attachElement = this.focusedPod_.customIconElement; |
1732 /** @const */ var BUBBLE_OFFSET = 20; | 1713 /** @const */ var BUBBLE_OFFSET = 20; |
1733 /** @const */ var BUBBLE_PADDING = 8; | 1714 /** @const */ var BUBBLE_PADDING = 8; |
1734 $('bubble').showContentForElement(attachElement, | 1715 $('bubble').showContentForElement(attachElement, |
1735 cr.ui.Bubble.Attachment.RIGHT, | 1716 cr.ui.Bubble.Attachment.RIGHT, |
1736 bubbleContent, | 1717 bubbleContent, |
1737 BUBBLE_OFFSET, | 1718 BUBBLE_OFFSET, |
1738 BUBBLE_PADDING); | 1719 BUBBLE_PADDING); |
1739 }, | 1720 }, |
1740 | 1721 |
1741 /** | 1722 /** |
(...skipping 507 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
2249 if (this.podsWithPendingImages_.length == 0) { | 2230 if (this.podsWithPendingImages_.length == 0) { |
2250 this.classList.remove('images-loading'); | 2231 this.classList.remove('images-loading'); |
2251 } | 2232 } |
2252 } | 2233 } |
2253 }; | 2234 }; |
2254 | 2235 |
2255 return { | 2236 return { |
2256 PodRow: PodRow | 2237 PodRow: PodRow |
2257 }; | 2238 }; |
2258 }); | 2239 }); |
OLD | NEW |