Add option to hide generated password

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",

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,

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

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;
   }

app/templates/generator.hbs

@@ -25,6 +25,10 @@
         <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>
     </div>
-    <div class="gen__result"></div>
+    <div class="gen__result-wrap">
+        <div class="gen__result"></div>
+        <input type="checkbox" id="gen__check-hide" {{#if hide}}checked{{/if}}>
+        <label for="gen__check-hide"></label>
+    </div>
     <div class="gen__btn-wrap"><button class="gen__btn-ok">{{btnTitle}}</button></div>
 </div>