Fixed OTP component to correctly handle OTP with status ‘DISABLED’
This commit is contained in:
Giulio Cesare Solaroli
parent
5d0cb4026c
commit
415720c7b7
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,6 +1,6 @@
|
||||
/*
|
||||
|
||||
Copyright 2008-2015 Clipperz Srl
|
||||
Copyright 2008-2018 Clipperz Srl
|
||||
|
||||
This file is part of Clipperz, the online password manager.
|
||||
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;
|
||||
|
||||
if (otpDetailInfo['status'] != 'ACTIVE') {
|
||||
otpStatusInfo = React.DOM.div({'className':'otpStatusInfo'}, [
|
||||
React.DOM.span({'className':'otpStatus'}, otpDetailInfo['status']),
|
||||
React.DOM.span({'className':'requestDate'}, otpDetailInfo['usageDate']),
|
||||
React.DOM.span({'className':'connectionIp'}, otpDetailInfo['connection']['ip']),
|
||||
React.DOM.span({'className':'connectionBrowser'}, otpDetailInfo['connection']['browser']),
|
||||
if (otpDetailInfo['status'] === 'USED') {
|
||||
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({'key':'connectionIp', 'className':'connectionIp'}, otpDetailInfo['connection']['ip']),
|
||||
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;
|
||||
} else {
|
||||
throw "Clipperz.PM.UI.Components.ExtraFeatures.OTP.renderOtpRows: unrecognized OTP status: " + otpDetailInfo['status'];
|
||||
}
|
||||
|
||||
if (reference == this.state.labelBeingEdited) {
|
||||
labelComponent = React.DOM.input({
|
||||
'key': 'input',
|
||||
'autoFocus':true,
|
||||
'value':this.state.otpLabel,
|
||||
'placeholder': "custom label",
|
||||
@ -211,6 +221,7 @@ Clipperz.PM.UI.Components.ExtraFeatures.OTPClass = React.createClass({
|
||||
});
|
||||
} else {
|
||||
labelComponent = React.DOM.span({
|
||||
'key': 'span',
|
||||
'onClick':MochiKit.Base.partial(this.enableOtpLabelEditing, anOTP),
|
||||
'className': Clipperz.PM.UI.Components.classNames({'customLabel':anOTP.label()})
|
||||
}, (anOTP.label()) ? anOTP.label() : defaultOtpLabel)
|
||||
@ -220,12 +231,12 @@ Clipperz.PM.UI.Components.ExtraFeatures.OTPClass = React.createClass({
|
||||
'key':'otp-' + reference,
|
||||
'className':Clipperz.PM.UI.Components.classNames(otpClasses)
|
||||
}, [
|
||||
React.DOM.div({'className':'otpAction'}, [
|
||||
React.DOM.a({'onClick':MochiKit.Base.partial(this.handleDelete, reference)}, 'remove OTP'),
|
||||
React.DOM.div({'key':'otpAction', 'className':'otpAction'}, [
|
||||
React.DOM.a({'key':'a', 'onClick':MochiKit.Base.partial(this.handleDelete, reference)}, 'remove OTP'),
|
||||
]),
|
||||
React.DOM.div({'className':'otpInfo'}, [
|
||||
React.DOM.div({'className':'otpPassword'}, anOTP.password()),
|
||||
React.DOM.div({'className':'otpLabel'}, labelComponent),
|
||||
React.DOM.div({'key':'otpInfo', 'className':'otpInfo'}, [
|
||||
React.DOM.div({'key':'otpPassword', 'className':'otpPassword'}, anOTP.password()),
|
||||
React.DOM.div({'key':'otpLabel', 'className':'otpLabel'}, labelComponent),
|
||||
otpStatusInfo,
|
||||
]),
|
||||
]);
|
||||
@ -238,20 +249,20 @@ Clipperz.PM.UI.Components.ExtraFeatures.OTPClass = React.createClass({
|
||||
},
|
||||
|
||||
render: function () {
|
||||
return React.DOM.div({'className':'extraFeature OTP'}, [
|
||||
React.DOM.div({'className':'header'}, [
|
||||
React.DOM.h1({}, "One-Time Passwords"),
|
||||
return React.DOM.div({'key':'extraFeatureOTP', 'className':'extraFeature OTP'}, [
|
||||
React.DOM.div({'key':'header', 'className':'header'}, [
|
||||
React.DOM.h1({'key':'h1'}, "One-Time Passwords"),
|
||||
]),
|
||||
React.DOM.div({'className':'content'}, [
|
||||
React.DOM.div({},[
|
||||
React.DOM.div({'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.div({'key':'content', 'className':'content'}, [
|
||||
React.DOM.div({'key': 'div'},[
|
||||
React.DOM.div({'key':'description', 'className':'description'}, [
|
||||
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.div({'className':'actions'}, [
|
||||
React.DOM.a({'onClick': this.handleNew}, "create new OTP"),
|
||||
React.DOM.ul({'key':'otpList', 'className':'otpList'}, this.renderOtpRows()),
|
||||
React.DOM.div({'key':'actions', 'className':'actions'}, [
|
||||
React.DOM.a({'key':'newButton', 'onClick': this.handleNew}, "create new OTP"),
|
||||
]),
|
||||
])
|
||||
])
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/*
|
||||
|
||||
Copyright 2008-2015 Clipperz Srl
|
||||
Copyright 2008-2018 Clipperz Srl
|
||||
|
||||
This file is part of Clipperz, the online password manager.
|
||||
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;
|
||||
|
||||
.otpPassword {
|
||||
@ -1127,7 +1127,10 @@ refer to http://www.clipperz.com.
|
||||
td, th {
|
||||
border: 1px solid #999;
|
||||
padding: 0.5rem;
|
||||
|
||||
|
||||
max-width: 100px;
|
||||
overflow-x: scroll;
|
||||
|
||||
&.PASSWORD {
|
||||
font-family: clipperz-password;
|
||||
font-size: 14.9pt;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user