This commit is contained in:
Grant Moyer 2024-04-26 23:47:58 -07:00 committed by GitHub
commit 2219cc540c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 135 additions and 61 deletions

View File

@ -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'
}
];

View File

@ -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';

View File

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

View File

@ -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();

View File

@ -28,19 +28,21 @@
<input type="text" class="input-base" id="gen-ps__field-length" value="{{selected.length}}"
size="50" maxlength="3" required pattern="\d+" {{#if selected.builtIn}}readonly{{/if}} />
</div>
{{#each ranges as |range|}}
<div class="gen-ps__field">
<input type="checkbox" class="input-base gen-ps__check-range" id="gen-ps__check-{{range.name}}"
data-range="{{range.name}}"
{{#if range.enabled}}checked{{/if}} {{#if ../selected.builtIn}}disabled{{/if}} />
<label for="gen-ps__check-{{range.name}}">{{range.title}}<span class="gen-ps__sample"> {{range.sample}}</span></label>
</div>
{{#each options as |option|}}
<div class="gen-ps__field">
{{#ifeq option.type "checkbox"}}
<input type="checkbox" class="input-base gen-ps__checkbox-option" id="gen-ps__check-{{option.name}}"
data-option="{{option.name}}"
{{#if (lookup ../selected option.name)}}checked{{/if}} {{#if ../selected.builtIn}}disabled{{/if}} />
<label for="gen-ps__check-{{option.name}}">{{option.title}}<span class="gen-ps__sample"> {{option.sample}}</span></label>
{{/ifeq}}
{{#ifeq option.type "text"}}
<label for="gen-ps__field-{{option.name}}">{{option.title}}:</label>
<input type="text" class="input-base gen-ps__text-option" id="gen-ps__field-{{option.name}}" value="{{lookup ../selected option.name}}" data-option="{{option.name}}"
{{#if selected.builtIn}}readonly{{/if}} />
{{/ifeq}}
</div>
{{/each}}
<div class="gen-ps__field">
<label for="gen-ps__field-include">{{res 'genPsInclude'}}:</label>
<input type="text" class="input-base" id="gen-ps__field-include" value="{{selected.include}}"
{{#if selected.builtIn}}readonly{{/if}} />
</div>
<div class="gen-ps__field">
<label for="gen-ps__field-pattern">{{res 'genPsPattern'}}: <i class="fa fa-info-circle info-btn info-btn--pattern"></i></label>
<div class="gen-ps__pattern-help hide">

View File

@ -22,20 +22,14 @@
</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|}}
{{#ifeq optn.type "checkbox"}}
<div class="gen__check"><input type="checkbox" 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>
{{/ifeq}}
{{/each}}
{{/with}}
</div>
<div class="gen__result"></div>
<div class="gen__btn-wrap"><button class="gen__btn-ok">{{btnTitle}}</button></div>