clipperz/password-manager
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

BTC Certificate feature

Browse Source 
Added the ability to register card content on the BTC blockchain in order to certify its existance/content
This commit is contained in:
Giulio Cesare Solaroli
2016-03-29 11:45:50 +02:00
parent f84d05240b
commit fbcd02dffd
102 changed files with 23275 additions and 8645 deletions
Download Patch File Download Diff File Expand all files Collapse all files

221
frontend/delta/js/Clipperz/PM/UI/Components/Cards/CertificateRenderer.js Normal file
View File

@@ -0,0 +1,221 @@
/*
Copyright 2008-2015 Clipperz Srl
This file is part of Clipperz, the online password manager.
For further information about its features and functionalities please
refer to http://www.clipperz.com.
* Clipperz is free software: you can redistribute it and/or modify it
under the terms of the GNU Affero General Public License as published
by the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
* Clipperz is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
See the GNU Affero General Public License for more details.
* You should have received a copy of the GNU Affero General Public
License along with Clipperz. If not, see http://www.gnu.org/licenses/.
*/
"use strict";
Clipperz.Base.module('Clipperz.PM.UI.Components.Cards');
var textHeight = 12;
var outputSpacing = 8;
var arrowLength = 70;
var arrowWidth = 8;
var arrowHalfHeight = 2;
Clipperz.PM.UI.Components.Cards.CertificateRendererClass = React.createClass({
displayName: 'Clipperz.PM.UI.Components.Cards.CertificateRenderer',
//==============================================================================
renderTransactionSchema: function () {
var outputDistance = 10;
// var numberOfAttachments = this.props['attachments'].length;
var numberOfAttachments = 0;
var numberOfOutputs = 1 + 1 + numberOfAttachments + 1;
var height = numberOfOutputs * (textHeight + outputSpacing) + outputDistance;
var rectWidth = arrowLength * 2;
var arrow = function (x, y) {
var pathItems = function (items) {
return (MochiKit.Base.map(function (coordinates) { return coordinates[0] + "," + coordinates[1]; }, items)).join(" ");
}
return [
React.DOM.line({'x1':x, 'y1':y, 'x2':x + arrowLength, 'y2':y, 'stroke':'black', 'strokeWidth':1}),
React.DOM.polygon({'points':pathItems([[x + arrowLength, y], [x + arrowLength - arrowWidth, y + arrowHalfHeight], [x + arrowLength - arrowWidth, y - arrowHalfHeight]]), 'fill':'black', 'stroke':'black', 'strokeWidth':1}),
];
};
var outputArrow = function (args) {
var index = args[0];
var label = args[1];
return [
// arrow(arrowLength + rectWidth, ((index + 0.5) * (textHeight + outputSpacing))),
React.DOM.text({'x':(2 * arrowLength) + rectWidth + 15, 'y':(((index + 1) * textHeight) + (index + 0.5) * outputSpacing), 'fill':'black'}, label),
];
};
return React.DOM.svg({'viewBox':'0 0 600 ' + height, 'width':'100%', 'height':height, 'fill':'currentcolor'}, [
arrow(0, height/2),
React.DOM.rect({'x':arrowLength, 'y':0, 'width':rectWidth, 'height':height, 'fill':'blue', 'opacity':0.3}),
React.DOM.rect({'x':arrowLength, 'y':0, 'width':rectWidth, 'height':height, 'fill':'none', 'stroke':'black', 'strokeWidth':1, 'opacity':1}),
React.DOM.g({'transform':'matrix(-0.2, 0, 0, ' + ((numberOfOutputs - 1) * 0.1225) + ', ' + ((arrowLength * 4) + 10) +', 0)'}, [
React.DOM.path({'d':'M 19.8,25.8 C 19.8,11.2 15.6,2.2 0,0.4 L 0.4,0 C 23,0.4 29.2,7.2 29.2,29 L 29.2,59.2 C 29.2,72.6 30.6,79 45.2,82.6 L 45.2,83 C 30.8,86.6 29.2,93 29.2,106.2 L 29.2,138.4 C 29.2,159.4 21.4,165.4 0.4,166 L 0,165.601 C 16,163.201 19.8,155.201 19.8,140 L 19.8,107.8 C 19.8,94.2 21.6,86.4 36.6,83 L 36.6,82.6 C 21.4,79 19.8,70.6 19.8,57 L 19.8,25.8 z '})
]),
arrow((arrowLength + rectWidth), ((numberOfOutputs - 1) * (textHeight + outputSpacing) / 2)),
React.DOM.text({'x':(arrowLength + rectWidth) + 5, 'y':((numberOfOutputs - 1) * (textHeight + outputSpacing) / 2) - 2, 'fill':'black', 'style':{'fontSize':'0.6em'}}, 'MULTI-SIG'),
arrow((arrowLength + rectWidth), ((numberOfOutputs - 0.5) * (textHeight + outputSpacing)) + outputDistance),
React.DOM.text({'x':(arrowLength + rectWidth) + 5, 'y':((numberOfOutputs - 0.5) * (textHeight + outputSpacing)) - 2 + outputDistance, 'fill':'black', 'style':{'fontSize':'0.6em'}}, 'OP_RETURN'),
React.DOM.text({'x':(2 * arrowLength) + rectWidth + 5, 'y':((numberOfOutputs * textHeight) + (numberOfOutputs - 0.5) * outputSpacing) + outputDistance, 'fill':'black'}, '"CLIPPERZ ' + this.props['certificateInfo']['version'] + ' REG"'),
this.props['certificateDetails'] ? MochiKit.Base.map(outputArrow,
MochiKit.Base.zip(
MochiKit.Iter.range(0, numberOfOutputs),
[this.props['certificateDetails']['transaction']['card.address'], this.props['certificateDetails']['transaction']['metadata.address']]
/*
MochiKit.Base.concat(
[this.props['certificateDetails']['transaction']['card.address'], this.props['certificateDetails']['transaction']['metadata.address']],
MochiKit.Base.map(
MochiKit.Base.itemgetter('address'),
MochiKit.Base.values(this.props['certificateDetails']['transaction']['attachments'])
)
)
*/
)
): null,
]);
},
//==============================================================================
renderCertificateDetails: function () {
return React.DOM.ul({'className':'transactionInfo'}, [
React.DOM.li({}, /*"OUT00 - " + */"BTC address of card: " + this.props['certificateDetails']['transaction']['card.address']),
React.DOM.li({}, [
React.DOM.div({'className':'metadata'}, [
React.DOM.header({}, 'Card data'),
React.DOM.dl({'className':'title'}, [React.DOM.dt({}, "Title"), React.DOM.dd({}, this.props['certificateDetails']['metadata']['label'])]),
MochiKit.Base.map(function (aField) { return React.DOM.dl({'className':'field'}, [React.DOM.dt({}, aField['label']), React.DOM.dd({}, aField['value'])]); }, this.props['certificateDetails']['metadata']['fields']),
this.props['certificateDetails']['metadata']['notes'] ? React.DOM.dl({'className':'notes'}, [React.DOM.dt({}, "Notes"), React.DOM.dd({}, this.props['certificateDetails']['metadata']['notes'])]) : null,
React.DOM.ul({'className':'attachments'},
MochiKit.Base.map(
function (anAttachmentInfo) {
var numberPadding = function (aValue) {
return ("00" + aValue).substr(-2);
}
return React.DOM.li({}, [
React.DOM.dl({'className':'file'}, [React.DOM.dt({}, "File"), React.DOM.dd({}, anAttachmentInfo[0]['name'])]),
React.DOM.dl({'className':'size'}, [React.DOM.dt({}, "Size"), React.DOM.dd({}, filesize(anAttachmentInfo[0]['size']))]),
React.DOM.dl({'className':'type'}, [React.DOM.dt({}, "Filetype"), React.DOM.dd({}, anAttachmentInfo[0]['contentType'])]),
React.DOM.dl({'className':'hash'}, [React.DOM.dt({}, "Sha256"), React.DOM.dd({}, anAttachmentInfo[1]['hash'])]),
// React.DOM.div({'className':'address'}, /*"OUT" + numberPadding(anAttachmentInfo[2]) + " - " + */"File BTC address: " + anAttachmentInfo[1]['address'])
]);
}, MochiKit.Base.zip(
this.props['certificateDetails']['metadata']['attachments'],
MochiKit.Base.values(this.props['certificateDetails']['transaction']['attachments']),
MochiKit.Iter.range(2, this.props['certificateDetails']['metadata']['attachments'].length + 2)
)
)
),
React.DOM.div({'className':'address'}, /*"OUT01 - " + */"BTC address from card data: " + this.props['certificateDetails']['transaction']['metadata.address'])
])
])
]);
},
renderSpinner: function () {
return React.DOM.div({'className':'spinner'}, [
React.DOM.div({'className':'bar01'}),
React.DOM.div({'className':'bar02'}),
React.DOM.div({'className':'bar03'}),
React.DOM.div({'className':'bar04'}),
React.DOM.div({'className':'bar05'}),
React.DOM.div({'className':'bar06'}),
React.DOM.div({'className':'bar07'}),
React.DOM.div({'className':'bar08'}),
React.DOM.div({'className':'bar09'}),
React.DOM.div({'className':'bar10'}),
React.DOM.div({'className':'bar11'}),
React.DOM.div({'className':'bar12'}),
]);
},
componentDidMount: function () {
// this.renderTransactionDiagram(this.refs['canvas']);
},
render: function () {
//console.log("CERTIFICATE RENDERER", this.props, NETWORK);
console.log("CERTIFICATE RENDERER", this.props);
var transactionInspectorPath = (NETWORK.pubKeyHash == 111) ? 'tBTC' : 'BTC';
var certificateInfo;
if (this.props['certificateDetails']) {
certificateInfo = this.props['certificateDetails'];
certificateInfo['tx'] = this.props['certificateInfo']['txID'];
certificateInfo['requestDate'] = this.props['certificateInfo']['requestDate'];
certificateInfo['creationDate'] = this.props['certificateInfo']['creationDate'];
} else {
certificateInfo = null;
}
return React.DOM.div({'className':'certificateContent'}, [
React.DOM.div({}, [
React.DOM.header({}, [
React.DOM.div({'className':'title'}, [
React.DOM.h3({}, "clipperz"),
React.DOM.h1({}, "Blockchain certificate")
]),
React.DOM.div({'className':'info'}, [
// React.DOM.dl({'className':'cardLabel'}, [React.DOM.dt({}, "Card"), React.DOM.dd({}, this.props['label'])]),
React.DOM.dl({'className':'cardLabel'}, [React.DOM.dt({}, "Card"), React.DOM.dd({}, this.props['certificateDetails'] ? this.props['certificateDetails']['metadata']['label'] : "")]),
React.DOM.dl({}, [React.DOM.dt({}, "Requested on"), React.DOM.dd({}, (new XDate(this.props['certificateInfo']['requestDate'])).toString("MMM d, yyyy - HH:mm"))]),
React.DOM.dl({}, [React.DOM.dt({}, "Validated on"), React.DOM.dd({}, (new XDate(this.props['certificateInfo']['creationDate'])).toString("MMM d, yyyy - HH:mm"))]),
React.DOM.dl({'className':'version'}, [React.DOM.dt({}, "Clipperz protocol version"), React.DOM.dd({}, this.props['certificateInfo']['version'])]),
]),
]),
React.DOM.div({'className':'details'}, this.props['certificateDetails'] ? this.renderCertificateDetails() : this.renderSpinner()),
]),
React.DOM.div({'className':'transactionInfo'}, [
React.DOM.div({'className':'description'}, [
React.DOM.p({}, "The following transaction has been added to the Bitcoin blockchain."),
React.DOM.p({}, [
React.DOM.span({}, "TX ID: "),
React.DOM.a({'href':'https://clipperz.is/tx/' + transactionInspectorPath + '/' + this.props['certificateInfo']['txID']}, this.props['certificateInfo']['txID'])
]),
]),
this.renderTransactionSchema(),
]),
React.DOM.div({'className':'reviewInfo'}, [
React.DOM.p({}, '----'),
React.DOM.p({'className':'verify'}, [
React.DOM.span({}, "You can check the authenticity of this certificate at "),
React.DOM.a({'href':'https://clipperz.is/verify'}, "clipperz.is/verify")
]),
React.DOM.p({'className':'instructions'}, [
React.DOM.span({}, "If you want to perform this check by yourself, just follow "),
React.DOM.a({'href':'https://clipperz.is/verify_howto'}, "these instructions")
]),
]),
certificateInfo ? React.DOM.textarea({'className':'certificateDetails', 'value':Clipperz.Base.serializeJSON(certificateInfo), 'readOnly':true}) : null,
]);
},
//===========================================================================
});
Clipperz.PM.UI.Components.Cards.CertificateRenderer = React.createFactory(Clipperz.PM.UI.Components.Cards.CertificateRendererClass);

