From 4ee8d290a5d45ce93419c819a6e7544d3a009b99 Mon Sep 17 00:00:00 2001
From: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Date: Thu, 20 Feb 2020 07:29:58 -0800
Subject: Create password visibility toggle

Reusable component to show/hide password input fields,
added to local user form.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I90fb865e51d99788a225812b057f4d8bacad1bc8
---
 src/components/Global/InputPasswordToggle.vue      | 57 +++++++++++++++
 src/locales/en.json                                |  3 +
 .../LocalUserManagement/ModalUser.vue              | 80 ++++++++++++----------
 3 files changed, 103 insertions(+), 37 deletions(-)
 create mode 100644 src/components/Global/InputPasswordToggle.vue

diff --git a/src/components/Global/InputPasswordToggle.vue b/src/components/Global/InputPasswordToggle.vue
new file mode 100644
index 00000000..8c522525
--- /dev/null
+++ b/src/components/Global/InputPasswordToggle.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="input-password-toggle-container">
+    <slot></slot>
+    <b-button
+      :aria-label="$t('ariaLabels.showPassword')"
+      variant="link"
+      :class="{ isVisible: isVisible }"
+      @click="toggleVisibility"
+    >
+      <icon-view-off v-if="isVisible" aria-hidden="true" />
+      <icon-view v-else aria-hidden="true" />
+    </b-button>
+  </div>
+</template>
+
+<script>
+import IconView from '@carbon/icons-vue/es/view/20';
+import IconViewOff from '@carbon/icons-vue/es/view--off/20';
+
+export default {
+  name: 'InputPasswordToggle',
+  components: { IconView, IconViewOff },
+  data() {
+    return {
+      isVisible: false
+    };
+  },
+  methods: {
+    toggleVisibility() {
+      const firstChild = this.$children[0];
+      const inputEl = firstChild ? firstChild.$el : null;
+
+      this.isVisible = !this.isVisible;
+
+      if (inputEl.nodeName === 'INPUT') {
+        inputEl.type = this.isVisible ? 'text' : 'password';
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.input-password-toggle-container {
+  position: relative;
+}
+
+.btn {
+  position: absolute;
+  right: 0;
+  top: 0;
+
+  svg {
+    margin-left: 0;
+  }
+}
+</style>
diff --git a/src/locales/en.json b/src/locales/en.json
index d8660027..db3a87bf 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -6,6 +6,9 @@
     "on": "on",
     "off": "off"
   },
+  "ariaLabels": {
+    "showPassword": "Show password as plain text. Note: this will visually expose your password on the screen."
+  },
   "login": {
     "language": {
       "label": "Language"
diff --git a/src/views/AccessControl/LocalUserManagement/ModalUser.vue b/src/views/AccessControl/LocalUserManagement/ModalUser.vue
index d156c3da..448276b5 100644
--- a/src/views/AccessControl/LocalUserManagement/ModalUser.vue
+++ b/src/views/AccessControl/LocalUserManagement/ModalUser.vue
@@ -77,48 +77,52 @@
                 <!-- TODO: Should be dynamic values -->
                 Password must between 8 – 20 characters
               </b-form-text>
-              <b-form-input
-                id="password"
-                v-model="form.password"
-                type="password"
-                aria-describedby="password-help-block"
-                :state="getValidationState($v.form.password)"
-                @input="$v.form.password.$touch()"
-              />
-              <b-form-invalid-feedback role="alert">
-                <template v-if="!$v.form.password.required">
-                  Field required
-                </template>
-                <template
-                  v-if="
-                    !$v.form.password.minLength || !$v.form.password.maxLength
-                  "
-                >
-                  Length must be between 8 – 20 characters
-                </template>
-              </b-form-invalid-feedback>
+              <input-password-toggle>
+                <b-form-input
+                  id="password"
+                  v-model="form.password"
+                  type="password"
+                  aria-describedby="password-help-block"
+                  :state="getValidationState($v.form.password)"
+                  @input="$v.form.password.$touch()"
+                />
+                <b-form-invalid-feedback role="alert">
+                  <template v-if="!$v.form.password.required">
+                    Field required
+                  </template>
+                  <template
+                    v-if="
+                      !$v.form.password.minLength || !$v.form.password.maxLength
+                    "
+                  >
+                    Length must be between 8 – 20 characters
+                  </template>
+                </b-form-invalid-feedback>
+              </input-password-toggle>
             </b-form-group>
             <b-form-group
               label="Confirm user password"
               label-for="password-confirmation"
             >
-              <b-form-input
-                id="password-confirmation"
-                v-model="form.passwordConfirmation"
-                type="password"
-                :state="getValidationState($v.form.passwordConfirmation)"
-                @input="$v.form.passwordConfirmation.$touch()"
-              />
-              <b-form-invalid-feedback role="alert">
-                <template v-if="!$v.form.passwordConfirmation.required">
-                  Field required
-                </template>
-                <template
-                  v-else-if="!$v.form.passwordConfirmation.sameAsPassword"
-                >
-                  Passwords do not match
-                </template>
-              </b-form-invalid-feedback>
+              <input-password-toggle>
+                <b-form-input
+                  id="password-confirmation"
+                  v-model="form.passwordConfirmation"
+                  type="password"
+                  :state="getValidationState($v.form.passwordConfirmation)"
+                  @input="$v.form.passwordConfirmation.$touch()"
+                />
+                <b-form-invalid-feedback role="alert">
+                  <template v-if="!$v.form.passwordConfirmation.required">
+                    Field required
+                  </template>
+                  <template
+                    v-else-if="!$v.form.passwordConfirmation.sameAsPassword"
+                  >
+                    Passwords do not match
+                  </template>
+                </b-form-invalid-feedback>
+              </input-password-toggle>
             </b-form-group>
           </b-col>
         </b-row>
@@ -145,8 +149,10 @@ import {
   requiredIf
 } from 'vuelidate/lib/validators';
 import VuelidateMixin from '../../../components/Mixins/VuelidateMixin.js';
+import InputPasswordToggle from '../../../components/Global/InputPasswordToggle';
 
 export default {
+  components: { InputPasswordToggle },
   mixins: [VuelidateMixin],
   props: {
     user: {
-- 
cgit v1.2.3