Parameterize generator view options

Before this change, generator view options were static, so all generators needed to work with the same options. This change parameterizes the options, so that plugins can provide different sets of options for custom generators. In particular, this change enables hiding the default options for generators where it doesn't make sense, such as the passphrase generator in keeweb/keeweb-plugins#30.

app/scripts/comp/app/generator-presets.js

@@ -2,11 +2,52 @@ import { AppSettingsModel } from 'models/app-settings-model';
 import { Locale } from 'util/locale';
 
 const GeneratorPresets = {
+    getBasicOptions() {
+        return [
+            {
+                name: 'upper',
+                label: 'ABC',
+                type: 'checkbox'
+            },
+            {
+                name: 'lower',
+                label: 'abc',
+                type: 'checkbox'
+            },
+            {
+                name: 'digits',
+                label: '123',
+                type: 'checkbox'
+            },
+            {
+                name: 'special',
+                label: '!@#',
+                type: 'checkbox'
+            },
+            {
+                name: 'brackets',
+                label: '({<',
+                type: 'checkbox'
+            },
+            {
+                name: 'high',
+                label: 'äæ±',
+                type: 'checkbox'
+            },
+            {
+                name: 'ambiguous',
+                label: '0Oo',
+                type: 'checkbox'
+            }
+        ];
+    },
+
     get defaultPreset() {
         return {
             name: 'Default',
             title: Locale.genPresetDefault,
             length: 16,
+            options: this.getBasicOptions(),
             upper: true,
             lower: true,
             digits: true
@@ -17,6 +58,7 @@ const GeneratorPresets = {
         return {
             name: 'BrowserExtension',
             length: 20,
+            options: this.getBasicOptions(),
             upper: true,
             lower: true,
             special: true,
@@ -32,13 +74,15 @@ const GeneratorPresets = {
                 name: 'Pronounceable',
                 title: Locale.genPresetPronounceable,
                 length: 10,
+                options: this.getBasicOptions(),
                 lower: true,
                 upper: true
             },
             {
                 name: 'Med',
                 title: Locale.genPresetMed,
                 length: 16,
+                options: this.getBasicOptions(),
                 upper: true,
                 lower: true,
                 digits: true,
@@ -50,28 +94,38 @@ const GeneratorPresets = {
                 name: 'Long',
                 title: Locale.genPresetLong,
                 length: 32,
+                options: this.getBasicOptions(),
                 upper: true,
                 lower: true,
                 digits: true
             },
-            { name: 'Pin4', title: Locale.genPresetPin4, length: 4, digits: true },
+            {
+                name: 'Pin4',
+                title: Locale.genPresetPin4,
+                length: 4,
+                options: this.getBasicOptions(),
+                digits: true
+            },
             {
                 name: 'Mac',
                 title: Locale.genPresetMac,
                 length: 17,
+                options: this.getBasicOptions(),
                 include: '0123456789ABCDEF',
                 pattern: 'XX-'
             },
             {
                 name: 'Hash128',
                 title: Locale.genPresetHash128,
                 length: 32,
+                options: this.getBasicOptions(),
                 include: '0123456789abcdef'
             },
             {
                 name: 'Hash256',
                 title: Locale.genPresetHash256,
                 length: 64,
+                options: this.getBasicOptions(),
                 include: '0123456789abcdef'
             }
         ];

app/scripts/hbs-helpers/index.js

@@ -3,4 +3,5 @@ import 'hbs-helpers/cmp';
 import 'hbs-helpers/ifeq';
 import 'hbs-helpers/ifneq';
 import 'hbs-helpers/ifemptyoreq';
+import 'hbs-helpers/lookupfield';
 import 'hbs-helpers/res';

app/scripts/hbs-helpers/lookupfield.js

@@ -0,0 +1,6 @@
+import Handlebars from 'hbs';
+
+Handlebars.registerHelper('lookupfield', function (array, field, value) {
+    return array.find(elem => elem[field] == value);
+});
+

app/templates/generator.hbs

@@ -22,20 +22,12 @@
     </select>
     <input type="range" class="gen__length-range" value="{{opt.pseudoLength}}" min="0" max="25" />
     <div>
-        <div class="gen__check"><input type="checkbox" id="gen__check-upper"
-            data-id="upper" {{#if opt.upper}}checked{{/if}}><label for="gen__check-upper">ABC</label></div>
-        <div class="gen__check"><input type="checkbox" id="gen__check-lower"
-            data-id="lower" {{#if opt.lower}}checked{{/if}}><label for="gen__check-lower">abc</label></div>
-        <div class="gen__check"><input type="checkbox" id="gen__check-digits"
-            data-id="digits" {{#if opt.digits}}checked{{/if}}><label for="gen__check-digits">123</label></div>
-        <div class="gen__check"><input type="checkbox" id="gen__check-special"
-            data-id="special" {{#if opt.special}}checked{{/if}}><label for="gen__check-special">!@#</label></div>
-        <div class="gen__check"><input type="checkbox" id="gen__check-brackets"
-            data-id="brackets" {{#if opt.brackets}}checked{{/if}}><label for="gen__check-brackets">({&lt;</label></div>
-        <div class="gen__check"><input type="checkbox" id="gen__check-high"
-            data-id="high" {{#if opt.high}}checked{{/if}}><label for="gen__check-high">äæ±</label></div>
-        <div class="gen__check"><input type="checkbox" id="gen__check-ambiguous"
-            data-id="ambiguous" {{#if opt.ambiguous}}checked{{/if}}><label for="gen__check-ambiguous">0Oo</label></div>
+        {{#with (lookupfield presets "name" preset)}}
+            {{#each options as |optn|}}
+                <div class="gen__check"><input type="{{optn.type}}" id="gen__check-{{optn.name}}"
+                    data-id="{{optn.name}}" {{#if (lookup ../../opt optn.name)}}checked{{/if}}><label for="gen__check-{{optn.name}}">{{optn.label}}</label></div>
+            {{/each}}
+        {{/with}}
     </div>
     <div class="gen__result"></div>
     <div class="gen__btn-wrap"><button class="gen__btn-ok">{{btnTitle}}</button></div>