protected fields refactoring

app/scripts/comp/secure-input.js

@@ -1,5 +1,7 @@
 'use strict';
 
+var kdbxweb = require('kdbxweb');
+
 var SecureInput = function() {
     this.el = null;
     this.minChar = 0x1400 + Math.round(Math.random() * 100);
@@ -73,7 +75,22 @@ SecureInput.prototype._isSpecialChar = function(ch) {
 Object.defineProperty(SecureInput.prototype, 'value', {
     enumerable: true,
     get: function() {
-        return { value: this.pseudoValue, salt: this.salt };
+        var pseudoValue = this.pseudoValue,
+            salt = this.salt,
+            len = pseudoValue.length,
+            byteLength = 0,
+            valueBytes = new Uint8Array(len * 4),
+            saltBytes = kdbxweb.Random.getBytes(len * 4),
+            ch, bytes;
+        for (var i = 0; i < len; i++) {
+            ch = String.fromCharCode(pseudoValue.charCodeAt(i) ^ salt[i]);
+            bytes = kdbxweb.ByteUtils.stringToBytes(ch);
+            for (var j = 0; j < bytes.length; j++) {
+                valueBytes[byteLength] = bytes[j] ^ saltBytes[byteLength];
+                byteLength++;
+            }
+        }
+        return new kdbxweb.ProtectedValue(valueBytes.buffer.slice(0, byteLength), saltBytes.buffer.slice(0, byteLength));
     }
 });
 

app/scripts/models/file-model.js

@@ -45,7 +45,6 @@ var FileModel = Backbone.Model.extend({
 
     open: function(password, fileData, keyFileData, callback) {
         try {
-            password = this.convertPassword(password);
             var credentials = new kdbxweb.Credentials(password, keyFileData);
             var ts = logger.ts();
             kdbxweb.Kdbx.load(fileData, credentials, (function(db, err) {
@@ -70,23 +69,6 @@ var FileModel = Backbone.Model.extend({
         }
     },
 
-    convertPassword: function(password) {
-        var len = password.value.length,
-            byteLength = 0,
-            value = new Uint8Array(len * 4),
-            salt = kdbxweb.Random.getBytes(len * 4),
-            ch, bytes;
-        for (var i = 0; i < len; i++) {
-            ch = String.fromCharCode(password.value.charCodeAt(i) ^ password.salt[i]);
-            bytes = kdbxweb.ByteUtils.stringToBytes(ch);
-            for (var j = 0; j < bytes.length; j++) {
-                value[byteLength] = bytes[j] ^ salt[byteLength];
-                byteLength++;
-            }
-        }
-        return new kdbxweb.ProtectedValue(value.buffer.slice(0, byteLength), salt.buffer.slice(0, byteLength));
-    },
-
     create: function(name) {
         var password = kdbxweb.ProtectedValue.fromString('');
         var credentials = new kdbxweb.Credentials(password);
@@ -171,7 +153,6 @@ var FileModel = Backbone.Model.extend({
         if (remoteKey) {
             credentials = new kdbxweb.Credentials(kdbxweb.ProtectedValue.fromString(''));
             if (remoteKey.password) {
-                remoteKey.password = this.convertPassword(remoteKey.password);
                 credentials.setPassword(remoteKey.password);
             } else {
                 credentials.passwordHash = this.db.credentials.passwordHash;

app/scripts/views/fields/field-view-custom.js

@@ -26,8 +26,8 @@ var FieldViewCustom = FieldViewText.extend({
         if (this.isProtected === undefined) {
             this.isProtected = this.value instanceof kdbxweb.ProtectedValue;
         }
-        this.protectBtn = $('<div/>').addClass('details__field-value-btn details__field-value-btn-protect')
-            .toggleClass('details__field-value-btn-protect--protected', this.isProtected)
+        this.$el.toggleClass('details__field--protected', this.isProtected);
+        $('<div/>').addClass('details__field-value-btn details__field-value-btn-protect')
             .appendTo(this.valueEl)
             .mousedown(this.protectBtnClick.bind(this));
     },
@@ -144,7 +144,7 @@ var FieldViewCustom = FieldViewText.extend({
     protectBtnClick: function(e) {
         e.stopPropagation();
         this.isProtected = !this.isProtected;
-        this.protectBtn.toggleClass('details__field-value-btn-protect--protected', this.isProtected);
+        this.$el.toggleClass('details__field--protected', this.isProtected);
         if (this.labelInput) {
             this.endEditTitle(this.labelInput.val());
         }

app/scripts/views/fields/field-view-text.js

@@ -20,6 +20,8 @@ var FieldViewText = FieldView.extend({
 
     startEdit: function() {
         var text = this.getEditValue(this.value);
+        var isProtected = !!(this.value && this.value.isProtected);
+        this.$el.toggleClass('details__field--protected', isProtected);
         this.input = $(document.createElement(this.model.multiline ? 'textarea' : 'input'));
         this.valueEl.html('').append(this.input);
         this.input.attr({ autocomplete: 'off', spellcheck: 'false' })

app/styles/areas/_details.scss

@@ -224,6 +224,7 @@
         line-height: $details-field-line-height;
         width: 100%;
         height: 20px;
+        .details__field--protected & { font-family: $monospace-font-family; }
       }
       >textarea {
         display: block;
@@ -254,7 +255,7 @@
       &-btn-gen:before { content: $fa-var-bolt; }
       &-btn-protect {
         &:before { content: $fa-var-unlock; }
-        &--protected:before { content: $fa-var-lock; }
+        .details__field--protected & { &:before { content: $fa-var-lock; } }
       }
     }
   }

release-notes.md

@@ -10,6 +10,7 @@ Improvements
 `+` San-Francisco font in Chrome OS X  
 `+` help/tips  
 `+` #67: field editing improvements  
+`*` monospace fonts for protected fields  
 `*` #68: url display without http  
 `+` #50: notification on password copy  
 `-` #74: select all in search field