#646 Update confirm password ux.

This commit is contained in:
sahal.sahal 2018-08-29 07:10:54 +08:00
parent 3e55478f4b
commit 50b7df3c45
4 changed files with 26 additions and 14 deletions

View File

@ -395,7 +395,8 @@
"setFileSyncError": "Sync error",
"setFilePass": "Master password",
"setFileConfirmPass": "Confirm Master password",
"setFilePassChanged": "your password was changed; leave the field blank to use the old password",
"setFilePassChange": "to change your password, please type in the confirm field",
"setFilePassChanged": "your password was changed; leave it blank to use the current one",
"setFilePassNotMatch": "confirmed password does not match the master password; your password will not be updated",
"setFileKeyFile": "Key file",
"setFileSelKeyFile": "Select a key file",

View File

@ -83,7 +83,6 @@ const SettingsFileView = Backbone.View.extend({
syncError: this.model.get('syncError'),
syncDate: Format.dtStr(this.model.get('syncDate')),
password: PasswordGenerator.present(this.model.get('passwordLength')),
confirmPassword: PasswordGenerator.present(this.model.get('passwordLength')),
defaultUser: this.model.get('defaultUser'),
recycleBinEnabled: this.model.get('recycleBinEnabled'),
backupEnabled: backup && backup.enabled,
@ -376,6 +375,7 @@ const SettingsFileView = Backbone.View.extend({
this.model.resetPassword();
this.$el.find('.settings__file-master-pass-warning').hide();
} else {
this.$el.find('#settings__file-confirm-master-pass-group').show();
if (!this.model.get('created')) {
this.$el.find('.settings__file-master-pass-warning').show();
}
@ -385,12 +385,20 @@ const SettingsFileView = Backbone.View.extend({
blurMasterPass: function(e) {
if (!e.target.value) {
this.model.resetPassword();
this.resetConfirmMasterPass();
e.target.value = PasswordGenerator.present(this.model.get('passwordLength'));
this.$el.find('.settings__file-master-pass-warning').hide();
}
e.target.setAttribute('type', 'password');
},
resetConfirmMasterPass: function() {
this.$el.find('#settings__file-confirm-master-pass').val('');
this.$el.find('#settings__file-confirm-master-pass-group').hide();
this.$el.find('.settings__file-confirm-master-pass-warning').hide();
this.$el.find('#settings__file-master-pass-warning-text').text(Locale.setFilePassChange);
},
focusConfirmMasterPass: function(e) {
e.target.value = '';
e.target.setAttribute('type', 'text');
@ -400,20 +408,17 @@ const SettingsFileView = Backbone.View.extend({
const masterPassword = this.$el.find('#settings__file-master-pass').val();
const confirmPassword = e.target.value;
if (confirmPassword === masterPassword) {
this.$el.find('#settings__file-master-pass-warning-text').text(Locale.setFilePassChanged);
this.model.setPassword(kdbxweb.ProtectedValue.fromString(e.target.value));
this.$el.find('.settings__file-confirm-master-pass-warning').hide();
} else {
this.$el.find('#settings__file-master-pass-warning-text').text(Locale.setFilePassChange);
this.model.resetPassword();
this.$el.find('.settings__file-confirm-master-pass-warning').show();
}
},
blurConfirmMasterPass: function(e) {
if (!e.target.value) {
this.model.resetPassword();
e.target.value = PasswordGenerator.present(this.model.get('passwordLength'));
this.$el.find('.settings__file-confirm-master-pass-warning').hide();
}
e.target.setAttribute('type', 'password');
},

View File

@ -95,6 +95,10 @@
font-family: $monospace-font-family;
}
#settings__file-confirm-master-pass-group {
display: none;
}
&__file-master-pass-warning, &__file-confirm-master-pass-warning {
font-weight: normal;
float: right;

View File

@ -47,7 +47,7 @@
<h2>{{res 'settings'}}</h2>
<label for="settings__file-master-pass" class="settings__file-master-pass-label input-base">{{res 'setFilePass'}}:
<span class="settings__file-master-pass-warning">
<i class="fa fa-warning"></i> {{res 'setFilePassChanged'}}
<i class="fa fa-warning"></i> <span id="settings__file-master-pass-warning-text">{{res 'setFilePassChange'}}</span>
</span>
</label>
<div class="hide">
@ -56,12 +56,14 @@
<input type="password" style="display:none" name="password">
</div>
<input type="password" class="settings__input input-base" id="settings__file-master-pass" value="{{password}}" autocomplete="new-password" />
<label for="settings__file-master-pass" class="settings__file-master-pass-label input-base">{{res 'setFileConfirmPass'}}:
<span class="settings__file-confirm-master-pass-warning">
<i class="fa fa-warning"></i> {{res 'setFilePassNotMatch'}}
</span>
</label>
<input type="password" class="settings__input input-base" id="settings__file-confirm-master-pass" value="{{confirmPassword}}" autocomplete="confirm-password" />
<div id="settings__file-confirm-master-pass-group">
<label for="settings__file-confirm-master-pass" class="settings__file-master-pass-label input-base">{{res 'setFileConfirmPass'}}:
<span class="settings__file-confirm-master-pass-warning">
<i class="fa fa-warning"></i> {{res 'setFilePassNotMatch'}}
</span>
</label>
<input type="password" class="settings__input input-base" id="settings__file-confirm-master-pass" autocomplete="confirm-password" />
</div>
<label for="settings__file-key-file">{{res 'setFileKeyFile'}}:</label>
<select class="settings__select settings__select-no-margin input-base" id="settings__file-key-file"></select>
<a id="settings__file-file-select-link">{{res 'setFileSelKeyFile'}}</a>