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 | |||
@@ -46,3 +46,4 @@ Clipperz.PM.UI.Mobile.Components.LoginForm = function(args) { | |||
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 | ||
@@ -113,8 +114,8 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI. | |||
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 | }, |
@@ -123,3 +124,3 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI. | |||
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 | }, |
@@ -128,3 +129,3 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI. | |||
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 | }, |
@@ -138,4 +139,21 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI. | |||
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"); |
@@ -153,29 +171,6 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI. | |||
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 | }, |
@@ -184,3 +179,3 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI. | |||
184 | 179 | ||
185 | 'renderIfNeeded': function () { | 180 | 'renderOnlyOnce': function () { |
186 | if (this.isFullyRendered() == false) { | 181 | if (this.isFullyRendered() == false) { |
@@ -188,5 +183,5 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI. | |||
188 | }; | 183 | }; |
189 | this.updateRendering(); | 184 | // this.updateRendering(); |
190 | }, | 185 | }, |
191 | 186 | /* | |
192 | 'updateRendering': function () { | 187 | 'updateRendering': function () { |
@@ -198,3 +193,4 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI. | |||
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') { |
@@ -205,14 +201,15 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI. | |||
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 | //================================================================== |
@@ -225,3 +222,3 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI. | |||
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:[ |
@@ -234,10 +231,11 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI. | |||
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 | ]} |
@@ -282,2 +280,27 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI. | |||
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 | ||
@@ -290,4 +313,4 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI. | |||
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 | ||
@@ -300,3 +323,8 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI. | |||
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 | ||
@@ -305,4 +333,2 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI. | |||
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 | ||
@@ -320,4 +346,4 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI. | |||
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 | ||