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 01/11] 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>

From d33b9861fababdc5768b0a7e1c1c092cceeb0569 Mon Sep 17 00:00:00 2001
From: Brandon Tripp <brandongtripp@gmail.com>
Date: Fri, 20 Nov 2020 10:30:39 -0700
Subject: [PATCH 02/11] added to new style to password field to incorporate the
 ds-input with the hide and show password icon

---
 webapp/components/LoginForm/LoginForm.vue | 28 ++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/webapp/components/LoginForm/LoginForm.vue b/webapp/components/LoginForm/LoginForm.vue
index c06cf26cc..1e5650b99 100644
--- a/webapp/components/LoginForm/LoginForm.vue
+++ b/webapp/components/LoginForm/LoginForm.vue
@@ -27,6 +27,7 @@
             :placeholder="$t('login.password')"
             icon="lock"
             name="password"
+            class="password-field"
             :type="showPassword ? 'text' : 'password'"
           />
           <a
@@ -38,7 +39,7 @@
           >
             <base-icon 
                 class="toggle-icon"
-                :name="showPassword ? 'eye-slash' :  'eye'"
+                :name="showPassword ? 'eye-slash' : 'eye'"
             />
           </a>
         </div>
@@ -113,12 +114,13 @@ export default {
 }
 
 .password-wrapper {
-  position: relative;
   display: flex;
-  appearance: none;
   width: 100%;
+  align-items: center;
   padding: $input-padding-vertical $space-x-small;
+  padding-left: 0;
   height: $input-height;
+  margin-bottom: 10px;
 
   color: $text-color-base;
   background: $background-color-disabled;
@@ -127,12 +129,32 @@ export default {
   border-radius: $border-radius-base;
   outline: none;
   transition: all $duration-short $ease-out;
+
+  .click-wrapper {
+    padding: 5px;
+    color: $text-color-disabled;
+  }
+
   &:focus-within {
     background-color: $background-color-base;
     border: $input-border-size solid $border-color-active;
+
     .toggle-icon {
       color: $text-color-base;
     }
   }
+  .password-field {
+    position: relative;
+    padding-top: 16px;
+    padding-right: 20px;
+    border: none;
+    border-style: none;
+    appearance: none;
+    margin-left: 0;
+    margin-right: -16px;
+    width: 100%;
+  }
+
 }
+
 </style>

From 59df64027e8181d894027d65ee3f96859ea6a252 Mon Sep 17 00:00:00 2001
From: Brandon Tripp <brandongtripp@gmail.com>
Date: Fri, 20 Nov 2020 11:33:11 -0700
Subject: [PATCH 03/11] adding linted code to pull request.

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

diff --git a/webapp/components/LoginForm/LoginForm.vue b/webapp/components/LoginForm/LoginForm.vue
index 1e5650b99..0df0dfdb6 100644
--- a/webapp/components/LoginForm/LoginForm.vue
+++ b/webapp/components/LoginForm/LoginForm.vue
@@ -32,15 +32,14 @@
           />
           <a
             class="click-wrapper"
-            @mousedown="(event) => {
-                showPassword = !showPassword;
-                event.preventDefault();
-            }"
+            @mousedown="
+              (event) => {
+                showPassword = !showPassword
+                event.preventDefault()
+              }
+            "
           >
-            <base-icon 
-                class="toggle-icon"
-                :name="showPassword ? 'eye-slash' : 'eye'"
-            />
+            <base-icon class="toggle-icon" :name="showPassword ? 'eye-slash' : 'eye'" />
           </a>
         </div>
         <nuxt-link to="/password-reset/request">
