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

Fixed OTP component to correctly handle OTP with status ‘DISABLED’

Browse Source
This commit is contained in:
Giulio Cesare Solaroli 2018-11-25 17:33:06 +01:00
parent 5d0cb4026c
commit 415720c7b7
4 changed files with 4805 additions and 1051 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5402
frontend/delta/css/clipperz.css
View File

File diff suppressed because one or more lines are too long

2
frontend/delta/css/clipperz.css.map
View File

File diff suppressed because one or more lines are too long

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

@ -1,6 +1,6 @@
/* /*
Copyright 2008-2015 Clipperz Srl Copyright 2008-2018 Clipperz Srl
This file is part of Clipperz, the online password manager. This file is part of Clipperz, the online password manager.
For further information about its features and functionalities please For further information about its features and functionalities please
@ -36,8 +36,8 @@ Clipperz.PM.UI.Components.ExtraFeatures.OTPClass = React.createClass({
}; };
}, },
propTypes: { // propTypes: {
}, // },
//========================================================================= //=========================================================================
@ -190,19 +190,29 @@ Clipperz.PM.UI.Components.ExtraFeatures.OTPClass = React.createClass({
}; };
otpClasses[otpDetailInfo['status']] = true; otpClasses[otpDetailInfo['status']] = true;
if (otpDetailInfo['status'] != 'ACTIVE') { if (otpDetailInfo['status'] === 'USED') {
otpStatusInfo = React.DOM.div({'className':'otpStatusInfo'}, [ otpStatusInfo = React.DOM.div({'key':'otpStatusInfo', 'className':'otpStatusInfo'}, [
React.DOM.span({'className':'otpStatus'}, otpDetailInfo['status']), React.DOM.span({'key':'otpStatus', 'className':'otpStatus'}, otpDetailInfo['status']),
React.DOM.span({'className':'requestDate'}, otpDetailInfo['usageDate']), React.DOM.span({'key':'requestDate', 'className':'requestDate'}, otpDetailInfo['usageDate']),
React.DOM.span({'className':'connectionIp'}, otpDetailInfo['connection']['ip']), React.DOM.span({'key':'connectionIp', 'className':'connectionIp'}, otpDetailInfo['connection']['ip']),
React.DOM.span({'className':'connectionBrowser'}, otpDetailInfo['connection']['browser']), React.DOM.span({'key':'connectionBrowser', 'className':'connectionBrowser'}, otpDetailInfo['connection']['browser']),
]) ])
} else { } else if (otpDetailInfo['status'] === 'DISABLED') {
otpStatusInfo = React.DOM.div({'key':'otpStatusInfo', 'className':'otpStatusInfo'}, [
React.DOM.span({'key':'otpStatus', 'className':'otpStatus'}, otpDetailInfo['status']),
React.DOM.span({'key':'requestDate', 'className':'requestDate'}, otpDetailInfo['usageDate']),
// React.DOM.span({'className':'connectionIp'}, otpDetailInfo['connection']['ip']),
// React.DOM.span({'className':'connectionBrowser'}, otpDetailInfo['connection']['browser']),
])
} else if (otpDetailInfo['status'] === 'ACTIVE') {
otpStatusInfo = null; otpStatusInfo = null;
} else {
throw "Clipperz.PM.UI.Components.ExtraFeatures.OTP.renderOtpRows: unrecognized OTP status: " + otpDetailInfo['status'];
} }
if (reference == this.state.labelBeingEdited) { if (reference == this.state.labelBeingEdited) {
labelComponent = React.DOM.input({ labelComponent = React.DOM.input({
'key': 'input',
'autoFocus':true, 'autoFocus':true,
'value':this.state.otpLabel, 'value':this.state.otpLabel,
'placeholder': "custom label", 'placeholder': "custom label",
@ -211,6 +221,7 @@ Clipperz.PM.UI.Components.ExtraFeatures.OTPClass = React.createClass({
}); });
} else { } else {
labelComponent = React.DOM.span({ labelComponent = React.DOM.span({
'key': 'span',
'onClick':MochiKit.Base.partial(this.enableOtpLabelEditing, anOTP), 'onClick':MochiKit.Base.partial(this.enableOtpLabelEditing, anOTP),
'className': Clipperz.PM.UI.Components.classNames({'customLabel':anOTP.label()}) 'className': Clipperz.PM.UI.Components.classNames({'customLabel':anOTP.label()})
}, (anOTP.label()) ? anOTP.label() : defaultOtpLabel) }, (anOTP.label()) ? anOTP.label() : defaultOtpLabel)
@ -220,12 +231,12 @@ Clipperz.PM.UI.Components.ExtraFeatures.OTPClass = React.createClass({
'key':'otp-' + reference, 'key':'otp-' + reference,
'className':Clipperz.PM.UI.Components.classNames(otpClasses) 'className':Clipperz.PM.UI.Components.classNames(otpClasses)
}, [ }, [
React.DOM.div({'className':'otpAction'}, [ React.DOM.div({'key':'otpAction', 'className':'otpAction'}, [
React.DOM.a({'onClick':MochiKit.Base.partial(this.handleDelete, reference)}, 'remove OTP'), React.DOM.a({'key':'a', 'onClick':MochiKit.Base.partial(this.handleDelete, reference)}, 'remove OTP'),
]), ]),
React.DOM.div({'className':'otpInfo'}, [ React.DOM.div({'key':'otpInfo', 'className':'otpInfo'}, [
React.DOM.div({'className':'otpPassword'}, anOTP.password()), React.DOM.div({'key':'otpPassword', 'className':'otpPassword'}, anOTP.password()),
React.DOM.div({'className':'otpLabel'}, labelComponent), React.DOM.div({'key':'otpLabel', 'className':'otpLabel'}, labelComponent),
otpStatusInfo, otpStatusInfo,
]), ]),
]); ]);
@ -238,20 +249,20 @@ Clipperz.PM.UI.Components.ExtraFeatures.OTPClass = React.createClass({
}, },
render: function () { render: function () {
return React.DOM.div({'className':'extraFeature OTP'}, [ return React.DOM.div({'key':'extraFeatureOTP', 'className':'extraFeature OTP'}, [
React.DOM.div({'className':'header'}, [ React.DOM.div({'key':'header', 'className':'header'}, [
React.DOM.h1({}, "One-Time Passwords"), React.DOM.h1({'key':'h1'}, "One-Time Passwords"),
]), ]),
React.DOM.div({'className':'content'}, [ React.DOM.div({'key':'content', 'className':'content'}, [
React.DOM.div({},[ React.DOM.div({'key': 'div'},[
React.DOM.div({'className':'description'}, [ React.DOM.div({'key':'description', 'className':'description'}, [
React.DOM.p({}, "A one-time password works like your regular passphrase, but it can be used only once. Strongly recommended when accessing your Clipperz account from unsecure devices where keyloggers may be installed."), React.DOM.p({'key': 'p'}, "A one-time password works like your regular passphrase, but it can be used only once. Strongly recommended when accessing your Clipperz account from unsecure devices where keyloggers may be installed."),
]), ]),
React.DOM.a({'className':'button', 'onClick':this.handlePrint}, "Print"), React.DOM.a({'key':'button', 'className':'button', 'onClick':this.handlePrint}, "Print"),
React.DOM.ul({'className':'otpList'}, this.renderOtpRows()), React.DOM.ul({'key':'otpList', 'className':'otpList'}, this.renderOtpRows()),
React.DOM.div({'className':'actions'}, [ React.DOM.div({'key':'actions', 'className':'actions'}, [
React.DOM.a({'onClick': this.handleNew}, "create new OTP"), React.DOM.a({'key':'newButton', 'onClick': this.handleNew}, "create new OTP"),
]), ]),
]) ])
]) ])

7
frontend/delta/scss/style/settingsPanel.scss
View File

@ -1,6 +1,6 @@
/* /*
Copyright 2008-2015 Clipperz Srl Copyright 2008-2018 Clipperz Srl
This file is part of Clipperz, the online password manager. This file is part of Clipperz, the online password manager.
For further information about its features and functionalities please For further information about its features and functionalities please
@ -823,7 +823,7 @@ refer to http://www.clipperz.com.
} }
} }
&.REQUESTED, &.USED { &.REQUESTED, &.USED, &.DISABLED {
background-color: #222; background-color: #222;
.otpPassword { .otpPassword {
@ -1128,6 +1128,9 @@ refer to http://www.clipperz.com.
border: 1px solid #999; border: 1px solid #999;
padding: 0.5rem; padding: 0.5rem;
max-width: 100px;
overflow-x: scroll;
&.PASSWORD { &.PASSWORD {
font-family: clipperz-password; font-family: clipperz-password;
font-size: 14.9pt; font-size: 14.9pt;