| 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.passwordManager', function() { | |
| 6 const ArrayDataModel = cr.ui.ArrayDataModel; | |
| 7 const DeletableItemList = options.DeletableItemList; | |
| 8 const DeletableItem = options.DeletableItem; | |
| 9 const List = cr.ui.List; | |
| 10 | |
| 11 /** | |
| 12 * Creates a new passwords list item. | |
| 13 * @param {Array} entry An array of the form [url, username, password]. When | |
| 14 * the list has been filtered, a fourth element [index] may be present. | |
| 15 * @constructor | |
| 16 * @extends {cr.ui.ListItem} | |
| 17 */ | |
| 18 function PasswordListItem(entry, showPasswords) { | |
| 19 var el = cr.doc.createElement('div'); | |
| 20 el.dataItem = entry; | |
| 21 el.__proto__ = PasswordListItem.prototype; | |
| 22 el.decorate(showPasswords); | |
| 23 | |
| 24 return el; | |
| 25 } | |
| 26 | |
| 27 PasswordListItem.prototype = { | |
| 28 __proto__: DeletableItem.prototype, | |
| 29 | |
| 30 /** @inheritDoc */ | |
| 31 decorate: function(showPasswords) { | |
| 32 DeletableItem.prototype.decorate.call(this); | |
| 33 | |
| 34 // The URL of the site. | |
| 35 var urlLabel = this.ownerDocument.createElement('div'); | |
| 36 urlLabel.classList.add('favicon-cell'); | |
| 37 urlLabel.classList.add('weakrtl'); | |
| 38 urlLabel.classList.add('url'); | |
| 39 urlLabel.setAttribute('title', this.url); | |
| 40 urlLabel.textContent = this.url; | |
| 41 urlLabel.style.backgroundImage = url('chrome://favicon/' + this.url); | |
| 42 this.contentElement.appendChild(urlLabel); | |
| 43 | |
| 44 // The stored username. | |
| 45 var usernameLabel = this.ownerDocument.createElement('div'); | |
| 46 usernameLabel.className = 'name'; | |
| 47 usernameLabel.textContent = this.username; | |
| 48 this.contentElement.appendChild(usernameLabel); | |
| 49 | |
| 50 // The stored password. | |
| 51 var passwordInputDiv = this.ownerDocument.createElement('div'); | |
| 52 passwordInputDiv.className = 'password'; | |
| 53 | |
| 54 // The password input field. | |
| 55 var passwordInput = this.ownerDocument.createElement('input'); | |
| 56 passwordInput.type = 'password'; | |
| 57 passwordInput.className = 'inactive-password'; | |
| 58 passwordInput.readOnly = true; | |
| 59 passwordInput.value = showPasswords ? this.password : '********'; | |
| 60 passwordInputDiv.appendChild(passwordInput); | |
| 61 | |
| 62 // The show/hide button. | |
| 63 if (showPasswords) { | |
| 64 var button = this.ownerDocument.createElement('button'); | |
| 65 button.hidden = true; | |
| 66 button.classList.add('password-button'); | |
| 67 button.textContent = localStrings.getString('passwordShowButton'); | |
| 68 button.addEventListener('click', this.onClick_, true); | |
| 69 passwordInputDiv.appendChild(button); | |
| 70 } | |
| 71 | |
| 72 this.contentElement.appendChild(passwordInputDiv); | |
| 73 }, | |
| 74 | |
| 75 /** @inheritDoc */ | |
| 76 selectionChanged: function() { | |
| 77 var passwordInput = this.querySelector('input[type=password]'); | |
| 78 var textInput = this.querySelector('input[type=text]'); | |
| 79 var input = passwordInput || textInput; | |
| 80 var button = input.nextSibling; | |
| 81 // |button| doesn't exist when passwords can't be shown. | |
| 82 if (!button) | |
| 83 return; | |
| 84 if (this.selected) { | |
| 85 input.classList.remove('inactive-password'); | |
| 86 button.hidden = false; | |
| 87 } else { | |
| 88 input.classList.add('inactive-password'); | |
| 89 button.hidden = true; | |
| 90 } | |
| 91 }, | |
| 92 | |
| 93 /** | |
| 94 * On-click event handler. Swaps the type of the input field from password | |
| 95 * to text and back. | |
| 96 * @private | |
| 97 */ | |
| 98 onClick_: function(event) { | |
| 99 // The password is the input element previous to the button. | |
| 100 var button = event.currentTarget; | |
| 101 var passwordInput = button.previousSibling; | |
| 102 if (passwordInput.type == 'password') { | |
| 103 passwordInput.type = 'text'; | |
| 104 button.textContent = localStrings.getString('passwordHideButton'); | |
| 105 } else { | |
| 106 passwordInput.type = 'password'; | |
| 107 button.textContent = localStrings.getString('passwordShowButton'); | |
| 108 } | |
| 109 }, | |
| 110 | |
| 111 /** | |
| 112 * Get and set the URL for the entry. | |
| 113 * @type {string} | |
| 114 */ | |
| 115 get url() { | |
| 116 return this.dataItem[0]; | |
| 117 }, | |
| 118 set url(url) { | |
| 119 this.dataItem[0] = url; | |
| 120 }, | |
| 121 | |
| 122 /** | |
| 123 * Get and set the username for the entry. | |
| 124 * @type {string} | |
| 125 */ | |
| 126 get username() { | |
| 127 return this.dataItem[1]; | |
| 128 }, | |
| 129 set username(username) { | |
| 130 this.dataItem[1] = username; | |
| 131 }, | |
| 132 | |
| 133 /** | |
| 134 * Get and set the password for the entry. | |
| 135 * @type {string} | |
| 136 */ | |
| 137 get password() { | |
| 138 return this.dataItem[2]; | |
| 139 }, | |
| 140 set password(password) { | |
| 141 this.dataItem[2] = password; | |
| 142 }, | |
| 143 }; | |
| 144 | |
| 145 /** | |
| 146 * Creates a new PasswordExceptions list item. | |
| 147 * @param {Array} entry A pair of the form [url, username]. | |
| 148 * @constructor | |
| 149 * @extends {Deletable.ListItem} | |
| 150 */ | |
| 151 function PasswordExceptionsListItem(entry) { | |
| 152 var el = cr.doc.createElement('div'); | |
| 153 el.dataItem = entry; | |
| 154 el.__proto__ = PasswordExceptionsListItem.prototype; | |
| 155 el.decorate(); | |
| 156 | |
| 157 return el; | |
| 158 } | |
| 159 | |
| 160 PasswordExceptionsListItem.prototype = { | |
| 161 __proto__: DeletableItem.prototype, | |
| 162 | |
| 163 /** | |
| 164 * Call when an element is decorated as a list item. | |
| 165 */ | |
| 166 decorate: function() { | |
| 167 DeletableItem.prototype.decorate.call(this); | |
| 168 | |
| 169 // The URL of the site. | |
| 170 var urlLabel = this.ownerDocument.createElement('div'); | |
| 171 urlLabel.className = 'url'; | |
| 172 urlLabel.classList.add('favicon-cell'); | |
| 173 urlLabel.classList.add('weakrtl'); | |
| 174 urlLabel.textContent = this.url; | |
| 175 urlLabel.style.backgroundImage = url('chrome://favicon/' + this.url); | |
| 176 this.contentElement.appendChild(urlLabel); | |
| 177 }, | |
| 178 | |
| 179 /** | |
| 180 * Get the url for the entry. | |
| 181 * @type {string} | |
| 182 */ | |
| 183 get url() { | |
| 184 return this.dataItem; | |
| 185 }, | |
| 186 set url(url) { | |
| 187 this.dataItem = url; | |
| 188 }, | |
| 189 }; | |
| 190 | |
| 191 /** | |
| 192 * Create a new passwords list. | |
| 193 * @constructor | |
| 194 * @extends {cr.ui.List} | |
| 195 */ | |
| 196 var PasswordsList = cr.ui.define('list'); | |
| 197 | |
| 198 PasswordsList.prototype = { | |
| 199 __proto__: DeletableItemList.prototype, | |
| 200 | |
| 201 /** | |
| 202 * Whether passwords can be revealed or not. | |
| 203 * @type {boolean} | |
| 204 * @private | |
| 205 */ | |
| 206 showPasswords_: true, | |
| 207 | |
| 208 /** @inheritDoc */ | |
| 209 decorate: function() { | |
| 210 DeletableItemList.prototype.decorate.call(this); | |
| 211 Preferences.getInstance().addEventListener( | |
| 212 "profile.password_manager_allow_show_passwords", | |
| 213 this.onPreferenceChanged_.bind(this)); | |
| 214 }, | |
| 215 | |
| 216 /** | |
| 217 * Listener for changes on the preference. | |
| 218 * @param {Event} event The preference update event. | |
| 219 * @private | |
| 220 */ | |
| 221 onPreferenceChanged_: function(event) { | |
| 222 this.showPasswords_ = event.value.value; | |
| 223 this.redraw(); | |
| 224 }, | |
| 225 | |
| 226 /** @inheritDoc */ | |
| 227 createItem: function(entry) { | |
| 228 return new PasswordListItem(entry, this.showPasswords_); | |
| 229 }, | |
| 230 | |
| 231 /** @inheritDoc */ | |
| 232 deleteItemAtIndex: function(index) { | |
| 233 var item = this.dataModel.item(index); | |
| 234 if (item && item.length > 3) { | |
| 235 // The fourth element, if present, is the original index to delete. | |
| 236 index = item[3]; | |
| 237 } | |
| 238 PasswordManager.removeSavedPassword(index); | |
| 239 }, | |
| 240 | |
| 241 /** | |
| 242 * The length of the list. | |
| 243 */ | |
| 244 get length() { | |
| 245 return this.dataModel.length; | |
| 246 }, | |
| 247 }; | |
| 248 | |
| 249 /** | |
| 250 * Create a new passwords list. | |
| 251 * @constructor | |
| 252 * @extends {cr.ui.List} | |
| 253 */ | |
| 254 var PasswordExceptionsList = cr.ui.define('list'); | |
| 255 | |
| 256 PasswordExceptionsList.prototype = { | |
| 257 __proto__: DeletableItemList.prototype, | |
| 258 | |
| 259 /** @inheritDoc */ | |
| 260 createItem: function(entry) { | |
| 261 return new PasswordExceptionsListItem(entry); | |
| 262 }, | |
| 263 | |
| 264 /** @inheritDoc */ | |
| 265 deleteItemAtIndex: function(index) { | |
| 266 PasswordManager.removePasswordException(index); | |
| 267 }, | |
| 268 | |
| 269 /** | |
| 270 * The length of the list. | |
| 271 */ | |
| 272 get length() { | |
| 273 return this.dataModel.length; | |
| 274 }, | |
| 275 }; | |
| 276 | |
| 277 return { | |
| 278 PasswordListItem: PasswordListItem, | |
| 279 PasswordExceptionsListItem: PasswordExceptionsListItem, | |
| 280 PasswordsList: PasswordsList, | |
| 281 PasswordExceptionsList: PasswordExceptionsList, | |
| 282 }; | |
| 283 }); | |
| OLD | NEW |