@@ -68,7 +67,7 @@ import BaseIcon from '../_new/generic/BaseIcon/BaseIcon'
 export default {
   components: {
     LocaleSwitch,
-    BaseIcon
+    BaseIcon,
   },
   data() {
     return {
@@ -76,7 +75,7 @@ export default {
         email: '',
         password: '',
       },
-      showPassword: false
+      showPassword: false,
     }
   },
   computed: {
@@ -154,7 +153,5 @@ export default {
     margin-right: -16px;
     width: 100%;
   }
-
 }
-
 </style>

From f56664b334bbb64791a6a9fd37190aa081e7c321 Mon Sep 17 00:00:00 2001
From: Brandon Tripp <brandongtripp@gmail.com>
Date: Fri, 20 Nov 2020 13:39:43 -0700
Subject: [PATCH 04/11] Refactor of click event to use a methhod and the @click
 rather than mouse down. Small adjustment to button spacing.

---
 webapp/components/LoginForm/LoginForm.vue | 31 +++++++++++++++++------
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/webapp/components/LoginForm/LoginForm.vue b/webapp/components/LoginForm/LoginForm.vue
index 0df0dfdb6..52ee7262b 100644
--- a/webapp/components/LoginForm/LoginForm.vue
+++ b/webapp/components/LoginForm/LoginForm.vue
@@ -32,12 +32,7 @@
           />
           <a
             class="click-wrapper"
-            @mousedown="
-              (event) => {
-                showPassword = !showPassword
-                event.preventDefault()
-              }
-            "
+            @click="toggleShowPassword"
           >
             <base-icon class="toggle-icon" :name="showPassword ? 'eye-slash' : 'eye'" />
           </a>
@@ -94,6 +89,11 @@ export default {
         this.$toast.error(this.$t('login.failure'))
       }
     },
+    toggleShowPassword(event) {
+      console.log(event);
+      event.preventDefault();
+      this.showPassword = !this.showPassword
+    }
   },
 }
 </script>
@@ -118,6 +118,7 @@ export default {
   align-items: center;
   padding: $input-padding-vertical $space-x-small;
   padding-left: 0;
+  padding-right: 0;
   height: $input-height;
   margin-bottom: 10px;
 
@@ -130,10 +131,24 @@ export default {
   transition: all $duration-short $ease-out;
 
   .click-wrapper {
-    padding: 5px;
+    padding: 8px;
+    margin: 4px;
     color: $text-color-disabled;
   }
 
+  .click-wrapper:hover {
+    cursor: pointer;
+
+    &:focus-within {
+    background-color: $background-color-base;
+    border: $input-border-size solid $border-color-active;
+
+    .toggle-icon {
+      color: $text-color-base;
+    }
+  }
+  }
+
   &:focus-within {
     background-color: $background-color-base;
     border: $input-border-size solid $border-color-active;
@@ -145,7 +160,7 @@ export default {
   .password-field {
     position: relative;
     padding-top: 16px;
-    padding-right: 20px;
+    padding-right: 16px;
     border: none;
     border-style: none;
     appearance: none;

From 74b56cbca74ebac297781c268117236940261187 Mon Sep 17 00:00:00 2001
From: Brandon Tripp <brandongtripp@gmail.com>
Date: Fri, 20 Nov 2020 14:10:43 -0700
Subject: [PATCH 05/11] linting of LoginForm.vue

---
 webapp/components/LoginForm/LoginForm.vue | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/webapp/components/LoginForm/LoginForm.vue b/webapp/components/LoginForm/LoginForm.vue
index 52ee7262b..2010d2ae3 100644
--- a/webapp/components/LoginForm/LoginForm.vue
+++ b/webapp/components/LoginForm/LoginForm.vue
@@ -30,10 +30,7 @@
             class="password-field"
             :type="showPassword ? 'text' : 'password'"
           />
-          <a
-            class="click-wrapper"
-            @click="toggleShowPassword"
-          >
+          <a class="click-wrapper" @click="toggleShowPassword">
             <base-icon class="toggle-icon" :name="showPassword ? 'eye-slash' : 'eye'" />
           </a>
         </div>
@@ -90,10 +87,9 @@ export default {
       }
     },
     toggleShowPassword(event) {
-      console.log(event);
-      event.preventDefault();
       this.showPassword = !this.showPassword
-    }
+      event.preventDefault()
+    },
   },
 }
 </script>
@@ -140,14 +136,14 @@ export default {
     cursor: pointer;
 
     &:focus-within {
-    background-color: $background-color-base;
-    border: $input-border-size solid $border-color-active;
+      background-color: $background-color-base;
+      border: $input-border-size solid $border-color-active;
 
-    .toggle-icon {
-      color: $text-color-base;
+      .toggle-icon {
+        color: $text-color-base;
+      }
     }
   }
-  }
 
   &:focus-within {
     background-color: $background-color-base;

From 0b03bf2fccf54c1cf272727e39a203259959a4d0 Mon Sep 17 00:00:00 2001
From: Brandon Tripp <brandongtripp@gmail.com>
Date: Fri, 20 Nov 2020 15:15:09 -0700
Subject: [PATCH 06/11] Initial attempt at spec for show/hide password

---
 webapp/components/LoginForm/LoginForm.spec.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/webapp/components/LoginForm/LoginForm.spec.js b/webapp/components/LoginForm/LoginForm.spec.js
index 045378287..de79e4a49 100644
--- a/webapp/components/LoginForm/LoginForm.spec.js
+++ b/webapp/components/LoginForm/LoginForm.spec.js
@@ -38,7 +38,7 @@ describe('LoginForm', () => {
           error: jest.fn(),
         },
       }
-      return mount(LoginForm, { mocks, localVue, propsData, store })
+      return mount(LoginForm, { mocks, localVue, propsData, store, data })
     }
 
     describe('fill in email and password and submit', () => {
@@ -57,5 +57,13 @@ describe('LoginForm', () => {
         })
       })
     })
