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

Reviewed UI and removed the option to create new certificates

Browse Source
This commit is contained in:
Giulio Cesare Solaroli
2016-11-27 15:05:10 +01:00
parent dd14c612e4
commit dcae32b426
16 changed files with 991 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -29,12 +29,14 @@ 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.number,
'badgeBottomContent': React.PropTypes.number,
'eventName': React.PropTypes.string.isRequired,
'label': React.PropTypes.string.isRequired,
'handler': React.PropTypes.func.isRequired,
'className': React.PropTypes.string,
'badgeTopContent': React.PropTypes.number,
'badgeTopLevel': React.PropTypes.string,
'badgeBottomContent': React.PropTypes.number,
'badgeBottomLevel': React.PropTypes.string,
},
//=========================================================================
@@ -52,18 +54,18 @@ Clipperz.PM.UI.Components.ButtonClass = React.createClass({
badgeTop = null;
if (this.props['badgeTopContent']) {
badgeTop = React.DOM.span({'className': 'badge top'}, this.props['badgeTopContent']);
badgeTop = React.DOM.span({'className': Clipperz.PM.UI.Components.classNames('badge', 'top', this.props['badgeTopLevel'])}, this.props['badgeTopContent']);
};
badgeBottom = null;
if (this.props['badgeBottomContent']) {
badgeBottom = React.DOM.span({'className': 'badge bottom'}, this.props['badgeBottomContent']);
badgeBottom = React.DOM.span({'className': Clipperz.PM.UI.Components.classNames('badge', 'bottom', this.props['badgeBottomLevel'])}, this.props['badgeBottomContent']);
};
return React.DOM.div({className:Clipperz.PM.UI.Components.classNames(classes), onClick:this.props['handler']}, [
React.DOM.div({className:this.props['eventName']}, [
React.DOM.h3({className:'label'}, this.props['label']),
return React.DOM.div({'className':Clipperz.PM.UI.Components.classNames(classes), onClick:this.props['handler']}, [
React.DOM.div({'className':this.props['eventName']}, [
React.DOM.h3({'className':'label'}, this.props['label']),
badgeTop,
badgeBottom,
])

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

@@ -63,33 +63,66 @@ Clipperz.PM.UI.Components.CardToolbarClass = React.createClass({
//============================================================================
renderWithSidePanels: function () {
notificationCounter: function () {
var result;
console.log("CARD TOOLBAR NOTIFICATIONS", this.props['notifications']);
if (this.props['notifications']) {
result = this.props['notifications'].length;
} else {
result = null;
}
/*
var attachmentDownloadNotificationNumber = MochiKit.Base.filter(function(anElement) {
return anElement['queueElement']['process'] == 'DOWNLOAD';
}, this.props['attachmentQueueInfo']['notifications']).length;
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 result;
},
notificationLevel: function () {
var result = 'info';
var i, c;
c = this.props['notifications'].length;
for (i=0; i<c; i++) {
var level;
level = this.props['notifications'][i]['level'];
if (level == 'error') {
result = 'error';
} else if ((level == 'warning') && (result == 'info')) {
result = 'warning';
}
}
return result;
},
renderWithSidePanels: function () {
return [
React.DOM.div({className:'selectionToggle'}, [
Clipperz.PM.UI.Components.Button({eventName:'selectionToggleButton', label:"tags", handler:this.selectionToggleHandler})
Clipperz.PM.UI.Components.Button({'eventName':'selectionToggleButton', 'label':"tags", 'handler':this.selectionToggleHandler})
]),
this.renderWithoutSidePanels(),
// TODO: validate and adjust names
React.DOM.div({className:'settingsToggle'}, [
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})
React.DOM.div({'className':'settingsToggle'}, [
// 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, 'badgeTopContent':this.notificationCounter(), 'badgeTopLevel':this.notificationLevel()})
])
];
},
@@ -102,36 +135,36 @@ Clipperz.PM.UI.Components.CardToolbarClass = React.createClass({
//console.log("CARD TOOLBAR", this.props['filter']['type']);
if (this.props['filter']['type'] == 'RECENT') {
result = [React.DOM.div({className:'clipperz'}, [React.DOM.span({className:'logo recent'}, "recent")])];
result = [React.DOM.div({'className':'clipperz'}, [React.DOM.span({'className':'logo recent'}, "recent")])];
} else if (this.props['filter']['type'] == 'WITH_ATTACHMENTS') {
result = [React.DOM.div({className:'clipperz'}, [React.DOM.span({className:'logo withAttachments'}, "attachment")])];
result = [React.DOM.div({'className':'clipperz'}, [React.DOM.span({'className':'logo withAttachments'}, "attachment")])];
} else if (this.props['filter']['type'] == 'TAG') {
result = [React.DOM.div({className:'clipperz'}, [
React.DOM.span({className:'logo tag'}, "tag"),
React.DOM.span({className:'value'}, this.props['filter']['value'])
result = [React.DOM.div({'className':'clipperz'}, [
React.DOM.span({'className':'logo tag'}, "tag"),
React.DOM.span({'className':'value'}, this.props['filter']['value'])
])];
} else if (this.props['filter']['type'] == 'UNTAGGED') {
result = [React.DOM.div({className:'clipperz'}, [
React.DOM.span({className:'logo tag'}, "tag"),
React.DOM.span({className:'value'}, "untagged")
result = [React.DOM.div({'className':'clipperz'}, [
React.DOM.span({'className':'logo tag'}, "tag"),
React.DOM.span({'className':'value'}, "untagged")
])];
} else if (this.props['filter']['type'] == 'SEARCH') {
result = [React.DOM.div({className:'clipperz'}, [
React.DOM.span({className:'logo search'}, "search"),
React.DOM.span({className:'value'}, this.props['filter']['value'])
result = [React.DOM.div({'className':'clipperz'}, [
React.DOM.span({'className':'logo search'}, "search"),
React.DOM.span({'className':'value'}, this.props['filter']['value'])
])];
} else {
result = [React.DOM.div({className:'clipperz'}, [React.DOM.span({className:'logo clipperz'}, "clipperz")])];
result = [React.DOM.div({'className':'clipperz'}, [React.DOM.span({'className':'logo clipperz'}, "clipperz")])];
}
} else {
result = [React.DOM.div({className:'clipperz'}, [React.DOM.span({className:'logo clipperz'}, "clipperz")])];
result = [React.DOM.div({'className':'clipperz'}, [React.DOM.span({'className':'logo clipperz'}, "clipperz")])];
}
return result;
},
render: function () {
return React.DOM.div({className:'cardToolbar ' + this.props['style']}, [
return React.DOM.div({'className':'cardToolbar ' + this.props['style']}, [
React.DOM.header({}, this.props['enableSidePanels'] ? this.renderWithSidePanels() : this.renderWithoutSidePanels()),
Clipperz.PM.UI.Components.AccountStatus(MochiKit.Base.update(this.props['accountInfo'], this.props['proxyInfo'])),
Clipperz.PM.UI.Components.MessageBox(this.props['messageBox']),

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

@@ -63,9 +63,9 @@ 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')},
'register': { 'label': "register", 'broadcastEvent': 'createCertificate', 'enabled': this.isFeatureEnabled('REGISTER_CARD') && !this.isCardCertified()},
// 'register': { 'label': "register", 'broadcastEvent': 'createCertificate', 'enabled': this.isFeatureEnabled('REGISTER_CARD') && !this.isCardCertified()},
'edit': { 'label': "edit", 'broadcastEvent': 'editCard', 'enabled': this.isFeatureEnabled('EDIT_CARD') && !this.isCardCertified()}
};
},

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

@@ -41,6 +41,25 @@ Clipperz.PM.UI.Components.ExtraFeatures.PlanClass = React.createClass({
//=========================================================================
hasSomeCertificate: function () {
return ((this.props['accountInfo']['certificateQuota']['used']['published'] > 0) || (this.props['accountInfo']['certificateQuota']['used']['requested'] > 0));
},
renderCertificateSection: function () {
var result;
if (this.hasSomeCertificate()) {
result = React.DOM.div({'className': 'certificates'}, [
React.DOM.h2({}, "Certificates"),
this.renderCertificateIcons(),
]);
} else {
result = null;
}
return result;
},
renderCertificateIcons: function () {
var result;
var totalCertificates;
@@ -72,7 +91,7 @@ Clipperz.PM.UI.Components.ExtraFeatures.PlanClass = React.createClass({
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 : '-')),
// React.DOM.li({'className':'available'}, "available: " + ((availableCertificates > 0) ? availableCertificates : '-')),
]);
},
@@ -99,10 +118,7 @@ Clipperz.PM.UI.Components.ExtraFeatures.PlanClass = React.createClass({
])
]),
React.DOM.div({'className': 'certificates'}, [
React.DOM.h2({}, "Certificates"),
this.renderCertificateIcons(),
]),
this.renderCertificateSection(),
React.DOM.div({'className': 'upgrade'}, [
React.DOM.button({'className':'button disabled', 'type':'submit'}, "upgrade")

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

@@ -70,8 +70,8 @@ Clipperz.PM.UI.Components.Pages.MainPageClass = React.createClass({
classes[this.props['style']] = true;
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),
// 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),

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

@@ -134,6 +134,21 @@ Clipperz.PM.UI.Components.Panels.ExtraFeaturesPanelClass = React.createClass({
//=========================================================================
acknowledgeNotification: function (aNotificationID) {
return MochiKit.Base.bind(function () {
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'acknowledgeNotification', aNotificationID);
}, this);
},
renderNotification: function (aNotification) {
return React.DOM.div({'key':aNotification['id'], 'className':Clipperz.PM.UI.Components.classNames('notification', aNotification['level'])}, [
React.DOM.span({'className':'acknowledge', 'onClick':this.acknowledgeNotification(aNotification['id'])}, [
React.DOM.span({}, "close")
]),
React.DOM.span({'className':'message'}, aNotification['message'])
]);
},
renderIndex: function () {
var offlineCopyButtonClasses = {
'button': true,
@@ -146,8 +161,8 @@ Clipperz.PM.UI.Components.Panels.ExtraFeaturesPanelClass = React.createClass({
Clipperz.PM.UI.Components.Button({'key':'button', 'eventName':'settingsToggleButton', 'label':"menu", 'handler':this.settingsToggleHandler})
])
]),
React.DOM.div({'key':'ulWrapper'}, [
this.props['notifications'].length ? React.DOM.div({'key':'notifications', 'className':'notifications'}, MochiKit.Base.map(MochiKit.Base.method(this, 'renderNotification'), this.props['notifications'])) : null,
React.DOM.ul({'key':'ul'}, [
React.DOM.li({'key':'account', 'className':this.state['index']['account'] ? 'open' : 'closed'}, [
React.DOM.h1({'key':'accountH1', 'onClick':this.toggleIndexState('account')}, "Account"),
@@ -256,8 +271,8 @@ Clipperz.PM.UI.Components.Panels.ExtraFeaturesPanelClass = React.createClass({
React.DOM.h1({'key':'aboutH1', 'onClick':this.toggleIndexState('about')}, "About"),
React.DOM.div({'key':'address', 'className':'address'}, [
"Clipperz Srl",
"Piazza Nuova, 10",
"48012 Bagnacavallo",
"Via Selice, 66/a",
"40026 Imola",
"Italy"
]),
React.DOM.ul({'key':'data'}, [

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

@@ -84,6 +84,7 @@ Clipperz.PM.UI.Components.SelectionsClass = React.createClass({
var selectedCardCount;
var filterType;
var filterValue;
var certificateSelector;
//console.log("SELECTIONS PROPS", this.props);
//console.log("withAttachmentCardsCount", this.props['withAttachmentCardsCount']);
@@ -95,6 +96,15 @@ Clipperz.PM.UI.Components.SelectionsClass = React.createClass({
filterType = (this.props['filter'] && this.props['filter']['type']) ? this.props['filter']['type'] : 'ALL';
filterValue = (this.props['filter'] && this.props['filter']['value']) ? this.props['filter']['value'] : null;
if (this.props['withCertificateCardsCount']) {
certificateSelector = 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'] : '-')
]);
} else {
certificateSelector = null;
}
return React.DOM.div({'key':'selections', 'id':'selections', 'className':filterType}, [
React.DOM.ul({'className':'defaultSet'}, [
React.DOM.li({'className':'allCards', 'onClick': this.selectAll}, [
@@ -105,10 +115,7 @@ 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'] : '-')
]),
certificateSelector,
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'] : '-')