file settings values getters

app/scripts/models/file-model.js

@@ -66,12 +66,19 @@ var FileModel = Backbone.Model.extend({
         var demoFile = kdbxweb.ByteUtils.arrayToBuffer(kdbxweb.ByteUtils.base64ToBytes(demoFileData));
         this.db = kdbxweb.Kdbx.load(demoFile, credentials);
         this.readModel();
-        this.set({ open: true, created: false, opening: false, error: false, name: 'Demo', demo: true });
+        this.set({ open: true, created: false, opening: false, error: false, name: 'Demo', passwordLength: 4, demo: true });
     },
 
     readModel: function(topGroupTitle) {
         var groups = new GroupCollection();
-        this.set({ groups: groups }, { silent: true });
+        this.set({
+            groups: groups,
+            defaultUser: this.db.meta.defaultUser,
+            recycleBinEnabled: this.db.meta.recycleBinEnabled,
+            historyMaxItems: this.db.meta.historyMaxItems,
+            historyMaxSize: this.db.meta.historyMaxSize,
+            keyEncryptionRounds: this.db.header.keyEncryptionRounds
+        }, { silent: true });
         this.db.groups.forEach(function(group, index) {
             var groupModel = GroupModel.fromGroup(group, this);
             if (index === 0 && topGroupTitle) {

app/scripts/util/password-display.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var PasswordDisplay = {
+    present: function(length) {
+        return new Array(length + 1).join('•');
+    }
+};
+
+module.exports = PasswordDisplay;

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

@@ -3,11 +3,12 @@
 var FieldView = require('./field-view'),
     GeneratorView = require('../generator-view'),
     Keys = require('../../const/keys'),
+    PasswordDisplay = require('../../util/password-display'),
     kdbxweb = require('kdbxweb');
 
 var FieldViewText = FieldView.extend({
     renderValue: function(value) {
-        return typeof value.byteLength === 'number' ? new Array(value.byteLength + 1).join('•') :
+        return typeof value.byteLength === 'number' ? PasswordDisplay.present(value.byteLength) :
             _.escape(value).replace(/\n/g, '<br/>');
     },
 

app/scripts/views/settings/settings-file-view.js

@@ -2,6 +2,7 @@
 
 var Backbone = require('backbone'),
     FeatureDetector = require('../../util/feature-detector'),
+    PasswordDisplay = require('../../util/password-display'),
     Alerts = require('../../util/alerts'),
     FileSaver = require('filesaver');
 
@@ -12,13 +13,20 @@ var SettingsAboutView = Backbone.View.extend({
         'click .settings__file-button-save-file': 'saveToFile',
         'click .settings__file-button-export-xml': 'exportAsXml',
         'click .settings__file-button-save-dropbox': 'saveToDropbox',
-        'change .settings__file-key-file': 'keyfileChange'
+        'change #settings__file-key-file': 'keyfileChange',
+        'focus #settings__file-master-pass': 'focusMasterPass'
     },
 
     render: function() {
         this.renderTemplate({
-            file: this.model,
-            cmd: FeatureDetector.actionShortcutSymbol(true)
+            cmd: FeatureDetector.actionShortcutSymbol(true),
+            name: this.model.get('name'),
+            password: PasswordDisplay.present(this.model.get('passwordLength')),
+            defaultUser: this.model.get('defaultUser'),
+            recycleBinEnabled: this.model.get('recycleBinEnabled'),
+            historyMaxItems: this.model.get('historyMaxItems'),
+            historyMaxSize: Math.round(this.model.get('historyMaxSize') / 1024 / 1024),
+            keyEncryptionRounds: this.model.get('keyEncryptionRounds')
         });
     },
 
@@ -65,6 +73,9 @@ var SettingsAboutView = Backbone.View.extend({
     },
 
     clearKeyFile: function() {
+    },
+
+    focusMasterPass: function(e) {
     }
 });
 

app/styles/base/_forms.scss

@@ -63,7 +63,7 @@ input[type=text], input[type=password], textarea, input:not([type]) {
       }
     }
 
-    &.input--error, &.input--error:hover, &.input--error:focus {
+    &.input--error, &.input--error:hover, &.input--error:focus, &:invalid {
       border-color: error-color();
       box-shadow: form-box-shadow-focus-error();
       @include selection(true) {
@@ -81,6 +81,11 @@ input[type=text], input[type=password], textarea, input:not([type]) {
   }
 }
 
+input[type='number'] {
+  -moz-appearance:textfield;
+  appearance:textfield;
+}
+
 textarea {
   resize: vertical;
 }

app/templates/settings/settings-file.html

@@ -1,4 +1,4 @@
-<h1><i class="fa fa-lock"></i> <%- file.get('name') %></h1>
+<h1><i class="fa fa-lock"></i> <%- name %></h1>
 <p>This database is opened as local file. To enable auto-save and saving with shortcut <%= cmd %>S,
 please, save it to Dropbox.</p>
 
@@ -9,8 +9,8 @@ please, save it to Dropbox.</p>
 </div>
 
 <h2>Settings</h2>
-<label for="settings__file-master-key">Master key:</label>
-<input type="password" class="settings__input" id="settings__file-master-key" value="<%- file.get('passwordLength') %>" />
+<label for="settings__file-master-pass">Master key:</label>
+<input type="text" class="settings__input" required id="settings__file-master-pass" value="<%= password %>" />
 <label for="settings__file-key-file">Key file:</label>
 <select class="settings__select" id="settings__file-key-file">
     <option value="">Don't use key file</option>
@@ -21,18 +21,18 @@ please, save it to Dropbox.</p>
 
 <h2>Names</h2>
 <label for="settings__file-name">Name:</label>
-<input type="text" class="settings__input" id="settings__file-name" value="<%- file.get('name') %>" />
+<input type="text" class="settings__input" id="settings__file-name" value="<%- name %>" required />
 <label for="settings__file-def-user">Default username:</label>
-<input type="text" class="settings__input" id="settings__file-def-user" value="<%- file.db.meta.defaultUser %>" />
+<input type="text" class="settings__input" id="settings__file-def-user" value="<%- defaultUser %>" />
 
 <h2>History</h2>
-<input type="checkbox" class="settings__input" id="settings__file-trash" <%- file.db.meta.recycleBinEnabled ? 'checked' : '' %> />
+<input type="checkbox" class="settings__input" id="settings__file-trash" <%- recycleBinEnabled ? 'checked' : '' %> />
 <label for="settings__file-trash">Enable trash</label>
 <label for="settings__file-hist-len">History length, keep last records per entry:</label>
-<input type="text" class="settings__input" id="settings__file-hist-len" value="<%- file.db.meta.historyMaxItems %>" />
+<input type="text" pattern="\d*" required class="settings__input" id="settings__file-hist-len" value="<%= historyMaxItems %>" />
 <label for="settings__file-hist-size">History size, total MB per file:</label>
-<input type="text" class="settings__input" id="settings__file-hist-size" value="<%- file.db.meta.historyMaxSize/1024/1024 %>" />
+<input type="text" pattern="\d*" required class="settings__input" id="settings__file-hist-size" value="<%= historyMaxSize %>" />
 
 <h2>Advanced</h2>
 <label for="settings__file-key-rounds">Key encryption rounds:</label>
-<input type="text" class="settings__input" id="settings__file-key-rounds" value="<%- file.db.header.keyEncryptionRounds %>" />
+<input type="text" pattern="\d*" required class="settings__input" id="settings__file-key-rounds" value="<%= keyEncryptionRounds %>" />