+    
+    describe('Click event', () => {
+      it('clicking icon shows/hides password and changes icon', () => {   
+        wrapper.find('a.click-wrapper').trigger('click')
+        expect(wrapper.data.showPassword).toEqual(!showPassword)
+      })
+    })
   })
+
 })

From f71fb6b07b2c1707f7a6da52ca9ee7c3a12021fa Mon Sep 17 00:00:00 2001
From: Brandon Tripp <brandongtripp@gmail.com>
Date: Tue, 24 Nov 2020 15:35:35 -0700
Subject: [PATCH 07/11] Modified reveal password wrapper to contain test data,
 added tests for icon default and change of icon upon click. Preliminary test
 for returning focus to input field.

---
 webapp/components/LoginForm/LoginForm.spec.js | 46 ++++++++++++++++---
 webapp/components/LoginForm/LoginForm.vue     | 25 +++++++---
 2 files changed, 58 insertions(+), 13 deletions(-)

diff --git a/webapp/components/LoginForm/LoginForm.spec.js b/webapp/components/LoginForm/LoginForm.spec.js
index de79e4a49..2f036882f 100644
--- a/webapp/components/LoginForm/LoginForm.spec.js
+++ b/webapp/components/LoginForm/LoginForm.spec.js
@@ -1,3 +1,4 @@
+import Vue from 'vue'
 import LoginForm from './LoginForm.vue'
 import Styleguide from '@human-connection/styleguide'
 import Vuex from 'vuex'
@@ -38,7 +39,7 @@ describe('LoginForm', () => {
           error: jest.fn(),
         },
       }
-      return mount(LoginForm, { mocks, localVue, propsData, store, data })
+      return mount(LoginForm, { mocks, localVue, propsData, store })
     }
 
     describe('fill in email and password and submit', () => {
@@ -57,13 +58,44 @@ describe('LoginForm', () => {
         })
       })
     })
