presets selection

app/scripts/models/app-settings-model.js

@@ -27,6 +27,7 @@ var AppSettingsModel = Backbone.Model.extend({
         demoOpened: false,
         fontSize: 0,
         tableViewColumns: null,
+        generatorPresets: null,
         dropbox: true,
         webdav: true,
         gdrive: true,

app/scripts/util/locale.js

@@ -89,6 +89,11 @@ var Locale = {
     tagBadNameBody: 'Tag name can not contain characters `,`, `;`, `:`. Please remove them.',
 
     genPsTitle: 'Generator Presets',
+    genPsEmpty: 'You have no presets yet',
+    genPsEmptyDesc: 'Presets allow you to generate passwords by your rules faster',
+    genPsCreate: 'New preset',
+    genPsDelete: 'Delete preset',
+    genPsNew: 'preset',
 
     keyChangeTitleRemote: 'Master Key Changed',
     keyChangeMessageRemote: 'Master key was changed for this database. Please enter a new key',

app/scripts/views/generator-presets-view.js

@@ -1,27 +1,96 @@
 'use strict';
 
 const Backbone = require('backbone');
+const Locale = require('../util/locale');
 
-var GeneratorPresetsView = Backbone.View.extend({
+let GeneratorPresetsView = Backbone.View.extend({
     template: require('templates/generator-presets.hbs'),
 
     events: {
-        'click .back-button': 'returnToApp'
+        'click .back-button': 'returnToApp',
+        'change .gen-ps__list': 'changePreset',
+        'click .gen-ps__btn-create': 'createPreset',
+        'click .gen-ps__btn-delete': 'deletePreset',
+        'input #gen-ps__field-name': 'changeName'
     },
 
+    selected: null,
+
     initialize: function() {
         this.appModel = this.model;
     },
 
     render: function() {
+        let presets = this.appModel.settings.get('generatorPresets') || [];
+        if (!this.selected || presets.indexOf(this.selected) < 0) {
+            this.selected = presets[0];
+        }
         this.renderTemplate({
-            //
+            empty: !presets.length,
+            presets: presets,
+            selected: this.selected
         }, true);
         return this;
     },
 
     returnToApp: function() {
         Backbone.trigger('edit-generator-presets');
+    },
+
+    changePreset: function(e) {
+        let id = e.target.value;
+        let presets = this.appModel.settings.get('generatorPresets');
+        this.selected = presets.filter(p => p.id === id)[0];
+        this.render();
+    },
+
+    createPreset: function() {
+        let presets = this.appModel.settings.get('generatorPresets') || [];
+        let name;
+        let id;
+        for (let i = 1; ; i++) {
+            let newName = Locale.genPsNew + ' ' + i;
+            if (!presets.filter(p => p.name === newName).length) {
+                name = newName;
+                break;
+            }
+        }
+        for (let i = 1; ; i++) {
+            let newId = 'custom' + i;
+            if (!presets.filter(p => p.id === newId).length) {
+                id = newId;
+                break;
+            }
+        }
+        let preset = { id, name };
+        presets.push(preset);
+        this.selected = preset;
+        this.appModel.settings.set('generatorPresets', presets);
+        this.render();
+    },
+
+    deletePreset: function() {
+        let presets = this.appModel.settings.get('generatorPresets');
+        presets = presets.filter(p => p.id !== this.selected.id);
+        this.appModel.settings.set('generatorPresets', presets.length ? presets : null);
+        this.render();
+    },
+
+    changeName: function(e) {
+        let name = $.trim(e.target.value);
+        if (name && name !== this.selected.name) {
+            let presets = this.appModel.settings.get('generatorPresets');
+            let another = presets.filter(p => p.name.toLowerCase() === name.toLowerCase())[0];
+            if (another) {
+                $(e.target).addClass('input--error');
+                return;
+            } else {
+                $(e.target).removeClass('input--error');
+            }
+            this.selected.name = name;
+            this.appModel.settings.set('generatorPresets', presets);
+            this.$el.find('.gen-ps__list option[selected]').text(name);
+        }
     }
 });
 

app/scripts/views/grp-view.js

@@ -66,8 +66,8 @@ var GrpView = Backbone.View.extend({
     changeTitle: function(e) {
         var title = $.trim(e.target.value);
         if (title) {
-            if (!this.model.get('top') && e.target.value !== this.model.get('title')) {
-                this.model.setName(e.target.value);
+            if (!this.model.get('top') && title !== this.model.get('title')) {
+                this.model.setName(title);
             }
         } else {
             if (this.model.isJustCreated) {

app/styles/areas/_generator-presets.scss

@@ -1,3 +1,17 @@
 .gen-ps {
+  @include flex(1);
+  @include display(flex);
+  @include align-items(stretch);
+  @include flex-direction(column);
+  @include justify-content(flex-start);
+  width: 100%;
+  user-select: none;
 
+  &__empty-text {
+    padding-bottom: $large-padding;
+  }
+
+  &__list, &__input {
+    height: 2em;
+  }
 }

app/styles/base/_variables.scss

@@ -23,6 +23,7 @@ $base-padding: $base-padding-v $base-padding-h;
 $medium-padding: 1em 1.2em;
 $base-padding-px: 5px 10px;
 $modal-icon-size: 6em;
+$large-padding: 2em;
 
 // Borders
 @function base-border() { @return 1px solid base-border-color(); };

app/templates/generator-presets.hbs

@@ -3,4 +3,26 @@
         {{res 'retToApp'}} <i class="fa fa-external-link-square"></i>
     </div>
     <h1>{{res 'genPsTitle'}}</h1>
+    {{#if empty}}
+        <div class="empty-block empty-block--flex muted-color">
+            <h1 class="empty-block__title">{{res 'genPsEmpty'}}</h1>
+            <div class="gen-ps__empty-text">{{res 'genPsEmptyDesc'}}</div>
+            <button class="gen-ps__btn-create">{{res 'genPsCreate'}}</button>
+        </div>
+    {{else}}
+    <select class="gen-ps__list input-base">
+        {{#each presets as |ps|}}
+            <option value="{{ps.id}}" {{#ifeq ps ../selected}}selected{{/ifeq}}>{{ps.name}}</option>
+        {{/each}}
+    </select>
+    <div class="gen-ps__field">
+        <label for="gen-ps__field-name">{{Res 'name'}}:</label>
+        <input type="text" class="input-base" id="gen-ps__field-name" value="{{selected.name}}"
+               size="50" maxlength="64" required />
+    </div>
+    <div class="gen-ps__buttons">
+        <button class="gen-ps__btn-create">{{res 'genPsCreate'}}</button>
+        <button class="gen-ps__btn-delete btn-error">{{res 'genPsDelete'}}</button>
+    </div>
+    {{/if}}
 </div>

util/config-example.json

@@ -22,6 +22,7 @@
     "demoOpened": false,
     "fontSize": 0,
     "tableViewColumns": null,
+    "generatorPresets": null,
 
     "dropbox": true,
     "dropboxFolder": null,