From 15cd45e8e1aa7c82d11ee738d17d9210991ea046 Mon Sep 17 00:00:00 2001
From: Brandon Tripp <brandongtripp@gmail.com>
Date: Fri, 20 Nov 2020 09:26:35 -0700
Subject: [PATCH] added password field icon and toggle functionality for the
 icon and password field on hide/reveal icon click

---
 webapp/components/LoginForm/LoginForm.vue | 58 +++++++++++++++++++----
 1 file changed, 49 insertions(+), 9 deletions(-)

diff --git a/webapp/components/LoginForm/LoginForm.vue b/webapp/components/LoginForm/LoginForm.vue
index eb771a5b2..c06cf26cc 100644
--- a/webapp/components/LoginForm/LoginForm.vue
+++ b/webapp/components/LoginForm/LoginForm.vue
@@ -20,15 +20,28 @@
           name="email"
           icon="envelope"
         />
-        <ds-input
-          v-model="form.password"
-          :disabled="pending"
-          :placeholder="$t('login.password')"
-          icon="lock"
-          icon-right="question-circle"
-          name="password"
-          type="password"
-        />
+        <div class="password-wrapper">
+          <ds-input
+            v-model="form.password"
+            :disabled="pending"
+            :placeholder="$t('login.password')"
+            icon="lock"
+            name="password"
+            :type="showPassword ? 'text' : 'password'"
+          />
+          <a
+            class="click-wrapper"
+            @mousedown="(event) => {
+                showPassword = !showPassword;
+                event.preventDefault();
+            }"
+          >
+            <base-icon 
+                class="toggle-icon"
+                :name="showPassword ? 'eye-slash' :  'eye'"
+            />
+          </a>
+        </div>
         <nuxt-link to="/password-reset/request">
           {{ $t('login.forgotPassword') }}
         </nuxt-link>
@@ -49,10 +62,12 @@
 
 <script>
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
+import BaseIcon from '../_new/generic/BaseIcon/BaseIcon'
 
 export default {
   components: {
     LocaleSwitch,
+    BaseIcon
   },
   data() {
     return {
@@ -60,6 +75,7 @@ export default {
         email: '',
         password: '',
       },
+      showPassword: false
     }
   },
   computed: {
@@ -95,4 +111,28 @@ export default {
     margin-bottom: $space-small;
   }
 }
+
+.password-wrapper {
+  position: relative;
+  display: flex;
+  appearance: none;
+  width: 100%;
+  padding: $input-padding-vertical $space-x-small;
+  height: $input-height;
+
+  color: $text-color-base;
+  background: $background-color-disabled;
+
+  border: $input-border-size solid $border-color-softer;
+  border-radius: $border-radius-base;
+  outline: none;
+  transition: all $duration-short $ease-out;
+  &:focus-within {
+    background-color: $background-color-base;
+    border: $input-border-size solid $border-color-active;
+    .toggle-icon {
+      color: $text-color-base;
+    }
+  }
+}
 </style>