From 087bbc211e37aec566dd872d5417afd593fc2cf6 Mon Sep 17 00:00:00 2001 From: Grant Moyer Date: Sat, 26 Mar 2022 16:54:31 -0400 Subject: [PATCH 1/4] 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 | 56 ++++++++++++++++++++++- app/scripts/hbs-helpers/index.js | 1 + app/scripts/hbs-helpers/lookupfield.js | 6 +++ app/templates/generator.hbs | 20 +++----- 4 files changed, 68 insertions(+), 15 deletions(-) create mode 100644 app/scripts/hbs-helpers/lookupfield.js diff --git a/app/scripts/comp/app/generator-presets.js b/app/scripts/comp/app/generator-presets.js index e608924f..b974ccef 100644 --- a/app/scripts/comp/app/generator-presets.js +++ b/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,6 +74,7 @@ const GeneratorPresets = { name: 'Pronounceable', title: Locale.genPresetPronounceable, length: 10, + options: this.getBasicOptions(), lower: true, upper: true }, @@ -39,6 +82,7 @@ const GeneratorPresets = { name: 'Med', title: Locale.genPresetMed, length: 16, + options: this.getBasicOptions(), upper: true, lower: true, digits: true, @@ -50,15 +94,23 @@ 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-' }, @@ -66,12 +118,14 @@ const GeneratorPresets = { name: 'Hash128', title: Locale.genPresetHash128, length: 32, + options: this.getBasicOptions(), include: '0123456789abcdef' }, { name: 'Hash256', title: Locale.genPresetHash256, length: 64, + options: this.getBasicOptions(), include: '0123456789abcdef' } ]; diff --git a/app/scripts/hbs-helpers/index.js b/app/scripts/hbs-helpers/index.js index a7b23692..ccc85eae 100644 --- a/app/scripts/hbs-helpers/index.js +++ b/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'; diff --git a/app/scripts/hbs-helpers/lookupfield.js b/app/scripts/hbs-helpers/lookupfield.js new file mode 100644 index 00000000..c4327251 --- /dev/null +++ b/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); +}); + diff --git a/app/templates/generator.hbs b/app/templates/generator.hbs index 97f0742e..6b9c847a 100644 --- a/app/templates/generator.hbs +++ b/app/templates/generator.hbs @@ -22,20 +22,12 @@
-
-
-
-
-
-
-
+ {{#with (lookupfield presets "name" preset)}} + {{#each options as |optn|}} +
+ {{/each}} + {{/with}}
From 8ef1a632caee2568e28fe826afbd8b1caf5e647a Mon Sep 17 00:00:00 2001 From: Grant Moyer Date: Mon, 28 Mar 2022 23:18:37 -0400 Subject: [PATCH 2/4] Parameterize generator presets view --- app/scripts/comp/app/generator-presets.js | 13 ++++++-- app/scripts/hbs-helpers/lookupfield.js | 5 ++- app/scripts/views/generator-presets-view.js | 36 ++++++++------------- 3 files changed, 25 insertions(+), 29 deletions(-) diff --git a/app/scripts/comp/app/generator-presets.js b/app/scripts/comp/app/generator-presets.js index b974ccef..2ffe1931 100644 --- a/app/scripts/comp/app/generator-presets.js +++ b/app/scripts/comp/app/generator-presets.js @@ -6,36 +6,43 @@ const GeneratorPresets = { return [ { name: 'upper', + title: Locale.genPsUpper, label: 'ABC', type: 'checkbox' }, { name: 'lower', + title: Locale.genPsLower, label: 'abc', type: 'checkbox' }, { name: 'digits', + title: Locale.genPsDigits, label: '123', type: 'checkbox' }, { name: 'special', + title: Locale.genPsSpecial, label: '!@#', type: 'checkbox' }, { name: 'brackets', + title: Locale.genPsBrackets, label: '({<', type: 'checkbox' }, { name: 'high', + title: Locale.genPsHigh, label: 'äæ±', type: 'checkbox' }, { name: 'ambiguous', + title: Locale.genPsAmbiguous, label: '0Oo', type: 'checkbox' } @@ -110,7 +117,7 @@ const GeneratorPresets = { name: 'Mac', title: Locale.genPresetMac, length: 17, - options: this.getBasicOptions(), + options: [], include: '0123456789ABCDEF', pattern: 'XX-' }, @@ -118,14 +125,14 @@ const GeneratorPresets = { name: 'Hash128', title: Locale.genPresetHash128, length: 32, - options: this.getBasicOptions(), + options: [], include: '0123456789abcdef' }, { name: 'Hash256', title: Locale.genPresetHash256, length: 64, - options: this.getBasicOptions(), + options: [], include: '0123456789abcdef' } ]; diff --git a/app/scripts/hbs-helpers/lookupfield.js b/app/scripts/hbs-helpers/lookupfield.js index c4327251..0315e8bd 100644 --- a/app/scripts/hbs-helpers/lookupfield.js +++ b/app/scripts/hbs-helpers/lookupfield.js @@ -1,6 +1,5 @@ import Handlebars from 'hbs'; -Handlebars.registerHelper('lookupfield', function (array, field, value) { - return array.find(elem => elem[field] == value); +Handlebars.registerHelper('lookupfield', (array, field, value) => { + return array.find((elem) => elem[field] === value); }); - diff --git a/app/scripts/views/generator-presets-view.js b/app/scripts/views/generator-presets-view.js index dbba3d11..72a777c2 100644 --- a/app/scripts/views/generator-presets-view.js +++ b/app/scripts/views/generator-presets-view.js @@ -60,17 +60,15 @@ class GeneratorPresetsView extends View { const rangeOverride = { high: '¡¢£¤¥¦§©ª«¬®¯°±¹²´µ¶»¼÷¿ÀÖîü...' }; - return ['Upper', 'Lower', 'Digits', 'Special', 'Brackets', 'High', 'Ambiguous'].map( - (name) => { - const nameLower = name.toLowerCase(); - return { - name: nameLower, - title: Locale['genPs' + name], - enabled: sel[nameLower], - sample: rangeOverride[nameLower] || CharRanges[nameLower] - }; - } - ); + return sel.options.map((option) => { + const nameLower = option.name.toLowerCase(); + return { + name: nameLower, + title: option.title, + enabled: sel[nameLower], + sample: rangeOverride[nameLower] || CharRanges[nameLower] + }; + }); } getPreset(name) { @@ -99,18 +97,10 @@ class GeneratorPresetsView extends View { } } const selected = this.getPreset(this.selected); - const preset = { - name, - title, - length: selected.length, - upper: selected.upper, - lower: selected.lower, - digits: selected.digits, - special: selected.special, - brackets: selected.brackets, - ambiguous: selected.ambiguous, - include: selected.include - }; + const preset = { ...selected }; + delete preset.builtIn; + preset.name = name; + preset.title = title; GeneratorPresets.add(preset); this.selected = name; this.render(); From 827943cd7bc9652cb71804583aeae04308ca03a1 Mon Sep 17 00:00:00 2001 From: Grant Moyer Date: Tue, 29 Mar 2022 18:37:24 -0400 Subject: [PATCH 3/4] Treat additional include symbols as parameterized option --- app/scripts/comp/app/generator-presets.js | 29 +++++++++++++++++--- app/scripts/views/generator-presets-view.js | 30 ++++++++++----------- app/templates/generator-presets.hbs | 26 +++++++++--------- app/templates/generator.hbs | 6 +++-- 4 files changed, 58 insertions(+), 33 deletions(-) diff --git a/app/scripts/comp/app/generator-presets.js b/app/scripts/comp/app/generator-presets.js index 2ffe1931..fa68fc64 100644 --- a/app/scripts/comp/app/generator-presets.js +++ b/app/scripts/comp/app/generator-presets.js @@ -45,6 +45,11 @@ const GeneratorPresets = { title: Locale.genPsAmbiguous, label: '0Oo', type: 'checkbox' + }, + { + name: 'include', + title: Locale.genPsInclude, + type: 'text' } ]; }, @@ -117,7 +122,13 @@ const GeneratorPresets = { name: 'Mac', title: Locale.genPresetMac, length: 17, - options: [], + options: [ + { + name: 'include', + title: Locale.genPsInclude, + type: 'text' + } + ], include: '0123456789ABCDEF', pattern: 'XX-' }, @@ -125,14 +136,26 @@ const GeneratorPresets = { name: 'Hash128', title: Locale.genPresetHash128, length: 32, - options: [], + options: [ + { + name: 'include', + title: Locale.genPsInclude, + type: 'text' + } + ], include: '0123456789abcdef' }, { name: 'Hash256', title: Locale.genPresetHash256, length: 64, - options: [], + options: [ + { + name: 'include', + title: Locale.genPsInclude, + type: 'text' + } + ], include: '0123456789abcdef' } ]; diff --git a/app/scripts/views/generator-presets-view.js b/app/scripts/views/generator-presets-view.js index 72a777c2..b9299570 100644 --- a/app/scripts/views/generator-presets-view.js +++ b/app/scripts/views/generator-presets-view.js @@ -21,8 +21,8 @@ class GeneratorPresetsView extends View { 'change #gen-ps__check-enabled': 'changeEnabled', 'change #gen-ps__check-default': 'changeDefault', 'input #gen-ps__field-length': 'changeLength', - 'change .gen-ps__check-range': 'changeRange', - 'input #gen-ps__field-include': 'changeInclude', + 'change .gen-ps__checkbox-option': 'changeCheckboxOption', + 'input .gen-ps__text-option': 'changeTextOption', 'input #gen-ps__field-pattern': 'changePattern' }; @@ -38,7 +38,7 @@ class GeneratorPresetsView extends View { super.render({ presets: this.presets, selected: this.getPreset(this.selected), - ranges: this.getSelectedRanges() + options: this.getSelectedOptions() }); this.createScroll({ root: this.$el.find('.gen-ps')[0], @@ -55,18 +55,15 @@ class GeneratorPresetsView extends View { this.pageResized(); } - getSelectedRanges() { + getSelectedOptions() { const sel = this.getPreset(this.selected); const rangeOverride = { high: '¡¢£¤¥¦§©ª«¬®¯°±¹²´µ¶»¼÷¿ÀÖîü...' }; return sel.options.map((option) => { - const nameLower = option.name.toLowerCase(); return { - name: nameLower, - title: option.title, - enabled: sel[nameLower], - sample: rangeOverride[nameLower] || CharRanges[nameLower] + sample: rangeOverride[option.name] || CharRanges[option.name], + ...option }; }); } @@ -157,18 +154,19 @@ class GeneratorPresetsView extends View { this.renderExample(); } - changeRange(e) { + changeCheckboxOption(e) { const enabled = e.target.checked; - const range = e.target.dataset.range; - GeneratorPresets.setPreset(this.selected, { [range]: enabled }); + const option = e.target.dataset.option; + GeneratorPresets.setPreset(this.selected, { [option]: enabled }); this.presets = GeneratorPresets.all; this.renderExample(); } - changeInclude(e) { - const include = e.target.value; - if (include !== this.getPreset(this.selected).include) { - GeneratorPresets.setPreset(this.selected, { include }); + changeTextOption(e) { + const value = e.target.value; + const option = e.target.dataset.option; + if (value !== this.getPreset(this.selected)[option]) { + GeneratorPresets.setPreset(this.selected, { [option]: value }); } this.presets = GeneratorPresets.all; this.renderExample(); diff --git a/app/templates/generator-presets.hbs b/app/templates/generator-presets.hbs index 9d803239..a8529df9 100644 --- a/app/templates/generator-presets.hbs +++ b/app/templates/generator-presets.hbs @@ -28,19 +28,21 @@ - {{#each ranges as |range|}} -
- - -
+ {{#each options as |option|}} +
+ {{#ifeq option.type "checkbox"}} + + + {{/ifeq}} + {{#ifeq option.type "text"}} + + + {{/ifeq}} +
{{/each}} -
- - -
diff --git a/app/templates/generator.hbs b/app/templates/generator.hbs index 6b9c847a..aad5edc3 100644 --- a/app/templates/generator.hbs +++ b/app/templates/generator.hbs @@ -24,8 +24,10 @@
{{#with (lookupfield presets "name" preset)}} {{#each options as |optn|}} -
+ {{#ifeq optn.type "checkbox"}} +
+ {{/ifeq}} {{/each}} {{/with}}
From ab0ecd58c519f772b251e6aeb2ea80ff6b63779d Mon Sep 17 00:00:00 2001 From: Grant Moyer Date: Tue, 29 Mar 2022 19:07:32 -0400 Subject: [PATCH 4/4] Allow overriding preset option sample --- app/scripts/views/generator-presets-view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/scripts/views/generator-presets-view.js b/app/scripts/views/generator-presets-view.js index b9299570..18453795 100644 --- a/app/scripts/views/generator-presets-view.js +++ b/app/scripts/views/generator-presets-view.js @@ -62,7 +62,7 @@ class GeneratorPresetsView extends View { }; return sel.options.map((option) => { return { - sample: rangeOverride[option.name] || CharRanges[option.name], + sample: option.sample || rangeOverride[option.name] || CharRanges[option.name], ...option }; });