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

1 files changed, 57 insertions, 0 deletions

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>