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

Implemented Marco's remarks on PIN and Preferences

Browse Source
This commit is contained in:
Dario Chiappetta 2015-10-06 15:33:42 +02:00
parent f2b85dd506
commit e21645028f
8 changed files with 137 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -119,7 +119,6 @@ http://jonibologna.com/flexbox-cheatsheet/
-ms-transform: rotate(0deg) translate(0, 0);
-o-transform: rotate(0deg) translate(0, 0);
transform: rotate(0deg) translate(0, 0); }
100% {
-webkit-transform: rotate(359deg) translate(0, 0);
-moz-transform: rotate(359deg) translate(0, 0);
@ -133,7 +132,6 @@ http://jonibologna.com/flexbox-cheatsheet/
-ms-transform: rotate(0deg) translate(0, 0);
-o-transform: rotate(0deg) translate(0, 0);
transform: rotate(0deg) translate(0, 0); }
100% {
-webkit-transform: rotate(359deg) translate(0, 0);
-moz-transform: rotate(359deg) translate(0, 0);
@ -147,7 +145,6 @@ http://jonibologna.com/flexbox-cheatsheet/
-ms-transform: rotate(0deg) translate(0, 0);
-o-transform: rotate(0deg) translate(0, 0);
transform: rotate(0deg) translate(0, 0); }
100% {
-webkit-transform: rotate(359deg) translate(0, 0);
-moz-transform: rotate(359deg) translate(0, 0);
@ -161,7 +158,6 @@ http://jonibologna.com/flexbox-cheatsheet/
-ms-transform: rotate(0deg) translate(0, 0);
-o-transform: rotate(0deg) translate(0, 0);
transform: rotate(0deg) translate(0, 0); }
100% {
-webkit-transform: rotate(359deg) translate(0, 0);
-moz-transform: rotate(359deg) translate(0, 0);
@ -480,73 +476,61 @@ div.overlay {
@-webkit-keyframes overlay-spin {
from {
opacity: 1; }
to {
opacity: 0.25; } }
@-moz-keyframes overlay-spin {
from {
opacity: 1; }
to {
opacity: 0.25; } }
@-ms-keyframes overlay-spin {
from {
opacity: 1; }
to {
opacity: 0.25; } }
@keyframes overlay-spin {
from {
opacity: 1; }
to {
opacity: 0.25; } }
@-webkit-keyframes ios-overlay-show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
@-moz-keyframes ios-overlay-show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
@-ms-keyframes ios-overlay-show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
@keyframes ios-overlay-show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
@-webkit-keyframes ios-overlay-hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
@-moz-keyframes ios-overlay-hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
@-ms-keyframes ios-overlay-hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
@keyframes ios-overlay-hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
/*
@ -2293,13 +2277,13 @@ span.count {
#extraFeaturesPanel .extraFeatureIndex footer {
font-size: 8pt;
padding: 5px 5px 5px 5px;
border-top: 1px solid #999999; }
border-top: 1px solid #999; }
#extraFeaturesPanel .extraFeatureIndex footer span {
color: #999999; }
color: #999; }
#extraFeaturesPanel .extraFeatureIndex footer span:after {
content: ":"; }
#extraFeaturesPanel .extraFeatureIndex footer a {
color: #999999;
color: #999;
text-decoration: none;
padding-left: 5px;
font-weight: bold; }
@ -2674,15 +2658,11 @@ span.count {
padding: 0 1em;
text-decoration: underline;
cursor: pointer; }
#extraFeaturesPanel .extraFeatureContent .devicePIN .pinDigit {
display: inline-block;
width: 2em;
margin-right: 0.5em;
text-align: center; }
#extraFeaturesPanel .extraFeatureContent .devicePIN .pinValue {
display: inline-block;
display: block;
width: 4em;
margin-right: 1em; }
margin-right: 1em;
margin-top: 8px; }
#extraFeaturesPanel .extraFeatureContent .devicePIN :enabled {
border: 2px solid #ff9900; }
#extraFeaturesPanel .extraFeatureContent .devicePIN .content {
@ -3101,7 +3081,7 @@ div.cardList ul {
padding-right: 0px;
box-shadow: -4px 0px 3px -1px rgba(0, 0, 0, 0.2); }
div.cardList ul li.archived {
background-color: #eeeeee;
background-color: #eee;
color: #999; }
div.cardList ul li .favicon {
width: 48px;
@ -3188,7 +3168,7 @@ div.cardList.narrow {
content: ""; }
#cardDetailPage .view.archived, .cardDetail .view.archived {
background-color: #eeeeee; }
background-color: #eee; }
#cardDetailPage .view .cardDetailToolbar, .cardDetail .view .cardDetailToolbar {
background-color: #1863a1;
color: white; }
@ -3433,7 +3413,7 @@ div.cardList.narrow {
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
background: repeating-linear-gradient(0deg, white, white 2px, #dddddd 2px, #dddddd 3px);
background: repeating-linear-gradient(0deg, white, white 2px, #ddd 2px, #ddd 3px);
width: 28px;
height: 20px;
margin-left: 6px;
@ -3659,7 +3639,7 @@ div.cardList.narrow {
min-width: 220px;
width: 80%;
max-width: 400px;
background-color: #333333;
background-color: #333;
color: #fff;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
@ -3674,7 +3654,7 @@ div.cardList.narrow {
margin-left: 0px;
width: 0;
height: 0;
border-top: 5px solid #333333;
border-top: 5px solid #333;
border-left: 5px solid transparent;
border-right: 5px solid transparent; }
.passwordGenerator .passwordGeneratorBaloon form span {

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

File diff suppressed because one or more lines are too long

22
frontend/delta/js/Clipperz/PM/DataModel/User.Header.Preferences.js
View File

@ -40,19 +40,27 @@ Clipperz.Base.extend(Clipperz.PM.DataModel.User.Header.Preferences, Clipperz.PM.
},
//-------------------------------------------------------------------------
'mergeDefaultPreferences': function(somePreferences) {
'mergePreferences': function(somePreferences, someOtherPreferences) {
var result;
result = new Clipperz.KeyValueObjectStore();
result.setValues(MochiKit.Base.updatetree(
Clipperz.Base.deepClone(Clipperz.PM.DataModel.User.Header.Preferences.defaultPreferences),
Clipperz.Base.deepClone(someOtherPreferences),
somePreferences
));
return result;
},
'mergeDefaultPreferences': function(somePreferences) {
return this.mergePreferences(somePreferences, Clipperz.PM.DataModel.User.Header.Preferences.defaultPreferences);
},
'mergeUserPreferences': function(somePreferences) {
return this.mergePreferences(somePreferences, this._objectDataStore.values());
},
'getPreferences': function() {
return Clipperz.Async.callbacks("User.Header.Preferences.getPreferences", [
@ -68,6 +76,14 @@ Clipperz.Base.extend(Clipperz.PM.DataModel.User.Header.Preferences, Clipperz.PM.
], {trace:false});
},
'setPreferences': function(anObject) {
return Clipperz.Async.callbacks("User.Header.Preferences.setPreferences", [
MochiKit.Base.method(this, 'mergeUserPreferences', anObject),
MochiKit.Base.methodcaller('values'),
MochiKit.Base.method(this, 'setValues')
], {trace:false});
},
//=========================================================================
__syntaxFix__: "syntax fix"
});

6
frontend/delta/js/Clipperz/PM/DataModel/User.js
View File

@ -929,10 +929,10 @@ console.log("Warning: User.recordWithLabel('" + aLabel + "') is returning more t
], {trace:false});
},
'setPreference': function(aKey, aValue) {
return Clipperz.Async.callbacks("User.setPreference", [
setPreferences: function(anObject) {
return Clipperz.Async.callbacks("User.setPreferences", [
MochiKit.Base.method(this, 'getHeaderIndex', 'preferences'),
MochiKit.Base.methodcaller('setValue', aKey, aValue),
MochiKit.Base.methodcaller('setPreferences', anObject),
MochiKit.Base.method(this, 'saveChanges')
], {trace:false});
},

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

@ -38,124 +38,47 @@ Clipperz.PM.UI.Components.ExtraFeatures.DevicePINClass = React.createClass({
}
},
_editModeLocked: false,
//=========================================================================
enterEditMode: function() {
this.setState({
'isEditing': true,
'pinValue': ''
});
},
exitEditMode: function() {
this.setState({
'isEditing': false,
});
},
lockEditMode: function() {
this._editModeLocked = true;
},
unlockEditMode: function() {
this._editModeLocked = false;
},
handleFocus: function(anEvent) {
anEvent.preventDefault();
this.refs['pinValue'].getDOMNode().focus();
},
handleBlur: function(anEvent) {
if (! this._editModeLocked) {
if (anEvent.target.value.length < this.props['PIN'].DEFAULT_PIN_LENGTH) {
this.exitEditMode();
}
}
},
handleKeyDown: function(anEvent) {
if (anEvent.keyCode == 27) {
this.refs['pinValue'].getDOMNode().blur();
}
},
handleChange: function(anEvent) {
if (anEvent.target.value.length == this.props['PIN'].DEFAULT_PIN_LENGTH) {
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'updatePIN', anEvent.target.value);
this.refs['pinValue'].getDOMNode().blur();
this.exitEditMode();
} else {
if (anEvent.target.value.length <= this.props['PIN'].DEFAULT_PIN_LENGTH) {
this.setState({
'pinValue': anEvent.target.value
});
}
},
handleCheckboxChange: function(anEvent) {
if (this.props['PIN'].isSet() || this.state['isEditing']) {
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'disablePIN', anEvent.target.value);
this.exitEditMode();
} else {
this.enterEditMode();
}
setFocus: function() {
this.refs['pinValue'].getDOMNode().focus();
},
handleResetPIN: function() {
this.enterEditMode();
resetPIN: function() {
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'disablePIN');
MochiKit.Async.callLater(0.1, MochiKit.Base.method(this, 'setState', this.getInitialState()));
MochiKit.Async.callLater(0.1, MochiKit.Base.method(this, 'setFocus'));
},
savePIN: function() {
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'updatePIN', this.state.pinValue);
MochiKit.Async.callLater(0.1, MochiKit.Base.method(this, 'setState', this.getInitialState()));
},
//=========================================================================
// renderDigitInputs: function() {
// var i;
// var result;
renderButton: function() {
var isButtonEnabled = (this.props['PIN'].isSet() || this.state['pinValue'].length == this.props['PIN'].DEFAULT_PIN_LENGTH);
var buttonText = this.props['PIN'].isSet() ? "Reset" : "Save";
var buttonOnClick = (this.props['PIN'].isSet()) ? this.resetPIN : this.savePIN;
// result = [];
// for (i = 0; i<this.props['PIN'].DEFAULT_PIN_LENGTH; i++) {
// var boxIsFull = (this.state['isEditing']&&this.state['pinValue'][i])
// ||
// (!this.state['isEditing']&&this.props['PIN'].isSet())
// result.push(React.DOM.input({
// 'key': 'pin-digit-'+i,
// 'ref': 'pin-digit-'+i,
// 'name': 'pin-digit-'+i,
// 'className': 'pinDigit',
// 'readOnly': true,
// 'type': 'text',
// 'value': boxIsFull ? '*' : '',
// 'min': 0,
// 'max': 9,
// 'disabled': !this.state['isEditing'],
// 'onFocus': this.handleFocus,
// }));
// }
// return result;
// },
//-------------------------------------------------------------------------
componentDidUpdate: function() {
if (this.state['isEditing']) {
this.refs['pinValue'].getDOMNode().focus();
}
return React.DOM.a({
'className': 'button' + ((isButtonEnabled) ? '' : ' disabled'),
'onClick': (isButtonEnabled) ? buttonOnClick : null,
}, buttonText);
},
render: function () {
var displayedPin;
var isFormEnabled = (this.props['PIN'].isSet() || this.state.isEditing);
var isResetButtonEnabled = (! this.state['isEditing'] && this.props['PIN'].isSet());
if (this.state.isEditing) {
displayedPin = this.state['pinValue'];
} else {
displayedPin = (this.props['PIN'].isSet()) ? '*****' : '';
}
var isInputEnabled = ! this.props['PIN'].isSet();
var displayedPin = (this.props['PIN'].isSet()) ? '*****' : this.state.pinValue;
return React.DOM.div({className:'extraFeature devicePIN'}, [
React.DOM.div({'className':'header'}, [
@ -169,41 +92,19 @@ Clipperz.PM.UI.Components.ExtraFeatures.DevicePINClass = React.createClass({
]),
]),
React.DOM.div({'className': 'content'}, [
React.DOM.p({}, "PIN is "+((this.props['PIN'].isSet()) ? '' : 'not ')+"set on this device"),
React.DOM.form({},[
React.DOM.p({}, [
React.DOM.input({
'type': 'checkbox',
'key': 'pinEnabled',
'checked': isFormEnabled,
'onChange': this.handleCheckboxChange,
'onMouseDown': this.lockEditMode,
'onMouseUp': this.unlockEditMode,
}),
React.DOM.label({
'key': 'pinEnabledLabel',
'htmlFor': 'pinEnabled',
'onClick': this.handleCheckboxChange,
'onMouseDown': this.lockEditMode,
'onMouseUp': this.unlockEditMode,
}, "Enable PIN on your device")
]),
// this.renderDigitInputs(),
React.DOM.input({
'type': 'tel',
'key': 'pinValue',
'ref': 'pinValue',
'className': 'pinValue',
'disabled': !this.state['isEditing'],
'onKeyDown': this.handleKeyDown,
'disabled': ! isInputEnabled,
'onChange': this.handleChange,
'onBlur': this.handleBlur,
'value': displayedPin,
// 'style': {'position': 'fixed', 'top': -1000}
}),
React.DOM.a({
'className': 'button'+(isResetButtonEnabled ? '' : ' disabled'),
'onClick': (isResetButtonEnabled) ? this.handleResetPIN : null
}, "Reset PIN"),
this.renderButton(),
])
])
]);

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

@ -26,69 +26,88 @@ Clipperz.Base.module('Clipperz.PM.UI.Components.ExtraFeatures');
Clipperz.PM.UI.Components.ExtraFeatures.PreferencesClass = React.createClass({
getInitialState: function() {
return {
'editedPreferences': new Clipperz.KeyValueObjectStore()
}
},
propTypes: {
},
//============================================================================
preference: function (aKeyPath) {
return this.props['preferences'].getValue(aKeyPath);
return (this.state['editedPreferences'].getValue(aKeyPath)!=null) ? this.state['editedPreferences'].getValue(aKeyPath) : this.props['preferences'].getValue(aKeyPath);
},
setPreference: function (aKeyPath) {
return function (anEvent) {
var value;
var target;
target = anEvent.target;
if (target.type == 'checkbox') {
value = target.checked;
target.defaultChecked = value;
// } else if (target.type == 'text') {
// value = target.value;
// target.defaultValue = value;
} else if (target.type == 'select-one') {
value = target.value;
target.defaultValue = value;
}
removeEditedPreference: function(aKeyPath) {
var newEditedPreferences;
var parentKeyPath;
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'setPreference', aKeyPath, value);
parentKeyPath = aKeyPath.split('.');
parentKeyPath.pop();
parentKeyPath = parentKeyPath.join('.');
newEditedPreferences = this.state['editedPreferences'];
newEditedPreferences.removeValue(aKeyPath);
if (parentKeyPath.length > 0 && MochiKit.Base.keys(newEditedPreferences.getValue(parentKeyPath)).length == 0) {
this.removeEditedPreference(parentKeyPath);
}
this.setState({
'editedPreferences': newEditedPreferences,
});
},
//============================================================================
checkboxClick: function (aRef) {
return MochiKit.Base.bind(function (anEvent) {
//console.log("CHECKBOX CLICK", this, this.refs, this.refs[aRef]);
// console.log("CHECKBOX CLICK", this, this.refs, this.refs[aRef]);
this.refs[aRef].getDOMNode().click();
}, this);
},
//----------------------------------------------------------------------------
handleKeyDown: function (aKeyPath) {
return MochiKit.Base.bind(function (anEvent) {
var value = anEvent.target.value;
handleChange: function(aKeyPath, aValuePattern) {
return MochiKit.Base.method(this, 'handleEditEvent', aKeyPath, aValuePattern);
},
// console.log("HANDLE KEY DOWN", anEvent, anEvent.keyCode, value);
if (anEvent.target.defaultValue != value) {
switch (anEvent.keyCode) {
case 9: // tab
case 13: // enter - TODO: edit next preference
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'setPreference', aKeyPath, value);
anEvent.target.defaultValue = anEvent.target.value;
break;
case 27: // escape
// console.log("ESCAPE");
anEvent.target.value = anEvent.target.defaultValue;
break;
}
handleEditEvent: function(aKeyPath, aValuePattern, anEvent) {
var newEditedPreferences;
var target = anEvent.target;
var value = (target.type == 'checkbox') ? target.checked : target.value;
if (!aValuePattern || aValuePattern.test(value)) {
if (value == this.props['preferences'].getValue(aKeyPath)) {
this.removeEditedPreference(aKeyPath);
} else {
newEditedPreferences = this.state['editedPreferences'];
newEditedPreferences.setValue(aKeyPath, value);
this.setState({
'editedPreferences': newEditedPreferences,
});
}
}, this);
}
},
handleSave: function() {
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'setPreferences', this.state['editedPreferences'].values());
MochiKit.Async.callLater(0.1, MochiKit.Base.method(this, 'setState', this.getInitialState()));
},
//============================================================================
isSaveButtonEnabled: function() {
return MochiKit.Base.keys(this.state['editedPreferences'].values()).length != 0;
},
//----------------------------------------------------------------------------
render: function () {
var result;
@ -108,7 +127,7 @@ Clipperz.PM.UI.Components.ExtraFeatures.PreferencesClass = React.createClass({
React.DOM.h3({'key':'1'}, "Lock"),
React.DOM.div({'key':'2', 'className':'row two lockEnabled'}, [
React.DOM.div({'className':'col one'}, [
React.DOM.input({'type':'checkbox', 'defaultChecked':this.preference('lock.enabled'), 'onChange':this.setPreference('lock.enabled'), 'ref':'lock-enabled'}),
React.DOM.input({'type':'checkbox', 'checked':this.preference('lock.enabled'), 'onClick':this.handleChange('lock.enabled'), 'ref':'lock-enabled'}),
]),
React.DOM.div({'className':'col two'}, [
React.DOM.span({'className':'clickable', 'onClick':this.checkboxClick('lock-enabled')}, "Enable auto-lock"),
@ -117,7 +136,7 @@ Clipperz.PM.UI.Components.ExtraFeatures.PreferencesClass = React.createClass({
React.DOM.div({'key':'3', 'className':'row one lockTimeout'}, [
React.DOM.p({'className':(this.preference('lock.enabled') ? 'enabled' : 'disabled')}, [
React.DOM.span({}, "Lock timeout"),
React.DOM.input({'type':'text', 'defaultValue':this.preference('lock.timeoutInMinutes'), 'onKeyDown':this.handleKeyDown('lock.timeoutInMinutes')}),
React.DOM.input({'type':'text', 'value':this.preference('lock.timeoutInMinutes'), 'onChange':this.handleChange('lock.timeoutInMinutes', /^[1-9][0-9]*$/)}),
React.DOM.span({'className':'timeUnit'}, "minutes"),
])
]),
@ -128,22 +147,22 @@ Clipperz.PM.UI.Components.ExtraFeatures.PreferencesClass = React.createClass({
React.DOM.div({'key':'2', 'className':'row one passwordLength'}, [
React.DOM.p({}, [
React.DOM.span({}, "Password length"),
React.DOM.input({'type':'text', 'defaultValue':this.preference('passwordGenerator.length'), 'onKeyDown':this.handleKeyDown('passwordGenerator.length')}),
React.DOM.input({'type':'text', 'value':this.preference('passwordGenerator.length'), 'onChange':this.handleChange('passwordGenerator.length', /^[1-9][0-9]*$/)}),
React.DOM.span({'className':'sizeUnit'}, "characters"),
])
]),
React.DOM.div({'key':'3', 'className':'row one passwordCharSets'}, [
React.DOM.p({'key':'label'}, "Characters"),
React.DOM.ul({'key':'list'}, [
React.DOM.li({'key':'A-Z'}, [ React.DOM.span({'className':'clickable', 'onClick':this.checkboxClick('A-Z')}, "A-Z"), React.DOM.input({'type':'checkbox', 'defaultChecked':this.preference('passwordGenerator.characters.A-Z'), 'onChange':this.setPreference('passwordGenerator.characters.A-Z'), 'ref':'A-Z'}) ]),
React.DOM.li({'key':'a-z'}, [ React.DOM.span({'className':'clickable', 'onClick':this.checkboxClick('a-z')}, "a-z"), React.DOM.input({'type':'checkbox', 'defaultChecked':this.preference('passwordGenerator.characters.a-z'), 'onChange':this.setPreference('passwordGenerator.characters.a-z'), 'ref':'a-z'}) ]),
React.DOM.li({'key':'0-9'}, [ React.DOM.span({'className':'clickable', 'onClick':this.checkboxClick('0-9')}, "0-9"), React.DOM.input({'type':'checkbox', 'defaultChecked':this.preference('passwordGenerator.characters.0-9'), 'onChange':this.setPreference('passwordGenerator.characters.0-9'), 'ref':'0-9'}) ]),
React.DOM.li({'key':'space'}, [ React.DOM.span({'className':'clickable', 'onClick':this.checkboxClick('space')}, "space"), React.DOM.input({'type':'checkbox', 'defaultChecked':this.preference('passwordGenerator.characters.space'), 'onChange':this.setPreference('passwordGenerator.characters.space'), 'ref':'space'}) ]),
React.DOM.li({'key':'!#?'}, [ React.DOM.span({'className':'clickable', 'onClick':this.checkboxClick('!#?')}, "!#?"), React.DOM.input({'type':'checkbox', 'defaultChecked':this.preference('passwordGenerator.characters.!#?'), 'onChange':this.setPreference('passwordGenerator.characters.!#?'), 'ref':'!#?'}) ]),
React.DOM.li({'key':'A-Z'}, [ React.DOM.span({'className':'clickable', 'onClick':this.checkboxClick('A-Z')}, "A-Z"), React.DOM.input({'type':'checkbox', 'checked':this.preference('passwordGenerator.characters.A-Z'), 'onChange':this.handleChange('passwordGenerator.characters.A-Z'), 'ref':'A-Z'}) ]),
React.DOM.li({'key':'a-z'}, [ React.DOM.span({'className':'clickable', 'onClick':this.checkboxClick('a-z')}, "a-z"), React.DOM.input({'type':'checkbox', 'checked':this.preference('passwordGenerator.characters.a-z'), 'onChange':this.handleChange('passwordGenerator.characters.a-z'), 'ref':'a-z'}) ]),
React.DOM.li({'key':'0-9'}, [ React.DOM.span({'className':'clickable', 'onClick':this.checkboxClick('0-9')}, "0-9"), React.DOM.input({'type':'checkbox', 'checked':this.preference('passwordGenerator.characters.0-9'), 'onChange':this.handleChange('passwordGenerator.characters.0-9'), 'ref':'0-9'}) ]),
React.DOM.li({'key':'space'}, [ React.DOM.span({'className':'clickable', 'onClick':this.checkboxClick('space')}, "space"), React.DOM.input({'type':'checkbox', 'checked':this.preference('passwordGenerator.characters.space'), 'onChange':this.handleChange('passwordGenerator.characters.space'), 'ref':'space'}) ]),
React.DOM.li({'key':'!#?'}, [ React.DOM.span({'className':'clickable', 'onClick':this.checkboxClick('!#?')}, "!#?"), React.DOM.input({'type':'checkbox', 'checked':this.preference('passwordGenerator.characters.!#?'), 'onChange':this.handleChange('passwordGenerator.characters.!#?'), 'ref':'!#?'}) ]),
]),
// React.DOM.p({}, [
// React.DOM.span({}, "Charset"),
// React.DOM.input({'type':'text', 'defaultValue':this.preference('passwordGenerator.charset'), 'onKeyDown':this.handleKeyDown('passwordGenerator.charset')}),
// React.DOM.input({'type':'text', 'value':this.preference('passwordGenerator.charset'), 'onKeyDown':this.handleKeyDown('passwordGenerator.charset')}),
// ]),
]),
]),
@ -151,7 +170,7 @@ Clipperz.PM.UI.Components.ExtraFeatures.PreferencesClass = React.createClass({
React.DOM.li({'key': 'language'}, [
React.DOM.h3({'key':'1'}, "Language"),
React.DOM.div({'key':'2', 'className':'row one language'}, [
React.DOM.select({'defaultValue':this.preference('preferredLanguage'), 'onChange':this.setPreference('preferredLanguage')}, [
React.DOM.select({'value':this.preference('preferredLanguage'), 'onChange':this.handleChange('preferredLanguage')}, [
React.DOM.option({'value':'en'}, "English"),
React.DOM.option({'value':'fr'}, "Français"),
React.DOM.option({'value':'it'}, "Italiano"),
@ -163,7 +182,7 @@ Clipperz.PM.UI.Components.ExtraFeatures.PreferencesClass = React.createClass({
React.DOM.h3({'key':'1'}, "Donation reminder"),
React.DOM.div({'key':'2', 'className':'row two donationReminder'}, [
React.DOM.div({'className':'col one'}, [
React.DOM.input({'type':'checkbox', 'defaultChecked':this.preference('shouldShowDonationPanel'), 'onChange':this.setPreference('shouldShowDonationPanel'), 'ref':'shouldShowDonationPanel'}),
React.DOM.input({'type':'checkbox', 'checked':this.preference('shouldShowDonationPanel'), 'onChange':this.handleChange('shouldShowDonationPanel'), 'ref':'shouldShowDonationPanel'}),
]),
React.DOM.div({'className':'col two'}, [
React.DOM.span({'className':'clickable', 'onClick':this.checkboxClick('shouldShowDonationPanel')}, "Show donation reminder"),
@ -172,6 +191,10 @@ Clipperz.PM.UI.Components.ExtraFeatures.PreferencesClass = React.createClass({
]),
*/
]),
React.DOM.a({
'className': 'button'+((this.isSaveButtonEnabled()) ? '' : ' disabled'),
'onClick': (this.isSaveButtonEnabled()) ? this.handleSave : null,
}, "Save Preferences"),
])
]);
}

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

