From 60a6ac3c5baa64164c4fddbc5613b8dcec038701 Mon Sep 17 00:00:00 2001
From: Brandon Tripp <brandongtripp@gmail.com>
Date: Mon, 5 Apr 2021 11:53:40 -0600
Subject: [PATCH]  Migration of toggle show password functionality to separate
 component.'

---
 .../ShowPassword/ShowPassword.spec.js         |  0
 .../components/ShowPassword/ShowPassword.vue  | 46 +++++++++++++++++++
 2 files changed, 46 insertions(+)
 create mode 100644 webapp/components/ShowPassword/ShowPassword.spec.js
 create mode 100644 webapp/components/ShowPassword/ShowPassword.vue

diff --git a/webapp/components/ShowPassword/ShowPassword.spec.js b/webapp/components/ShowPassword/ShowPassword.spec.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/webapp/components/ShowPassword/ShowPassword.vue b/webapp/components/ShowPassword/ShowPassword.vue
new file mode 100644
index 000000000..36d82baeb
--- /dev/null
+++ b/webapp/components/ShowPassword/ShowPassword.vue
@@ -0,0 +1,46 @@
+<template>
+  <span class="click-wrapper" @click="togglePassword">
+    <span class="icon-wrapper" :data-test="iconName">
+      <base-icon class="toggle-icon" :name="iconName" />
+    </span>
+  </span>
+</template>
+
+<script>
+export default {
+  props: [
+    'iconName'
+  ],
+  emits: ['toggle-password'],
+  methods: {
+    togglePassword(event) {
+      event.preventDefault()
+      this.$emit('show-password')
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+  .icon-wrapper {
+    margin-right: 2px;
+  }
+
+  .click-wrapper {
+    padding: 8px;
+    align-content: center;
+    color: $text-color-disabled;
+    cursor: pointer;
+  }
+
+  .click-wrapper:hover {
+    &:focus-within {
+      background-color: $background-color-base;
+      border: $input-border-size solid $border-color-active;
+
+      .toggle-icon {
+        color: $text-color-base;
+      }
+    }
+  }
+</style>