-    
-    describe('Click event', () => {
-      it('clicking icon shows/hides password and changes icon', () => {   
-        wrapper.find('a.click-wrapper').trigger('click')
-        expect(wrapper.data.showPassword).toEqual(!showPassword)
+
+    describe('Click on show password input field type change', () => {
+      const wrapper = Wrapper()
+      it('does not show the password by default', () => {
+        expect(wrapper.find('input[name ="password"]').attributes('type')).toEqual('password')
+      })
+
+      it('shows the password after click on show password', async () => {
+        wrapper.find('span.click-wrapper').trigger('click')
+        await Vue.nextTick()
+        await expect(wrapper.find('input[name = "password"]').attributes('type')).toEqual('text')
+      })
+
+    })
+        
+    describe('Click on show password icon, icon change', () => {
+      const wrapper = Wrapper()
+      it('shows eye icon by default', () => {
+        expect(wrapper.find('span.icon-wrapper').attributes('data-test')).toEqual('eye')
+      })
+
+      it('shows the slash-eye icon after click', async () => {
+        wrapper.find('span.click-wrapper').trigger('click')
+        await Vue.nextTick()
+        await expect(wrapper.find('span.icon-wrapper').attributes('data-test')).toEqual('eye-slash')
+      })
+    })
+
+    describe('Focus returns to password input container after show password click', () =>{
+      const wrapper = Wrapper()
+      const componentToGetFocus = wrapper.find('input[name ="password"]')
+      it('Focus is on the password field container after click', async () => {
+        wrapper.find('span.click-wrapper').trigger('click', {
+          relateTarget: componentToGetFocus
+        })
+        await Vue.nextTick()
+        await expect(wrapper.emitted('focus')).toBeTruthy()
       })
     })
   })
-
 })
diff --git a/webapp/components/LoginForm/LoginForm.vue b/webapp/components/LoginForm/LoginForm.vue
index 2010d2ae3..e25b42dd4 100644
--- a/webapp/components/LoginForm/LoginForm.vue
+++ b/webapp/components/LoginForm/LoginForm.vue
@@ -20,7 +20,7 @@
           name="email"
           icon="envelope"
         />
-        <div class="password-wrapper">
+        <div class="password-wrapper" >
           <ds-input
             v-model="form.password"
             :disabled="pending"
@@ -28,11 +28,14 @@
             icon="lock"
             name="password"
             class="password-field"
+            ref="password"
             :type="showPassword ? 'text' : 'password'"
           />
-          <a class="click-wrapper" @click="toggleShowPassword">
-            <base-icon class="toggle-icon" :name="showPassword ? 'eye-slash' : 'eye'" />
-          </a>
+          <span class="click-wrapper" @click="toggleShowPassword">
+            <span class="icon-wrapper" :data-test="iconName">
+              <base-icon class="toggle-icon"  :name="iconName" />
+            </span>
+          </span>
         </div>
         <nuxt-link to="/password-reset/request">
           {{ $t('login.forgotPassword') }}
