summaryrefslogtreecommitdiff
path: root/frontend/gamma/js/Clipperz/PM/UI/Mobile/Components
Unidiff
Diffstat (limited to 'frontend/gamma/js/Clipperz/PM/UI/Mobile/Components') (more/less context) (ignore whitespace changes)
-rw-r--r--frontend/gamma/js/Clipperz/PM/UI/Mobile/Components/BaseComponent.js249
-rw-r--r--frontend/gamma/js/Clipperz/PM/UI/Mobile/Components/CardList.js27
-rw-r--r--frontend/gamma/js/Clipperz/PM/UI/Mobile/Components/LoginForm.js142
-rw-r--r--frontend/gamma/js/Clipperz/PM/UI/Mobile/Components/Overlay.js136
-rw-r--r--frontend/gamma/js/Clipperz/PM/UI/Mobile/Components/Preferences.js77
5 files changed, 570 insertions, 61 deletions
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Mobile/Components/BaseComponent.js b/frontend/gamma/js/Clipperz/PM/UI/Mobile/Components/BaseComponent.js
new file mode 100644
index 0000000..1e7b69f
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Mobile/Components/BaseComponent.js
@@ -0,0 +1,249 @@
1/*
2
3Copyright 2008-2013 Clipperz Srl
4
5This file is part of Clipperz, the online password manager.
6For further information about its features and functionalities please
7refer to http://www.clipperz.com.
8
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
11 by the Free Software Foundation, either version 3 of the License, or
12 (at your option) any later version.
13
14* Clipperz is distributed in the hope that it will be useful, but
15 WITHOUT ANY WARRANTY; without even the implied warranty of
16 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
17 See the GNU Affero General Public License for more details.
18
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/.
21
22*/
23
24Clipperz.Base.module('Clipperz.PM.UI.Mobile.Components');
25
26//#############################################################################
27
28var _Clipperz_PM_Components_base_id_ = 0;
29
30//#############################################################################
31
32Clipperz.PM.UI.Mobile.Components.BaseComponent = function(args) {
33 args = args || {};
34 Clipperz.PM.UI.Mobile.Components.BaseComponent.superclass.constructor.call(this, args);
35
36 this._element = args.element || null;
37 this._ids = {};
38
39 this._isFullyRendered = false;
40 //this._renderingWaitingQueue = [];
41
42 return this;
43}
44
45//=============================================================================
46
47//MochiKit.Base.update(Clipperz.PM.UI.Mobile.Components.BaseComponent, Object, {
48Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.BaseComponent, Object, {
49
50 'isClipperzPMComponent': true,
51
52 //-------------------------------------------------------------------------
53
54 'toString': function () {
55 return "Clipperz.PM.UI.Mobile.Components.BaseComponent component";
56 },
57
58 'componentId': function () {
59 return this.getId('_id_');
60 },
61
62 //-------------------------------------------------------------------------
63
64 'element': function() {
65 return MochiKit.DOM.getElement(this._element);
66 },
67
68 'setElement': function(aNode) {
69 this._element = aNode;
70 },
71
72 //-----------------------------------------------------
73
74 'displayElement': function() {
75 return this.element();
76 },
77
78 //-------------------------------------------------------------------------
79
80 'renderInNode': function(aDomNode) {
81 this.setElement(aDomNode);
82 this.render();
83 },
84
85 'render': function() {
86 this.clear();
87 this.renderSelf();
88 // this.renderComponents();
89 // if (this.shouldShowTranslationHints()) {
90 // this.renderTranslationHints();
91 // }
92 if (this.shouldShowElementWhileRendering()) {
93 MochiKit.Style.showElement(this.displayElement());
94 };
95
96 this._isFullyRendered = true;
97
98 // MochiKit.Iter.forEach(this.renderingWaitingQueue(), MochiKit.Base.methodcaller('callback'));
99 // this.resetRenderingWaitingQueue();
100 },
101
102 'renderSelf': function() {
103 throw Clipperz.Base.exception.AbstractMethod;
104 },
105
106 //'renderComponents': function() {
107 // varslotName;
108 //
109 // for (slotName in this.slotComponents()) {
110 // this.slotComponents()[slotName].renderInNode(this.elementForSlotNamed(slotName));
111 // }
112 //},
113
114 //.........................................................................
115
116 'shouldShowElementWhileRendering': function() {
117 return false;
118 },
119
120 //.........................................................................
121
122 'isFullyRendered': function () {
123 return this._isFullyRendered;
124 },
125
126 //.........................................................................
127/*
128 'renderingWaitingQueue': function () {
129 return this._renderingWaitingQueue;
130 },
131
132 'resetRenderingWaitingQueue': function () {
133 this._renderingWaitingQueue = [];
134 },
135
136 //.........................................................................
137
138 'waitUntilFullyRendered': function () {
139 var deferredResult;
140
141 if (this.isFullyRendered() == true) {
142 deferredResult = MochiKit.Async.succeed
143 } else {
144 deferredResult = new Clipperz.Async.Deferred("BaseComponent.waitUntilFullyRendered", {trace:false});
145 this.renderingWaitingQueue().push(deferredResult);
146 }
147
148 return deferredResult;
149 },
150*/
151 //-----------------------------------------------------
152/*
153 'update': function(args) {
154 throw Clipperz.Base.exception.AbstractMethod;
155 },
156
157 'updateSelf': function(args) {
158 throw Clipperz.Base.exception.AbstractMethod;
159 },
160
161 'updateComponents': function(args) {
162 throw Clipperz.Base.exception.AbstractMethod;
163 },
164*/
165 //-----------------------------------------------------
166/*
167 'refresh': function() {
168 throw Clipperz.Base.exception.AbstractMethod;
169 },
170
171 'refreshSelf': function() {
172 throw Clipperz.Base.exception.AbstractMethod;
173 },
174
175 'refreshComponents': function(args) {
176 throw Clipperz.Base.exception.AbstractMethod;
177 },
178*/
179 //-----------------------------------------------------
180
181 'clear': function() {
182 varslotName;
183 var componentId;
184
185 MochiKit.Signal.disconnectAllTo(this);
186
187 if (this.displayElement() != null) {
188 if (this.element() != this.displayElement()) {
189 MochiKit.DOM.removeElement(this.displayElement());
190 } else {
191 this.displayElement().innerHTML = "";
192 }
193 }
194 },
195
196 'remove': function() {
197 this.clear();
198 MochiKit.Signal.disconnectAll(this);
199 },
200
201 'append': function(aNode, aValue) {
202 return Clipperz.DOM.Helper.append(aNode, aValue);
203 },
204
205 'insertBefore': function (aNode, aValue) {
206 return Clipperz.DOM.Helper.insertBefore(aNode, aValue);
207 },
208
209 'insertAfter': function (aNode, aValue) {
210 return Clipperz.DOM.Helper.insertAfter(aNode, aValue);
211 },
212
213 //-------------------------------------------------------------------------
214
215 'getId': function(aValue) {
216 varresult;
217
218 if (typeof(aValue) != 'undefined') {
219 result = this._ids[aValue];
220
221 if (typeof(result) == 'undefined') {
222 _Clipperz_PM_Components_base_id_ ++;
223
224 result = "Clipperz_PM_Components_" + aValue + "_" + _Clipperz_PM_Components_base_id_;
225 this._ids[aValue] = result;
226 }
227 } else {
228 // result = Clipperz.PM.UI.Common.Components.BaseComponent.superclass.getId.call(this);
229 throw "call to BaseComponent.getId with an undefined value";
230 }
231
232 return result;
233 },
234
235 'getAnchor': function (aValue) {
236 return '#' + this.getId(aValue);
237 },
238
239 //-------------------------------------------------------------------------
240
241 'getElement': function(aValue) {
242 return Clipperz.DOM.get(this.getId(aValue));
243 },
244
245 //-------------------------------------------------------------------------
246
247 __syntaxFix__: "syntax fix"
248
249});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Mobile/Components/CardList.js b/frontend/gamma/js/Clipperz/PM/UI/Mobile/Components/CardList.js
index a0e4879..dbab41b 100644
--- a/frontend/gamma/js/Clipperz/PM/UI/Mobile/Components/CardList.js
+++ b/frontend/gamma/js/Clipperz/PM/UI/Mobile/Components/CardList.js
@@ -29,13 +29,14 @@ Clipperz.PM.UI.Mobile.Components.CardList = function(args) {
29 Clipperz.PM.UI.Mobile.Components.CardList.superclass.constructor.apply(this, arguments); 29 Clipperz.PM.UI.Mobile.Components.CardList.superclass.constructor.apply(this, arguments);
30 30
31 this._cardDetail = null; 31 this._cardDetail = null;
32 32 this.render();
33
33 return this; 34 return this;
34} 35}
35 36
36//============================================================================= 37//=============================================================================
37 38
38Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.CardList, Clipperz.PM.UI.Common.Components.BaseComponent, { 39Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.CardList, Clipperz.PM.UI.Mobile.Components.BaseComponent, {
39 40
40 //------------------------------------------------------------------------- 41 //-------------------------------------------------------------------------
41 42
@@ -46,6 +47,25 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.CardList, Clipperz.PM.UI.C
46 //------------------------------------------------------------------------- 47 //-------------------------------------------------------------------------
47 48
48 'renderSelf': function () { 49 'renderSelf': function () {
50 varheaderElement;
51
52 headerElement = MochiKit.Selector.findChildElements(this.element().parentNode, ['div[data-role=header]'])[0];
53 this.append(this.element(),
54 {tag:'div', /*cls:'scroll',*/ id:this.getId('listBox'), children:[
55 {tag:'ul', /*cls:'rounded',*/ id:this.getId('list'), children:[
56 {tag:'li', html:'loading'}
57 ]}
58 ]}
59 );
60
61 this.append(headerElement,
62 // {tag:'a', href:"#", 'data-icon':'gear', cls:'ui-btn-right', html:"Options" }
63 {tag:'a', href:"#", id:this.getId('preferences'), cls:'ui-btn-right', html:"options" }
64 );
65
66 MochiKit.Signal.connect(this.getElement('preferences'), 'onclick', MochiKit.Base.partial(MochiKit.Signal.signal, Clipperz.Signal.NotificationCenter, 'showPreferences'));
67
68/*
49 this.append(this.element(), {tag:'div', cls:'cardList', children:[ 69 this.append(this.element(), {tag:'div', cls:'cardList', children:[
50 {tag:'div', cls:'toolbar', children:[ 70 {tag:'div', cls:'toolbar', children:[
51 {tag:'h1', html:"clipperz"}, 71 {tag:'h1', html:"clipperz"},
@@ -70,6 +90,7 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.CardList, Clipperz.PM.UI.C
70 90
71 // MochiKit.Style.hideElement('backButton'); 91 // MochiKit.Style.hideElement('backButton');
72 // MochiKit.Style.hideElement(this.getElement('cardDetail')); 92 // MochiKit.Style.hideElement(this.getElement('cardDetail'));
93*/
73 }, 94 },
74 95
75 'showCards': function (someCards) { 96 'showCards': function (someCards) {
@@ -101,7 +122,7 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.CardList, Clipperz.PM.UI.C
101 'appendCardToList': function (aCardListElement, aCardInfo) { 122 'appendCardToList': function (aCardListElement, aCardInfo) {
102 this.append(aCardListElement, {tag:'li', cls:'cardListItem arrow', cardreference:aCardInfo['_reference'], children:[ 123 this.append(aCardListElement, {tag:'li', cls:'cardListItem arrow', cardreference:aCardInfo['_reference'], children:[
103 {tag:'a', href:'#', html:aCardInfo['label'], children:[ 124 {tag:'a', href:'#', html:aCardInfo['label'], children:[
104 {tag:'small', cls:'favicon', children:[{tag:'img', cls:'favicon', src:aCardInfo['favicon']}]} 125 // {tag:'small', cls:'favicon', children:[{tag:'img', cls:'favicon', src:aCardInfo['favicon']}]}
105 ]} 126 ]}
106 ]}); 127 ]});
107 }, 128 },
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
@@ -44,7 +44,8 @@ Clipperz.PM.UI.Mobile.Components.LoginForm = function(args) {
44 44
45//============================================================================= 45//=============================================================================
46 46
47Clipperz.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, {
48Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI.Mobile.Components.BaseComponent, {
48 49
49 //------------------------------------------------------------------------- 50 //-------------------------------------------------------------------------
50 51
@@ -111,22 +112,22 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI.
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 //-------------------------------------------------------------------------
@@ -136,8 +137,25 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI.
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) {
@@ -151,44 +169,21 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI.
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'));
@@ -196,25 +191,27 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI.
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"}
@@ -223,7 +220,7 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI.
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 ]},
@@ -232,14 +229,15 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI.
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 //--------------------------------------------------------------
@@ -280,6 +278,31 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI.
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
@@ -288,8 +311,8 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI.
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);
@@ -298,13 +321,16 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI.
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 },
@@ -318,8 +344,8 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI.
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 },
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Mobile/Components/Overlay.js b/frontend/gamma/js/Clipperz/PM/UI/Mobile/Components/Overlay.js
new file mode 100644
index 0000000..da08d0f
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Mobile/Components/Overlay.js
@@ -0,0 +1,136 @@
1/*
2
3Copyright 2008-2013 Clipperz Srl
4
5This file is part of Clipperz, the online password manager.
6For further information about its features and functionalities please
7refer to http://www.clipperz.com.
8
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
11 by the Free Software Foundation, either version 3 of the License, or
12 (at your option) any later version.
13
14* Clipperz is distributed in the hope that it will be useful, but
15 WITHOUT ANY WARRANTY; without even the implied warranty of
16 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
17 See the GNU Affero General Public License for more details.
18
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/.
21
22*/
23
24Clipperz.Base.module('Clipperz.PM.UI.Mobile.Components');
25
26Clipperz.PM.UI.Mobile.Components.Overlay = function(args) {
27 args = args || {};
28
29 this._defaultDelay = 2;
30
31 Clipperz.PM.UI.Mobile.Components.Overlay.superclass.constructor.apply(this, arguments);
32
33 this.render();
34 MochiKit.Style.hideElement(this.element());
35
36 return this;
37}
38
39//=============================================================================
40
41Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.Overlay, Clipperz.PM.UI.Mobile.Components.BaseComponent, {
42
43 //-------------------------------------------------------------------------
44
45 'toString': function () {
46 return "Clipperz.PM.UI.Mobile.Components.Overlay component";
47 },
48
49 //-------------------------------------------------------------------------
50
51 'show': function (aMessage) {
52 this.resetStatus();
53 this.setMessage(aMessage);
54 MochiKit.DOM.removeElementClass(this.element(), 'ios-overlay-hide');
55 MochiKit.DOM.addElementClass(this.element(), 'ios-overlay-show');
56 },
57
58 'done': function (aMessage, aDelayBeforeHiding) {
59 this.completed(this.showDoneIcon, aMessage, aDelayBeforeHiding);
60 },
61
62 'failed': function (aMessage, aDelayBeforeHiding) {
63 this.completed(this.showFailIcon, aMessage, aDelayBeforeHiding);
64 },
65
66 //-------------------------------------------------------------------------
67
68 'resetStatus': function () {
69 MochiKit.Style.showElement(this.element());
70 MochiKit.Style.showElement(this.getElement('spinner'));
71 MochiKit.Style.hideElement(this.getElement('done'));
72 MochiKit.Style.hideElement(this.getElement('failed'));
73 },
74
75 'setMessage': function (aMessage) {
76 if (typeof(aMessage) != 'undefined') {
77 this.getElement('title').innerHTML = aMessage;
78 }
79 },
80
81 'completed': function (aFunctionToShowResult, aMessage, aDelayBeforeHiding) {
82 var delay = aDelayBeforeHiding || this.defaultDelay();
83
84 this.hideSpinner();
85 MochiKit.Base.bind(aFunctionToShowResult, this)();
86 this.setMessage(aMessage);
87
88 MochiKit.Async.callLater(delay, MochiKit.Base.bind(this.hide, this))
89 },
90
91 'hide': function () {
92 MochiKit.DOM.removeElementClass(this.element(), 'ios-overlay-show');
93 MochiKit.DOM.addElementClass(this.element(), 'ios-overlay-hide');
94 MochiKit.Async.callLater(1, MochiKit.Style.hideElement, this.element());
95 },
96
97 'hideSpinner': function () {
98 MochiKit.Style.hideElement(this.getElement('spinner'));
99 },
100
101 'showDoneIcon': function () {
102 MochiKit.Style.showElement(this.getElement('done'));
103 },
104
105 'showFailIcon': function () {
106 MochiKit.Style.showElement(this.getElement('failed'));
107 },
108
109 //-------------------------------------------------------------------------
110
111 'defaultDelay': function () {
112 return this._defaultDelay;
113 },
114
115 //-------------------------------------------------------------------------
116
117 'renderSelf': function () {
118 this.setElement(Clipperz.DOM.Helper.append(MochiKit.DOM.currentDocument().body,
119 {tag:'div', id:'ui-ios-overlay', cls:'ui-ios-overlay', children:[
120 {tag:'div', cls:'spinner', id:this.getId('spinner'), children:[
121 {tag:'div', cls:'bar01'}, {tag:'div', cls:'bar02'}, {tag:'div', cls:'bar03'}, {tag:'div', cls:'bar04'}, {tag:'div', cls:'bar05'}, {tag:'div', cls:'bar06'}, {tag:'div', cls:'bar07'}, {tag:'div', cls:'bar08'}, {tag:'div', cls:'bar09'}, {tag:'div', cls:'bar10'}, {tag:'div', cls:'bar11'}, {tag:'div', cls:'bar12'}
122 ]},
123
124 // {tag:'span', cls:'icon', id:this.getId('done'), html:'&#xe000'},
125 {tag:'span', cls:'icon', id:this.getId('done'), html:'done'},
126 // {tag:'span', cls:'icon', id:this.getId('failed'), html:'&#xe001'},
127 {tag:'span', cls:'icon', id:this.getId('failed'), html:'failed'},
128
129 {tag:'span', cls:'title', id:this.getId('title'), html:""}
130 ]}
131 ));
132 },
133
134 //-------------------------------------------------------------------------
135 __syntaxFix__: "syntax fix"
136});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Mobile/Components/Preferences.js b/frontend/gamma/js/Clipperz/PM/UI/Mobile/Components/Preferences.js
new file mode 100644
index 0000000..839069a
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Mobile/Components/Preferences.js
@@ -0,0 +1,77 @@
1/*
2
3Copyright 2008-2013 Clipperz Srl
4
5This file is part of Clipperz, the online password manager.
6For further information about its features and functionalities please
7refer to http://www.clipperz.com.
8
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
11 by the Free Software Foundation, either version 3 of the License, or
12 (at your option) any later version.
13
14* Clipperz is distributed in the hope that it will be useful, but
15 WITHOUT ANY WARRANTY; without even the implied warranty of
16 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
17 See the GNU Affero General Public License for more details.
18
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/.
21
22*/
23
24Clipperz.Base.module('Clipperz.PM.UI.Mobile.Components');
25
26Clipperz.PM.UI.Mobile.Components.Preferences = function(args) {
27 args = args || {};
28
29 Clipperz.PM.UI.Mobile.Components.Preferences.superclass.constructor.apply(this, arguments);
30
31 this.render();
32
33 return this;
34}
35
36//=============================================================================
37
38Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.Preferences, Clipperz.PM.UI.Mobile.Components.BaseComponent, {
39
40 //-------------------------------------------------------------------------
41
42 'toString': function () {
43 return "Clipperz.PM.UI.Mobile.Components.Preferences component";
44 },
45
46 //-------------------------------------------------------------------------
47
48 'renderSelf': function () {
49 // varpageElement;
50 varheaderElement;
51 var titleElement;
52
53 // pageElement = this.element().parentNode;
54 // MochiKit.DOM.updateNodeAttributes(pageElement, {'data-add-back-btn': 'true'})
55 headerElement = MochiKit.Selector.findChildElements(this.element().parentNode, ['div[data-role=header]'])[0];
56 // headerElement.innerHTML = "Preferences";
57 titleElement = MochiKit.Selector.findChildElements(headerElement, ['h1'])[0];
58 titleElement.innerHTML = "Preferences";
59 this.append(this.element(),
60 {tag:'div', id:this.getId('listBox'), children:[
61 {tag:'h1', html:"Preferences"}
62 ]}
63 );
64
65 this.append(headerElement, [
66 //'data-direction':'reverse', 'data-rel':'back',
67 {tag:'a', href:"#", id:this.getId('back'), cls:'ui-btn-left', html:"back" },
68 {tag:'a', href:"#", id:this.getId('save'), cls:'ui-btn-right', html:"save" }
69 ]);
70
71 MochiKit.Signal.connect(this.getElement('back'), 'onclick', MochiKit.Base.partial(MochiKit.Signal.signal, Clipperz.Signal.NotificationCenter, 'back'));
72 MochiKit.Signal.connect(this.getElement('save'), 'onclick', MochiKit.Base.partial(MochiKit.Signal.signal, Clipperz.Signal.NotificationCenter, 'savePreferences'));
73 },
74
75 //=========================================================================
76 __syntaxFix__: "syntax fix"
77});