From 276afa42da9c5d99d87eb1d8647551e285ca8ffe Mon Sep 17 00:00:00 2001 From: Grant Moyer Date: Mon, 5 Aug 2019 19:22:29 -0400 Subject: [PATCH 01/11] Add option to hide generated password --- app/scripts/locales/base.json | 2 ++ app/scripts/models/app-settings-model.js | 1 + app/scripts/views/generator-view.js | 23 +++++++++++++++++++++-- app/styles/areas/_generator.scss | 21 +++++++++++++++++++++ app/templates/generator.hbs | 6 +++++- 5 files changed, 50 insertions(+), 3 deletions(-) diff --git a/app/scripts/locales/base.json b/app/scripts/locales/base.json index ecfa580c..ef175bd7 100644 --- a/app/scripts/locales/base.json +++ b/app/scripts/locales/base.json @@ -75,6 +75,8 @@ "genPresetMac": "MAC address", "genPresetHash128": "128-bit hash", "genPresetHash256": "256-bit hash", + "genHidePass": "Hide password", + "genShowPass": "Show password", "grpTitle": "Group", "grpSearch": "Enable searching entries in this group", diff --git a/app/scripts/models/app-settings-model.js b/app/scripts/models/app-settings-model.js index a035b847..40a74b60 100644 --- a/app/scripts/models/app-settings-model.js +++ b/app/scripts/models/app-settings-model.js @@ -33,6 +33,7 @@ const AppSettingsModel = Backbone.Model.extend({ fontSize: 0, tableViewColumns: null, generatorPresets: null, + generatorHide: false, cacheConfigSettings: false, canOpen: true, diff --git a/app/scripts/views/generator-view.js b/app/scripts/views/generator-view.js index df464f73..f3a9ef5a 100644 --- a/app/scripts/views/generator-view.js +++ b/app/scripts/views/generator-view.js @@ -1,6 +1,7 @@ const Backbone = require('backbone'); const PasswordGenerator = require('../util/password-generator'); const CopyPaste = require('../comp/copy-paste'); +const AppSettingsModel = require('../models/app-settings-model'); const GeneratorPresets = require('../comp/generator-presets'); const Locale = require('../util/locale'); @@ -16,6 +17,7 @@ const GeneratorView = Backbone.View.extend({ 'input .gen__length-range': 'lengthChange', 'change .gen__length-range': 'lengthChange', 'change .gen__check input[type=checkbox]': 'checkChange', + 'change #gen__check-hide': 'hideChange', 'click .gen__btn-ok': 'btnOkClick', 'change .gen__sel-tpl': 'presetChange', 'click .gen__btn-refresh': 'newPass' @@ -30,6 +32,7 @@ const GeneratorView = Backbone.View.extend({ this.createPresets(); const preset = this.preset; this.gen = _.clone(_.find(this.presets, pr => pr.name === preset)); + this.hide = AppSettingsModel.instance.get('generatorHide'); $('body').one('click', this.remove.bind(this)); this.listenTo(Backbone, 'lock-workspace', this.remove.bind(this)); }, @@ -37,7 +40,7 @@ const GeneratorView = Backbone.View.extend({ render: function() { const canCopy = document.queryCommandSupported('copy'); const btnTitle = this.model.copy ? canCopy ? Locale.alertCopy : Locale.alertClose : Locale.alertOk; - this.renderTemplate({ btnTitle: btnTitle, opt: this.gen, presets: this.presets, preset: this.preset }); + this.renderTemplate({ btnTitle: btnTitle, opt: this.gen, hide: this.hide, presets: this.presets, preset: this.preset }); this.resultEl = this.$el.find('.gen__result'); this.$el.css(this.model.pos); this.generate(); @@ -69,6 +72,15 @@ const GeneratorView = Backbone.View.extend({ return this.valuesMap.length - 1; }, + showPassword: function() { + if (this.hide) { + const dots = '•'.repeat(this.password.length); + this.resultEl.text(dots); + } else { + this.resultEl.text(this.password); + } + }, + click: function(e) { e.stopPropagation(); }, @@ -103,11 +115,18 @@ const GeneratorView = Backbone.View.extend({ generate: function() { this.password = PasswordGenerator.generate(this.gen); - this.resultEl.text(this.password); + this.showPassword(); const isLong = this.password.length > 32; this.resultEl.toggleClass('gen__result--long-pass', isLong); }, + hideChange: function(e) { + this.hide = e.target.checked; + AppSettingsModel.instance.unset('generatorHide', { silent: true }); + AppSettingsModel.instance.set('generatorHide', this.hide); + this.showPassword(); + }, + btnOkClick: function() { const selection = window.getSelection(); const range = document.createRange(); diff --git a/app/styles/areas/_generator.scss b/app/styles/areas/_generator.scss index fa7df36d..e41a8152 100644 --- a/app/styles/areas/_generator.scss +++ b/app/styles/areas/_generator.scss @@ -27,6 +27,11 @@ margin-left: 15%; } } + &__result-wrap { + display: flex; + justify-content: center; + align-items: flex-start; + } &__result { @include user-select(text); font-family: $monospace-font-family; @@ -41,6 +46,22 @@ font-size: .75em; } } + #gen__check-hide { + $width: 1.3em; + & + label { + width: $width; + margin-right: -$width; + margin-top: 1.3ex; + margin-left: $small-spacing; + } + & + label:before { + @include fa-icon; + content: $fa-var-eye; + } + &:checked + label:before { + content: $fa-var-eye-slash; + } + } &__btn-wrap { text-align: center; } diff --git a/app/templates/generator.hbs b/app/templates/generator.hbs index 02406fd0..f33819f3 100644 --- a/app/templates/generator.hbs +++ b/app/templates/generator.hbs @@ -25,6 +25,10 @@
-
+
+
+ + +
From a2a5d6d10ae0eb6568a3bc256b7506b3935e51a6 Mon Sep 17 00:00:00 2001 From: Grant Moyer Date: Mon, 5 Aug 2019 22:17:33 -0400 Subject: [PATCH 02/11] Remove existing tooltip when creating a new one --- app/scripts/util/tip.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/app/scripts/util/tip.js b/app/scripts/util/tip.js index a47641fd..2351ebfb 100644 --- a/app/scripts/util/tip.js +++ b/app/scripts/util/tip.js @@ -11,6 +11,8 @@ const Tip = function(el, config) { this.hideTimeout = null; this.force = config && config.force || false; this.hide = this.hide.bind(this); + this.mouseenterHandler = null; + this.mouseleaveHandler = null; }; Tip.enabled = !FeatureDetector.isMobile; @@ -21,8 +23,10 @@ Tip.prototype.init = function() { } this.el.removeAttr('title'); this.el.attr('data-title', this.title); - this.el.mouseenter(this.mouseenter.bind(this)).mouseleave(this.mouseleave.bind(this)); - this.el.click(this.mouseleave.bind(this)); + this.mouseenterHandler = this.mouseenter.bind(this); + this.mouseleaveHandler = this.mouseleave.bind(this); + this.el.mouseenter(this.mouseenterHandler).mouseleave(this.mouseleaveHandler); + this.el.click(this.mouseleaveHandler); }; Tip.prototype.show = function() { @@ -132,7 +136,7 @@ Tip.prototype.getAutoPlacement = function(rect, tipRect) { } }; -Tip.createTips = function(container) { +Tip.createTips = function(container, options) { if (!Tip.enabled) { return; } @@ -145,6 +149,12 @@ Tip.createTip = function(el, options) { if (!Tip.enabled && (!options || !options.force)) { return; } + if (el._tip) { + el._tip.el + .off('mouseenter', el._tip.mouseenterHandler) + .off('mouseleave', el._tip.mouseleaveHandler) + .off('click', el._tip.mouseleaveHandler); + } const tip = new Tip($(el), options); if (!options || !options.noInit) { tip.init(); From ebcbe6496a4ce6170305f1d445c574f0b49beeaa Mon Sep 17 00:00:00 2001 From: Grant Moyer Date: Mon, 5 Aug 2019 22:19:20 -0400 Subject: [PATCH 03/11] Add tooltip to password hiding button --- app/scripts/views/generator-view.js | 3 +++ app/templates/generator.hbs | 8 +++++++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/app/scripts/views/generator-view.js b/app/scripts/views/generator-view.js index f3a9ef5a..9dc71c3f 100644 --- a/app/scripts/views/generator-view.js +++ b/app/scripts/views/generator-view.js @@ -4,6 +4,7 @@ const CopyPaste = require('../comp/copy-paste'); const AppSettingsModel = require('../models/app-settings-model'); const GeneratorPresets = require('../comp/generator-presets'); const Locale = require('../util/locale'); +const Tip = require('../util/tip'); const GeneratorView = Backbone.View.extend({ el: 'body', @@ -124,6 +125,8 @@ const GeneratorView = Backbone.View.extend({ this.hide = e.target.checked; AppSettingsModel.instance.unset('generatorHide', { silent: true }); AppSettingsModel.instance.set('generatorHide', this.hide); + const label = this.$el.find('#gen__check-hide + label'); + Tip.createTip(label[0], {title: this.hide ? Locale.genShowPass : Locale.genHidePass}); this.showPassword(); }, diff --git a/app/templates/generator.hbs b/app/templates/generator.hbs index f33819f3..a22807dc 100644 --- a/app/templates/generator.hbs +++ b/app/templates/generator.hbs @@ -28,7 +28,13 @@
- +
From 9c8ebde19de234143184c227af48ccc8d25443d6 Mon Sep 17 00:00:00 2001 From: Grant Moyer Date: Tue, 6 Aug 2019 18:48:21 -0400 Subject: [PATCH 04/11] Move hide button to top of dialog --- app/styles/areas/_generator.scss | 17 ++++------------- app/templates/generator.hbs | 22 ++++++++++------------ 2 files changed, 14 insertions(+), 25 deletions(-) diff --git a/app/styles/areas/_generator.scss b/app/styles/areas/_generator.scss index e41a8152..f18d5e12 100644 --- a/app/styles/areas/_generator.scss +++ b/app/styles/areas/_generator.scss @@ -5,11 +5,12 @@ width: 11em; &__length-range { } - &__btn-refresh { + &__top-btn { float: right; cursor: pointer; position: relative; top: 2px; + margin-left: 0.35em; @include th { color: th(muted-color); &:hover { color: th(text-color); } @@ -27,11 +28,6 @@ margin-left: 15%; } } - &__result-wrap { - display: flex; - justify-content: center; - align-items: flex-start; - } &__result { @include user-select(text); font-family: $monospace-font-family; @@ -47,19 +43,14 @@ } } #gen__check-hide { - $width: 1.3em; - & + label { - width: $width; - margin-right: -$width; - margin-top: 1.3ex; - margin-left: $small-spacing; - } & + label:before { @include fa-icon; content: $fa-var-eye; + color: inherit; } &:checked + label:before { content: $fa-var-eye-slash; + color: inherit; } } &__btn-wrap { diff --git a/app/templates/generator.hbs b/app/templates/generator.hbs index a22807dc..d57a2f3a 100644 --- a/app/templates/generator.hbs +++ b/app/templates/generator.hbs @@ -1,6 +1,14 @@
{{res 'genLen'}}: {{opt.length}} - + + +
-
-
- - -
+
From 03f566e7cdbc9a79da543e01c5a58e2539fb47ed Mon Sep 17 00:00:00 2001 From: Grant Moyer Date: Tue, 6 Aug 2019 20:07:55 -0400 Subject: [PATCH 05/11] Fix copying hidden password --- app/scripts/views/generator-view.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/app/scripts/views/generator-view.js b/app/scripts/views/generator-view.js index 9dc71c3f..dde5bb67 100644 --- a/app/scripts/views/generator-view.js +++ b/app/scripts/views/generator-view.js @@ -131,11 +131,7 @@ const GeneratorView = Backbone.View.extend({ }, btnOkClick: function() { - const selection = window.getSelection(); - const range = document.createRange(); - range.selectNodeContents(this.resultEl[0]); - selection.removeAllRanges(); - selection.addRange(range); + CopyPaste.createHiddenInput(this.password); CopyPaste.copy(this.password); this.trigger('result', this.password); this.remove(); From 065ca2dad4518fb0d62bccbb647cef8fa8533c91 Mon Sep 17 00:00:00 2001 From: Grant Moyer Date: Tue, 6 Aug 2019 22:25:14 -0400 Subject: [PATCH 06/11] Remove extraneous change and fix indentation --- app/scripts/util/tip.js | 2 +- app/templates/generator.hbs | 16 ++++++++-------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/app/scripts/util/tip.js b/app/scripts/util/tip.js index 2351ebfb..22f91aaf 100644 --- a/app/scripts/util/tip.js +++ b/app/scripts/util/tip.js @@ -136,7 +136,7 @@ Tip.prototype.getAutoPlacement = function(rect, tipRect) { } }; -Tip.createTips = function(container, options) { +Tip.createTips = function(container) { if (!Tip.enabled) { return; } diff --git a/app/templates/generator.hbs b/app/templates/generator.hbs index d57a2f3a..8d3cfa4a 100644 --- a/app/templates/generator.hbs +++ b/app/templates/generator.hbs @@ -1,14 +1,14 @@
{{res 'genLen'}}: {{opt.length}} - + - +
- + + {{#unless copy}} + + + {{/unless}}