diff --git a/app/scripts/comp/app/generator-presets.js b/app/scripts/comp/app/generator-presets.js index e608924f..fa68fc64 100644 --- a/app/scripts/comp/app/generator-presets.js +++ b/app/scripts/comp/app/generator-presets.js @@ -2,11 +2,64 @@ import { AppSettingsModel } from 'models/app-settings-model'; import { Locale } from 'util/locale'; const GeneratorPresets = { + getBasicOptions() { + 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' + }, + { + name: 'include', + title: Locale.genPsInclude, + type: 'text' + } + ]; + }, + get defaultPreset() { return { name: 'Default', title: Locale.genPresetDefault, length: 16, + options: this.getBasicOptions(), upper: true, lower: true, digits: true @@ -17,6 +70,7 @@ const GeneratorPresets = { return { name: 'BrowserExtension', length: 20, + options: this.getBasicOptions(), upper: true, lower: true, special: true, @@ -32,6 +86,7 @@ const GeneratorPresets = { name: 'Pronounceable', title: Locale.genPresetPronounceable, length: 10, + options: this.getBasicOptions(), lower: true, upper: true }, @@ -39,6 +94,7 @@ const GeneratorPresets = { name: 'Med', title: Locale.genPresetMed, length: 16, + options: this.getBasicOptions(), upper: true, lower: true, digits: true, @@ -50,15 +106,29 @@ 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: [ + { + name: 'include', + title: Locale.genPsInclude, + type: 'text' + } + ], include: '0123456789ABCDEF', pattern: 'XX-' }, @@ -66,12 +136,26 @@ const GeneratorPresets = { name: 'Hash128', title: Locale.genPresetHash128, length: 32, + options: [ + { + name: 'include', + title: Locale.genPsInclude, + type: 'text' + } + ], include: '0123456789abcdef' }, { name: 'Hash256', title: Locale.genPresetHash256, length: 64, + options: [ + { + name: 'include', + title: Locale.genPsInclude, + type: 'text' + } + ], 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..0315e8bd --- /dev/null +++ b/app/scripts/hbs-helpers/lookupfield.js @@ -0,0 +1,5 @@ +import Handlebars from 'hbs'; + +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..18453795 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,22 +55,17 @@ class GeneratorPresetsView extends View { this.pageResized(); } - getSelectedRanges() { + getSelectedOptions() { const sel = this.getPreset(this.selected); 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) => { + return { + sample: option.sample || rangeOverride[option.name] || CharRanges[option.name], + ...option + }; + }); } getPreset(name) { @@ -99,18 +94,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(); @@ -167,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 97f0742e..aad5edc3 100644 --- a/app/templates/generator.hbs +++ b/app/templates/generator.hbs @@ -22,20 +22,14 @@
-
-
-
-
-
-
-
+ {{#with (lookupfield presets "name" preset)}} + {{#each options as |optn|}} + {{#ifeq optn.type "checkbox"}} +
+ {{/ifeq}} + {{/each}} + {{/with}}