@ -70,7 +70,7 @@ Clipperz.PM.UI.MainController = function() {
'enableLock', 'disableLock', 'unlock',
'updatePIN', 'disablePIN', 'forcePassphraseLogin', 'forcePassphraseUnlock',
'changePassphrase', 'deleteAccount',
/*'updateUserPreferences',*/ 'setPreference',
/*'updateUserPreferences',*/ 'setPreferences',
'updateOTPListAndDetails', 'createNewOTP', 'deleteOTPs', 'changeOTPLabel',
'importCards',
'downloadExport',
@ -1566,10 +1566,10 @@ Clipperz.log("THE BROWSER IS OFFLINE");
], {trace:false});
},
setPreference_handler: function(aKeyPath, aValue) {
return Clipperz.Async.callbacks("MainController.setPreference_handler", [
setPreferences_handler: function(anObject) {
return Clipperz.Async.callbacks("MainController.setPreferences_handler", [
MochiKit.Base.method(this.overlay(), 'show', "", true),
MochiKit.Base.method(this.user(), 'setPreference', aKeyPath, aValue),
MochiKit.Base.method(this.user(), 'setPreferences', anObject),
MochiKit.Base.method(this, 'updateUserPreferences'),
MochiKit.Base.method(this, 'refreshCurrentPage'),
MochiKit.Base.method(this.overlay(), 'done', "", 0.5),

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

@ -711,17 +711,11 @@ refer to http://www.clipperz.com.
}
.devicePIN {
.pinDigit {
display: inline-block;
width: 2em;
margin-right: 0.5em;
text-align: center;
}
.pinValue {
display: inline-block;
display: block;
width: 4em;
margin-right: 1em;
margin-top:8px;
}
:enabled {