13
frontend/delta/js/Clipperz/PM/UI/Components/Cards/CommandToolbar.js
View File

@@ -28,10 +28,12 @@ Clipperz.PM.UI.Components.Cards.CommandToolbarClass = React.createClass({
//============================================================================
displayName: 'Clipperz.PM.UI.Components.Cards.CommandToolbar',
propTypes: {
// 'label': React.PropTypes.string.isRequired,
// 'loading': React.PropTypes.bool,
'features': React.PropTypes.array.isRequired,
'features': React.PropTypes.array.isRequired,
},
features: function () {
@@ -42,6 +44,10 @@ Clipperz.PM.UI.Components.Cards.CommandToolbarClass = React.createClass({
return (this.features().indexOf(aValue) > -1);
},
isCardCertified: function () {
return ((typeof(this.props['certificateInfo']) != 'undefined') && (this.props['certificateInfo'] != null));
},
//----------------------------------------------------------------------------
getInitialState: function() {
@@ -57,9 +63,10 @@ Clipperz.PM.UI.Components.Cards.CommandToolbarClass = React.createClass({
return {
'delete': { 'label': "delete", 'broadcastEvent': 'deleteCard', 'enabled': this.isFeatureEnabled('DELETE_CARD')},
'archive': { 'label': archiveLabel, 'broadcastEvent': 'toggleArchiveCard', 'enabled': this.isFeatureEnabled('EDIT_CARD')},
// 'share': { 'label': "share", 'broadcastEvent': 'shareCard' },
// 'share': { 'label': "share", 'broadcastEvent': 'shareCard' },
'clone': { 'label': "clone", 'broadcastEvent': 'cloneCard', 'enabled': this.isFeatureEnabled('ADD_CARD')},
'edit': { 'label': "edit", 'broadcastEvent': 'editCard', 'enabled': this.isFeatureEnabled('EDIT_CARD')}
'register': { 'label': "register", 'broadcastEvent': 'createCertificate', 'enabled': this.isFeatureEnabled('REGISTER_CARD') && !this.isCardCertified()},
'edit': { 'label': "edit", 'broadcastEvent': 'editCard', 'enabled': this.isFeatureEnabled('EDIT_CARD') && !this.isCardCertified()}
};
},

34
frontend/delta/js/Clipperz/PM/UI/Components/Cards/Detail.js
View File

@@ -25,23 +25,39 @@ Clipperz.Base.module('Clipperz.PM.UI.Components.Cards');
Clipperz.PM.UI.Components.Cards.DetailClass = React.createClass({
displayName: 'Clipperz.PM.UI.Components.Cards.Detail',
propTypes: {
'allTags': React.PropTypes.array,
},
viewComponentProps: function () {
var result;
var props = this.props;
var propertiesToPassAlong = [
'features',
'style',
'showGlobalMask',
'allTags',
'preferences',
'attachmentQueueInfo',
'proxyInfo',
'showCertificatePreview',
'certificateDetails'
];
result = this.props['selectedCard'];
result = props['selectedCard'];
if (result) {
result['features'] = this.props['features'];
result['style'] = this.props['style'];
result['ask'] = (this.props['style'] == 'narrow') ? this.props['ask'] : null;
result['showGlobalMask'] = this.props['showGlobalMask'];
result['allTags'] = this.props['allTags'];
result['preferences'] = this.props['preferences'];
result['attachmentQueueInfo'] = this.props['attachmentQueueInfo'];
result['proxyInfo'] = this.props['proxyInfo'];
// result['features'] = this.props['features'];
// result['style'] = this.props['style'];
result['ask'] = (props['style'] == 'narrow') ? props['ask'] : null;
// result['showGlobalMask'] = this.props['showGlobalMask'];
// result['allTags'] = this.props['allTags'];
// result['preferences'] = this.props['preferences'];
// result['attachmentQueueInfo'] = this.props['attachmentQueueInfo'];
// result['proxyInfo'] = this.props['proxyInfo'];
// result['showCertificatePreview'] = this.props['showCertificatePreview'];
MochiKit.Iter.forEach(propertiesToPassAlong, function (aProperty) { result[aProperty] = props[aProperty]; });
}
return result;

40
frontend/delta/js/Clipperz/PM/UI/Components/Cards/Edit.js
View File

@@ -28,6 +28,8 @@ Clipperz.PM.UI.Components.Cards.EditClass = React.createClass({
//============================================================================
displayName: 'Clipperz.PM.UI.Components.Cards.Edit',
propTypes: {
'allTags': React.PropTypes.array,
// 'label': React.PropTypes.string /*.isRequired */ ,
@@ -128,7 +130,7 @@ console.log("DROP"); //, anEvent);
], {trace:false});
} else {
//console.log("CANCELLED FIELD MOVE");
//console.log("CANCELED FIELD MOVE");
}
// Delayed because a quick touch would prevent the state to update correctly otherwise (don't know why)
@@ -453,7 +455,7 @@ console.log("DROP"); //, anEvent);
},
removeDirectLogin: function(aDirectLoginReference) {
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'removeDirectLogin', this.record(), aDirectLoginReference);
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'removeDirectLogin', {'record':this.record(), 'directLoginReference':aDirectLoginReference});
},
//============================================================================
@@ -614,7 +616,7 @@ console.log("DROP"); //, anEvent);
handleRemoveAttachment: function(anAttachment) {
// MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'cancelAttachment', anAttachment);
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'removeAttachment', this.record(), anAttachment);
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'removeAttachment', {'record':this.record(), 'attachment': anAttachment});
},
//............................................................................
@@ -622,13 +624,15 @@ console.log("DROP"); //, anEvent);
uploadFiles: function(someFiles) {
var i;
//console.log("uploadFiles", someFiles);
var newSkippedFiles = [];
for (i = 0; i < someFiles.length; i++) {
var file = someFiles[i];
//console.log("uploadFiles - file", file);
if (file.size <= Clipperz.PM.DataModel.Attachment.MAX_ATTACHMENT_SIZE) {
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'addAttachment', this.record(), file);
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'addAttachment', {'record':this.record(), 'file':file});
} else {
newSkippedFiles.push(file);
this.setState({'skippedFiles': newSkippedFiles});
@@ -636,7 +640,7 @@ console.log("DROP"); //, anEvent);
}
// TODO: check compatibility with all browsers
this.refs['attachmentInput'].getDOMNode().value = null;
this.refs['attachmentInput'].value = null;
},
//............................................................................
@@ -658,12 +662,14 @@ console.log("DROP"); //, anEvent);
// http://enome.github.io/javascript/2014/03/24/drag-and-drop-with-react-js.html
// https://code.google.com/p/chromium/issues/detail?id=168387
// http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html
anEvent.stopPropagation();
anEvent.preventDefault();
anEvent.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
},
//............................................................................
renderSkippedFiles: function() {
renderSkippedFiles: function () {
var result;
result = null;
@@ -687,7 +693,7 @@ console.log("DROP"); //, anEvent);
return result;
},
renderAttachmentProgress: function(aStatus, aServerStatus, aProgress) {
renderAttachmentProgress: function (aStatus, aServerStatus, aProgress) {
var result;
var queueOperationsInProgress = (aStatus && aStatus != 'DONE' && aStatus != 'CANCELED' && aStatus != 'FAILED');
@@ -709,7 +715,7 @@ console.log("DROP"); //, anEvent);
return result;
},
renderAttachmentStatus: function(aStatus, aServerStatus, aProgress) {
renderAttachmentStatus: function (aStatus, aServerStatus, aProgress) {
var result;
var status = aStatus ? aStatus : false;
@@ -728,7 +734,7 @@ console.log("DROP"); //, anEvent);
result = React.DOM.span({'className': 'broken'}, "canceled");
break;
case 'DONE':
result = React.DOM.span({'className': 'broken'}, "failed");
result = React.DOM.span({'className': 'done'}, "done");
break;
case false:
result = React.DOM.span({'className': 'broken'}, "failed");
@@ -745,7 +751,7 @@ console.log("DROP"); //, anEvent);
return result;
},
renderAttachmentActions: function(aStatus, aServerStatus, anAttachment) {
renderAttachmentActions: function (aStatus, aServerStatus, anAttachment) {
var result;
result = null;
@@ -759,7 +765,7 @@ console.log("DROP"); //, anEvent);
return result;
},
renderAttachment: function(anAttachment) {
renderAttachment: function (anAttachment) {
var queueInfo = this.props['attachmentQueueInfo'].elementFetchCallback(anAttachment._reference) || [];
var queueStatus = queueInfo['status'];
var serverStatus = this.props['attachmentServerStatus'][anAttachment._reference];
@@ -767,10 +773,6 @@ console.log("DROP"); //, anEvent);
var broken = (! serverStatus && ! queueOperationsInProgress && ! this.props['_isBrandNew']);
var status = this.renderAttachmentStatus(queueStatus, serverStatus, queueInfo['requestProgress']);
var actions = this.renderAttachmentActions(queueStatus, serverStatus, anAttachment['_attachment']);
var progressIndicator = this.renderAttachmentProgress(queueStatus, serverStatus, queueInfo['requestProgress']);;
return React.DOM.li({
'className': (broken) ? 'broken' : '',
'key': anAttachment._reference
@@ -780,9 +782,9 @@ console.log("DROP"); //, anEvent);
React.DOM.span({'className': 'name'}, anAttachment.name),
React.DOM.span({'className': 'size'}, filesize(anAttachment.size)),
]),
React.DOM.span({'className': 'status'}, status),
React.DOM.span({'className': 'progress'}, progressIndicator),
React.DOM.span({'className': 'actions'}, actions),
React.DOM.span({'className': 'status'}, this.renderAttachmentStatus (queueStatus, serverStatus, queueInfo['requestProgress'])),
React.DOM.span({'className': 'progress'}, this.renderAttachmentProgress(queueStatus, serverStatus, queueInfo['requestProgress'])),
React.DOM.span({'className': 'actions'}, this.renderAttachmentActions (queueStatus, serverStatus, anAttachment['_attachment'])),
])
},
@@ -798,7 +800,7 @@ console.log("DROP"); //, anEvent);
]),
React.DOM.div({
'className': 'cardUploadAttachments',
'onClick': MochiKit.Base.bind(function() { this.refs['attachmentInput'].getDOMNode().click() }, this),
'onClick': MochiKit.Base.bind(function() { this.refs['attachmentInput'].click() }, this),
'onDragOver': this.handleOnDragOver,
'onDrop': this.handleOnDrop,
},[

2
frontend/delta/js/Clipperz/PM/UI/Components/Cards/EditToolbar.js
View File

@@ -28,6 +28,8 @@ Clipperz.PM.UI.Components.Cards.EditToolbarClass = React.createClass({
//============================================================================
displayName: 'Clipperz.PM.UI.Components.Cards.EditToolbar',
propTypes: {
'hasPendingChanges': React.PropTypes.bool.isRequired,
},

2
frontend/delta/js/Clipperz/PM/UI/Components/Cards/FavIcon.js
View File

@@ -27,6 +27,8 @@ Clipperz.Base.module('Clipperz.PM.UI.Components.Cards');
Clipperz.PM.UI.Components.Cards.FavIconClass = React.createClass({
displayName: 'Clipperz.PM.UI.Components.Cards.FavIcon',
propTypes: {
'src': React.PropTypes.string,
},

7
frontend/delta/js/Clipperz/PM/UI/Components/Cards/List.js
View File

@@ -28,6 +28,8 @@ Clipperz.PM.UI.Components.Cards.ListClass = React.createClass({
//=========================================================================
displayName: 'Clipperz.PM.UI.Components.Cards.List',
propTypes: {
'cards': React.PropTypes.array,
'featureSet': React.PropTypes.oneOf(['FULL', 'EXPIRED', 'TRIAL']).isRequired,
@@ -45,7 +47,7 @@ Clipperz.PM.UI.Components.Cards.ListClass = React.createClass({
handleClick: function (anEvent) {
if (this.isFeatureEnabled('CARD_DETAILS')) {
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'selectCard', {'reference':anEvent.currentTarget.dataset.reference, 'label':anEvent.currentTarget.dataset.label}, true);
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'selectCard', {'cardInfo':{'reference':anEvent.currentTarget.dataset.reference, 'label':anEvent.currentTarget.dataset.label}, 'update':true});
}
},
@@ -63,7 +65,8 @@ Clipperz.PM.UI.Components.Cards.ListClass = React.createClass({
result = React.DOM.li({'className':Clipperz.PM.UI.Components.classNames(classes), 'onClick': this.handleClick, 'key':anItem['_reference'], 'data-reference':anItem['_reference'], 'data-label':anItem['label']}, [
// React.DOM.span({'className':'favicon'}, Clipperz.PM.UI.Components.Cards.FavIcon({'src':anItem['favicon']})),
React.DOM.span({'className':'label'}, anItem['label']),
React.DOM.span({'className':'attachmentsCount'}, anItem['attachmentsCount'] ? 'attachment' : ''),
anItem['hasBeenCertified'] != '' ? React.DOM.span({'className':'certificateStatus'}, 'certificate') : null,
anItem['attachmentsCount'] ? React.DOM.span({'className':'attachmentsCount'}, 'attachment') : null,
]);
}

2
frontend/delta/js/Clipperz/PM/UI/Components/Cards/PasswordGenerator.js
View File

@@ -26,6 +26,8 @@ Clipperz.Base.module('Clipperz.PM.UI.Components.Cards');
Clipperz.PM.UI.Components.Cards.PasswordGeneratorClass = React.createClass({
displayName: 'Clipperz.PM.UI.Components.Cards.PasswordGenerator',
charsetBlocks: {
'chars_AZ': 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
'chars_az': 'abcdefghijklmnopqrstuvwxyz',

2
frontend/delta/js/Clipperz/PM/UI/Components/Cards/TagEditor.js
View File

@@ -28,6 +28,8 @@ Clipperz.PM.UI.Components.Cards.TagEditorClass = React.createClass({
//============================================================================
displayName: 'Clipperz.PM.UI.Components.Cards.TagEditor',
propTypes: {
'allTags': React.PropTypes.array,
'selectedTags': React.PropTypes.array.isRequired,

2
frontend/delta/js/Clipperz/PM/UI/Components/Cards/TextArea.js
View File

@@ -28,6 +28,8 @@ Clipperz.PM.UI.Components.Cards.TextAreaClass = React.createClass({
//----------------------------------------------------------------------------
displayName: 'Clipperz.PM.UI.Components.Cards.TextArea',
componentDidMount: function() {
this.recalculateSize();
this.getDOMNode().addEventListener('input', this.handleKeyDown, false);

122
frontend/delta/js/Clipperz/PM/UI/Components/Cards/View.js
View File

@@ -28,16 +28,39 @@ Clipperz.PM.UI.Components.Cards.ViewClass = React.createClass({
//============================================================================
displayName: 'Clipperz.PM.UI.Components.Cards.View',
propTypes: {
'label': React.PropTypes.string /*.isRequired */ ,
'loading': React.PropTypes.bool,
'proxyInfo': React.PropTypes.object.isRequired,
// 'proxyInfo': React.PropTypes.object.isRequired,
},
getInitialState: function () {
return {};
return {
// 'showCertificatePreview': false,
};
},
downloadCertificate: function (anEvent) {
if (this.isCertificatePublished()) {
// console.log("DOWNLOAD CERTIFICATE");
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'downloadCertificate', this.props['_reference']);
}
},
previewCertificate: function (anEvent) {
if (this.isCertificatePublished()) {
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'showCertificatePreview', this.props['_reference']);
// this.setState({'showCertificatePreview':true});
}
},
hideCertificatePreview: function (anEvent) {
// this.setState({'showCertificatePreview':false});
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'hideCertificatePreview', this.props['_reference']);
},
//----------------------------------------------------------------------------
handleDirectLoginClick: function (aDirectLogin) {
@@ -163,6 +186,85 @@ Clipperz.PM.UI.Components.Cards.ViewClass = React.createClass({
//----------------------------------------------------------------------------
hasCertificate: function () {
return ((typeof(this.props['certificateInfo']) != 'undefined') && (this.props['certificateInfo'] != null));
},
isCertificatePublished: function () {
return (this.props['certificateInfo'] && (this.props['certificateInfo']['status'] == 'published'));
},
//----------------------------------------------------------------------------
renderCertificatePreview: function () {
return React.DOM.div({'className':'certificatePreview'}, [
React.DOM.div({'className':'mask'}),
React.DOM.div({'className':'previewContent'}, [
React.DOM.header({}, [
React.DOM.span({'onClick': this.hideCertificatePreview}, "close")
]),
React.DOM.div({'className':'preview'}, Clipperz.PM.UI.Components.Cards.CertificateRenderer(this.props)),
React.DOM.footer({}, null)
])
]);
},
renderCertificateInfo: function (someCertificateInfo) {
var result;
if (this.hasCertificate()) {
var description;
var statusDescription;
var dateLabel;
var dateValue;
var transactionInfo;
var classes = {
'cardCertificateInfo': true,
'published': this.isCertificatePublished(),
'requested': !this.isCertificatePublished(),
};
if (this.isCertificatePublished()) {
description = "This card has been registered on the Bitcoin blockchain";
statusDescription = "confirmed";
dateLabel = "Registration date";
dateValue = (new XDate(someCertificateInfo['creationDate'])).toString("MMM d, yyyy - HH:mm");
transactionInfo = React.DOM.span({}, someCertificateInfo['txID']);
} else {
description = "This card will soon be registered on the Bitcoin blockchain";
statusDescription = "pending";
dateLabel = "Request date";
dateValue = (new XDate(someCertificateInfo['requestDate'])).toString("MMM d, yyyy - HH:mm");
transactionInfo = React.DOM.span({}, "N.A.");
}
result = React.DOM.div({'className': Clipperz.PM.UI.Components.classNames(classes)}, [
React.DOM.div({}, [
React.DOM.h3({}, "certificate"),
React.DOM.p({}, description),
]),
React.DOM.div({'className':'info'}, [
React.DOM.div({'className':'details'}, [
React.DOM.dl({}, [ React.DOM.dt({}, dateLabel), React.DOM.dd({}, dateValue) ]),
React.DOM.dl({}, [ React.DOM.dt({}, 'transaction'), React.DOM.dd({'className':'transactionInfo'}, transactionInfo) ]),
React.DOM.dl({}, [ React.DOM.dt({}, 'status'), React.DOM.dd({}, statusDescription) ]),
]),
React.DOM.div({'className':'links'}, [
React.DOM.a({'className':'certificate', 'onClick':this.downloadCertificate}, "certificate"),
React.DOM.a({'className':'preview', 'onClick':this.previewCertificate}, "preview"),
]),
]),
])
} else {
result = null;
}
return result;
},
//----------------------------------------------------------------------------
renderLabel: function (aLabel) {
return React.DOM.h3({'className':'cardLabel'}, aLabel);
},
@@ -292,7 +394,7 @@ Clipperz.PM.UI.Components.Cards.ViewClass = React.createClass({
var queueOperationsInProgress = (status && (status != 'DONE' && status != 'CANCELED' && status != 'FAILED'));
result = null;
if (status == 'FAILED') {
result = React.DOM.span({'className': 'failed'}, "failed");
} else if (status == 'UPLOADING' || status == 'DOWNLOADING') {
@@ -304,7 +406,7 @@ Clipperz.PM.UI.Components.Cards.ViewClass = React.createClass({
result = React.DOM.span({'className': 'broken'}, "canceled");
break;
case 'DONE':
result = React.DOM.span({'className': 'broken'}, "failed");
result = React.DOM.span({'className': 'done'}, "done");
break;
case false:
result = React.DOM.span({'className': 'broken'}, "failed");
@@ -320,6 +422,7 @@ Clipperz.PM.UI.Components.Cards.ViewClass = React.createClass({
return result;
},
renderAttachmentActions: function(aStatus, aServerStatus, anAttachment) {
var result;
@@ -401,20 +504,25 @@ Clipperz.PM.UI.Components.Cards.ViewClass = React.createClass({
renderCard: function () {
var classes = {
'view': true,
'archived': this.props['_isArchived']
'archived': this.props['_isArchived'],
'registered': this.hasCertificate()
}
return React.DOM.div({'className':Clipperz.PM.UI.Components.classNames(classes)},[
Clipperz.PM.UI.Components.Cards.CommandToolbar(this.props),
React.DOM.div({'className':'content'}, [
this.renderCertificateInfo(this.props['certificateInfo']),
this.renderLabel(this.props['label']),
//React.DOM.div({}, "ID:" + this.props['ID']),
//React.DOM.div({}, "Reference:" + this.props['_reference']),
this.renderTags(this.props['tags']),
this.renderFields(this.props['fields']),
this.renderAttachments(MochiKit.Base.values(this.props['attachments'])),
this.renderNotes(this.props['notes']),
this.renderDirectLogins(this.props['directLogins']),
]),
this.props['ask'] ? Clipperz.PM.UI.Components.DialogBox(this.props['ask']) : null
this.props['ask'] ? Clipperz.PM.UI.Components.DialogBox(this.props['ask']) : null,
this.props['showCertificatePreview'] ? this.renderCertificatePreview() : null
]);
},
@@ -422,7 +530,7 @@ Clipperz.PM.UI.Components.Cards.ViewClass = React.createClass({
render: function () {
var result;
//console.log("VIEW", this.props);
if (this.props['loading'] == true) {
result = this.renderLoading();
} else if (this.props['_reference']) {