@@ -74,6 +77,9 @@ export default {
     pending() {
       return this.$store.getters['auth/pending']
     },
+    iconName() {
+      return this.showPassword ? 'eye-slash' : 'eye'
+    }
   },
   methods: {
     async onSubmit() {
@@ -89,6 +95,10 @@ export default {
     toggleShowPassword(event) {
       this.showPassword = !this.showPassword
       event.preventDefault()
+      this.$nextTick(() => {
+        this.$refs.password.$el.children[1].children[1].focus()
+        this.$emit('focus')
+      })
     },
   },
 }
@@ -126,15 +136,17 @@ export default {
   outline: none;
   transition: all $duration-short $ease-out;
 
-  .click-wrapper {
+  .icon-wrapper {
     padding: 8px;
     margin: 4px;
+    padding-left: 16px;
     color: $text-color-disabled;
   }
 
   .click-wrapper:hover {
     cursor: pointer;
 
+
     &:focus-within {
       background-color: $background-color-base;
       border: $input-border-size solid $border-color-active;
@@ -153,10 +165,11 @@ export default {
       color: $text-color-base;
     }
   }
+
   .password-field {
     position: relative;
     padding-top: 16px;
-    padding-right: 16px;
+    padding-right: 8px;
     border: none;
     border-style: none;
     appearance: none;

From 8d1931f94ca2f0a1ceb542e23aa1d9f89cf15450 Mon Sep 17 00:00:00 2001
From: Brandon Tripp <brandongtripp@gmail.com>
Date: Tue, 24 Nov 2020 15:38:49 -0700
Subject: [PATCH 08/11] Linting for new tests and LoginForm changes.

---
 webapp/components/LoginForm/LoginForm.spec.js | 7 +++----
 webapp/components/LoginForm/LoginForm.vue     | 7 +++----
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/webapp/components/LoginForm/LoginForm.spec.js b/webapp/components/LoginForm/LoginForm.spec.js
index 2f036882f..642711ca0 100644
--- a/webapp/components/LoginForm/LoginForm.spec.js
+++ b/webapp/components/LoginForm/LoginForm.spec.js
@@ -70,9 +70,8 @@ describe('LoginForm', () => {
         await Vue.nextTick()
         await expect(wrapper.find('input[name = "password"]').attributes('type')).toEqual('text')
       })
-
     })
-        
+
     describe('Click on show password icon, icon change', () => {
       const wrapper = Wrapper()
       it('shows eye icon by default', () => {
@@ -86,12 +85,12 @@ describe('LoginForm', () => {
       })
     })
 
-    describe('Focus returns to password input container after show password click', () =>{
+    describe('Focus returns to password input container after show password click', () => {
       const wrapper = Wrapper()
       const componentToGetFocus = wrapper.find('input[name ="password"]')
       it('Focus is on the password field container after click', async () => {
         wrapper.find('span.click-wrapper').trigger('click', {
-          relateTarget: componentToGetFocus
+          relateTarget: componentToGetFocus,
         })
         await Vue.nextTick()
         await expect(wrapper.emitted('focus')).toBeTruthy()
diff --git a/webapp/components/LoginForm/LoginForm.vue b/webapp/components/LoginForm/LoginForm.vue
index e25b42dd4..adf702f53 100644
--- a/webapp/components/LoginForm/LoginForm.vue
+++ b/webapp/components/LoginForm/LoginForm.vue
@@ -20,7 +20,7 @@
           name="email"
           icon="envelope"
         />
-        <div class="password-wrapper" >
+        <div class="password-wrapper">
           <ds-input
             v-model="form.password"
             :disabled="pending"
@@ -33,7 +33,7 @@
           />
           <span class="click-wrapper" @click="toggleShowPassword">
             <span class="icon-wrapper" :data-test="iconName">
-              <base-icon class="toggle-icon"  :name="iconName" />
+              <base-icon class="toggle-icon" :name="iconName" />
             </span>
           </span>
         </div>
@@ -79,7 +79,7 @@ export default {
     },
     iconName() {
       return this.showPassword ? 'eye-slash' : 'eye'
-    }
+    },
   },
   methods: {
     async onSubmit() {
@@ -146,7 +146,6 @@ export default {
   .click-wrapper:hover {
     cursor: pointer;
 
-
     &:focus-within {
       background-color: $background-color-base;
       border: $input-border-size solid $border-color-active;

From d7641c3a3520af08cdec60a6fdb88b8605650c68 Mon Sep 17 00:00:00 2001
From: Brandon Tripp <brandongtripp@gmail.com>
Date: Wed, 25 Nov 2020 21:18:26 -0700
Subject: [PATCH 09/11] Changed spec descriptions to be more clear.

---
 webapp/components/LoginForm/LoginForm.spec.js | 6 +++---
 webapp/components/LoginForm/LoginForm.vue     | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/webapp/components/LoginForm/LoginForm.spec.js b/webapp/components/LoginForm/LoginForm.spec.js
index 642711ca0..430fdbe21 100644
--- a/webapp/components/LoginForm/LoginForm.spec.js
+++ b/webapp/components/LoginForm/LoginForm.spec.js
@@ -59,7 +59,7 @@ describe('LoginForm', () => {
       })
     })
 
-    describe('Click on show password input field type change', () => {
+    describe('Visibility of password', () => {
       const wrapper = Wrapper()
       it('does not show the password by default', () => {
         expect(wrapper.find('input[name ="password"]').attributes('type')).toEqual('password')
@@ -85,10 +85,10 @@ describe('LoginForm', () => {
       })
     })
 
-    describe('Focus returns to password input container after show password click', () => {
+    describe('Focus on password input container after show-password click', () => {
       const wrapper = Wrapper()
       const componentToGetFocus = wrapper.find('input[name ="password"]')
-      it('Focus is on the password field container after click', async () => {
+      it('Focuses on the password field after click', async () => {
         wrapper.find('span.click-wrapper').trigger('click', {
           relateTarget: componentToGetFocus,
         })
diff --git a/webapp/components/LoginForm/LoginForm.vue b/webapp/components/LoginForm/LoginForm.vue
index adf702f53..640b8cb08 100644
--- a/webapp/components/LoginForm/LoginForm.vue
+++ b/webapp/components/LoginForm/LoginForm.vue
@@ -139,7 +139,7 @@ export default {
   .icon-wrapper {
     padding: 8px;
     margin: 4px;
-    padding-left: 16px;
+    padding-left: 20px;
     color: $text-color-disabled;
   }
 
@@ -173,7 +173,7 @@ export default {
     border-style: none;
     appearance: none;
     margin-left: 0;
-    margin-right: -16px;
+    margin-right: -20px;
     width: 100%;
   }
 }

From 8afcd6e4ea6d2f57bddb0fe50d2094a8af85ab0a Mon Sep 17 00:00:00 2001
From: Brandon Tripp <brandongtripp@gmail.com>
Date: Tue, 1 Dec 2020 11:28:58 -0700
Subject: [PATCH 10/11] The styling was adjusted to center eye icon and make
 entire span clickable.

---
 webapp/components/LoginForm/LoginForm.vue | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/webapp/components/LoginForm/LoginForm.vue b/webapp/components/LoginForm/LoginForm.vue
index 640b8cb08..7c1eeb102 100644
--- a/webapp/components/LoginForm/LoginForm.vue
+++ b/webapp/components/LoginForm/LoginForm.vue
@@ -137,15 +137,17 @@ export default {
   transition: all $duration-short $ease-out;
 
   .icon-wrapper {
+    margin-right: 2px;
+  }
+
+  .click-wrapper {
     padding: 8px;
-    margin: 4px;
-    padding-left: 20px;
+    align-content: center;
     color: $text-color-disabled;
+    cursor: pointer;
   }
 
   .click-wrapper:hover {
-    cursor: pointer;
-
     &:focus-within {
       background-color: $background-color-base;
       border: $input-border-size solid $border-color-active;
@@ -155,6 +157,7 @@ export default {
       }
     }
   }
+  
 
   &:focus-within {
     background-color: $background-color-base;
@@ -168,12 +171,10 @@ export default {
   .password-field {
     position: relative;
     padding-top: 16px;
-    padding-right: 8px;
     border: none;
     border-style: none;
     appearance: none;
     margin-left: 0;
-    margin-right: -20px;
     width: 100%;
   }
 }

From 4efc1d3bf66204d7bae315e4c0fd4ffe8afa1c59 Mon Sep 17 00:00:00 2001
From: Brandon Tripp <brandongtripp@gmail.com>
Date: Tue, 1 Dec 2020 13:37:58 -0700
Subject: [PATCH 11/11] Linted the code to correct one error.

---
 webapp/components/LoginForm/LoginForm.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/webapp/components/LoginForm/LoginForm.vue b/webapp/components/LoginForm/LoginForm.vue
index 7c1eeb102..2cb59f931 100644
--- a/webapp/components/LoginForm/LoginForm.vue
+++ b/webapp/components/LoginForm/LoginForm.vue
@@ -157,7 +157,6 @@ export default {
       }
     }
   }
-  
 
   &:focus-within {
     background-color: $background-color-base;