author | Giulio Cesare Solaroli <giulio.cesare@clipperz.com> | 2013-04-21 15:55:07 (UTC) |
---|---|---|
committer | Giulio Cesare Solaroli <giulio.cesare@clipperz.com> | 2013-04-21 15:55:07 (UTC) |
commit | 959c262afc598c4eeb58fe8fccf90ea8305c0eec (patch) (unidiff) | |
tree | aae9cb7821e59704240751e5b2878a374d21ea91 /frontend/gamma/js/Clipperz/PM/UI/Mobile/Components/LoginForm.js | |
parent | 1906ddfb5d3887edeedaf8e07d14ad89abbd214d (diff) | |
download | clipperz-959c262afc598c4eeb58fe8fccf90ea8305c0eec.zip clipperz-959c262afc598c4eeb58fe8fccf90ea8305c0eec.tar.gz clipperz-959c262afc598c4eeb58fe8fccf90ea8305c0eec.tar.bz2 |
Updated mobile prototype
Diffstat (limited to 'frontend/gamma/js/Clipperz/PM/UI/Mobile/Components/LoginForm.js') (more/less context) (ignore whitespace changes)
-rw-r--r-- | frontend/gamma/js/Clipperz/PM/UI/Mobile/Components/LoginForm.js | 142 |
1 files changed, 84 insertions, 58 deletions
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Mobile/Components/LoginForm.js b/frontend/gamma/js/Clipperz/PM/UI/Mobile/Components/LoginForm.js index 3aeac0c..da864eb 100644 --- a/frontend/gamma/js/Clipperz/PM/UI/Mobile/Components/LoginForm.js +++ b/frontend/gamma/js/Clipperz/PM/UI/Mobile/Components/LoginForm.js | |||
@@ -1,347 +1,373 @@ | |||
1 | /* | 1 | /* |
2 | 2 | ||
3 | Copyright 2008-2013 Clipperz Srl | 3 | Copyright 2008-2013 Clipperz Srl |
4 | 4 | ||
5 | This file is part of Clipperz, the online password manager. | 5 | This file is part of Clipperz, the online password manager. |
6 | For further information about its features and functionalities please | 6 | For further information about its features and functionalities please |
7 | refer to http://www.clipperz.com. | 7 | refer to http://www.clipperz.com. |
8 | 8 | ||
9 | * Clipperz is free software: you can redistribute it and/or modify it | 9 | * Clipperz is free software: you can redistribute it and/or modify it |
10 | under the terms of the GNU Affero General Public License as published | 10 | under the terms of the GNU Affero General Public License as published |
11 | by the Free Software Foundation, either version 3 of the License, or | 11 | by the Free Software Foundation, either version 3 of the License, or |
12 | (at your option) any later version. | 12 | (at your option) any later version. |
13 | 13 | ||
14 | * Clipperz is distributed in the hope that it will be useful, but | 14 | * Clipperz is distributed in the hope that it will be useful, but |
15 | WITHOUT ANY WARRANTY; without even the implied warranty of | 15 | WITHOUT ANY WARRANTY; without even the implied warranty of |
16 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. | 16 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. |
17 | See the GNU Affero General Public License for more details. | 17 | See the GNU Affero General Public License for more details. |
18 | 18 | ||
19 | * You should have received a copy of the GNU Affero General Public | 19 | * You should have received a copy of the GNU Affero General Public |
20 | License along with Clipperz. If not, see http://www.gnu.org/licenses/. | 20 | License along with Clipperz. If not, see http://www.gnu.org/licenses/. |
21 | 21 | ||
22 | */ | 22 | */ |
23 | 23 | ||
24 | Clipperz.Base.module('Clipperz.PM.UI.Mobile.Components'); | 24 | Clipperz.Base.module('Clipperz.PM.UI.Mobile.Components'); |
25 | 25 | ||
26 | Clipperz.PM.UI.Mobile.Components.LoginForm = function(args) { | 26 | Clipperz.PM.UI.Mobile.Components.LoginForm = function(args) { |
27 | args = args || {}; | 27 | args = args || {}; |
28 | 28 | ||
29 | this._pin = ''; | 29 | this._pin = ''; |
30 | 30 | ||
31 | this._message = null; | 31 | this._message = null; |
32 | this._steps = 0; | 32 | this._steps = 0; |
33 | this._actualSteps = 0; | 33 | this._actualSteps = 0; |
34 | 34 | ||
35 | this._callback = null; | 35 | this._callback = null; |
36 | this._errorCallback = null; | 36 | this._errorCallback = null; |
37 | 37 | ||
38 | this._mode = 'CREDENTIALS'; | 38 | this._mode = 'CREDENTIALS'; |
39 | 39 | ||
40 | Clipperz.PM.UI.Mobile.Components.LoginForm.superclass.constructor.apply(this, arguments); | 40 | Clipperz.PM.UI.Mobile.Components.LoginForm.superclass.constructor.apply(this, arguments); |
41 | 41 | ||
42 | return this; | 42 | return this; |
43 | } | 43 | } |
44 | 44 | ||
45 | //============================================================================= | 45 | //============================================================================= |
46 | 46 | ||
47 | Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI.Common.Components.BaseComponent, { | 47 | //Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI.Common.Components.BaseComponent, { |
48 | Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI.Mobile.Components.BaseComponent, { | ||
48 | 49 | ||
49 | //------------------------------------------------------------------------- | 50 | //------------------------------------------------------------------------- |
50 | 51 | ||
51 | 'toString': function () { | 52 | 'toString': function () { |
52 | return "Clipperz.PM.UI.Mobile.Components.LoginForm component"; | 53 | return "Clipperz.PM.UI.Mobile.Components.LoginForm component"; |
53 | }, | 54 | }, |
54 | 55 | ||
55 | //------------------------------------------------------------------------- | 56 | //------------------------------------------------------------------------- |
56 | 57 | ||
57 | 'callback': function () { | 58 | 'callback': function () { |
58 | return this._callback; | 59 | return this._callback; |
59 | }, | 60 | }, |
60 | 61 | ||
61 | 'errorCallback': function () { | 62 | 'errorCallback': function () { |
62 | return this._errorCallback; | 63 | return this._errorCallback; |
63 | }, | 64 | }, |
64 | 65 | ||
65 | //------------------------------------------------------------------------- | 66 | //------------------------------------------------------------------------- |
66 | 67 | ||
67 | 'mode': function () { | 68 | 'mode': function () { |
68 | return this._mode; | 69 | return this._mode; |
69 | }, | 70 | }, |
70 | 71 | ||
71 | 'setMode': function (aValue) { | 72 | 'setMode': function (aValue) { |
72 | this._mode = aValue; | 73 | this._mode = aValue; |
73 | }, | 74 | }, |
74 | 75 | ||
75 | //.......................................................................... | 76 | //.......................................................................... |
76 | 77 | ||
77 | 'pin': function () { | 78 | 'pin': function () { |
78 | return this._pin; | 79 | return this._pin; |
79 | }, | 80 | }, |
80 | 81 | ||
81 | 'setPin': function (aValue) { | 82 | 'setPin': function (aValue) { |
82 | this._pin = aValue; | 83 | this._pin = aValue; |
83 | }, | 84 | }, |
84 | 85 | ||
85 | //.......................................................................... | 86 | //.......................................................................... |
86 | 87 | ||
87 | 'username': function () { | 88 | 'username': function () { |
88 | return this._username; | 89 | return this._username; |
89 | }, | 90 | }, |
90 | 91 | ||
91 | 'setUsername': function (aValue) { | 92 | 'setUsername': function (aValue) { |
92 | this._username = aValue; | 93 | this._username = aValue; |
93 | }, | 94 | }, |
94 | 95 | ||
95 | //.......................................................................... | 96 | //.......................................................................... |
96 | 97 | ||
97 | 'passphrase': function () { | 98 | 'passphrase': function () { |
98 | return this._passphrase; | 99 | return this._passphrase; |
99 | }, | 100 | }, |
100 | 101 | ||
101 | 'setPassphrase': function (aValue) { | 102 | 'setPassphrase': function (aValue) { |
102 | this._passphrase = aValue; | 103 | this._passphrase = aValue; |
103 | }, | 104 | }, |
104 | 105 | ||
105 | //------------------------------------------------------------------------- | 106 | //------------------------------------------------------------------------- |
106 | 107 | ||
107 | 'message': function () { | 108 | 'message': function () { |
108 | return this._message; | 109 | return this._message; |
109 | }, | 110 | }, |
110 | 111 | ||
111 | '_setMessage': function (aValue) { | 112 | '_setMessage': function (aValue) { |
112 | this._message = aValue; | 113 | this._message = aValue; |
113 | 114 | ||
114 | if (aValue == null) { | 115 | // if (aValue == null) { |
115 | MochiKit.Style.hideElement(this.getElement('credentialsMessage')); | 116 | // MochiKit.Style.hideElement(this.getElement('credentialsMessage')); |
116 | } else { | 117 | // } else { |
117 | this.getElement('message').innerHTML = aValue; | 118 | // this.getElement('message').innerHTML = aValue; |
118 | MochiKit.Style.showElement(this.getElement('credentialsMessage')); | 119 | // MochiKit.Style.showElement(this.getElement('credentialsMessage')); |
119 | } | 120 | // } |
120 | }, | 121 | }, |
121 | 122 | ||
122 | 'setMessage': function (aValue) { | 123 | 'setMessage': function (aValue) { |
123 | this._setMessage(aValue); | 124 | this._setMessage(aValue); |
124 | MochiKit.DOM.removeElementClass(this.getElement('credentialsMessage'), 'error'); | 125 | // MochiKit.DOM.removeElementClass(this.getElement('credentialsMessage'), 'error'); |
125 | }, | 126 | }, |
126 | 127 | ||
127 | 'setErrorMessage': function (aValue) { | 128 | 'setErrorMessage': function (aValue) { |
128 | this._setMessage(aValue); | 129 | this._setMessage(aValue); |
129 | MochiKit.DOM.addElementClass(this.getElement('credentialsMessage'), 'error'); | 130 | // MochiKit.DOM.addElementClass(this.getElement('credentialsMessage'), 'error'); |
130 | }, | 131 | }, |
131 | 132 | ||
132 | //------------------------------------------------------------------------- | 133 | //------------------------------------------------------------------------- |
133 | 134 | ||
134 | 'setCallbacks': function (args) { | 135 | 'setCallbacks': function (args) { |
135 | this._callback = args['callback']; | 136 | this._callback = args['callback']; |
136 | this._errorCallback = args['errorCallback']; | 137 | this._errorCallback = args['errorCallback']; |
137 | }, | 138 | }, |
138 | 139 | ||
140 | 'show': function (args) { | ||
141 | this.updateWithArgs(args); | ||
142 | |||
143 | if (this.mode() == 'PIN') { | ||
144 | this.setPin(''); | ||
145 | this.getElement('PIN').focus(); | ||
146 | } else if (this.mode() == 'CREDENTIALS') { | ||
147 | if (this.getElement('usernameField').value.length == 0) { | ||
148 | this.getElement('usernameField').focus(); | ||
149 | } else { | ||
150 | this.getElement('passphraseField').focus(); | ||
151 | this.getElement('passphraseField').select(); | ||
152 | } | ||
153 | } | ||
154 | }, | ||
155 | |||
139 | 'showErrors': function (args) { | 156 | 'showErrors': function (args) { |
140 | if (args['previousFailedAttempt'] == 'LOGIN') { | 157 | if (args['previousFailedAttempt'] == 'LOGIN') { |
158 | $(this.getAnchor('credentialsSubmitButton')).button('enable'); | ||
141 | this.setErrorMessage("Wrong credentials"); | 159 | this.setErrorMessage("Wrong credentials"); |
142 | } else if (args['previousFailedAttempt'] == 'PIN') { | 160 | } else if (args['previousFailedAttempt'] == 'PIN') { |
143 | if (args['failedAttempts'] == -1) { | 161 | if (args['failedAttempts'] == -1) { |
144 | this.setErrorMessage("Wrong PIN - Resetted"); | 162 | this.setErrorMessage("Wrong PIN - Resetted"); |
145 | } else { | 163 | } else { |
146 | this.setErrorMessage("Wrong PIN"); | 164 | this.setErrorMessage("Wrong PIN"); |
147 | } | 165 | } |
148 | } else { | 166 | } else { |
149 | this.setMessage(null); | 167 | this.setMessage(null); |
150 | } | 168 | } |
151 | }, | 169 | }, |
152 | 170 | ||
153 | 'updateWithArgs': function (args) { | 171 | 'updateWithArgs': function (args) { |
154 | this.renderIfNeeded(); | 172 | this.renderOnlyOnce(); |
155 | this.setCallbacks(args); | 173 | this.setCallbacks(args); |
156 | this.showErrors(args); | 174 | this.showErrors(args); |
157 | this.updateRendering(); | 175 | // this.updateRendering(); |
158 | }, | ||
159 | |||
160 | 'showPinLogin': function (args) { | ||
161 | this.setPin(''); | ||
162 | this.setMode('PIN'); | ||
163 | this.updateWithArgs(args); | ||
164 | |||
165 | // $(this.getAnchor('PIN')).focus(); | ||
166 | this.getElement('PIN').focus(); | ||
167 | }, | ||
168 | |||
169 | 'showCredentialsLogin': function (args) { | ||
170 | this.setMode('CREDENTIALS'); | ||
171 | this.updateWithArgs(args); | ||
172 | |||
173 | if (this.getElement('usernameField').value.length == 0) { | ||
174 | // $(this.getAnchor('usernameField')).focus(); | ||
175 | this.getElement('usernameField').focus(); | ||
176 | } else { | ||
177 | // $(this.getAnchor('passphraseField')).focus(); | ||
178 | this.getElement('passphraseField').focus(); | ||
179 | this.getElement('passphraseField').select(); | ||
180 | } | ||
181 | }, | 176 | }, |
182 | 177 | ||
183 | //------------------------------------------------------------------------- | 178 | //------------------------------------------------------------------------- |
184 | 179 | ||
185 | 'renderIfNeeded': function () { | 180 | 'renderOnlyOnce': function () { |
186 | if (this.isFullyRendered() == false) { | 181 | if (this.isFullyRendered() == false) { |
187 | this.render(); | 182 | this.render(); |
188 | }; | 183 | }; |
189 | this.updateRendering(); | 184 | // this.updateRendering(); |
190 | }, | 185 | }, |
191 | 186 | /* | |
192 | 'updateRendering': function () { | 187 | 'updateRendering': function () { |
193 | MochiKit.Style.showElement(this.getElement('credentialsBody')); | 188 | MochiKit.Style.showElement(this.getElement('credentialsBody')); |
194 | MochiKit.Style.hideElement(this.getElement('validating')); | 189 | MochiKit.Style.hideElement(this.getElement('validating')); |
195 | 190 | ||
196 | // this.hideAllPanes(); | 191 | // this.hideAllPanes(); |
197 | MochiKit.Base.map(function (aNode) { MochiKit.Style.hideElement(aNode); }, MochiKit.Selector.findDocElements('div.credentialsBody > div')); | 192 | MochiKit.Base.map(function (aNode) { MochiKit.Style.hideElement(aNode); }, MochiKit.Selector.findDocElements('div.credentialsBody > div')); |
198 | if (this.mode() == 'CREDENTIALS') { | 193 | if (this.mode() == 'CREDENTIALS') { |
199 | selectedPanel = this.getElement('credentials') | 194 | selectedPanel = this.getElement('credentials'); |
195 | $(this.getAnchor('credentialsSubmitButton')).button('enable'); | ||
200 | } else if (this.mode() == 'PIN') { | 196 | } else if (this.mode() == 'PIN') { |
201 | selectedPanel = this.getElement('pin') | 197 | selectedPanel = this.getElement('pin') |
202 | // this.updatePinDisplay(); | 198 | // this.updatePinDisplay(); |
203 | } else { | 199 | } else { |
204 | throw 'Unhandled login form mode'; | 200 | throw 'Unhandled login form mode'; |
205 | } | 201 | } |
206 | MochiKit.Style.showElement(selectedPanel); | ||
207 | 202 | ||
203 | MochiKit.Style.showElement(selectedPanel); | ||
208 | MochiKit.Style.hideElement(this.getElement('validating')); | 204 | MochiKit.Style.hideElement(this.getElement('validating')); |
209 | }, | 205 | }, |
210 | 206 | */ | |
211 | 'renderSelf': function() { | 207 | /* |
208 | '_renderSelf': function() { | ||
212 | var selectedPanel; | 209 | var selectedPanel; |
213 | this.append(this.element(), {tag:'div', id:'login', children:[ | 210 | this.append(this.element(), {tag:'div', id:'login', children:[ |
214 | {tag:'div', cls:'toolbar', children:[ | 211 | {tag:'div', cls:'toolbar text-center', children:[ |
215 | {tag:'h1', html:"clipperz"} | 212 | {tag:'h1', cls:'clipperz', html:"clipperz"} |
216 | ]}, | 213 | ]}, |
217 | {tag:'div', cls:'scroll', children:[ | 214 | {tag:'div', cls:'', children:[ |
218 | //================================================================== | 215 | //================================================================== |
219 | {tag:'div', cls:'credentialsMessage', id:this.getId('credentialsMessage'), children:[ | 216 | {tag:'div', cls:'credentialsMessage', id:this.getId('credentialsMessage'), children:[ |
220 | {tag:'h1', cls:'message', id:this.getId('message'), html:"Message"} | 217 | {tag:'h1', cls:'message', id:this.getId('message'), html:"Message"} |
221 | ]}, | 218 | ]}, |
222 | //================================================================== | 219 | //================================================================== |
223 | {tag:'div', cls:'credentialsBody', id:this.getId('credentialsBody'), children:[ | 220 | {tag:'div', cls:'credentialsBody', id:this.getId('credentialsBody'), children:[ |
224 | //-------------------------------------------------------------- | 221 | //-------------------------------------------------------------- |
225 | {tag:'div', cls:'pin', id:this.getId('pin'), children:[ | 222 | {tag:'div', cls:'pin', id:this.getId('pin'), children:[ |
226 | {tag:'form', cls:'scroll', id:this.getId('pinForm'), children:[ | 223 | {tag:'form', cls:'', id:this.getId('pinForm'), children:[ |
227 | {tag:'ul', cls:'edit rounded', children:[ | 224 | {tag:'ul', cls:'edit rounded', children:[ |
228 | {tag:'li', children:[{tag:'input', type:'number', name:'PIN', placeholder:"PIN", id:this.getId('PIN') }]}, | 225 | {tag:'li', children:[{tag:'input', type:'number', name:'PIN', placeholder:"PIN", id:this.getId('PIN') }]}, |
229 | ]}, | 226 | ]}, |
230 | {tag:'a', href:'#', cls:'greenButton', id:this.getId('pinSubmitButton'), html:"Login"} | 227 | {tag:'a', href:'#', cls:'greenButton', id:this.getId('pinSubmitButton'), html:"Login"} |
231 | ]} | 228 | ]} |
232 | ]}, | 229 | ]}, |
233 | //-------------------------------------------------------------- | 230 | //-------------------------------------------------------------- |
234 | {tag:'div', cls:'credentials', id:this.getId('credentials'), children:[ | 231 | {tag:'div', cls:'credentials', id:this.getId('credentials'), children:[ |
235 | {tag:'form', cls:'scroll', id:this.getId('credentialsForm'), children:[ | 232 | {tag:'form', cls:'text-center', id:this.getId('credentialsForm'), children:[ |
236 | {tag:'ul', cls:'edit rounded', children:[ | 233 | {tag:'fieldset', children:[ |
237 | {tag:'li', children:[{tag:'input', type:'email', name:'name', /*value:'joe',*/ placeholder:"username", id:this.getId('usernameField') }]}, | 234 | // {tag:'legend', html:"Legend"}, |
238 | {tag:'li', children:[{tag:'input', type:'password', name:'passphrase', /*value:'clipperz',*/placeholder:"passphrase", id:this.getId('passphraseField') }]} | 235 | {tag:'input', type:'email', name:'name', /*value:'joe',* / placeholder:"username", id:this.getId('usernameField') }, |
236 | // {tag:'span', cls:'help-block', html:"Example of help text here"}, | ||
237 | {tag:'input', type:'password', name:'passphrase', /*value:'clipperz',* /placeholder:"passphrase", id:this.getId('passphraseField') }, | ||
239 | ]}, | 238 | ]}, |
240 | {tag:'a', href:'#', cls:'greenButton', id:this.getId('credentialsSubmitButton'), html:"Login"} | ||
241 | // {tag:'input', type:'submit', cls:'greenButton', id:this.getId('credentialsSubmitButton'), value:"Login"} | ||
242 | 239 | ||
240 | {tag:'button', cls:'btn btn-primary btn-large', type:'submit', id:this.getId('credentialsSubmitButton'), html:"Login"} | ||
243 | ]} | 241 | ]} |
244 | ]}, | 242 | ]}, |
245 | //-------------------------------------------------------------- | 243 | //-------------------------------------------------------------- |
246 | ]}, | 244 | ]}, |
247 | //================================================================== | 245 | //================================================================== |
248 | {tag:'div', cls:'validating', id:this.getId('validating'), children:[ | 246 | {tag:'div', cls:'validating', id:this.getId('validating'), children:[ |
249 | {tag:'div', cls:'loading', children:[ | 247 | {tag:'div', cls:'loading', children:[ |
250 | {tag:'div', cls:'spinner', children:[ | 248 | {tag:'div', cls:'spinner', children:[ |
251 | {tag:'div', cls:'bar01'}, | 249 | {tag:'div', cls:'bar01'}, |
252 | {tag:'div', cls:'bar02'}, | 250 | {tag:'div', cls:'bar02'}, |
253 | {tag:'div', cls:'bar03'}, | 251 | {tag:'div', cls:'bar03'}, |
254 | {tag:'div', cls:'bar04'}, | 252 | {tag:'div', cls:'bar04'}, |
255 | {tag:'div', cls:'bar05'}, | 253 | {tag:'div', cls:'bar05'}, |
256 | {tag:'div', cls:'bar06'}, | 254 | {tag:'div', cls:'bar06'}, |
257 | {tag:'div', cls:'bar07'}, | 255 | {tag:'div', cls:'bar07'}, |
258 | {tag:'div', cls:'bar08'}, | 256 | {tag:'div', cls:'bar08'}, |
259 | {tag:'div', cls:'bar09'}, | 257 | {tag:'div', cls:'bar09'}, |
260 | {tag:'div', cls:'bar10'}, | 258 | {tag:'div', cls:'bar10'}, |
261 | {tag:'div', cls:'bar11'}, | 259 | {tag:'div', cls:'bar11'}, |
262 | {tag:'div', cls:'bar12'} | 260 | {tag:'div', cls:'bar12'} |
263 | ]} | 261 | ]} |
264 | ]}, | 262 | ]}, |
265 | {tag:'div', id:this.getId('loadingMessage')}, | 263 | {tag:'div', id:this.getId('loadingMessage')}, |
266 | {tag:'a', href:'#', cls:'grayButton', id:this.getId('loginCancelButton'), html:"Cancel"} | 264 | {tag:'a', href:'#', cls:'grayButton', id:this.getId('loginCancelButton'), html:"Cancel"} |
267 | ]} | 265 | ]} |
268 | //================================================================== | 266 | //================================================================== |
269 | ]} | 267 | ]} |
270 | ]}); | 268 | ]}); |
271 | 269 | ||
272 | MochiKit.Signal.connect(this.getElement('credentialsForm'), 'onsubmit', this, 'submitCredentialsHandler'); | 270 | MochiKit.Signal.connect(this.getElement('credentialsForm'), 'onsubmit', this, 'submitCredentialsHandler'); |
273 | MochiKit.Signal.connect(this.getElement('credentialsSubmitButton'), 'onclick', this, 'submitCredentialsHandler'); | 271 | MochiKit.Signal.connect(this.getElement('credentialsSubmitButton'), 'onclick', this, 'submitCredentialsHandler'); |
274 | 272 | ||
275 | MochiKit.Signal.connect(this.getElement('pinForm'), 'onsubmit', this, 'submitPinHandler'); | 273 | MochiKit.Signal.connect(this.getElement('pinForm'), 'onsubmit', this, 'submitPinHandler'); |
276 | MochiKit.Signal.connect(this.getElement('pinSubmitButton'), 'onclick', this, 'submitPinHandler'); | 274 | MochiKit.Signal.connect(this.getElement('pinSubmitButton'), 'onclick', this, 'submitPinHandler'); |
277 | 275 | ||
278 | MochiKit.Signal.connect(Clipperz.Signal.NotificationCenter, 'initProgress', this, 'initProgressHandle'); | 276 | MochiKit.Signal.connect(Clipperz.Signal.NotificationCenter, 'initProgress', this, 'initProgressHandle'); |
279 | MochiKit.Signal.connect(Clipperz.Signal.NotificationCenter, 'updateProgress',this, 'updateProgressHandle'); | 277 | MochiKit.Signal.connect(Clipperz.Signal.NotificationCenter, 'updateProgress',this, 'updateProgressHandle'); |
280 | MochiKit.Signal.connect(Clipperz.Signal.NotificationCenter, 'advanceProgress',this, 'advanceProgressHandle'); | 278 | MochiKit.Signal.connect(Clipperz.Signal.NotificationCenter, 'advanceProgress',this, 'advanceProgressHandle'); |
281 | MochiKit.Signal.connect(Clipperz.Signal.NotificationCenter, 'progressDone', this, 'progressDoneHandle'); | 279 | MochiKit.Signal.connect(Clipperz.Signal.NotificationCenter, 'progressDone', this, 'progressDoneHandle'); |
282 | }, | 280 | }, |
281 | */ | ||
282 | 'renderSelf': function() { | ||
283 | if (this.isFullyRendered() == false) { | ||
284 | this.append(this.element(), //[ | ||
285 | // {tag:'div', 'data-role':'header', children:[ | ||
286 | // {tag:'h1', html:'clipperz'} | ||
287 | // ]}, | ||
288 | // {tag:'div', 'data-role':'content', children:[ | ||
289 | {tag:'form', id:this.getId('credentialsForm'), children:[ | ||
290 | {tag:'div', 'data-role':'fieldcontain', cls:'ui-hide-label', children:[ | ||
291 | {tag:'label', 'for':'name', cls:'ui-input-text', html:"username"}, | ||
292 | {tag:'input', type:'email', name:'name', /*value:'joe',*/ placeholder:"username", id:this.getId('usernameField') }, | ||
293 | {tag:'label', 'for':'passphrase', cls:'ui-input-text', html:"passphrase"}, | ||
294 | {tag:'input', type:'password', name:'passphrase', /*value:'clipperz',*/placeholder:"passphrase", id:this.getId('passphraseField') } | ||
295 | ]}, | ||
296 | {tag:'button', type:'submit', id:this.getId('credentialsSubmitButton'), html:"login"} | ||
297 | ]} | ||
298 | // ]} | ||
299 | // ] | ||
300 | ); | ||
301 | |||
302 | MochiKit.Signal.connect(this.getElement('credentialsForm'), 'onsubmit', this, 'submitCredentialsHandler'); | ||
303 | MochiKit.Signal.connect(this.getElement('credentialsSubmitButton'), 'onclick', this, 'submitCredentialsHandler'); | ||
304 | } | ||
305 | }, | ||
283 | 306 | ||
284 | //------------------------------------------------------------------------- | 307 | //------------------------------------------------------------------------- |
285 | 308 | ||
286 | 'submitPinHandler': function (anEvent) { | 309 | 'submitPinHandler': function (anEvent) { |
287 | varpin; | 310 | varpin; |
288 | 311 | ||
289 | this.setMessage(null); | 312 | this.setMessage(null); |
290 | pin = this.getElement('PIN').value; | 313 | pin = this.getElement('PIN').value; |
291 | // $(this.getAnchor('PIN')).blur(); | 314 | $(this.getAnchor('PIN')).blur(); |
292 | this.getElement('PIN').blur(); | 315 | // this.getElement('PIN').blur(); |
293 | 316 | ||
294 | credentials = Clipperz.PM.PIN.credentialsWithPIN(pin); | 317 | credentials = Clipperz.PM.PIN.credentialsWithPIN(pin); |
295 | this.loginWithCredentials(credentials); | 318 | this.loginWithCredentials(credentials); |
296 | }, | 319 | }, |
297 | 320 | ||
298 | 'submitCredentialsHandler': function (anEvent) { | 321 | 'submitCredentialsHandler': function (anEvent) { |
299 | varcredentials; | 322 | varcredentials; |
300 | 323 | ||
301 | this.setMessage(null); | 324 | anEvent.preventDefault(); |
325 | |||
326 | // this.setMessage(null); | ||
327 | $(this.getAnchor('usernameField')).blur(); | ||
328 | $(this.getAnchor('passphraseField')).blur(); | ||
329 | $(this.getAnchor('credentialsSubmitButton')).button('disable'); | ||
302 | 330 | ||
303 | credentials = {}; | 331 | credentials = {}; |
304 | credentials['username'] = this.getElement('usernameField').value; | 332 | credentials['username'] = this.getElement('usernameField').value; |
305 | credentials['passphrase'] = this.getElement('passphraseField').value; | 333 | credentials['passphrase'] = this.getElement('passphraseField').value; |
306 | // $(this.getAnchor('passphraseField')).blur(); | ||
307 | this.getElement('passphraseField').blur(); | ||
308 | 334 | ||
309 | this.loginWithCredentials(credentials); | 335 | this.loginWithCredentials(credentials); |
310 | }, | 336 | }, |
311 | 337 | ||
312 | //------------------------------------------------------------------------- | 338 | //------------------------------------------------------------------------- |
313 | 339 | ||
314 | 'loginWithCredentials': function (someCredentials) { | 340 | 'loginWithCredentials': function (someCredentials) { |
315 | varargs; | 341 | varargs; |
316 | 342 | ||
317 | args = {}; | 343 | args = {}; |
318 | args['credentials'] = someCredentials; | 344 | args['credentials'] = someCredentials; |
319 | args['errorCallback'] = this.errorCallback(); | 345 | args['errorCallback'] = this.errorCallback(); |
320 | 346 | ||
321 | MochiKit.Style.hideElement(this.getElement('credentialsBody')); | 347 | // MochiKit.Style.hideElement(this.getElement('credentialsBody')); |
322 | MochiKit.Style.showElement(this.getElement('validating')); | 348 | // MochiKit.Style.showElement(this.getElement('validating')); |
323 | 349 | ||
324 | MochiKit.Async.callLater(0.1, this.callback(), args); | 350 | MochiKit.Async.callLater(0.1, this.callback(), args); |
325 | }, | 351 | }, |
326 | 352 | ||
327 | //------------------------------------------------------------------------- | 353 | //------------------------------------------------------------------------- |
328 | 354 | ||
329 | 'initProgressHandle': function (anEvent) { | 355 | 'initProgressHandle': function (anEvent) { |
330 | this._steps = anEvent['steps']; | 356 | this._steps = anEvent['steps']; |
331 | this._actualSteps = 0; | 357 | this._actualSteps = 0; |
332 | }, | 358 | }, |
333 | 359 | ||
334 | 'updateProgressHandle': function (anEvent) { | 360 | 'updateProgressHandle': function (anEvent) { |
335 | this._steps += anEvent['extraSteps']; | 361 | this._steps += anEvent['extraSteps']; |
336 | }, | 362 | }, |
337 | 363 | ||
338 | 'advanceProgressHandle': function (anEvent) { | 364 | 'advanceProgressHandle': function (anEvent) { |
339 | this._actualSteps ++; | 365 | this._actualSteps ++; |
340 | }, | 366 | }, |
341 | 367 | ||
342 | 'progressDoneHandle': function (anEvent) { | 368 | 'progressDoneHandle': function (anEvent) { |
343 | }, | 369 | }, |
344 | 370 | ||
345 | //------------------------------------------------------------------------- | 371 | //------------------------------------------------------------------------- |
346 | __syntaxFix__: "syntax fix" | 372 | __syntaxFix__: "syntax fix" |
347 | }); | 373 | }); |