2015-10-18 23:30:29 +02:00
|
|
|
'use strict';
|
|
|
|
|
2015-10-19 23:24:32 +02:00
|
|
|
var Backbone = require('backbone'),
|
2015-10-20 21:58:07 +02:00
|
|
|
PasswordGenerator = require('../util/password-generator'),
|
2015-12-17 19:25:25 +01:00
|
|
|
CopyPaste = require('../comp/copy-paste'),
|
|
|
|
Locale = require('../util/locale');
|
2015-10-18 23:30:29 +02:00
|
|
|
|
|
|
|
var GeneratorView = Backbone.View.extend({
|
|
|
|
el: 'body',
|
|
|
|
|
2015-12-16 22:50:45 +01:00
|
|
|
template: require('templates/generator.hbs'),
|
2015-10-18 23:30:29 +02:00
|
|
|
|
|
|
|
events: {
|
2015-10-19 23:24:32 +02:00
|
|
|
'click': 'click',
|
2015-10-20 19:17:15 +02:00
|
|
|
'mousedown .gen__length-range': 'generate',
|
2015-10-19 23:24:32 +02:00
|
|
|
'mousemove .gen__length-range': 'lengthChange',
|
|
|
|
'change .gen__length-range': 'lengthChange',
|
2015-10-20 21:58:07 +02:00
|
|
|
'change .gen__check input[type=checkbox]': 'checkChange',
|
2016-02-15 22:06:11 +01:00
|
|
|
'click .gen__btn-ok': 'btnOkClick',
|
2016-08-13 21:13:16 +02:00
|
|
|
'change .gen__sel-tpl': 'presetChange',
|
2016-02-23 07:43:43 +01:00
|
|
|
'click .gen__btn-refresh': 'newPass'
|
2015-10-18 23:30:29 +02:00
|
|
|
},
|
|
|
|
|
2016-07-17 13:30:38 +02:00
|
|
|
valuesMap: [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 48, 64],
|
2015-11-04 20:32:21 +01:00
|
|
|
|
2016-02-15 22:06:11 +01:00
|
|
|
presets: null,
|
|
|
|
preset: null,
|
|
|
|
|
2015-10-18 23:30:29 +02:00
|
|
|
initialize: function () {
|
2016-02-15 22:06:11 +01:00
|
|
|
this.createPresets();
|
|
|
|
var preset = this.preset;
|
2016-07-17 13:30:38 +02:00
|
|
|
this.gen = _.clone(_.find(this.presets, pr => pr.name === preset));
|
2015-10-19 23:24:32 +02:00
|
|
|
$('body').one('click', this.remove.bind(this));
|
2016-02-16 21:01:04 +01:00
|
|
|
this.listenTo(Backbone, 'lock-workspace', this.remove.bind(this));
|
2015-10-18 23:30:29 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
2015-10-20 21:58:07 +02:00
|
|
|
var canCopy = document.queryCommandSupported('copy');
|
2015-12-17 19:25:25 +01:00
|
|
|
var btnTitle = this.model.copy ? canCopy ? Locale.alertCopy : Locale.alertClose : Locale.alertOk;
|
2016-02-15 22:06:11 +01:00
|
|
|
this.renderTemplate({ btnTitle: btnTitle, opt: this.gen, presets: this.presets, preset: this.preset });
|
2015-10-20 21:58:07 +02:00
|
|
|
this.resultEl = this.$el.find('.gen__result');
|
2015-10-18 23:30:29 +02:00
|
|
|
this.$el.css(this.model.pos);
|
2015-10-19 23:24:32 +02:00
|
|
|
this.generate();
|
2015-10-20 21:58:07 +02:00
|
|
|
return this;
|
2015-10-18 23:30:29 +02:00
|
|
|
},
|
|
|
|
|
2016-02-15 22:06:11 +01:00
|
|
|
createPresets: function() {
|
|
|
|
this.presets = [
|
|
|
|
{ name: 'Default', length: 16, upper: true, lower: true, digits: true },
|
|
|
|
{ name: 'Pronounceable', length: 10, lower: true, upper: true },
|
|
|
|
{ name: 'Med', length: 16, upper: true, lower: true, digits: true, special: true, brackets: true, ambiguous: true },
|
|
|
|
{ name: 'Long', length: 32, upper: true, lower: true, digits: true },
|
|
|
|
{ name: 'Pin4', length: 4, digits: true },
|
|
|
|
{ name: 'Mac', length: 17, upper: true, digits: true, special: true },
|
|
|
|
{ name: 'Hash128', length: 32, lower: true, digits: true },
|
|
|
|
{ name: 'Hash256', length: 64, lower: true, digits: true }
|
|
|
|
];
|
2016-04-15 21:18:29 +02:00
|
|
|
if (this.model.password && (!this.model.password.isProtected || this.model.password.byteLength)) {
|
2016-02-15 22:06:11 +01:00
|
|
|
var derivedPreset = { name: 'Derived' };
|
|
|
|
_.extend(derivedPreset, PasswordGenerator.deriveOpts(this.model.password));
|
|
|
|
for (var i = 0; i < this.valuesMap.length; i++) {
|
|
|
|
if (this.valuesMap[i] >= derivedPreset.length) {
|
|
|
|
derivedPreset.length = this.valuesMap[i];
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (derivedPreset.length > this.valuesMap[this.valuesMap.length - 1]) {
|
|
|
|
derivedPreset.length = this.valuesMap[this.valuesMap.length - 1];
|
|
|
|
}
|
|
|
|
this.presets.splice(1, 0, derivedPreset);
|
|
|
|
this.preset = 'Derived';
|
|
|
|
} else {
|
|
|
|
this.preset = 'Default';
|
|
|
|
}
|
|
|
|
this.presets.forEach(function(pr) {
|
|
|
|
pr.pseudoLength = this.valuesMap.indexOf(pr.length);
|
|
|
|
pr.title = Locale['genPreset' + pr.name];
|
|
|
|
}, this);
|
|
|
|
},
|
|
|
|
|
2015-10-19 23:24:32 +02:00
|
|
|
click: function(e) {
|
2015-10-18 23:30:29 +02:00
|
|
|
e.stopPropagation();
|
2015-10-19 23:24:32 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
lengthChange: function(e) {
|
2015-11-04 20:32:21 +01:00
|
|
|
var val = this.valuesMap[e.target.value];
|
2015-10-19 23:24:32 +02:00
|
|
|
if (val !== this.gen.length) {
|
|
|
|
this.gen.length = val;
|
|
|
|
this.$el.find('.gen__length-range-val').html(val);
|
2016-02-15 22:06:11 +01:00
|
|
|
this.optionChanged('length');
|
2015-10-19 23:24:32 +02:00
|
|
|
this.generate();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
checkChange: function(e) {
|
|
|
|
var id = $(e.target).data('id');
|
|
|
|
if (id) {
|
|
|
|
this.gen[id] = e.target.checked;
|
|
|
|
}
|
2016-02-15 22:06:11 +01:00
|
|
|
this.optionChanged(id);
|
2015-10-19 23:24:32 +02:00
|
|
|
this.generate();
|
|
|
|
},
|
|
|
|
|
2016-02-15 22:06:11 +01:00
|
|
|
optionChanged: function(option) {
|
|
|
|
if (this.preset === 'Custom' ||
|
|
|
|
this.preset === 'Pronounceable' && ['length', 'lower', 'upper'].indexOf(option) >= 0) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.preset = this.gen.name = 'Custom';
|
|
|
|
this.$el.find('.gen__sel-tpl').val('');
|
|
|
|
},
|
|
|
|
|
2015-10-19 23:24:32 +02:00
|
|
|
generate: function() {
|
2015-10-20 21:58:07 +02:00
|
|
|
this.password = PasswordGenerator.generate(this.gen);
|
|
|
|
this.resultEl.text(this.password);
|
2015-11-04 20:32:21 +01:00
|
|
|
var isLong = this.password.length > 32;
|
|
|
|
this.resultEl.toggleClass('gen__result--long-pass', isLong);
|
2015-10-20 21:58:07 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
btnOkClick: function() {
|
|
|
|
var selection = window.getSelection();
|
|
|
|
var range = document.createRange();
|
|
|
|
range.selectNodeContents(this.resultEl[0]);
|
|
|
|
selection.removeAllRanges();
|
|
|
|
selection.addRange(range);
|
2016-01-22 18:51:36 +01:00
|
|
|
CopyPaste.copy(this.password);
|
2015-10-20 21:58:07 +02:00
|
|
|
this.trigger('result', this.password);
|
|
|
|
this.remove();
|
2016-02-15 22:06:11 +01:00
|
|
|
},
|
|
|
|
|
2016-08-13 21:13:16 +02:00
|
|
|
presetChange: function(e) {
|
2016-02-15 22:06:11 +01:00
|
|
|
var name = e.target.value;
|
2016-08-13 21:13:16 +02:00
|
|
|
if (name === '...') {
|
|
|
|
Backbone.trigger('edit-generator-presets');
|
|
|
|
this.remove();
|
|
|
|
return;
|
|
|
|
}
|
2016-02-15 22:06:11 +01:00
|
|
|
this.preset = name;
|
2016-07-17 13:30:38 +02:00
|
|
|
var preset = _.find(this.presets, t => t.name === name);
|
2016-02-15 22:06:11 +01:00
|
|
|
this.gen = _.clone(preset);
|
|
|
|
this.render();
|
2016-02-23 07:43:43 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
newPass: function() {
|
2016-02-23 21:31:21 +01:00
|
|
|
this.generate();
|
2015-10-18 23:30:29 +02:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
module.exports = GeneratorView;
|