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 |