author | Giulio Cesare Solaroli <giulio.cesare@clipperz.com> | 2011-10-02 23:56:18 (UTC) |
---|---|---|
committer | Giulio Cesare Solaroli <giulio.cesare@clipperz.com> | 2011-10-02 23:56:18 (UTC) |
commit | ef68436ac04da078ffdcacd7e1f785473a303d45 (patch) (unidiff) | |
tree | c403752d66a2c4775f00affd4fa8431b29c5b68c /frontend/gamma/js/Clipperz/PM/UI/Web/Components/NewUserCreationComponent.js | |
parent | 597ecfbc0249d83e1b856cbd558340c01237a360 (diff) | |
download | clipperz-ef68436ac04da078ffdcacd7e1f785473a303d45.zip clipperz-ef68436ac04da078ffdcacd7e1f785473a303d45.tar.gz clipperz-ef68436ac04da078ffdcacd7e1f785473a303d45.tar.bz2 |
First version of the newly restructured repository
Diffstat (limited to 'frontend/gamma/js/Clipperz/PM/UI/Web/Components/NewUserCreationComponent.js') (more/less context) (show whitespace changes)
-rw-r--r-- | frontend/gamma/js/Clipperz/PM/UI/Web/Components/NewUserCreationComponent.js | 430 |
1 files changed, 430 insertions, 0 deletions
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/NewUserCreationComponent.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/NewUserCreationComponent.js new file mode 100644 index 0000000..b40d1f3 --- a/dev/null +++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/NewUserCreationComponent.js | |||
@@ -0,0 +1,430 @@ | |||
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.NewUserCreationComponent = function(args) { | ||
32 | args = args || {}; | ||
33 | |||
34 | Clipperz.PM.UI.Web.Components.NewUserCreationComponent.superclass.constructor.apply(this, arguments); | ||
35 | |||
36 | this._tabPanelController = null; | ||
37 | |||
38 | this._initiallySelectedTab = args.selected || 'CREDENTIALS'; | ||
39 | this._tabPanelControllerConfiguration = { | ||
40 | 'CREDENTIALS': { | ||
41 | tab:'credentialsTab', | ||
42 | panel:'credentialsTabpanel' | ||
43 | }, | ||
44 | 'CHECK_CREDENTIALS': { | ||
45 | tab:'checkCredentialsTab', | ||
46 | panel:'checkCredentialsTabpanel' | ||
47 | }, | ||
48 | 'TERMS_OF_SERVICE': { | ||
49 | tab:'termsOfServiceTab', | ||
50 | panel:'termsOfServiceTabpanel' | ||
51 | }, | ||
52 | 'CREATE_USER': { | ||
53 | tab:'createUserTab', | ||
54 | panel:'createUserTabpanel' | ||
55 | }//, | ||
56 | /* | ||
57 | 'LOGIN': { | ||
58 | tab:'loginTab', | ||
59 | panel:'loginTabpanel' | ||
60 | } | ||
61 | */ | ||
62 | }; | ||
63 | |||
64 | return this; | ||
65 | } | ||
66 | |||
67 | //============================================================================= | ||
68 | |||
69 | Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.NewUserCreationComponent, Clipperz.PM.UI.Common.Components.TabPanelComponent, { | ||
70 | |||
71 | //------------------------------------------------------------------------- | ||
72 | |||
73 | 'toString': function () { | ||
74 | return "Clipperz.PM.UI.Web.Components.NewUserCreationComponent component"; | ||
75 | }, | ||
76 | |||
77 | //========================================================================= | ||
78 | |||
79 | 'disableAllPanels': function () { | ||
80 | this.tabPanelController().selectTab(null); | ||
81 | }, | ||
82 | |||
83 | //------------------------------------------------------------------------- | ||
84 | |||
85 | 'enableCredentialsPanel': function () { | ||
86 | this.tabPanelController().selectTab('CREDENTIALS'); | ||
87 | }, | ||
88 | |||
89 | 'enableCheckCredentialsPanel': function () { | ||
90 | this.tabPanelController().selectTab('CHECK_CREDENTIALS'); | ||
91 | }, | ||
92 | |||
93 | 'enableTermsOfServicePanel': function () { | ||
94 | this.tabPanelController().selectTab('TERMS_OF_SERVICE'); | ||
95 | }, | ||
96 | |||
97 | 'enableCreateUserPanel': function () { | ||
98 | this.tabPanelController().selectTab('CREATE_USER'); | ||
99 | }, | ||
100 | |||
101 | //'enableLoginPanel': function () { | ||
102 | // this.tabPanelController().selectTab('LOGIN'); | ||
103 | //}, | ||
104 | |||
105 | //========================================================================= | ||
106 | |||
107 | 'shouldShowElementWhileRendering': function() { | ||
108 | return false; | ||
109 | }, | ||
110 | |||
111 | //========================================================================= | ||
112 | |||
113 | 'tabPanelController': function () { | ||
114 | if (this._tabPanelController == null) { | ||
115 | this._tabPanelController = new Clipperz.PM.UI.Common.Controllers.TabPanelController({ | ||
116 | component:this, | ||
117 | configuration:this._tabPanelControllerConfiguration | ||
118 | }); | ||
119 | |||
120 | MochiKit.Signal.connect(this._tabPanelController, 'tabSelected', this, 'handleTabSelected') | ||
121 | } | ||
122 | |||
123 | return this._tabPanelController; | ||
124 | }, | ||
125 | |||
126 | //------------------------------------------------------------------------- | ||
127 | |||
128 | 'renderSelf': function() { | ||
129 | //console.log('** Clipperz.targetModalDimensionsAndPosition', Clipperz.Base.serializeJSON(Clipperz.PM.UI.Common.Components.BaseComponent.targetModalDimensionsAndPosition)); | ||
130 | |||
131 | this.append(this.element(), {tag:'div', cls:'NewUserCreation mainDialog', id:this.getId('panel'), children: [ | ||
132 | {tag:'form', id:this.getId('form'), cls:'newUserCreationForm', children:[ | ||
133 | {tag:'div', cls:'header', children:[ | ||
134 | {tag:'div', cls:'title', children:[ | ||
135 | {tag:'h3', id:this.getId('title'), html:"Create new user"} | ||
136 | ]} | ||
137 | ]}, | ||
138 | {tag:'div', id:this.getId('body'), cls:'body', children:[ | ||
139 | {tag:'div', cls:'tabContainer', children:[ | ||
140 | {tag:'ul', cls:'tabs', children:[ | ||
141 | {tag:'li', id:this.getId('credentialsTab'), children:[{tag:'span', html:"credentials"}]}, | ||
142 | {tag:'li', id:this.getId('checkCredentialsTab'),children:[{tag:'span', html:"credentials check"}]}, | ||
143 | {tag:'li', id:this.getId('termsOfServiceTab'), children:[{tag:'span', html:"terms of service"}]}, | ||
144 | {tag:'li', id:this.getId('createUserTab'), children:[{tag:'span', html:"create user"}]}//, | ||
145 | // {tag:'li', id:this.getId('loginTab'), children:[{tag:'span', html:"login"}]}, | ||
146 | ]}, | ||
147 | {tag:'ul', cls:'tabPanels', children:[ | ||
148 | {tag:'li', id:this.getId('credentialsTabpanel'), cls:'tabPanel credentials', children:[ | ||
149 | {tag:'div', cls:'wizardStepDescription', children:[{tag:'span', html:Clipperz.PM.Strings.getValue('Wizards.NewUserWizard.CREDENTIALS.description')}]}, | ||
150 | {tag:'ul', cls:'credentials', children:[ | ||
151 | {tag:'li', children:[{tag:'span', cls:'label', html:"username"},{tag:'input', type:'text', id:this.getId('username')/*, value:'test'*/}]}, | ||
152 | {tag:'li', children:[{tag:'span', cls:'label', html:"passphrase"},{tag:'input', type:'password', id:this.getId('passphrase')/*, value:'test'*/}]} | ||
153 | ]} | ||
154 | ]}, | ||
155 | {tag:'li', id:this.getId('checkCredentialsTabpanel'), cls:'tabPanel checkCredentials', children:[ | ||
156 | {tag:'div', cls:'wizardStepDescription', children:[{tag:'span', html:Clipperz.PM.Strings.getValue('Wizards.NewUserWizard.CHECK_CREDENTIALS.description')}]}, | ||
157 | {tag:'ul', cls:'credentials', children:[ | ||
158 | {tag:'li', children:[{tag:'span', cls:'label', html:"re-passphrase"},{tag:'input', type:'password', id:this.getId('re-passphrase')/*, value:'test'*/}]} | ||
159 | ]} | ||
160 | ]}, | ||
161 | {tag:'li', id:this.getId('termsOfServiceTabpanel'), cls:'tabPanel termsOfService', children:[ | ||
162 | {tag:'div', cls:'wizardStepDescription', children:[{tag:'span', html:Clipperz.PM.Strings.getValue('Wizards.NewUserWizard.TERMS_OF_SERVICE.description')}]}, | ||
163 | {tag:'ul', cls:'termsOfService', children:[ | ||
164 | {tag:'li', children:[{tag:'input', type:'checkbox', id:this.getId('awareOfUnrecoverablePassphrase')/*, checked:true*/}, {tag:'label', cls:'label', 'for':this.getId('awareOfUnrecoverablePassphrase'), html:"I understand that Clipperz will not be able to recover a lost passphrase."}]}, | ||
165 | {tag:'li', children:[{tag:'input', type:'checkbox', id:this.getId('readTermsOfService')/*, checked:true*/}, {tag:'label', cls:'label', 'for':this.getId('readTermsOfService'), htmlString:"I have read and agreed to the <a href='http://www.clipperz.com/terms_of_service' target='_blank'>Terms of Service</a>."}]} | ||
166 | ]} | ||
167 | ]}, | ||
168 | {tag:'li', id:this.getId('createUserTabpanel'), cls:'tabPanel createUser', children:[ | ||
169 | {tag:'div', cls:'wizardStepDescription', children:[{tag:'span', html:Clipperz.PM.Strings.getValue('Wizards.NewUserWizard.CREATE_USER.description')}]}, | ||
170 | {tag:'ul', cls:'createUserStates', children:[ | ||
171 | {tag:'li', cls:'creating', id:this.getId('creatingRegistering'), children:[{tag:'span', html:"registering user"}]}, | ||
172 | {tag:'li', cls:'done', id:this.getId('creatingDone'), children:[{tag:'span', html:"done"}]}, | ||
173 | {tag:'li', cls:'fail', id:this.getId('creatingFailed'), children:[{tag:'span', html:"fail"}]} | ||
174 | ]} | ||
175 | ]}//, | ||
176 | // {tag:'li', id:this.getId('loginTabpanel'), cls:'tabPanel login', children:[ | ||
177 | // {tag:'div', cls:'wizardStepDescription', children:[{tag:'span', html:Clipperz.PM.Strings.getValue('Wizards.NewUserWizard.LOGIN.description')}]}, | ||
178 | // ]} | ||
179 | ]} | ||
180 | ]} | ||
181 | ]}, | ||
182 | {tag:'div', id:this.getId('footer'), cls:'footer', children:[ | ||
183 | {tag:'div', cls:'buttonArea', children:[ | ||
184 | // {tag:'div', cls:'cancel', id:this.getId('cancelButton'), html:"cancel"}, | ||
185 | // {tag:'div', cls:'save disabled', id:this.getId('saveButton'), html:"save"} | ||
186 | ]} | ||
187 | ]} | ||
188 | ]}, | ||
189 | {tag:'div', cls:'clear'} | ||
190 | ]}); | ||
191 | |||
192 | this.tabPanelController().setup(); | ||
193 | // MochiKit.Signal.connect(this.getId('panel'), 'onkeydown', this, 'handleKeyEvent'); | ||
194 | MochiKit.Signal.connect(MochiKit.DOM.currentDocument().body, 'onkeydown', this, 'handleKeyEvent'); | ||
195 | MochiKit.Signal.connect(this.getId('awareOfUnrecoverablePassphrase'), 'onchange', this, 'handleTermsOfServiceCheckboxChange'); | ||
196 | MochiKit.Signal.connect(this.getId('readTermsOfService'), 'onchange', this, 'handleTermsOfServiceCheckboxChange'); | ||
197 | }, | ||
198 | |||
199 | //------------------------------------------------------------------------- | ||
200 | /* | ||
201 | 'resetContent': function () { | ||
202 | this.getElement('username').value = ''; | ||
203 | this.getElement('passphrase').value = ''; | ||
204 | }, | ||
205 | */ | ||
206 | //------------------------------------------------------------------------- | ||
207 | |||
208 | 'displayElement': function() { | ||
209 | return this.getElement('panel'); | ||
210 | }, | ||
211 | |||
212 | //------------------------------------------------------------------------- | ||
213 | |||
214 | 'handleTabSelected': function (aSelectedTab) { | ||
215 | /* | ||
216 | switch (aSelectedTab) { | ||
217 | case 'DETAILS': | ||
218 | break; | ||
219 | case 'DIRECT_LOGINS': | ||
220 | MochiKit.Style.hideElement(this.getElement('backToDirectLoginList')); | ||
221 | break; | ||
222 | case 'SHARING': | ||
223 | break; | ||
224 | } | ||
225 | */ | ||
226 | }, | ||
227 | |||
228 | //========================================================================= | ||
229 | |||
230 | 'username': function () { | ||
231 | return this.getElement('username').value; | ||
232 | }, | ||
233 | |||
234 | 'usernameElement': function () { | ||
235 | return this.getElement('username'); | ||
236 | }, | ||
237 | |||
238 | 'passphrase': function () { | ||
239 | return this.getElement('passphrase').value; | ||
240 | }, | ||
241 | |||
242 | 'rePassphrase': function () { | ||
243 | return this.getElement('re-passphrase').value; | ||
244 | }, | ||
245 | |||
246 | 'awareOfUnrecoverablePassphrase': function () { | ||
247 | return this.getElement('awareOfUnrecoverablePassphrase').value; | ||
248 | }, | ||
249 | |||
250 | 'readTermsOfService': function () { | ||
251 | return this.getElement('readTermsOfService').value; | ||
252 | }, | ||
253 | |||
254 | //========================================================================= | ||
255 | /* | ||
256 | 'incrementUpdateFaviconCounter': function () { | ||
257 | this._updateFaviconCounter ++; | ||
258 | }, | ||
259 | |||
260 | 'decrementUpdateFaviconCounter': function () { | ||
261 | this._updateFaviconCounter --; | ||
262 | }, | ||
263 | |||
264 | 'updateFaviconCounter': function () { | ||
265 | return this._updateFaviconCounter; | ||
266 | }, | ||
267 | */ | ||
268 | //------------------------------------------------------------------------- | ||
269 | /* | ||
270 | 'updateFavicon': function () { | ||
271 | this.decrementUpdateFaviconCounter(); | ||
272 | |||
273 | if (this.updateFaviconCounter() == 0) { | ||
274 | this.setFavicon(this.favicon()); | ||
275 | } | ||
276 | }, | ||
277 | */ | ||
278 | //========================================================================= | ||
279 | /* | ||
280 | 'bindingComponents': function () { | ||
281 | return this._bindingComponents; | ||
282 | }, | ||
283 | |||
284 | 'clearAllBindingsComponents': function () { | ||
285 | MochiKit.Iter.forEach(this.bindingComponents(), MochiKit.Base.methodcaller('remove')); | ||
286 | this._bindingComponents = []; | ||
287 | this.getElement('bindings').innerHTML = ''; | ||
288 | }, | ||
289 | |||
290 | 'addBindingComponent': function (aBindingComponent) { | ||
291 | this.bindingComponents().push(aBindingComponent); | ||
292 | aBindingComponent.renderInNode(this.append(this.getElement('bindings'), {tag:'div'})); | ||
293 | }, | ||
294 | */ | ||
295 | //========================================================================= | ||
296 | /* | ||
297 | 'formValueComponents': function () { | ||
298 | return this._formValueComponents; | ||
299 | }, | ||
300 | |||
301 | 'clearAllFormValueComponents': function () { | ||
302 | MochiKit.Iter.forEach(this.formValueComponents(), MochiKit.Base.methodcaller('remove')); | ||
303 | this._formValueComponents = []; | ||
304 | this.getElement('formValues').innerHTML = ''; | ||
305 | }, | ||
306 | |||
307 | 'addFormValueComponent': function (aFormValueComponent) { | ||
308 | this.formValueComponents().push(aFormValueComponent); | ||
309 | aFormValueComponent.renderInNode(this.append(this.getElement('formValues'), {tag:'div'})); | ||
310 | }, | ||
311 | */ | ||
312 | //========================================================================= | ||
313 | |||
314 | 'changedValue': function (anEvent) { | ||
315 | MochiKit.Signal.signal(this, 'changedValue', anEvent); | ||
316 | |||
317 | this.incrementUpdateFaviconCounter(); | ||
318 | MochiKit.Async.callLater(1, MochiKit.Base.method(this, 'updateFavicon')); | ||
319 | }, | ||
320 | |||
321 | //------------------------------------------------------------------------- | ||
322 | |||
323 | 'handleBackClick': function (anEvent) { | ||
324 | anEvent.preventDefault(); | ||
325 | |||
326 | MochiKit.Signal.signal(this, 'back'); | ||
327 | }, | ||
328 | |||
329 | //========================================================================= | ||
330 | |||
331 | 'bottomMargin': function () { | ||
332 | var result; | ||
333 | |||
334 | //TODO: WTF!!! | ||
335 | // result =MochiKit.Style.getElementPosition(this.element())['y'] + | ||
336 | // MochiKit.Style.getElementDimensions(this.element())['h']; | ||
337 | |||
338 | // result =MochiKit.Style.getElementPosition(this.getElement('footer'))['y']; | ||
339 | //console.log("### bottomMargin"); | ||
340 | //console.log('displayElement', this.displayElement()); | ||
341 | //console.log('-- Clipperz.targetModalDimensionsAndPosition', Clipperz.Base.serializeJSON(Clipperz.PM.UI.Common.Components.BaseComponent.targetModalDimensionsAndPosition)); | ||
342 | //console.log('element', MochiKit.Style.getElementPosition('modalDialog') ['y'], MochiKit.Style.getElementDimensions('modalDialog')['h']); | ||
343 | // result = 450; | ||
344 | |||
345 | result =Clipperz.PM.UI.Common.Components.BaseComponent.targetModalDimensionsAndPosition['position']['y'] + | ||
346 | Clipperz.PM.UI.Common.Components.BaseComponent.targetModalDimensionsAndPosition['dimensions']['h'] - | ||
347 | 60; | ||
348 | |||
349 | return result; | ||
350 | }, | ||
351 | |||
352 | //========================================================================= | ||
353 | |||
354 | 'focusOnUsernameElement': function () { | ||
355 | MochiKit.Async.callLater(0.1, MochiKit.Base.method(this.getElement('username'), 'focus')); | ||
356 | }, | ||
357 | |||
358 | 'focusOnRePassphraseElement': function () { | ||
359 | this.getElement('re-passphrase').focus(); | ||
360 | }, | ||
361 | /* | ||
362 | 'focusOnBookmarkletConfigurationElement': function () { | ||
363 | this.getElement('bookmarkletConfiguration').focus(); | ||
364 | }, | ||
365 | |||
366 | 'focusOnFaviconElement': function () { | ||
367 | this.getElement('faviconURL').focus(); | ||
368 | }, | ||
369 | */ | ||
370 | |||
371 | //========================================================================= | ||
372 | |||
373 | 'hideAllProgeressStates': function () { | ||
374 | MochiKit.Style.hideElement(this.getElement('creatingRegistering')); | ||
375 | MochiKit.Style.hideElement(this.getElement('creatingDone')); | ||
376 | MochiKit.Style.hideElement(this.getElement('creatingFailed')); | ||
377 | }, | ||
378 | |||
379 | 'showProgressOnUserCreation': function () { | ||
380 | //Clipperz.log(">>> NewUserCreationComponent.showProgressOnUserCreation"); | ||
381 | this.hideAllProgeressStates(); | ||
382 | MochiKit.Style.showElement(this.getElement('creatingRegistering')); | ||
383 | }, | ||
384 | |||
385 | 'showUserCreationDone': function () { | ||
386 | //Clipperz.log(">>> NewUserCreationComponent.showUserCreationDone"); | ||
387 | this.hideAllProgeressStates(); | ||
388 | MochiKit.Style.showElement(this.getElement('creatingDone')); | ||
389 | //Clipperz.log("<<< NewUserCreationComponent.showUserCreationDone"); | ||
390 | }, | ||
391 | |||
392 | 'showUserCreationFailed': function () { | ||
393 | //Clipperz.log(">>> NewUserCreationComponent.showUserCreationFailed"); | ||
394 | this.hideAllProgeressStates(); | ||
395 | MochiKit.Style.showElement(this.getElement('creatingFailed')); | ||
396 | }, | ||
397 | |||
398 | //========================================================================= | ||
399 | |||
400 | 'handleKeyEvent': function (anEvent) { | ||
401 | MochiKit.Signal.signal(this, 'keyPressed', anEvent); | ||
402 | /* | ||
403 | if (anEvent.key().string == 'KEY_ENTER') { | ||
404 | if (anEvent.target().nodeName != 'TEXTAREA') { | ||
405 | MochiKit.Signal.signal(this, 'moveForward'); | ||
406 | anEvent.preventDefault(); | ||
407 | } | ||
408 | } else if (anEvent.key().string == 'KEY_TAB') { | ||
409 | if ((anEvent.target().nodeName == 'INPUT') || (anEvent.target().nodeName == 'TEXTAREA')) { | ||
410 | MochiKit.Signal.signal(this, 'moveForward'); | ||
411 | anEvent.preventDefault(); | ||
412 | } | ||
413 | } | ||
414 | */ | ||
415 | }, | ||
416 | |||
417 | 'handleTermsOfServiceCheckboxChange': function (anEvent) { | ||
418 | MochiKit.Signal.signal(this, 'changedValue'); | ||
419 | }, | ||
420 | |||
421 | //========================================================================= | ||
422 | |||
423 | 'clear': function () { | ||
424 | this.tabPanelController().selectTab(null); | ||
425 | Clipperz.PM.UI.Web.Components.NewUserCreationComponent.superclass.clear.apply(this, arguments); | ||
426 | }, | ||
427 | |||
428 | //========================================================================= | ||
429 | __syntaxFix__: "syntax fix" | ||
430 | }); | ||