clipperz/password-manager-mirror
1
0
Fork 0
mirror of http://git.whoc.org.uk/git/password-manager.git synced 2025-10-25 17:47:34 +02:00
Code Issues 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

72
frontend/delta/js/Clipperz/PM/UI/AttachmentController.js
View File

@@ -25,11 +25,11 @@ refer to http://www.clipperz.com.
Clipperz.Base.module('Clipperz.PM.UI');
Clipperz.PM.UI.AttachmentController = function(someParameters) {
this.MAX_SIMULTANEOUS_READ = 1;
this.MAX_SIMULTANEOUS_UPLOAD = 1;
this.MAX_SIMULTANEOUS_DOWNLOAD = 1;
this.MAX_SIMULTANEOUS_ENCRYPT = 1;
this.MAX_SIMULTANEOUS_DECRYPT = 1;
this.MAX_SIMULTANEOUS_READ = 1;
this.MAX_SIMULTANEOUS_UPLOAD = 1;
this.MAX_SIMULTANEOUS_DOWNLOAD = 1;
this.MAX_SIMULTANEOUS_ENCRYPT = 1;
this.MAX_SIMULTANEOUS_DECRYPT = 1;
this.LATEST_ENCRYPTION_VERSION = '1.0'; // Versions aren't handled completely yet!
@@ -74,7 +74,11 @@ MochiKit.Base.update(Clipperz.PM.UI.AttachmentController.prototype, {
//=========================================================================
addAttachment: function (anAttachment) {
var deferredResult;
var deferredResult;
var actualDeferredResult;
actualDeferredResult = new Clipperz.Async.Deferred("Clipperz.PM.UI.AttachmentController.uploadAttachment-result", {trace:false});
actualDeferredResult.addMethod(anAttachment, 'setValue', 'hash');
deferredResult = new Clipperz.Async.Deferred("Clipperz.PM.UI.AttachmentController.uploadAttachment", {trace:false});
deferredResult.collectResults({
@@ -89,10 +93,12 @@ MochiKit.Base.update(Clipperz.PM.UI.AttachmentController.prototype, {
'recordReference': MochiKit.Base.method(anAttachment.record(), 'reference'),
'process': MochiKit.Base.partial(MochiKit.Async.succeed, 'UPLOAD'), // Used only to differentiate notifications
}, {trace: false});
deferredResult.addCallback(function (someInfo) { someInfo['deferredResult'] = actualDeferredResult; return someInfo; });
deferredResult.addMethod(this, 'addFileToQueue');
deferredResult.callback();
return deferredResult;
// return deferredResult;
return actualDeferredResult;
},
getAttachment: function(anAttachment, aMessageCallback) {
@@ -162,8 +168,8 @@ MochiKit.Base.update(Clipperz.PM.UI.AttachmentController.prototype, {
processNextElements = true;
for (i in this.fileQueue) {
if(processNextElements) {
currentElement = this.fileQueue[i];
if (processNextElements) {
currentElement = this.fileQueue[i];
switch (currentElement['status']) {
case 'WAITING_READ':
if ((count['READING']) < this.MAX_SIMULTANEOUS_READ) {
@@ -214,20 +220,20 @@ MochiKit.Base.update(Clipperz.PM.UI.AttachmentController.prototype, {
var count;
count = {
'WAITING_READ': 0,
'READING': 0,
'WAITING_ENCRYPT': 0,
'ENCRYPTING': 0,
'WAITING_UPLOAD': 0,
'UPLOADING': 0,
'WAITING_DOWNLOAD': 0,
'DOWNLOADING': 0,
'WAITING_DECRYPT': 0,
'DECRYPTING': 0,
'WAITING_SAVE': 0,
'DONE': 0,
'CANCELED': 0,
'FAILED': 0,
'WAITING_READ': 0,
'READING': 0,
'WAITING_ENCRYPT': 0,
'ENCRYPTING': 0,
'WAITING_UPLOAD': 0,
'UPLOADING': 0,
'WAITING_DOWNLOAD': 0,
'DOWNLOADING': 0,
'WAITING_DECRYPT': 0,
'DECRYPTING': 0,
'WAITING_SAVE': 0,
'DONE': 0,
'CANCELED': 0,
'FAILED': 0,
};
for (var i in this.fileQueue) {
@@ -332,13 +338,19 @@ MochiKit.Base.update(Clipperz.PM.UI.AttachmentController.prototype, {
},
readFileOnload: function(aFileReference, anEvent) {
var fileContent;
var fileContentSha256Hash;
fileContent = new Uint8Array(anEvent.target.result);
fileContentSha256Hash = npm.bitcoin.crypto.sha256(fileContent).toString('hex');
this.getQueueElement(aFileReference)['deferredResult'].callback(fileContentSha256Hash);
this.updateFileInQueue(aFileReference, {
'status': 'WAITING_ENCRYPT',
'originalArray': new Uint8Array(anEvent.target.result),
'originalArray': fileContent,
})
},
//=========================================================================
// Queue Processing: ENCRYPT
//=========================================================================
@@ -349,11 +361,11 @@ MochiKit.Base.update(Clipperz.PM.UI.AttachmentController.prototype, {
});
this.cryptoObject.subtle.importKey(
"raw",
aKey, //this is an example jwk key, "raw" would be an ArrayBuffer
{ name: "AES-CBC" }, //this is the algorithm options
false, //whether the key is extractable (i.e. can be used in exportKey)
["encrypt"] //can be "encrypt", "decrypt", "wrapKey", or "unwrapKey"
"raw",
aKey, //this is an example jwk key, "raw" would be an ArrayBuffer
{ name: "AES-CBC" }, //this is the algorithm options
false, //whether the key is extractable (i.e. can be used in exportKey)
["encrypt"] //can be "encrypt", "decrypt", "wrapKey", or "unwrapKey"
)
// .then(MochiKit.Base.method(this, 'doEncrypt', aFileReference, anArrayBuffer, aNonce))
.then(this.doEncrypt.bind(this,aFileReference, anArrayBuffer, aNonce))

276
frontend/delta/js/Clipperz/PM/UI/CertificateDownloadController.js Normal file
View File

File diff suppressed because one or more lines are too long

18
frontend/delta/js/Clipperz/PM/UI/Components/AccountStatus.js
View File

@@ -26,6 +26,8 @@ Clipperz.Base.module('Clipperz.PM.UI.Components');
Clipperz.PM.UI.Components.AccountStatusClass = React.createClass({
displayName: 'Clipperz.PM.UI.Components.AccountStatus',
propTypes: {
// 'currentSubscriptionType': React.PropTypes.oneOf(['EARLY_ADOPTER', 'FRIEND', 'FAN', 'DEVOTEE', 'PATRON', 'TRIAL', 'TRIAL_EXPIRED', 'PAYMENT_FAILED_2', 'EXPIRED', 'PAYMENT_FAILED', 'VERIFYING_PAYMENT', 'VERIFYING_PAYMENT_2']).isRequired,
'expirationDate': React.PropTypes.string /* .isRequired */,
@@ -54,15 +56,15 @@ Clipperz.PM.UI.Components.AccountStatusClass = React.createClass({
proxyInfoClasses[this.props['proxyType']] = true;
proxyInfoClasses['withReferenceDate'] = (this.props['referenceDate'] != null);
return React.DOM.div({'className':'miscInfo'}, [
React.DOM.div({'className':Clipperz.PM.UI.Components.classNames(proxyInfoClasses)}, [
React.DOM.span({'className':'proxyDescription'}, this.props['proxyTypeDescription']),
React.DOM.span({'className':'referenceDate'}, this.props['referenceDate'])
return React.DOM.div({'key':'miscInfo', 'className':'miscInfo'}, [
React.DOM.div({'key':'miscInfo_1', 'className':Clipperz.PM.UI.Components.classNames(proxyInfoClasses)}, [
React.DOM.span({'key':'proxyDescription', 'className':'proxyDescription'}, this.props['proxyTypeDescription']),
React.DOM.span({'key':'referenceDate', 'className':'referenceDate'}, this.props['referenceDate'])
]),
React.DOM.div({'className':Clipperz.PM.UI.Components.classNames(accountInfoClasses)}, [
React.DOM.span({'className':'level'}, Clipperz.PM.DataModel.Feature['featureSets'][this.props['featureSet']]),
React.DOM.span({'className':'expirationMessage'}, "expiring on"),
React.DOM.span({'className':'expirationDate'}, this.props['expirationDate'])
React.DOM.div({'key':'miscInfo_2', 'className':Clipperz.PM.UI.Components.classNames(accountInfoClasses)}, [
React.DOM.span({'key':'level', 'className':'level'}, Clipperz.PM.DataModel.Feature['featureSets'][this.props['featureSet']]),
React.DOM.span({'key':'expirationMessage', 'className':'expirationMessage'}, "expiring on"),
React.DOM.span({'key':'expirationDate', 'className':'expirationDate'}, this.props['expirationDate'])
])
]);

4
frontend/delta/js/Clipperz/PM/UI/Components/AttachmentQueueBox.js
View File

@@ -26,6 +26,8 @@ Clipperz.Base.module('Clipperz.PM.UI.Components');
Clipperz.PM.UI.Components.AttachmentQueueBoxClass = React.createClass({
displayName: 'Clipperz.PM.UI.Components.AttachmentQueueBox',
propTypes: {
'attachmentQueueInfo': React.PropTypes.object.isRequired,
'attachmentQueueBoxStatus': React.PropTypes.string.isRequired,
@@ -104,7 +106,7 @@ Clipperz.PM.UI.Components.AttachmentQueueBoxClass = React.createClass({
render: function () {
//test
this.renderNotifications(this.props['attachmentQueueInfo']['notifications']);
// this.renderNotifications(this.props['attachmentQueueInfo']['notifications']);
return React.DOM.div({
'className': 'attachmentQueueStatus '+this.props['attachmentQueueBoxStatus'],

6
frontend/delta/js/Clipperz/PM/UI/Components/Button.js
View File

@@ -26,13 +26,15 @@ Clipperz.Base.module('Clipperz.PM.UI.Components');
Clipperz.PM.UI.Components.ButtonClass = React.createClass({
displayName: 'Clipperz.PM.UI.Components.Button',
propTypes: {
'eventName': React.PropTypes.string.isRequired,
'label': React.PropTypes.string.isRequired,
'handler': React.PropTypes.func.isRequired,
'className': React.PropTypes.string,
'badgeTopContent': React.PropTypes.string,
'badgeBottomContent': React.PropTypes.string,
'badgeTopContent': React.PropTypes.number,
'badgeBottomContent': React.PropTypes.number,
},
//=========================================================================

38
frontend/delta/js/Clipperz/PM/UI/Components/CardToolbar.js
View File

@@ -25,14 +25,16 @@ Clipperz.Base.module('Clipperz.PM.UI.Components');
Clipperz.PM.UI.Components.CardToolbarClass = React.createClass({
displayName: 'Clipperz.PM.UI.Components.CardToolbar',
propTypes: {
// 'style': React.PropTypes.oneOf(['extra-short', 'narrow', 'wide', 'extra-wide']).isRequired,
'style': React.PropTypes.oneOf(Clipperz_PM_UI_availableStyles).isRequired,
'enableSidePanels': React.PropTypes.bool.isRequired,
'accountInfo': React.PropTypes.object.isRequired,
'proxyInfo': React.PropTypes.object.isRequired,
'messageBox': React.PropTypes.object.isRequired,
'filter': React.PropTypes.object /*.isRequired */,
// 'style': React.PropTypes.oneOf(['extra-short', 'narrow', 'wide', 'extra-wide']).isRequired,
'style': React.PropTypes.oneOf(Clipperz_PM_UI_availableStyles).isRequired,
'enableSidePanels': React.PropTypes.bool.isRequired,
'accountInfo': React.PropTypes.object.isRequired,
'proxyInfo': React.PropTypes.object.isRequired,
'messageBox': React.PropTypes.object.isRequired,
'filter': React.PropTypes.object /*.isRequired */,
'attachmentQueueInfo': React.PropTypes.object.isRequired,
},
@@ -55,6 +57,12 @@ Clipperz.PM.UI.Components.CardToolbarClass = React.createClass({
//============================================================================
certificateQueueToggleHandler: function (anEvent) {
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'toggleCertificateQueueBox');
},
//============================================================================
renderWithSidePanels: function () {
var attachmentDownloadNotificationNumber = MochiKit.Base.filter(function(anElement) {
return anElement['queueElement']['process'] == 'DOWNLOAD';
@@ -62,18 +70,25 @@ Clipperz.PM.UI.Components.CardToolbarClass = React.createClass({
var attachmentUploadNotificationNumber = this.props['attachmentQueueInfo']['notifications'].length - attachmentDownloadNotificationNumber;
// attachmentDownloadNotificationNumber = 2;
// attachmentUploadNotificationNumber = 3;
var verifyingCertificateNotificationNumber = this.props['certificateQueueInfo'] ? MochiKit.Base.filter(function (anCertificationInfo) {
return anCertificationInfo['status'] == 'requested';
}, this.props['certificateQueueInfo']).length : 0;
var verifiedCertificateNotificationNumber = this.props['certificateQueueInfo'] ? MochiKit.Base.filter(function (anCertificationInfo) {
return anCertificationInfo['status'] == 'published';
}, this.props['certificateQueueInfo']).length : 0;
return [
React.DOM.div({className:'selectionToggle'}, [
Clipperz.PM.UI.Components.Button({eventName:'selectionToggleButton', label:"tags", handler:this.selectionToggleHandler})
]),
this.renderWithoutSidePanels(),
// React.DOM.div({className:'attachmentToggle'}, [
// Clipperz.PM.UI.Components.Button({eventName:'attachmentQueueToggleButton', label:"clipperz", handler:this.attachmentQueueToggleHandler})
// ]),
// TODO: validate and adjust names
React.DOM.div({className:'settingsToggle'}, [
Clipperz.PM.UI.Components.Button({eventName:'attachmentQueueToggleButton', label:"\u2191\u2193", handler:this.attachmentQueueToggleHandler, badgeTopContent: attachmentDownloadNotificationNumber, badgeBottomContent: attachmentUploadNotificationNumber}),
Clipperz.PM.UI.Components.Button({eventName:'certificateQueueToggleButton', label:"certificate", handler:this.certificateQueueToggleHandler, badgeTopContent:verifyingCertificateNotificationNumber, badgeBottomContent:verifiedCertificateNotificationNumber}),
Clipperz.PM.UI.Components.Button({eventName:'attachmentQueueToggleButton', label:"\u2191\u2193", handler:this.attachmentQueueToggleHandler, badgeTopContent:attachmentDownloadNotificationNumber, badgeBottomContent:attachmentUploadNotificationNumber}),
Clipperz.PM.UI.Components.Button({eventName:'settingsToggleButton', label:"menu", handler:this.settingsToggleHandler})
])
];
@@ -81,6 +96,7 @@ Clipperz.PM.UI.Components.CardToolbarClass = React.createClass({
renderWithoutSidePanels: function () {
var result;
//console.log("CARD TOOLBAR", this.props);
if (this.props['filter']) {
//console.log("CARD TOOLBAR", this.props['filter']['type']);

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']) {

82
frontend/delta/js/Clipperz/PM/UI/Components/CertificateQueueBox.js Normal file
View File

@@ -0,0 +1,82 @@
/*
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');
Clipperz.PM.UI.Components.CertificateQueueBoxClass = React.createClass({
displayName: 'Clipperz.PM.UI.Components.CertificateQueueBox',
propTypes: {
'certificateQueueInfo': React.PropTypes.object.isRequired,
'certificateQueueBoxStatus': React.PropTypes.string.isRequired,
},
acknowledgeCertificate: function (aRecordReference) {
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'closeCertificateNotification', aRecordReference);
},
showCertificateCard: function (aRecordReference) {
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'showCertificateCard', aRecordReference);
},
renderCertificateInfo: function (aCertificateInfo) {
var result;
if (aCertificateInfo['status'] != 'acknowledged') {
result = React.DOM.li({'className':aCertificateInfo['status']}, [
React.DOM.span({'className':'icon'}, "certificate"),
React.DOM.span({'className':'name', 'onClick':MochiKit.Base.method(this, 'showCertificateCard', aCertificateInfo['reference'])}, aCertificateInfo['label']),
React.DOM.span({'className':'status'}, [
React.DOM.span({'className':'statusString'}, aCertificateInfo['status'] == 'requested' ? 'pending' : 'registered')
]),
React.DOM.span({'className':'close'}, [
React.DOM.a({'className':'close', 'onClick':MochiKit.Base.method(this, 'acknowledgeCertificate', aCertificateInfo['reference'])}, "remove field")
])
]);
} else {
result = null;
}
return result;
},
render: function () {
var certificatesInfo;
certificatesInfo = this.props['certificateQueueInfo'] ? MochiKit.Base.map(MochiKit.Base.method(this, 'renderCertificateInfo'), this.props['certificateQueueInfo']) : [];
certificatesInfo = MochiKit.Base.filter(function (aValue) { return aValue != null; }, certificatesInfo);
return React.DOM.div({
'className': 'certificateQueueStatus ' + this.props['certificateQueueBoxStatus'],
}, [
React.DOM.div({'className': 'arrow'}),
React.DOM.ul({'className':'certificateInfos'}, (certificatesInfo.length > 0) ? certificatesInfo : React.DOM.p({}, "No certificates pending")),
]);
}
//=========================================================================
});
Clipperz.PM.UI.Components.CertificateQueueBox = React.createFactory(Clipperz.PM.UI.Components.CertificateQueueBoxClass);

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

@@ -26,6 +26,8 @@ Clipperz.Base.module('Clipperz.PM.UI.Components');
Clipperz.PM.UI.Components.CheckboxClass = React.createClass({
// http://development.tobypitman.com/iphoneCheckboxes/iphoneCheckboxes2.html
displayName: 'Clipperz.PM.UI.Components.Checkbox',
propTypes: {
'checked': React.PropTypes.bool.isRequired,
'id': React.PropTypes.string.isRequired,

15
frontend/delta/js/Clipperz/PM/UI/Components/DialogBox.js
View File

@@ -25,6 +25,8 @@ Clipperz.Base.module('Clipperz.PM.UI.Components');
Clipperz.PM.UI.Components.DialogBoxClass = React.createClass({
displayName: 'Clipperz.PM.UI.Components.DialogBox',
propTypes: {
'info': React.PropTypes.object.isRequired,
'deferred': React.PropTypes.object.isRequired
@@ -54,19 +56,28 @@ console.log("DIALOG BOX - key UP", anEvent);
var answerInfo = this.props['info']['possibleAnswers'][anAnswerInfoKey];
var classes = {
'button': true,
'isDefault': answerInfo['isDefault']
'isDefault': answerInfo['isDefault'],
'disabled': answerInfo['disabled']
};
return React.DOM.div({'className':Clipperz.PM.UI.Components.classNames(classes), 'onClick':this.handleAnswerButton, 'data-answer-key':anAnswerInfoKey}, answerInfo['label'])
return React.DOM.div({
'className':Clipperz.PM.UI.Components.classNames(classes),
'onClick':this.handleAnswerButton,
'data-answer-key':anAnswerInfoKey
}, answerInfo['label']);
},
//=========================================================================
render: function () {
//console.log("DIALOG BOX", this.props);
return React.DOM.div({'className':'dialogBox' /*, 'onKeyDown':this.handleKeyDown, 'onKeyPress':this.handleKeyPress, 'onKeyUp':this.handleKeyUp */ }, [
React.DOM.div({'className':'mask'}),
React.DOM.div({'className':'dialog'}, [
React.DOM.h3({'className': 'message'}, this.props['info']['question']),
this.props['info']['description']
? React.DOM.div({'className':'description'}, this.props['info']['description'])
: null,
React.DOM.div({'className': 'answers'}, MochiKit.Base.map(this.renderAnswerButton, MochiKit.Base.keys(this.props['info']['possibleAnswers'])))
])
]);

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

@@ -26,6 +26,8 @@ Clipperz.Base.module('Clipperz.PM.UI.Components');
Clipperz.PM.UI.Components.DocumentEncryptionSandboxClass = React.createClass({
displayName: 'Clipperz.PM.UI.Components.DocumentEncryptionSandbox',
getInitialState: function() {
return {
'documentMeta': null,

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

@@ -25,6 +25,8 @@ Clipperz.Base.module('Clipperz.PM.UI.Components');
Clipperz.PM.UI.Components.ExpiredPanelClass = React.createClass({
displayName: 'Clipperz.PM.UI.Components.ExpiredPanel',
propTypes: {
// featureSet: React.PropTypes.oneOf(['FULL', 'EXPIRED', 'TRIAL']).isRequired,
// 'level': React.PropTypes.oneOf(['hide', 'info', 'warning', 'error']).isRequired

2
frontend/delta/js/Clipperz/PM/UI/Components/ExtraFeatures/DataExport.js
View File

@@ -26,6 +26,8 @@ Clipperz.Base.module('Clipperz.PM.UI.Components.ExtraFeatures');
Clipperz.PM.UI.Components.ExtraFeatures.DataExportClass = React.createClass({
displayName: 'Clipperz.PM.UI.Components.ExtraFeatures.DataExport',
propTypes: {
// featureSet: React.PropTypes.oneOf(['FULL', 'EXPIRED', 'TRIAL']).isRequired,
// 'level': React.PropTypes.oneOf(['hide', 'info', 'warning', 'error']).isRequired

4
frontend/delta/js/Clipperz/PM/UI/Components/ExtraFeatures/DataImport.js
View File

@@ -25,7 +25,9 @@ refer to http://www.clipperz.com.
Clipperz.Base.module('Clipperz.PM.UI.Components.ExtraFeatures');
Clipperz.PM.UI.Components.ExtraFeatures.DataImportClass = React.createClass({
displayName: 'Clipperz.PM.UI.Components.ExtraFeatures.DataImport',
getInitialState: function() {
return {
'importContext': new Clipperz.PM.UI.ImportContext(this),

2
frontend/delta/js/Clipperz/PM/UI/Components/ExtraFeatures/DataImport/CSV/Columns.js
View File

@@ -25,6 +25,8 @@ refer to http://www.clipperz.com.
Clipperz.Base.module('Clipperz.PM.UI.Components.ExtraFeatures.DataImport.CSV');
Clipperz.PM.UI.Components.ExtraFeatures.DataImport.CSV.ColumnsClass = React.createClass({
displayName: 'Clipperz.PM.UI.Components.ExtraFeatures.DataImport.CSV.Columns',
getInitialState: function() {
return {

2
frontend/delta/js/Clipperz/PM/UI/Components/ExtraFeatures/DataImport/CSV/Hidden.js
View File

@@ -26,6 +26,8 @@ Clipperz.Base.module('Clipperz.PM.UI.Components.ExtraFeatures.DataImport.CSV');
Clipperz.PM.UI.Components.ExtraFeatures.DataImport.CSV.HiddenClass = React.createClass({
displayName: 'Clipperz.PM.UI.Components.ExtraFeatures.DataImport.CSV.Hidden',
getInitialState: function() {
return {
'hiddenFields': this.props.importContext.state('csvData.hiddenFields'),

4
frontend/delta/js/Clipperz/PM/UI/Components/ExtraFeatures/DataImport/CSV/Labels.js
View File

@@ -26,6 +26,8 @@ Clipperz.Base.module('Clipperz.PM.UI.Components.ExtraFeatures.DataImport.CSV');
Clipperz.PM.UI.Components.ExtraFeatures.DataImport.CSV.LabelsClass = React.createClass({
displayName: 'Clipperz.PM.UI.Components.ExtraFeatures.DataImport.CSV.Labels',
getInitialState: function() {
return {
'useFirstRowAsLabels': this.props.importContext.state('csvData.useFirstRowAsLabels'),
@@ -57,7 +59,7 @@ Clipperz.PM.UI.Components.ExtraFeatures.DataImport.CSV.LabelsClass = React.creat
var newState;
newState = this.state;
newState['labels'][columnIndex] = this.refs['csv-labels-input-' + columnIndex].getDOMNode().value;
newState['labels'][columnIndex] = this.refs['csv-labels-input-' + columnIndex].value;
this.setState(newState);
this.updateImportContextState();

4
frontend/delta/js/Clipperz/PM/UI/Components/ExtraFeatures/DataImport/CSV/Notes.js
View File

@@ -25,7 +25,9 @@ refer to http://www.clipperz.com.
Clipperz.Base.module('Clipperz.PM.UI.Components.ExtraFeatures.DataImport.CSV');
Clipperz.PM.UI.Components.ExtraFeatures.DataImport.CSV.NotesClass = React.createClass({
displayName: 'Clipperz.PM.UI.Components.ExtraFeatures.DataImport.CSV.Notes',
getInitialState: function() {
return {
'notesIndex': this.props.importContext.state('csvData.notesIndex'),

2
frontend/delta/js/Clipperz/PM/UI/Components/ExtraFeatures/DataImport/CSV/Titles.js
View File

@@ -26,6 +26,8 @@ Clipperz.Base.module('Clipperz.PM.UI.Components.ExtraFeatures.DataImport.CSV');
Clipperz.PM.UI.Components.ExtraFeatures.DataImport.CSV.TitlesClass = React.createClass({
displayName: 'Clipperz.PM.UI.Components.ExtraFeatures.DataImport.CSV.Titles',
getInitialState: function() {
return {
'titleIndex': this.props.importContext.state('csvData.titleIndex'),

2
frontend/delta/js/Clipperz/PM/UI/Components/ExtraFeatures/DataImport/Import.js
View File

@@ -27,6 +27,8 @@ Clipperz.Base.module('Clipperz.PM.UI.Components.ExtraFeatures.DataImport');
Clipperz.PM.UI.Components.ExtraFeatures.DataImport.ImportClass = React.createClass({
//=========================================================================
displayName: 'Clipperz.PM.UI.Components.ExtraFeatures.DataImport.Import',
importHandler: function (anEvent) {
var recordsToImport = this.props.importContext.state('recordsToImport');

14
frontend/delta/js/Clipperz/PM/UI/Components/ExtraFeatures/DataImport/Input.js
View File

@@ -26,6 +26,8 @@ Clipperz.Base.module('Clipperz.PM.UI.Components.ExtraFeatures.DataImport');
Clipperz.PM.UI.Components.ExtraFeatures.DataImport.InputClass = React.createClass({
displayName: 'Clipperz.PM.UI.Components.ExtraFeatures.DataImport.Input',
getInitialState: function() {
return {
'inputString': this.props.importContext.inputString(),
@@ -46,7 +48,7 @@ Clipperz.PM.UI.Components.ExtraFeatures.DataImport.InputClass = React.createClas
var jsonData;
var parsedInput;
var inputString = this.refs['input-textarea'].getDOMNode().value.trim();
var inputString = this.refs['input-textarea'].value.trim();
// this.props.importContext.setData(inputString);
result = {'inputString': inputString};
@@ -80,7 +82,7 @@ Clipperz.PM.UI.Components.ExtraFeatures.DataImport.InputClass = React.createClas
var re = new RegExp('.*<textarea>(.*)<\/textarea>.*','g');
if (re.test(someHtml)) {
textarea = this.refs['input-textarea'].getDOMNode();
textarea = this.refs['input-textarea'];
textarea.innerHTML = someHtml.replace(re, '$1');
result = textarea.innerHTML;
} else {
@@ -208,17 +210,19 @@ Clipperz.PM.UI.Components.ExtraFeatures.DataImport.InputClass = React.createClas
// 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.
},
handleTextareaChange: function () {
// var newInputString;
//
// newInputString = this.refs['input-textarea'].getDOMNode().value;
// newInputString = this.refs['input-textarea'].value;
// this.setState({'inputString': newInputString});
// this.props.importContext.setInputString(newInputString);
this.updateTextAreaContent(this.refs['input-textarea'].getDOMNode().value, false);
this.updateTextAreaContent(this.refs['input-textarea'].value, false);
},
//=========================================================================
@@ -247,7 +251,7 @@ Clipperz.PM.UI.Components.ExtraFeatures.DataImport.InputClass = React.createClas
React.DOM.br({}),
React.DOM.a({
'className': 'button',
'onClick': MochiKit.Base.bind(function() { this.refs['upload-input'].getDOMNode().click() }, this),
'onClick': MochiKit.Base.bind(function() { this.refs['upload-input'].click() }, this),
}, "select it manually")
]),
React.DOM.div({'className': 'description'},

4
frontend/delta/js/Clipperz/PM/UI/Components/ExtraFeatures/DataImport/Preview.js
View File

@@ -26,6 +26,8 @@ Clipperz.Base.module('Clipperz.PM.UI.Components.ExtraFeatures.DataImport');
Clipperz.PM.UI.Components.ExtraFeatures.DataImport.PreviewClass = React.createClass({
displayName: 'Clipperz.PM.UI.Components.ExtraFeatures.DataImport.Preview',
getInitialState: function() {
var recordsToImport;
@@ -83,7 +85,7 @@ Clipperz.PM.UI.Components.ExtraFeatures.DataImport.PreviewClass = React.createCl
//-------------------------------------------------------------------------
handleImportTagTextChange: function() {
var newTag = this.refs['importTagText'].getDOMNode().value;
var newTag = this.refs['importTagText'].value;
this.props.importContext.setState('importTag', newTag);
},

12
frontend/delta/js/Clipperz/PM/UI/Components/ExtraFeatures/DeleteAccount.js
View File

@@ -26,6 +26,8 @@ Clipperz.Base.module('Clipperz.PM.UI.Components.DeleteAccount');
Clipperz.PM.UI.Components.ExtraFeatures.DeleteAccountClass = React.createClass({
displayName: 'Clipperz.PM.UI.Components.ExtraFeatures.DeleteAccount',
propTypes: {
// featureSet: React.PropTypes.oneOf(['FULL', 'EXPIRED', 'TRIAL']).isRequired,
// 'level': React.PropTypes.oneOf(['hide', 'info', 'warning', 'error']).isRequired
@@ -50,15 +52,15 @@ Clipperz.PM.UI.Components.ExtraFeatures.DeleteAccountClass = React.createClass({
var deferredResult;
deferredResult = new Clipperz.Async.Deferred("DeleteAccount.handleDeleteAccount", {trace: false});
deferredResult.addCallback(this.props.userInfo['checkPassphraseCallback'], this.refs['passphrase'].getDOMNode().value);
deferredResult.addCallback(this.props.userInfo['checkPassphraseCallback'], this.refs['passphrase'].value);
deferredResult.addMethod(this, function(passCheck){
var username = this.refs['username'].getDOMNode().value;
var passphrase = this.refs['passphrase'].getDOMNode().value;
var username = this.refs['username'].value;
var passphrase = this.refs['passphrase'].value;
this.setState({
'username': (username != '') ? (username == this.props.userInfo['username']) ? 'valid' : 'invalid' : 'empty',
'passphrase': (passphrase != '') ? (passCheck) ? 'valid' : 'invalid' : 'empty',
'confirm': this.refs['confirm'].getDOMNode().checked,
'confirm': this.refs['confirm'].checked,
});
});
@@ -87,7 +89,7 @@ Clipperz.PM.UI.Components.ExtraFeatures.DeleteAccountClass = React.createClass({
React.DOM.input({'key':'passphrase', 'className': this.state['passphrase'], 'type':'password', 'name':'passphrase', 'ref':'passphrase', 'placeholder':"passphrase"}),
React.DOM.p({}, [
React.DOM.input({'key':'confirm', 'className':'confirmCheckbox', 'type':'checkbox', 'id':'deleteAccountConfirmCheckbox', 'name':'confirm', 'ref':'confirm'}),
React.DOM.label({'htmlFor':'deleteAccountConfirmCheckbox'}, "All my data will be permanently deleted. I understand that this action cannot be undone or cancelled.")
React.DOM.label({'htmlFor':'deleteAccountConfirmCheckbox'}, "All my data will be permanently deleted. I understand that this action cannot be undone or canceled.")
]),
]),
React.DOM.button({'key':'button', 'type':'submit', 'disabled':!this.shouldEnableDeleteAccountButton(), 'className':'button'}, "Delete my account")

4
frontend/delta/js/Clipperz/PM/UI/Components/ExtraFeatures/DevicePIN.js
View File

@@ -26,6 +26,8 @@ Clipperz.Base.module('Clipperz.PM.UI.Components.ExtraFeatures');
Clipperz.PM.UI.Components.ExtraFeatures.DevicePINClass = React.createClass({
displayName: 'Clipperz.PM.UI.Components.ExtraFeatures.DevicePIN',
propTypes: {
// featureSet: React.PropTypes.oneOf(['FULL', 'EXPIRED', 'TRIAL']).isRequired,
// 'level': React.PropTypes.oneOf(['hide', 'info', 'warning', 'error']).isRequired
@@ -59,7 +61,7 @@ Clipperz.PM.UI.Components.ExtraFeatures.DevicePINClass = React.createClass({
},
setFocus: function() {
this.refs['pinValue'].getDOMNode().focus();
this.refs['pinValue'].focus();
},
resetPIN: function() {

4
frontend/delta/js/Clipperz/PM/UI/Components/ExtraFeatures/OTP.js
View File

@@ -26,6 +26,8 @@ Clipperz.Base.module('Clipperz.PM.UI.Components.ExtraFeatures');
Clipperz.PM.UI.Components.ExtraFeatures.OTPClass = React.createClass({
displayName: 'Clipperz.PM.UI.Components.ExtraFeatures.OTP',
getInitialState: function() {
return {
// 'selectedOTPs': [],
@@ -82,7 +84,7 @@ Clipperz.PM.UI.Components.ExtraFeatures.OTPClass = React.createClass({
},
handleLabelSave: function (anOTP) {
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'changeOTPLabel', anOTP.reference(), this.state['otpLabel']);
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'changeOTPLabel', {'reference':anOTP.reference(), 'label':this.state['otpLabel']});
this.handleLabelCancel()
},

26
frontend/delta/js/Clipperz/PM/UI/Components/ExtraFeatures/Passphrase.js
View File

@@ -26,6 +26,8 @@ Clipperz.Base.module('Clipperz.PM.UI.Components.ExtraFeatures');
Clipperz.PM.UI.Components.ExtraFeatures.PassphraseClass = React.createClass({
displayName: 'Clipperz.PM.UI.Components.ExtraFeatures.Passphrase',
propTypes: {
},
@@ -44,18 +46,18 @@ Clipperz.PM.UI.Components.ExtraFeatures.PassphraseClass = React.createClass({
resetForm: function () {
this.setState(this.getInitialState());
this.refs['username'].getDOMNode().value = '';
this.refs['old-passphrase'].getDOMNode().value = '';
this.refs['new-passphrase'].getDOMNode().value = '';
this.refs['confirm-new-passphrase'].getDOMNode().value = '';
this.refs['confirm'].getDOMNode().checked = false;
this.refs['username'].value = '';
this.refs['old-passphrase'].value = '';
this.refs['new-passphrase'].value = '';
this.refs['confirm-new-passphrase'].value = '';
this.refs['confirm'].checked = false;
},
handleChangePassphrase: function(event) {
var newPassphrase;
event.preventDefault();
newPassphrase = this.refs['new-passphrase'].getDOMNode().value;
newPassphrase = this.refs['new-passphrase'].value;
this.resetForm();
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'changePassphrase', newPassphrase);
@@ -65,19 +67,19 @@ Clipperz.PM.UI.Components.ExtraFeatures.PassphraseClass = React.createClass({
var deferredResult;
deferredResult = new Clipperz.Async.Deferred("Passphrase.handleFormChange", {trace: false});
deferredResult.addCallback(this.props.userInfo['checkPassphraseCallback'], this.refs['old-passphrase'].getDOMNode().value);
deferredResult.addCallback(this.props.userInfo['checkPassphraseCallback'], this.refs['old-passphrase'].value);
deferredResult.addMethod(this, function(passCheck){
var username = this.refs['username'].getDOMNode().value;
var oldPassphrase = this.refs['old-passphrase'].getDOMNode().value;
var newPassphrase = this.refs['new-passphrase'].getDOMNode().value;
var confirmNewPassphrase = this.refs['confirm-new-passphrase'].getDOMNode().value;
var username = this.refs['username'].value;
var oldPassphrase = this.refs['old-passphrase'].value;
var newPassphrase = this.refs['new-passphrase'].value;
var confirmNewPassphrase = this.refs['confirm-new-passphrase'].value;
this.setState({
'username': (username != '') ? [(username == this.props.userInfo['username']) ? 'valid' : 'invalid'] : 'empty',
'old-passphrase': (oldPassphrase != '') ? [(passCheck) ? 'valid' : 'invalid'] : 'empty',
'new-passphrase': (newPassphrase != '') ? 'valid' : 'empty',
'confirm-new-passphrase': (confirmNewPassphrase != '') ? [(confirmNewPassphrase == newPassphrase) ? 'valid' : 'invalid'] : 'empty',
'confirm': this.refs['confirm'].getDOMNode().checked,
'confirm': this.refs['confirm'].checked,
});
});

118
frontend/delta/js/Clipperz/PM/UI/Components/ExtraFeatures/Plan.js Normal file
View File

@@ -0,0 +1,118 @@
/*
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.ExtraFeatures');
Clipperz.PM.UI.Components.ExtraFeatures.PlanClass = React.createClass({
displayName: 'Clipperz.PM.UI.Components.ExtraFeatures.Plan',
propTypes: {
},
formatQuota: function (aValue) {
return filesize(aValue);
},
percentageOfUsedAttachmentQuota: function () {
return this.props['accountInfo']['attachmentQuota']['used'] / this.props['accountInfo']['attachmentQuota']['available'] * 100;
},
//=========================================================================
renderCertificateIcons: function () {
var result;
var totalCertificates;
var publishedCertificates;
var requestedCertificates;
var availableCertificates;
// var i, c;
// result = [];
totalCertificates = this.props['accountInfo']['certificateQuota']['totalNumber'];
publishedCertificates = this.props['accountInfo']['certificateQuota']['used']['published'];
requestedCertificates = this.props['accountInfo']['certificateQuota']['used']['requested'];
availableCertificates = totalCertificates - (publishedCertificates + requestedCertificates);
// c = totalCertificates;
// for (i=0; i<c; i++) {
// var className;
//
// if (i < publishedCertificates) {
// className = 'published';
// } else if (i < (publishedCertificates + requestedCertificates)) {
// className = 'requested';
// } else {
// className = 'available'
// };
// result.push(React.DOM.li({'className':className}, "certificate"));
// }
return React.DOM.ul({}, [
React.DOM.li({'className':'published'}, "published: " + ((publishedCertificates > 0) ? publishedCertificates : '-')),
React.DOM.li({'className':'requested'}, "requested: " + ((requestedCertificates > 0) ? requestedCertificates : '-')),
React.DOM.li({'className':'available'}, "available: " + ((availableCertificates > 0) ? availableCertificates : '-')),
]);
},
render: function () {
return React.DOM.div({className:'extraFeature plan'}, [
React.DOM.div({'className':'header'}, [
React.DOM.h1({}, "Current plan"),
]),
React.DOM.div({'className': 'content'}, [
React.DOM.div({'className': 'attachments'}, [
React.DOM.h2({}, "Attachments quota"),
React.DOM.dl({}, [
React.DOM.dt({}, [
React.DOM.span({'className':'key'}, 'available')
]), React.DOM.dd({}, this.formatQuota(this.props['accountInfo']['attachmentQuota']['available'])),
React.DOM.dt({}, [
React.DOM.span({'className':'key'}, 'used'),
]), React.DOM.dd({}, this.formatQuota(this.props['accountInfo']['attachmentQuota']['used'])),
]),
React.DOM.div({'className': 'progressBar'}, [
React.DOM.span({'className': 'progress', 'style': {'width': this.percentageOfUsedAttachmentQuota() + '%'}})
// MochiKit.Style.setElementDimensions(this.getElement('progress'), {'w': aProgressPercentage}, '%');
])
]),
React.DOM.div({'className': 'certificates'}, [
React.DOM.h2({}, "Certificates"),
this.renderCertificateIcons(),
]),
React.DOM.div({'className': 'upgrade'}, [
React.DOM.button({'className':'button disabled', 'type':'submit'}, "upgrade")
])
])
]);
},
//=========================================================================
});
Clipperz.PM.UI.Components.ExtraFeatures.Plan = React.createFactory(Clipperz.PM.UI.Components.ExtraFeatures.PlanClass);

4
frontend/delta/js/Clipperz/PM/UI/Components/ExtraFeatures/Preferences.js
View File

@@ -26,6 +26,8 @@ Clipperz.Base.module('Clipperz.PM.UI.Components.ExtraFeatures');
Clipperz.PM.UI.Components.ExtraFeatures.PreferencesClass = React.createClass({
displayName: 'Clipperz.PM.UI.Components.ExtraFeatures.Preferences',
getInitialState: function() {
return {
'editedPreferences': new Clipperz.KeyValueObjectStore()
@@ -66,7 +68,7 @@ Clipperz.PM.UI.Components.ExtraFeatures.PreferencesClass = React.createClass({
checkboxClick: function (aRef) {
return MochiKit.Base.bind(function (anEvent) {
// console.log("CHECKBOX CLICK", this, this.refs, this.refs[aRef]);
this.refs[aRef].getDOMNode().click();
this.refs[aRef].click();
}, this);
},

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

@@ -26,6 +26,8 @@ Clipperz.Base.module('Clipperz.PM.UI.Components');
Clipperz.PM.UI.Components.HelpClass = React.createClass({
displayName: 'Clipperz.PM.UI.Components.Help',
close: function (anEvent) {
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'closeHelp');
},

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

@@ -25,6 +25,8 @@ Clipperz.Base.module('Clipperz.PM.UI.Components');
Clipperz.PM.UI.Components.MessageBoxClass = React.createClass({
displayName: 'Clipperz.PM.UI.Components.MessageBox',
propTypes: {
'level': React.PropTypes.oneOf(['HIDE', 'INFO', 'WARNING', 'ERROR']).isRequired,
'message': React.PropTypes.string.isRequired

26
frontend/delta/js/Clipperz/PM/UI/Components/Pages/CardDetailPage.js
View File

@@ -24,33 +24,13 @@ refer to http://www.clipperz.com.
Clipperz.Base.module('Clipperz.PM.UI.Components.Pages');
Clipperz.PM.UI.Components.Pages.CardDetailPageClass = React.createClass({
displayName: 'Clipperz.PM.UI.Components.Pages.CardDetailPage',
propTypes: {
'allTags': React.PropTypes.array,
},
/*
viewComponentProps: function () {
var result;
result = this.props['selectedCard'];
if (result) {
result['style'] = this.props['style'];
}
return result;
},
render: function () {
var result;
if (this.props['mode'] == 'edit') {
result = Clipperz.PM.UI.Components.Cards.Edit(this.viewComponentProps());
} else {
result = Clipperz.PM.UI.Components.Cards.View(this.viewComponentProps());
}
return result;
},
*/
render: function () {
return Clipperz.PM.UI.Components.Cards.Detail(this.props);
}

38
frontend/delta/js/Clipperz/PM/UI/Components/Pages/ErrorPage.js
View File

@@ -25,26 +25,28 @@ Clipperz.Base.module('Clipperz.PM.UI.Components.Pages');
Clipperz.PM.UI.Components.Pages.ErrorPageClass = React.createClass({
getDefaultProps: function () {
return {
// template: Clipperz.PM.UI.Components.PageTemplate
}
},
'propTypes': {
// type: React.PropTypes.oneOf(['PERMANENT', 'TEMPORARY']),
message: React.PropTypes.string.isRequired,
template: React.PropTypes.func
},
displayName: 'Clipperz.PM.UI.Components.Pages.ErrorPage',
render: function () {
return React.DOM.div({className:'error-message'}, this.props.message);
},
// render: function () {
// return new this.props.template({'innerComponent': this._render()});
// }
//console.log("ERROR PAGE", this.props);
return React.DOM.div({}, [
React.DOM.header({}, [
React.DOM.h2({}, 'clipperz')
]),
React.DOM.div({}, [
React.DOM.div({'className':'error-box'}, [
React.DOM.div({}, [
React.DOM.p({}, "Ops!"),
React.DOM.p({}, "Sorry, something went wrong."),
React.DOM.p({}, "Please reload."),
]),
React.DOM.div({'className':'error-message'}, [
React.DOM.p({}, this.props['error'] ? this.props['error']['message'] : '')
])
])
])
])
}
});
Clipperz.PM.UI.Components.Pages.ErrorPage = React.createFactory(Clipperz.PM.UI.Components.Pages.ErrorPageClass);

50
frontend/delta/js/Clipperz/PM/UI/Components/Pages/LoginPage.js
View File

@@ -26,6 +26,8 @@ Clipperz.Base.module('Clipperz.PM.UI.Components.Pages');
Clipperz.PM.UI.Components.Pages.LoginPageClass = React.createClass({
displayName: 'Clipperz.PM.UI.Components.Pages.LoginPage',
propTypes: {
mode: React.PropTypes.oneOf(['CREDENTIALS','PIN']).isRequired,
isNewUserRegistrationAvailable: React.PropTypes.bool.isRequired,
@@ -59,7 +61,7 @@ Clipperz.PM.UI.Components.Pages.LoginPageClass = React.createClass({
handleChange: function (anEvent) {
var refs = this.refs;
var refName = MochiKit.Base.filter(function (aRefName) { return refs[aRefName].getDOMNode() == anEvent.target}, MochiKit.Base.keys(this.refs))[0];
var refName = MochiKit.Base.filter(function (aRefName) { return refs[aRefName] == anEvent.target}, MochiKit.Base.keys(this.refs))[0];
var newState = {};
newState[refName] = anEvent.target.value;
@@ -70,8 +72,8 @@ Clipperz.PM.UI.Components.Pages.LoginPageClass = React.createClass({
if (this.mode() == 'CREDENTIALS') {
var newState;
var usernameValue = this.refs['username'].getDOMNode().value;
var passphraseValue = this.refs['passphrase'].getDOMNode().value;
var usernameValue = this.refs['username'].value;
var passphraseValue = this.refs['passphrase'].value;
newState = {};
@@ -87,11 +89,11 @@ Clipperz.PM.UI.Components.Pages.LoginPageClass = React.createClass({
handleCredentialSubmit: function (event) {
event.preventDefault();
this.refs['passphrase'].getDOMNode().blur();
this.refs['passphrase'].blur();
var credentials = {
'username': this.refs['username'].getDOMNode().value,
'passphrase': this.refs['passphrase'].getDOMNode().value
'username': this.refs['username'].value,
'passphrase': this.refs['passphrase'].value
}
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'doLogin', credentials);
},
@@ -116,7 +118,7 @@ Clipperz.PM.UI.Components.Pages.LoginPageClass = React.createClass({
},
loginForm: function () {
return React.DOM.form({'key':'form', 'className':'loginForm credentials', 'autoComplete':'off', 'autoCorrect':'off', 'autoCapitalize':'off', 'onChange':this.handleChange, 'onSubmit':this.handleCredentialSubmit}, [
return React.DOM.form({'key':'loginForm', 'className':'loginForm credentials', 'autoComplete':'off', 'autoCorrect':'off', 'autoCapitalize':'off', 'onChange':this.handleChange, 'onSubmit':this.handleCredentialSubmit}, [
React.DOM.div({'key':'fields'},[
React.DOM.label({'key':'username-label', 'htmlFor' :'name'}, "username"),
React.DOM.input({'key':'username', 'type':'text', 'name':'name', 'ref':'username', 'placeholder':"username", 'autoComplete':'off', 'autoCorrect':'off', 'autoCapitalize':'off', 'spellCheck': false}),
@@ -128,10 +130,10 @@ Clipperz.PM.UI.Components.Pages.LoginPageClass = React.createClass({
},
submitPIN: function (event) {
this.refs['pin'].getDOMNode().blur();
this.refs['pin'].blur();
var credentials = {
pin: this.refs['pin'].getDOMNode().value
pin: this.refs['pin'].value
}
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'doLogin', credentials);
@@ -153,7 +155,7 @@ Clipperz.PM.UI.Components.Pages.LoginPageClass = React.createClass({
// handlePinFocus: function(anEvent) {
// // anEvent.preventDefault();
// this.refs['pin'].getDOMNode().focus();
// this.refs['pin'].focus();
// },
// pinFormDigits: function() {
@@ -179,12 +181,13 @@ Clipperz.PM.UI.Components.Pages.LoginPageClass = React.createClass({
pinForm: function () {
return React.DOM.form({
'key':'pinForm',
'className':'pinForm pin',
'autoComplete':'off',
'onSubmit': function(anEvent) {anEvent.preventDefault();},
}, [
React.DOM.div({'key':'pinFormDiv'},[
React.DOM.label({'htmlFor':'pin'}, "Enter your PIN"),
React.DOM.label({'key':'pinLabel', 'htmlFor':'pin'}, "Enter your PIN"),
React.DOM.input({
'type':'tel',
'name':'pin',
@@ -199,6 +202,7 @@ Clipperz.PM.UI.Components.Pages.LoginPageClass = React.createClass({
}),
// React.DOM.div({'className': 'pinContainer'}, this.pinFormDigits()),
React.DOM.a({
'key':'pinAnchor',
'className': 'passphraseLogin',
'onClick': this.forcePassphraseLogin,
}, "Login with passphrase")
@@ -212,12 +216,12 @@ Clipperz.PM.UI.Components.Pages.LoginPageClass = React.createClass({
this.setState({
'pin': ''
})
this.refs['pin'].getDOMNode().focus();
this.refs['pin'].focus();
} else {
if (this.refs['username'].getDOMNode().value == '') {
this.refs['username'].getDOMNode().focus();
if (this.refs['username'].value == '') {
this.refs['username'].focus();
} else{
this.refs['passphrase'].getDOMNode().select();
this.refs['passphrase'].select();
}
}
},
@@ -234,22 +238,22 @@ Clipperz.PM.UI.Components.Pages.LoginPageClass = React.createClass({
return React.DOM.div({'key':'loginForm', 'className':'loginForm content ' + this.props['style']}, [
Clipperz.PM.UI.Components.AccountStatus(MochiKit.Base.update(this.props['proxyInfo'])),
React.DOM.header({'key':'header'}, [
React.DOM.div({'className':'headerContent'}, [
React.DOM.h3({}, 'clipperz'),
React.DOM.h5({}, 'keep it to yourself'),
React.DOM.div({'key':'div', 'className':'headerContent'}, [
React.DOM.h3({'key':'h3'}, 'clipperz'),
React.DOM.h5({'key':'h5'}, 'keep it to yourself'),
]),
]),
React.DOM.div({'key':'formWrapper', 'className':'form body'}, [
React.DOM.div({'className':'bodyContent'}, [
React.DOM.div({'key':'div', 'className':'bodyContent'}, [
this.mode() == 'PIN' ? this.pinForm() : this.loginForm(),
this.props['isNewUserRegistrationAvailable'] ? registrationLink : null,
]),
]),
React.DOM.div({'key':'afterBody', 'className':'afterBody'}),
React.DOM.div({'className':'other', 'key':'other'}, [
React.DOM.div({'className':'otherContent'}, [
React.DOM.div({'key':'other', 'className':'other'}, [
React.DOM.div({'key':'otherContent', 'className':'otherContent'}, [
React.DOM.div({'key':'links', 'className':'links'}, [
React.DOM.ul({}, [
React.DOM.ul({'key':'ul'}, [
React.DOM.li({'key':'about', 'onClick':this.showUrl('/about/')}, "About"),
React.DOM.li({'key':'terms', 'onClick':this.showUrl('/terms_service/')}, "Terms of service"),
React.DOM.li({'key':'privacy', 'onClick':this.showUrl('/privacy_policy/')}, "Privacy"),
@@ -258,7 +262,7 @@ Clipperz.PM.UI.Components.Pages.LoginPageClass = React.createClass({
])
]),
React.DOM.footer({'key':'footer'}, [
React.DOM.div({'className':'footerContent'}, [
React.DOM.div({'key':'div', 'className':'footerContent'}, [
React.DOM.div({'key':'applicationVersion', 'className':'applicationVersion'}, [
React.DOM.span({'key':'applicationVersionLabel'}, "application version"),
React.DOM.a({'key':'applicationVersionLink', 'href':'https://github.com/clipperz/password-manager/commit/' + Clipperz_version, 'target':'github'}, Clipperz_version)

3
frontend/delta/js/Clipperz/PM/UI/Components/Pages/MainPage.js
View File

@@ -26,6 +26,8 @@ Clipperz.Base.module('Clipperz.PM.UI.Components.Pages');
Clipperz.PM.UI.Components.Pages.MainPageClass = React.createClass({
displayName: 'Clipperz.PM.UI.Components.Pages.MainPage',
getDefaultProps: function () {
return {
featureSet: 'FULL',
@@ -69,6 +71,7 @@ Clipperz.PM.UI.Components.Pages.MainPageClass = React.createClass({
result = React.DOM.div({'key':'mainPage', 'className':Clipperz.PM.UI.Components.classNames(classes)}, [
Clipperz.PM.UI.Components.AttachmentQueueBox(this.props),
Clipperz.PM.UI.Components.CertificateQueueBox(this.props),
this.props['style'] != 'extra-wide' ? Clipperz.PM.UI.Components.Panels.SelectionPanel(this.props) : null,
Clipperz.PM.UI.Components.Panels.MainPanel(this.props),
Clipperz.PM.UI.Components.Panels.ExtraFeaturesPanel(this.props),

18
frontend/delta/js/Clipperz/PM/UI/Components/Pages/RegistrationPage.js
View File

@@ -25,6 +25,8 @@ Clipperz.Base.module('Clipperz.PM.UI.Components.Pages');
Clipperz.PM.UI.Components.Pages.RegistrationPageClass = React.createClass({
displayName: 'Clipperz.PM.UI.Components.Pages.RegistrationPage',
getDefaultProps: function () {
return {
steps: [
@@ -126,8 +128,8 @@ Clipperz.PM.UI.Components.Pages.RegistrationPageClass = React.createClass({
toggleCheckbox: function (aCheckboxRef, anEvent) {
var newState = {};
this.refs[aCheckboxRef].getDOMNode().checked = ! this.refs[aCheckboxRef].getDOMNode().checked;
newState[aCheckboxRef] = this.refs[aCheckboxRef].getDOMNode().checked;
this.refs[aCheckboxRef].checked = ! this.refs[aCheckboxRef].checked;
newState[aCheckboxRef] = this.refs[aCheckboxRef].checked;
this.setState(newState);
},
@@ -154,7 +156,7 @@ Clipperz.PM.UI.Components.Pages.RegistrationPageClass = React.createClass({
handleChange: function (anEvent) {
var refs = this.refs;
var refName = MochiKit.Base.filter(function (aRefName) { return refs[aRefName].getDOMNode() == anEvent.target}, MochiKit.Base.keys(this.refs))[0];
var refName = MochiKit.Base.filter(function (aRefName) { return refs[aRefName] == anEvent.target}, MochiKit.Base.keys(this.refs))[0];
var newState = {};
if ((anEvent.target.type == 'checkbox') || (anEvent.target.type == 'radio')) {
@@ -213,12 +215,12 @@ Clipperz.PM.UI.Components.Pages.RegistrationPageClass = React.createClass({
return React.DOM.div({'key':'termsOfService'}, [
React.DOM.div({'key':'termsOfService_choice_1', 'className':'checkboxBlock'}, [
React.DOM.label({'key':'termsOfService_label_1', 'htmlFor':'no_password_recovery'}, "I understand that Clipperz is unable to recover a lost passphrase."),
React.DOM.input({'key':'no_password_recovery', 'type':'checkbox', 'name':'no_password_recovery', 'ref':'no_password_recovery', 'id':'no_password_recovery', 'tabindex':'0'}),
React.DOM.input({'key':'no_password_recovery', 'type':'checkbox', 'name':'no_password_recovery', 'ref':'no_password_recovery', 'id':'no_password_recovery', 'tabIndex':'0'}),
React.DOM.p({'key':'termsOfService_description_1', 'onClick':MochiKit.Base.method(this, 'toggleCheckbox', 'no_password_recovery')}, "I understand that Clipperz is unable to recover a lost passphrase.")
]),
React.DOM.div({'key':'termsOfService_choice_2', 'className':'checkboxBlock'}, [
React.DOM.label({'key':'termsOfService_label_2', 'htmlFor':'agree_terms_of_service'}, "I have read and agreed to the Terms of Service."),
React.DOM.input({'key':'agree_terms_of_service', 'type':'checkbox', 'name':'agree_terms_of_service', 'ref':'agree_terms_of_service', 'id':'agree_terms_of_service', 'tabindex':'1'}),
React.DOM.input({'key':'agree_terms_of_service', 'type':'checkbox', 'name':'agree_terms_of_service', 'ref':'agree_terms_of_service', 'id':'agree_terms_of_service', 'tabIndex':'1'}),
React.DOM.p({'key':'termsOfService_description_2'}, [
React.DOM.span({'key':'termsOfService_description_2_p1', 'onClick':MochiKit.Base.method(this, 'toggleCheckbox', 'agree_terms_of_service')}, "I have read and agreed to the "),
React.DOM.a({'key':'termsOfService_description_2_p2', 'onClick':this.showUrl('/terms_service/')}, "Terms of Service.")
@@ -290,15 +292,15 @@ Clipperz.PM.UI.Components.Pages.RegistrationPageClass = React.createClass({
//=========================================================================
setInitialFocus: function () {
this.refs['username'].getDOMNode().focus();
this.refs['username'].focus();
},
componentDidUpdate: function (prevProps, prevState, rootNode) {
if (prevState['currentStep'] != this.state['currentStep']) {
if (this.state['currentStep'] == 'CREDENTIALS') {
this.refs['passphrase'].getDOMNode().select();
this.refs['passphrase'].select();
} else if (this.state['currentStep'] == 'PASSWORD_VERIFICATION') {
this.refs['verify_passphrase'].getDOMNode().select();
this.refs['verify_passphrase'].select();
}
}
}

28
frontend/delta/js/Clipperz/PM/UI/Components/Pages/UnlockPage.js
View File

@@ -26,10 +26,12 @@ Clipperz.Base.module('Clipperz.PM.UI.Components.Pages');
Clipperz.PM.UI.Components.Pages.UnlockPageClass = React.createClass({
displayName: 'Clipperz.PM.UI.Components.Pages.UnlockPage',
propTypes: {
username: React.PropTypes.string.isRequired,
// username: React.PropTypes.string.isRequired,
mode: React.PropTypes.oneOf(['CREDENTIALS','PIN']).isRequired,
disabled: React.PropTypes.bool.isRequired,
// disabled: React.PropTypes.bool.isRequired,
},
getInitialState: function () {
@@ -70,29 +72,29 @@ Clipperz.PM.UI.Components.Pages.UnlockPageClass = React.createClass({
handlePassphraseSubmit: function (event) {
event.preventDefault();
this.refs['passphrase'].getDOMNode().blur();
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'unlock', this.refs['passphrase'].getDOMNode().value, 'PASSPHRASE');
this.refs['passphrase'].blur();
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'unlock', {'credential':this.refs['passphrase'].value, 'credentialType':'PASSPHRASE'});
// this.resetUnlockForm();
},
submitPIN: function() {
this.refs['pin'].getDOMNode().blur();
this.refs['pin'].blur();
var pin = this.refs['pin'].getDOMNode().value;
var pin = this.refs['pin'].value;
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'unlock', pin, 'PIN');
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'unlock', {'credential':pin, 'credentialType':'PIN'});
// this.resetUnlockForm();
},
resetUnlockForm: function() {
if (this.mode() == 'CREDENTIALS') {
this.refs['passphrase'].getDOMNode().value = '';
this.refs['passphrase'].getDOMNode().blur();
this.refs['passphrase'].value = '';
this.refs['passphrase'].blur();
} else if (this.mode() == 'PIN') {
this.refs['pin'].getDOMNode().value = '';
this.refs['pin'].getDOMNode().blur();
this.refs['pin'].value = '';
this.refs['pin'].blur();
}
},
@@ -104,9 +106,9 @@ Clipperz.PM.UI.Components.Pages.UnlockPageClass = React.createClass({
setInitialFocus: function () {
if (this.mode() == 'PIN') {
this.refs['pin'].getDOMNode().focus();
this.refs['pin'].focus();
} else {
this.refs['passphrase'].getDOMNode().focus();
this.refs['passphrase'].focus();
}
},

23
frontend/delta/js/Clipperz/PM/UI/Components/Panels/ExtraFeaturesPanel.js
View File

@@ -26,12 +26,13 @@ Clipperz.Base.module('Clipperz.PM.UI.Components.Panels');
Clipperz.PM.UI.Components.Panels.ExtraFeaturesPanelClass = React.createClass({
displayName: 'Clipperz.PM.UI.Components.Panels.ExtraFeaturesPanel',
componentDidMount: function () {
MochiKit.Signal.connect(Clipperz.Signal.NotificationCenter, 'closeSettingsPanel', MochiKit.Base.method(this, 'hideExtraFeatureContent'));
},
settingsToggleHandler: function (anEvent) {
//console.log("settingsToggleHandler");
this.hideExtraFeatureContent();
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'toggleSettingsPanel');
},
@@ -120,6 +121,10 @@ Clipperz.PM.UI.Components.Panels.ExtraFeaturesPanelClass = React.createClass({
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'updateOTPListAndDetails');
}
if (aComponentName == 'Plan') {
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'updateUserAccountInfo');
}
this.setState({
'isFullyOpen':true,
'extraFeatureComponentName': aComponentName,
@@ -147,23 +152,29 @@ Clipperz.PM.UI.Components.Panels.ExtraFeaturesPanelClass = React.createClass({
React.DOM.li({'key':'account', 'className':this.state['index']['account'] ? 'open' : 'closed'}, [
React.DOM.h1({'key':'accountH1', 'onClick':this.toggleIndexState('account')}, "Account"),
React.DOM.ul({'key':'accountUL'}, [
React.DOM.li({'key':'account_preferences', 'onClick':this.toggleExtraFeatureComponent('Preferences'), 'className':(this.state['extraFeatureComponentName'] == 'Preferences') ? 'selected' : ''}, [
React.DOM.h2({'key':'account_preferences_h2'}, "Preferences"),
React.DOM.li({'key':'account_0', 'onClick':this.toggleExtraFeatureComponent('Preferences'), 'className':(this.state['extraFeatureComponentName'] == 'Preferences') ? 'selected' : ''}, [
React.DOM.h2({}, "Preferences"),
]),
React.DOM.li({'key':'account_1', 'onClick':this.toggleExtraFeatureComponent('Passphrase'), 'className':(this.state['extraFeatureComponentName'] == 'Passphrase') ? 'selected' : ''}, [
React.DOM.h2({'key':'account_1_h2'}, "Passphrase"),
React.DOM.h2({}, "Passphrase"),
// React.DOM.div({'key':'account_1_div'}, [
// React.DOM.p({'key':'account_1_p'}, "Change your account passphrase.")
// ])
]),
React.DOM.li({'key':'account_2', 'onClick':this.toggleExtraFeatureComponent('OTP')}, [
React.DOM.li({'key':'account_2', 'onClick':this.toggleExtraFeatureComponent('Plan'), 'className':(this.state['extraFeatureComponentName'] == 'Plan') ? 'selected' : ''}, [
React.DOM.h2({}, "Plan"),
// React.DOM.div({}, [
// React.DOM.p({}, "Current plan.")
// ])
]),
React.DOM.li({'key':'account_3', 'onClick':this.toggleExtraFeatureComponent('OTP')}, [
React.DOM.h2({}, "One-Time Passwords"),
// React.DOM.div({}, [
// React.DOM.p({}, "Manage your OTPs.")
// ])
]),
React.DOM.li({'key':'account_3', 'onClick':this.toggleExtraFeatureComponent('DevicePIN')}, [
React.DOM.li({'key':'account_4', 'onClick':this.toggleExtraFeatureComponent('DevicePIN')}, [
React.DOM.h2({}, "Device PIN"),
// React.DOM.div({}, [
// React.DOM.p({}, "Configure a PIN that will allow to get access to your cards, but only on this device.")

2
frontend/delta/js/Clipperz/PM/UI/Components/Panels/MainPanel.js
View File

@@ -28,6 +28,8 @@ Clipperz.PM.UI.Components.Panels.MainPanelClass = React.createClass({
//=========================================================================
displayName: 'Clipperz.PM.UI.Components.Panels.MainPanel',
propTypes: {
'allTags': React.PropTypes.array,
'messageBox': React.PropTypes.object.isRequired,

2
frontend/delta/js/Clipperz/PM/UI/Components/Panels/SelectionPanel.js
View File

@@ -26,6 +26,8 @@ Clipperz.Base.module('Clipperz.PM.UI.Components.Panels');
Clipperz.PM.UI.Components.Panels.SelectionPanelClass = React.createClass({
displayName: 'Clipperz.PM.UI.Components.Panels.SelectionPanel',
propTypes: {
selectionPanelStatus: React.PropTypes.oneOf(['OPEN', 'CLOSED']).isRequired
},

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

@@ -26,6 +26,8 @@ Clipperz.Base.module('Clipperz.PM.UI.Components');
Clipperz.PM.UI.Components.RadialProgressIndicatorClass = React.createClass({
displayName: 'Clipperz.PM.UI.Components.RadialProgressIndicator',
propTypes: {
'progress': React.PropTypes.number.isRequired,
},

10
frontend/delta/js/Clipperz/PM/UI/Components/Selections.js
View File

@@ -28,6 +28,8 @@ Clipperz.PM.UI.Components.SelectionsClass = React.createClass({
//=========================================================================
displayName: 'Clipperz.PM.UI.Components.Selections',
selectAll: function (anEvent) {
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'selectAllCards');
},
@@ -36,6 +38,10 @@ Clipperz.PM.UI.Components.SelectionsClass = React.createClass({
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'selectRecentCards');
},
selectWithCertificate: function (anEvent) {
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'selectCardsWithCertificate');
},
selectWithAttachments: function (anEvent) {
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'selectCardsWithAttachments');
},
@@ -99,6 +105,10 @@ Clipperz.PM.UI.Components.SelectionsClass = React.createClass({
React.DOM.span({'className':'label'}, "Recent"),
React.DOM.span({'className':'count'}, this.props['allCardsCount'] ? '10' : '-')
]),
React.DOM.li({'className':'withCertificateCards', 'onClick': this.selectWithCertificate}, [
React.DOM.span({'className':'label'}, "With certificate"),
React.DOM.span({'className':'count'}, this.props['withCertificateCardsCount'] ? this.props['withCertificateCardsCount'] : '-')
]),
React.DOM.li({'className':'withAttachmentCards', 'onClick': this.selectWithAttachments}, [
React.DOM.span({'className':'label'}, "With attachments"),
React.DOM.span({'className':'count'}, this.props['withAttachmentCardsCount'] ? this.props['withAttachmentCardsCount'] : '-')

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

@@ -28,6 +28,8 @@ Clipperz.PM.UI.Components.TagIndexItemClass = React.createClass({
//=========================================================================
displayName: 'Clipperz.PM.UI.Components.TagIndexItem',
propTypes: {
'label': React.PropTypes.string.isRequired,
'count': React.PropTypes.number.isRequired,

2
frontend/delta/js/Clipperz/PM/UI/ExportController.js
View File

@@ -33,7 +33,7 @@ Clipperz.PM.UI.ExportController = function(args) {
this._style =
"body {" +
"font-family: 'Dejavu Sans', monospace;" +
"font-family: 'DejaVu Sans Mono', monospace;" +
"margin: 0px;" +
"}" +

720
frontend/delta/js/Clipperz/PM/UI/MainController.js
View File

File diff suppressed because it is too large Load Diff