Updated /delta

Switched from less to scss. Still no build script to update the final CSS, though.
Added preliminary support for storing account data on browser's local storage for offline viewing. No public backend currently support this feature.

1 files changed, 69 insertions, 16 deletions

diff --git a/frontend/delta/js/Clipperz/PM/UI/Components/CardDetail.js b/frontend/delta/js/Clipperz/PM/UI/Components/CardDetail.js
index df514a2..12ddce3 100644
--- a/frontend/delta/js/Clipperz/PM/UI/Components/CardDetail.js
+++ b/frontend/delta/js/Clipperz/PM/UI/Components/CardDetail.js
@@ -32,100 +32,153 @@ Clipperz.PM.UI.Components.CardDetail = React.createClass({
         propTypes: {
                 card: React.PropTypes.object.isRequired
         },
 
         getInitialState: function () {
                 return {
         //              showSearch: false,
         //              searchTimer: null,
+                        unmaskedFields: new Clipperz.Set(),
                         starred: false
                 };
         },
 
         handleDirectLoginClick: function (aDirectLoginReference, anEvent) {
                 MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'runDirectLogin', {record:this.props.card['reference'], directLogin:aDirectLoginReference});
         },
 
+        toggleFieldVisibility: function (aField, anEvent) {
+                var unmaskedFields;
+                var fieldReference;
+
+                unmaskedFields = this.state['unmaskedFields'];
+                fieldReference = aField['reference']
+                if (unmaskedFields.contains(fieldReference)) {
+                        unmaskedFields.remove(fieldReference)
+                } else {
+                        unmaskedFields.add(fieldReference)
+                }
+
+                this.setState({'unmaskedFields': unmaskedFields});
+        },
+
+        handleGoAction: function (aField, anEvent) {
+                var newWindow;
+
+                newWindow = MochiKit.DOM.currentWindow().open(aField['value'], '_blank');
+                newWindow.focus();
+        },
+
+        handleEmailAction: function (aField, anEvent) {
+                MochiKit.DOM.currentWindow().location = 'mailto:' + aField['value'];
+        },
+
         //=========================================================================
 
         normalizeFieldValue: function (aValue) {
                         varresult = [];
                         varrows = aValue.split('\n');
 
                 for (var i = 0; i < rows.length; i++) {
                         if (i > 0) {
                                 result.push(React.DOM.br());
                         }
                         result.push(rows[i].replace(/[\s]/g, '\u00A0'));
                 }
 
                 return result;
         },
 
-        renderField: function (aField) {
-//console.log("FIELD", aField);
-                        varactionLabel;
+        renderFieldActionButton: function (aField) {
+        //              varactionLabel;
+                var result;
 
                 if (aField['actionType'] == 'URL') {
-                        actionLabel = "go";
+                                result = React.DOM.div({className:'actionWrapper', onClick:MochiKit.Base.method(this, 'handleGoAction', aField)}, [
+                                                        React.DOM.a({className:aField['actionType']}, "go")
+                                                ]);
                 } else if (aField['actionType'] == 'PASSWORD') {
-                        actionLabel = "locked";
+                        var icon;
+
+                        if (this.state['unmaskedFields'].contains(aField['reference'])) {
+                                icon = "unlocked";
+                        } else {
+                                icon = "locked";
+                        }
+                                result =React.DOM.div({className:'actionWrapper', onClick:MochiKit.Base.method(this, 'toggleFieldVisibility', aField)}, [
+                                                        React.DOM.a({className:aField['actionType']}, icon)
+                                                ]);
                 } else if (aField['actionType'] == 'EMAIL') {
-                        actionLabel = "email";
+                                result =React.DOM.div({className:'actionWrapper', onClick:MochiKit.Base.method(this, 'handleEmailAction', aField)}, [
+                                                        React.DOM.a({className:aField['actionType']}, "email")
+                                                ]);
                 } else {
-                        actionLabel = "";
+                        result = null;
+                }
+
+                return result;
+        },
+
+        renderField: function (aField) {
+//console.log("FIELD", aField);
+                var fieldExtraClass;
+
+                fieldExtraClass = aField['actionType'];
+                if (this.state['unmaskedFields'].contains(aField['reference'])) {
+                        fieldExtraClass = fieldExtraClass + ' unlocked';
                 }
 
-                        returnReact.DOM.div({className:'listItem ' + aField['actionType']}, [
+                        returnReact.DOM.div({className:'listItem ' + fieldExtraClass, key:aField['reference']}, [
                                         React.DOM.div({className:'fieldWrapper'}, [
                                                 React.DOM.div({className:'fieldInnerWrapper'}, [
                                                         React.DOM.div({className:'labelWrapper'}, React.DOM.span({className:'label'}, aField['label'])),
-                                                        React.DOM.div({className:'valueWrapper'}, React.DOM.span({className:'value ' + aField['actionType']}, this.normalizeFieldValue(aField['value'])))
+                                                        React.DOM.div({className:'valueWrapper'}, React.DOM.span({className:'value ' + fieldExtraClass}, this.normalizeFieldValue(aField['value'])))
                                                 ])
                                         ]),
-                                        React.DOM.div({className:'actionWrapper'}, [
-                                                React.DOM.div({className:aField['actionType']}, actionLabel)
-                                        ])
+                                        this.renderFieldActionButton(aField)
+        //                              React.DOM.div({className:'actionWrapper'}, [
+        //                                      React.DOM.div({className:aField['actionType']}, actionLabel)
+        //                              ])
                                 ]);
         },
 
         renderDirectLogin: function (aDirectLogin) {
 //console.log("DIRECT LOGIN", aDirectLogin);
                         returnReact.DOM.div({className:'listItem', onClick:MochiKit.Base.method(this, 'handleDirectLoginClick', aDirectLogin['reference'])}, [
                                         React.DOM.div({className:'labelWrapper'}, React.DOM.span({className:'label'}, aDirectLogin['label'])),
                                         React.DOM.div({className:'faviconWrapper'}, React.DOM.img({className:'favicon', src:aDirectLogin['favicon']})),
                                         React.DOM.div({className:'directLoginLinkWrapper'}, React.DOM.span({className:'directLoginLink'}, "go"))
                                 ]);
         },
 
         handleBackClick: function (anEvent) {
-                window.history.back();
+        //      window.history.back();
+                MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'goBack');
         },
 
         handleStarClick: function (anEvent) {
                 this.setState({starred: !this.state['starred']});
         },
 
         //=========================================================================
 
         render: function () {
                 var card = this.props.card;
-                var starredStatus = (this.state['starred'] ? "starred" : "unstarred");
+        //      var starredStatus = (this.state['starred'] ? "starred" : "unstarred");
 
                 if ((typeof(card['fields']) != 'undefined') && (card['notes'] != '')) {
                         card['fields'].push({ 'actionType': 'NOTES', 'isHidden': false, 'label': "notes", 'reference': "notes", 'value': card['notes'] })
                 }
 
                         returnReact.DOM.div({className:'cardDetail'}, [
                         React.DOM.div({className:'header'}, [
                                 React.DOM.div({className:'titleWrapper'}, React.DOM.div({className:'title'}, card.title)),
-        //                      React.DOM.div({className:'titleWrapper'}, React.DOM.div({className:'title'}, card.title + ' ' + card.title + ' ' + card.title + ' ' + card.title)),
                                 React.DOM.div({className:'backWrapper'},  React.DOM.a({className:'button back', onClick:this.handleBackClick}, "back")),
-                                React.DOM.div({className:'starWrapper'},  React.DOM.a({className:'star', onClick:this.handleStarClick}, starredStatus))
+        //                      React.DOM.div({className:'starWrapper'},  React.DOM.a({className:'star', onClick:this.handleStarClick}, starredStatus))
                         ]),
                         React.DOM.div({className:'content'}, [
                                         card.fields                     ? React.DOM.div({className:'fields'},           MochiKit.Base.map(this.renderField,             card.fields)) : null,
                                         card.directLogins       ? React.DOM.div({className:'directLogins'},     MochiKit.Base.map(this.renderDirectLogin,card.directLogins)): null
                         ]),
                         React.DOM.div({className:'footer'}, [
         /*                      
         //                      React.DOM.a({className:'cancel'}, "cancel"),