Diffstat (limited to 'frontend/gamma/js/Clipperz/PM/UI/Web/Components/UserInfoBox.js') (more/less context) (ignore whitespace changes)
-rw-r--r-- | frontend/gamma/js/Clipperz/PM/UI/Web/Components/UserInfoBox.js | 346 |
1 files changed, 346 insertions, 0 deletions
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/UserInfoBox.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/UserInfoBox.js new file mode 100644 index 0000000..f26118e --- a/dev/null +++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/UserInfoBox.js | |||
@@ -0,0 +1,346 @@ | |||
1 | /* | ||
2 | |||
3 | Copyright 2008-2011 Clipperz Srl | ||
4 | |||
5 | This file is part of Clipperz's Javascript Crypto Library. | ||
6 | Javascript Crypto Library provides web developers with an extensive | ||
7 | and efficient set of cryptographic functions. The library aims to | ||
8 | obtain maximum execution speed while preserving modularity and | ||
9 | reusability. | ||
10 | For further information about its features and functionalities please | ||
11 | refer to http://www.clipperz.com | ||
12 | |||
13 | * Javascript Crypto Library is free software: you can redistribute | ||
14 | it and/or modify it under the terms of the GNU Affero General Public | ||
15 | License as published by the Free Software Foundation, either version | ||
16 | 3 of the License, or (at your option) any later version. | ||
17 | |||
18 | * Javascript Crypto Library is distributed in the hope that it will | ||
19 | be useful, but WITHOUT ANY WARRANTY; without even the implied | ||
20 | warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. | ||
21 | See the GNU Affero General Public License for more details. | ||
22 | |||
23 | * You should have received a copy of the GNU Affero General Public | ||
24 | License along with Javascript Crypto Library. If not, see | ||
25 | <http://www.gnu.org/licenses/>. | ||
26 | |||
27 | */ | ||
28 | |||
29 | Clipperz.Base.module('Clipperz.PM.UI.Web.Components'); | ||
30 | |||
31 | Clipperz.PM.UI.Web.Components.UserInfoBox = function(args) { | ||
32 | args = args || {}; | ||
33 | |||
34 | Clipperz.PM.UI.Web.Components.UserInfoBox.superclass.constructor.apply(this, arguments); | ||
35 | |||
36 | this._slots = {}; | ||
37 | this._isLocked = false; | ||
38 | this._lockTooltip = null; | ||
39 | |||
40 | return this; | ||
41 | } | ||
42 | |||
43 | //============================================================================= | ||
44 | |||
45 | Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.UserInfoBox, Clipperz.PM.UI.Common.Components.BaseComponent, { | ||
46 | |||
47 | //------------------------------------------------------------------------- | ||
48 | |||
49 | 'toString': function () { | ||
50 | return "Clipperz.PM.UI.Web.Components.UserInfoBox component"; | ||
51 | }, | ||
52 | |||
53 | //------------------------------------------------------------------------- | ||
54 | |||
55 | 'handleLogout': function(anEvent) { | ||
56 | //Clipperz.log(">>> UserInfoBox.handleLogout"); | ||
57 | anEvent.preventDefault(); | ||
58 | MochiKit.Signal.signal(this, 'logout'); | ||
59 | //Clipperz.log("<<< UserInfoBox.handleLogout"); | ||
60 | }, | ||
61 | |||
62 | //------------------------------------------------------------------------- | ||
63 | |||
64 | 'lockTooltip': function () { | ||
65 | return this._lockTooltip; | ||
66 | }, | ||
67 | |||
68 | //------------------------------------------------------------------------- | ||
69 | |||
70 | 'isLocked': function () { | ||
71 | return this._isLocked; | ||
72 | }, | ||
73 | |||
74 | 'setIsLocked': function (aValue) { | ||
75 | this._isLocked = aValue; | ||
76 | }, | ||
77 | |||
78 | 'toggleLock': function(anEvent) { | ||
79 | var deferredResult; | ||
80 | var shouldLock; | ||
81 | |||
82 | //console.log(">>> UserInfoBox.toggleLock [locked: " + this.isLocked() + "]"); | ||
83 | anEvent.preventDefault(); | ||
84 | this.lockTooltip().hide(); | ||
85 | |||
86 | shouldLock = (this.isLocked() == false); | ||
87 | |||
88 | if (shouldLock) { | ||
89 | var maskElement; | ||
90 | |||
91 | this.setIsLocked(true); | ||
92 | maskElement = this.getId('modalDialogMask'); | ||
93 | deferredResult = Clipperz.Async.callbacks("UserInfoBox.toggleLock [lock]", [ | ||
94 | MochiKit.Base.partial(MochiKit.DOM.addElementClass, this.element(), 'locked'), | ||
95 | MochiKit.Base.partial(Clipperz.Visual.deferredAnimation, MochiKit.Visual.appear, maskElement, {from:0.0, to:0.75, duration:0.5}), | ||
96 | MochiKit.Base.method(Clipperz.PM.RunTime.mainController, 'setPassphraseDelegate', MochiKit.Base.method(this, 'askForPassphrase')), | ||
97 | MochiKit.Base.partial(MochiKit.Signal.signal, this, 'lock') | ||
98 | ], {trace:false}); | ||
99 | } else { | ||
100 | deferredResult = Clipperz.Async.callbacks("UserInfoBox.toggleLock [unlock]", [ | ||
101 | MochiKit.Base.partial(MochiKit.Signal.signal, this, 'unlock') | ||
102 | ], {trace:false}); | ||
103 | } | ||
104 | //console.log("<<< UserInfoBox.toggleLock"); | ||
105 | |||
106 | return deferredResult; | ||
107 | }, | ||
108 | |||
109 | //------------------------------------------------------------------------- | ||
110 | |||
111 | 'unlock': function () { | ||
112 | var deferredResult; | ||
113 | var maskElement; | ||
114 | |||
115 | this.setIsLocked(false); | ||
116 | maskElement = this.getId('modalDialogMask'); | ||
117 | |||
118 | deferredResult = Clipperz.Async.callbacks("UserInfoBox.unlock", [ | ||
119 | MochiKit.Base.partial(Clipperz.Visual.deferredAnimation, MochiKit.Visual.fade, maskElement, {from:0.75, to:0.0, duration:0.5}), | ||
120 | // Clipperz.Visual.deferredAnimation(MochiKit.Visual.fade, maskElement, {from:0.75, to:0.0, duration:0.5}), | ||
121 | MochiKit.Base.partial(MochiKit.DOM.removeElementClass, this.element(), 'locked') | ||
122 | ], {trace:false}); | ||
123 | }, | ||
124 | |||
125 | //------------------------------------------------------------------------- | ||
126 | |||
127 | 'askForPassphrase': function () { | ||
128 | varunlockPasswordComponent; | ||
129 | /* | ||
130 | vardeferredResult; | ||
131 | |||
132 | deferredResult = new Clipperz.Async.Deferred("UserInfoBox.askForPassphrase", {trace:false}); | ||
133 | deferredResult.addCallback(MochiKit.Async.succeed, 'test'); | ||
134 | |||
135 | deferredResult.callback(); | ||
136 | |||
137 | return deferredResult; | ||
138 | */ | ||
139 | //console.log(">>> UserInfoBox.askForPassphrase"); | ||
140 | unlockPasswordComponent = new Clipperz.PM.UI.Web.Components.UnlockPasswordComponent({ | ||
141 | 'title':"Unlock account", | ||
142 | 'text': "Insert the passprase to unlock the account", | ||
143 | 'type': 'INFO', | ||
144 | 'buttons': [ | ||
145 | {text:"Cancel",result:'CANCEL'}, | ||
146 | {text:"Unlock", result:'OK',isDefault:true} | ||
147 | ], | ||
148 | 'openFromElement': this.getElement('lock'), | ||
149 | 'onOkCloseToElement': null, | ||
150 | 'onCancelCloseToElement':this.getId('lock') | ||
151 | }); | ||
152 | //console.log("<<< UserInfoBox.askForPassphrase"); | ||
153 | |||
154 | return unlockPasswordComponent.getPassphrase(); | ||
155 | }, | ||
156 | |||
157 | //========================================================================= | ||
158 | |||
159 | 'renderSelf': function(/*aContainer, aPosition*/) { | ||
160 | this.append(this.element(), [ | ||
161 | // {tag:'canvas', id:this.getId('canvas'), cls:'canvas', width:'188', height:'154'}, | ||
162 | {tag:'div', cls:'header', children:[ | ||
163 | {tag:'h1', html:"Welcome"}, | ||
164 | {tag:'a', cls:'lockButton', href:'#', id:this.getId('lock'), html:' '} | ||
165 | ]}, | ||
166 | {tag:'div', cls:'body', children:[ | ||
167 | {tag:'h3', id:this.getId('username'), html:""}, | ||
168 | {tag:'ul', children:[ | ||
169 | {tag:'li', id:this.getId('cards'), children:[ | ||
170 | {tag:'span', id:this.getId('cardsNumber'), cls:'number', html:"-"}, | ||
171 | {tag:'span', id:this.getId('cardsLabel'), html:"cards"} | ||
172 | ]}, | ||
173 | {tag:'li', id:this.getId('directLogins'), children:[ | ||
174 | {tag:'span', id:this.getId('directLoginsNumber'), cls:'number', html:"-"}, | ||
175 | {tag:'span', id:this.getId('directLoginsLabel'), html:"direct logins"} | ||
176 | ]} | ||
177 | ]}, | ||
178 | {tag:'a', href:'#', id:this.getId('logout'), html:"logout >"} | ||
179 | ]}, | ||
180 | {tag:'div', cls:'footer'} | ||
181 | ]); | ||
182 | |||
183 | MochiKit.Signal.connect(this.getElement('logout'), 'onclick', this, 'handleLogout'); | ||
184 | MochiKit.Signal.connect(this.getElement('lock'), 'onclick', this, 'toggleLock'); | ||
185 | |||
186 | this._lockTooltip = new Clipperz.PM.UI.Common.Components.Tooltip({ | ||
187 | element:this.getElement('lock'), | ||
188 | text: "Click here to lock/unlock your account.", | ||
189 | position:'RIGHT' | ||
190 | }); | ||
191 | |||
192 | Clipperz.DOM.Helper.append(MochiKit.DOM.currentDocument().body, | ||
193 | {tag:'div', id:this.getId('modalDialogWrapper'), cls:'modalDialogWrapper', children:[ | ||
194 | {tag:'div', id:this.getId('modalDialogMask'), cls:'modalDialogMask userInfoBoxMask'} | ||
195 | ]} | ||
196 | ); | ||
197 | MochiKit.Style.hideElement(this.getId('modalDialogMask')); | ||
198 | |||
199 | // this.drawUserInfoBackground(this.getElement('canvas')); | ||
200 | }, | ||
201 | |||
202 | //------------------------------------------------------------------------- | ||
203 | /* | ||
204 | 'drawUserInfoBackground': function (canvas) { | ||
205 | var kMyDrawingFunctionWidth = 188.0; | ||
206 | var kMyDrawingFunctionHeight = 154.0; | ||
207 | |||
208 | var context = canvas.getContext("2d"); | ||
209 | var color; | ||
210 | var resolution; | ||
211 | var alignStroke; | ||
212 | var path; | ||
213 | var pointX; | ||
214 | var pointY; | ||
215 | var controlPoint1X; | ||
216 | var controlPoint1Y; | ||
217 | var controlPoint2X; | ||
218 | var controlPoint2Y; | ||
219 | var gradient; | ||
220 | if (window.devicePixelRatio) | ||
221 | resolution = window.devicePixelRatio; | ||
222 | else | ||
223 | resolution = 1.0; | ||
224 | resolution *= 0.5 * (canvas.width / kMyDrawingFunctionWidth + canvas.height / kMyDrawingFunctionHeight); | ||
225 | |||
226 | context.save(); | ||
227 | context.scale(canvas.width / kMyDrawingFunctionWidth, canvas.height / kMyDrawingFunctionHeight); | ||
228 | context.clearRect(0.0, 0.0, kMyDrawingFunctionWidth, kMyDrawingFunctionHeight); | ||
229 | |||
230 | // Setup for Shadow Effect | ||
231 | color = "rgba(0.0%, 0.0%, 0.0%, 0.667)"; | ||
232 | context.save(); | ||
233 | context.shadowColor = color; | ||
234 | context.shadowBlur = 3.0; | ||
235 | context.shadowOffsetX = 5.729 * Math.cos(7.592) * resolution; | ||
236 | context.shadowOffsetY = 5.729 * Math.sin(7.592) * resolution; | ||
237 | |||
238 | // Layer 1 | ||
239 | |||
240 | alignStroke = 0.0; | ||
241 | context.beginPath(); | ||
242 | pointX = 169.5; | ||
243 | pointY = 141.5; | ||
244 | pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; | ||
245 | pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; | ||
246 | context.moveTo(pointX, pointY); | ||
247 | pointX = 177.5; | ||
248 | pointY = 133.5; | ||
249 | pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; | ||
250 | pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; | ||
251 | controlPoint1X = 173.889; | ||
252 | controlPoint1Y = 141.5; | ||
253 | controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution; | ||
254 | controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution; | ||
255 | controlPoint2X = 177.5; | ||
256 | controlPoint2Y = 137.889; | ||
257 | controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution; | ||
258 | controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution; | ||
259 | context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY); | ||
260 | pointX = 177.5; | ||
261 | pointY = 19.5; | ||
262 | pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; | ||
263 | pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; | ||
264 | context.lineTo(pointX, pointY); | ||
265 | pointX = 169.5; | ||
266 | pointY = 11.5; | ||
267 | pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; | ||
268 | pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; | ||
269 | controlPoint1X = 177.5; | ||
270 | controlPoint1Y = 15.111; | ||
271 | controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution; | ||
272 | controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution; | ||
273 | controlPoint2X = 173.889; | ||
274 | controlPoint2Y = 11.5; | ||
275 | controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution; | ||
276 | controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution; | ||
277 | context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY); | ||
278 | pointX = 18.5; | ||
279 | pointY = 11.5; | ||
280 | pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; | ||
281 | pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; | ||
282 | context.lineTo(pointX, pointY); | ||
283 | pointX = 10.5; | ||
284 | pointY = 19.5; | ||
285 | pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; | ||
286 | pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; | ||
287 | controlPoint1X = 14.111; | ||
288 | controlPoint1Y = 11.5; | ||
289 | controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution; | ||
290 | controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution; | ||
291 | controlPoint2X = 10.5; | ||
292 | controlPoint2Y = 15.111; | ||
293 | controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution; | ||
294 | controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution; | ||
295 | context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY); | ||
296 | pointX = 10.5; | ||
297 | pointY = 133.5; | ||
298 | pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; | ||
299 | pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; | ||
300 | context.lineTo(pointX, pointY); | ||
301 | pointX = 18.5; | ||
302 | pointY = 141.5; | ||
303 | pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; | ||
304 | pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; | ||
305 | controlPoint1X = 10.5; | ||
306 | controlPoint1Y = 137.889; | ||
307 | controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution; | ||
308 | controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution; | ||
309 | controlPoint2X = 14.111; | ||
310 | controlPoint2Y = 141.5; | ||
311 | controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution; | ||
312 | controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution; | ||
313 | context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY); | ||
314 | pointX = 169.5; | ||
315 | pointY = 141.5; | ||
316 | pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; | ||
317 | pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; | ||
318 | context.lineTo(pointX, pointY); | ||
319 | context.closePath(); | ||
320 | gradient = context.createLinearGradient(94.0, 11.5, 94.0, 141.5); | ||
321 | color = "#EE9B69"; | ||
322 | gradient.addColorStop(0.0, color); | ||
323 | color = "#E38D62"; | ||
324 | gradient.addColorStop(1.0, color); | ||
325 | context.fillStyle = gradient; | ||
326 | context.fill(); | ||
327 | |||
328 | // Shadow Effect | ||
329 | context.restore(); | ||
330 | |||
331 | context.restore(); | ||
332 | }, | ||
333 | */ | ||
334 | //------------------------------------------------------------------------- | ||
335 | |||
336 | 'updateUserDetails': function (someUserInfo) { | ||
337 | varelementName; | ||
338 | |||
339 | for (elementName in someUserInfo) { | ||
340 | this.getElement(elementName).innerHTML = someUserInfo[elementName]; | ||
341 | } | ||
342 | }, | ||
343 | |||
344 | //------------------------------------------------------------------------- | ||
345 | __syntaxFix__: "syntax fix" | ||
346 | }); | ||