Fix hashicorp#6435 Switch to use an obfuscated font for passwords inputs

ui/app/components/secret-edit.js

@@ -1,14 +1,14 @@
-import { isBlank, isNone } from '@ember/utils';
-import { inject as service } from '@ember/service';
 import Component from '@ember/component';
 import { computed, set } from '@ember/object';
 import { alias, or } from '@ember/object/computed';
+import { inject as service } from '@ember/service';
+import { isBlank, isNone } from '@ember/utils';
 import { task, waitForEvent } from 'ember-concurrency';
-import FocusOnInsertMixin from 'vault/mixins/focus-on-insert';
-import WithNavToNearestAncestor from 'vault/mixins/with-nav-to-nearest-ancestor';
 import keys from 'vault/lib/keycodes';
 import KVObject from 'vault/lib/kv-object';
 import { maybeQueryRecord } from 'vault/macros/maybe-query-record';
+import FocusOnInsertMixin from 'vault/mixins/focus-on-insert';
+import WithNavToNearestAncestor from 'vault/mixins/with-nav-to-nearest-ancestor';
 
 const LIST_ROUTE = 'vault.cluster.secrets.backend.list';
 const LIST_ROOT_ROUTE = 'vault.cluster.secrets.backend.list-root';
@@ -19,6 +19,7 @@ export default Component.extend(FocusOnInsertMixin, WithNavToNearestAncestor, {
   router: service(),
   store: service(),
   flashMessages: service(),
+  classNameBindings: ['showObfuscatedInputMode:obfuscated-input'],
 
   // a key model
   key: null,
@@ -41,13 +42,16 @@ export default Component.extend(FocusOnInsertMixin, WithNavToNearestAncestor, {
   onDataChange() {},
   onRefresh() {},
   onToggleAdvancedEdit() {},
+  onToggleObfuscatedInput() {},
 
   // did user request advanced mode
   preferAdvancedEdit: false,
+  preferObfuscatedInput: false,
 
   // use a named action here so we don't have to pass one in
   // this will bubble to the route
   toggleAdvancedEdit: 'toggleAdvancedEdit',
+  toggleObfuscatedInput: 'toggleObfuscatedInput',
   error: null,
 
   codemirrorString: null,
@@ -172,6 +176,10 @@ export default Component.extend(FocusOnInsertMixin, WithNavToNearestAncestor, {
     }
   ),
 
+  showObfuscatedInputMode: computed('preferObfuscatedInput', 'lastChange', function() {
+    return this.preferObfuscatedInput;
+  }),
+
   transitionToRoute() {
     return this.router.transitionTo(...arguments);
   },
@@ -347,6 +355,9 @@ export default Component.extend(FocusOnInsertMixin, WithNavToNearestAncestor, {
     toggleAdvanced(bool) {
       this.onToggleAdvancedEdit(bool);
     },
+    toggleObfuscated(bool) {
+      this.onToggleObfuscatedInput(bool);
+    },
 
     codemirrorUpdated(val, codemirror) {
       this.set('error', null);

ui/app/controllers/vault/cluster/secrets/backend/create.js

@@ -15,5 +15,9 @@ export default Controller.extend(BackendCrumbMixin, {
       this.set('preferAdvancedEdit', bool);
       this.get('backendController').set('preferAdvancedEdit', bool);
     },
+    toggleObfuscatedInput(bool) {
+      this.set('preferObfuscatedInput', bool);
+      this.get('backendController').set('preferObfuscatedInput', bool);
+    },
   },
 });

ui/app/controllers/vault/cluster/secrets/backend/edit.js

@@ -19,5 +19,9 @@ export default Controller.extend(BackendCrumbMixin, {
       this.set('preferAdvancedEdit', bool);
       this.get('backendController').set('preferAdvancedEdit', bool);
     },
+    toggleObfuscatedInput(bool) {
+      this.set('preferObfuscatedInput', bool);
+      this.get('backendController').set('preferObfuscatedInput', bool);
+    },
   },
 });

ui/app/controllers/vault/cluster/secrets/backend/show.js

@@ -21,5 +21,9 @@ export default Controller.extend(BackendCrumbMixin, {
       this.set('preferAdvancedEdit', bool);
       this.get('backendController').set('preferAdvancedEdit', bool);
     },
+    toggleObfuscatedInput(bool) {
+      this.set('preferObfuscated', bool);
+      this.get('backendController').set('preferObfuscated', bool);
+    },
   },
 });

ui/app/routes/vault/cluster/secrets/backend/secret-edit.js

@@ -223,6 +223,8 @@ export default Route.extend(UnloadModelRoute, {
     let backend = this.enginePathParam();
     const preferAdvancedEdit =
       this.controllerFor('vault.cluster.secrets.backend').get('preferAdvancedEdit') || false;
+    const preferObfuscatedInput =
+      this.controllerFor('vault.cluster.secrets.backend').get('preferObfuscatedInput') || false;
     const backendType = this.backendType();
     model.secret.setProperties({ backend });
     controller.setProperties({
@@ -236,6 +238,7 @@ export default Route.extend(UnloadModelRoute, {
         .replace('-root', ''),
       backend,
       preferAdvancedEdit,
+      preferObfuscatedInput,
       backendType,
     });
   },

ui/app/styles/app.scss

@@ -1,3 +1,14 @@
 @import 'ember-basic-dropdown';
 @import 'ember-power-select';
 @import './core';
+
+@font-face {
+    font-family: 'ObfuscatedPasswordFont';
+    src: url('/ui/write-your-password-with-this-font.eot'); /* IE9 Compat Modes */
+    src: url('/ui/write-your-password-with-this-font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         url('/ui/write-your-password-with-this-font.woff2') format('woff2'), /* Modern Browsers */
+         url('/ui/write-your-password-with-this-font.woff') format('woff'); /* Modern Browsers */
+    font-style: italic;
+    font-weight: normal;
+    text-rendering: optimizeLegibility;
+}

ui/app/styles/components/masked-input.scss

@@ -24,6 +24,12 @@
   line-height: 2.5;
 }
 
+.obfuscated-input .masked-input .input {
+  font-size: 9px;
+  font-family: ObfuscatedPasswordFont;
+  line-height: 2.5;
+}
+
 .masked-input.display-only .masked-value {
   order: 1;
 }

ui/app/templates/components/masked-input.hbs

@@ -6,6 +6,7 @@
     class="input masked-value"
     rows=1
     wrap="off"
+    spellcheck="false"
     placeholder={{placeholder}}
     onfocus={{action (mut isFocused) true}}
     onblur={{action (mut isFocused) false}}

ui/app/templates/components/secret-edit.hbs

@@ -40,6 +40,18 @@
 </PageHeader>
 <div class="secret-control-bar">
   {{#unless (and (eq mode 'show') isWriteWithoutRead)}}
+  <div class="control">
+    <input
+      data-test-secret-obfuscated-input-toggle=true
+      id="obfuscated"
+      type="checkbox"
+      name="obfuscated"
+      class="switch is-rounded is-success is-small"
+      checked={{showObfuscatedInputMode}}
+      onchange={{action "toggleObfuscated" value="target.checked"}}
+    />
+    <label for="obfuscated" class="has-text-grey">Obfuscated Input</label>
+  </div>
   <div class="control">
     <input
       data-test-secret-json-toggle=true

ui/app/templates/partials/secret-form-create.hbs

@@ -1,10 +1,10 @@
-<form class="{{if showAdvancedMode 'advanced-edit' 'simple-edit'}}" onsubmit={{action "createOrUpdateKey" "create"}}>
+<form class="{{if showAdvancedMode 'advanced-edit' 'simple-edit'}} {{if showObfuscatedInput 'obfuscated-input'}}" onsubmit={{action "createOrUpdateKey" "create"}}>
   <div class="field box is-fullwidth is-sideless is-marginless">
     <NamespaceReminder @mode="create" @noun="secret" />
     <MessageError @model={{model}} @errorMessage={{error}} />
     <label class="is-label" for="kv-key">Path for this secret</label>
     <p class="control is-expanded">
-      {{input 
+      {{input
         autocomplete="off"
         data-test-secret-path="true"
         id="kv-key"
@@ -20,6 +20,7 @@
   </div>
   <SecretEditDisplay
     @showAdvancedMode={{showAdvancedMode}}
+    @showObfuscatedInputMode={{showObfuscatedInputMode}}
     @codemirrorString={{codemirrorString}}
     @secretData={{secretData}}
     @isV2={{isV2}}

ui/app/templates/partials/secret-form-edit.hbs

@@ -13,6 +13,7 @@
     {{/if}}
     <SecretEditDisplay
       @showAdvancedMode={{showAdvancedMode}}
+      @showObfuscatedInputMode={{showObfuscatedInputMode}}
       @codemirrorString={{codemirrorString}}
       @secretData={{secretData}}
       @isV2={{isV2}}

ui/app/templates/vault/cluster/secrets/backend/secret-edit-layout.hbs

@@ -7,7 +7,9 @@
     capabilities=capabilities
     onRefresh=(action "refresh")
     onToggleAdvancedEdit=(action "toggleAdvancedEdit")
+    onToggleObfuscatedInput=(action "toggleObfuscatedInput")
     initialKey=initialKey
     baseKey=baseKey
     preferAdvancedEdit=preferAdvancedEdit
+    preferObfuscatedInput=preferObfuscatedInput
   }}