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 1/5]  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>

From 0e763c0ac30add8935f90144c84544ba7020718c Mon Sep 17 00:00:00 2001
From: Brandon Tripp <brandongtripp@gmail.com>
Date: Mon, 5 Apr 2021 11:54:28 -0600
Subject: [PATCH 2/5] Login Form updated to use ShowPassword component.

---
 webapp/components/LoginForm/LoginForm.vue | 35 ++++-------------------
 1 file changed, 5 insertions(+), 30 deletions(-)

diff --git a/webapp/components/LoginForm/LoginForm.vue b/webapp/components/LoginForm/LoginForm.vue
index 01c3c8661..ec9dbebf8 100644
--- a/webapp/components/LoginForm/LoginForm.vue
+++ b/webapp/components/LoginForm/LoginForm.vue
@@ -31,11 +31,7 @@
             ref="password"
             :type="showPassword ? 'text' : 'password'"
           />
-          <span class="click-wrapper" @click="toggleShowPassword">
-            <span class="icon-wrapper" :data-test="iconName">
-              <base-icon class="toggle-icon" :name="iconName" />
-            </span>
-          </span>
+          <show-password @show-password="toggleShowPassword" :iconName='iconName' />
         </div>
         <nuxt-link to="/password-reset/request">
           {{ $t('login.forgotPassword') }}
@@ -59,10 +55,12 @@
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 import links from '~/constants/links.js'
 import metadata from '~/constants/metadata.js'
+import ShowPassword from '../ShowPassword/ShowPassword.vue'
 
 export default {
   components: {
     LocaleSwitch,
+    ShowPassword
   },
   data() {
     return {
@@ -98,9 +96,8 @@ export default {
         }
       }
     },
-    toggleShowPassword(event) {
+    toggleShowPassword() {
       this.showPassword = !this.showPassword
-      event.preventDefault()
       this.$nextTick(() => {
         this.$refs.password.$el.children[1].children[1].focus()
         this.$emit('focus')
@@ -114,7 +111,7 @@ export default {
 .login-form {
   width: 80vw;
   max-width: 620px;
-  margin: auto;
+  /* margin: auto; */
 
   .base-button {
     display: block;
@@ -145,28 +142,6 @@ export default {
   outline: none;
   transition: all $duration-short $ease-out;
 
-  .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;
-      }
-    }
-  }
-
   &:focus-within {
     background-color: $background-color-base;
     border: $input-border-size solid $border-color-active;

From cf58064e912fcad78a20049a600fbf6921c3e86e Mon Sep 17 00:00:00 2001
From: Brandon Tripp <brandongtripp@gmail.com>
Date: Wed, 14 Apr 2021 12:48:11 -0600
Subject: [PATCH 3/5] Add tests for ShowPassword component. Lint LoginForm and
 ShowPassword.

---
 webapp/components/LoginForm/LoginForm.vue     |  4 +-
 .../ShowPassword/ShowPassword.spec.js         | 33 +++++++++++++++
 .../components/ShowPassword/ShowPassword.vue  | 40 +++++++++----------
 3 files changed, 54 insertions(+), 23 deletions(-)

diff --git a/webapp/components/LoginForm/LoginForm.vue b/webapp/components/LoginForm/LoginForm.vue
index ec9dbebf8..990a9d042 100644
--- a/webapp/components/LoginForm/LoginForm.vue
+++ b/webapp/components/LoginForm/LoginForm.vue
@@ -31,7 +31,7 @@
             ref="password"
             :type="showPassword ? 'text' : 'password'"
           />
-          <show-password @show-password="toggleShowPassword" :iconName='iconName' />
+          <show-password @show-password="toggleShowPassword" :iconName="iconName" />
         </div>
         <nuxt-link to="/password-reset/request">
           {{ $t('login.forgotPassword') }}
@@ -60,7 +60,7 @@ import ShowPassword from '../ShowPassword/ShowPassword.vue'
 export default {
   components: {
     LocaleSwitch,
-    ShowPassword
+    ShowPassword,
   },
   data() {
     return {
diff --git a/webapp/components/ShowPassword/ShowPassword.spec.js b/webapp/components/ShowPassword/ShowPassword.spec.js
index e69de29bb..6eb44f6b2 100644
--- a/webapp/components/ShowPassword/ShowPassword.spec.js
+++ b/webapp/components/ShowPassword/ShowPassword.spec.js
@@ -0,0 +1,33 @@
+import Vue from 'vue'
+import { mount } from '@vue/test-utils'
+
+import ShowPassword from './ShowPassword.vue'
+
+describe('ShowPassword', () => {
+  describe('State of show password icon', () => {
+    const wrapper = mount(ShowPassword, {
+      propsData: {
+        iconName: 'eye',
+      },
+    })
+
+    it('Shows eye icon by default', () => {
+      expect(wrapper.find('.icon-wrapper').attributes('data-test')).toEqual('eye')
+    })
+
+    describe('After click', () => {
+      it('Password wrapper emits show-password event', async () => {
+        wrapper.find('.click-wrapper').trigger('click')
+        await Vue.nextTick()
+        expect(wrapper.emitted()).toBeTruthy()
+      })
+
+      it('Shows the slash-eye icon after click', async () => {
+        wrapper.find('.click-wrapper').trigger('click')
+        wrapper.setProps({ iconName: 'eye-slash' })
+        await Vue.nextTick()
+        expect(wrapper.find('.icon-wrapper').attributes('data-test')).toEqual('eye-slash')
+      })
+    })
+  })
+})
diff --git a/webapp/components/ShowPassword/ShowPassword.vue b/webapp/components/ShowPassword/ShowPassword.vue
index 36d82baeb..c31e01b25 100644
--- a/webapp/components/ShowPassword/ShowPassword.vue
+++ b/webapp/components/ShowPassword/ShowPassword.vue
@@ -8,39 +8,37 @@
 
 <script>
 export default {
-  props: [
-    'iconName'
-  ],
+  props: ['iconName'],
   emits: ['toggle-password'],
   methods: {
     togglePassword(event) {
       event.preventDefault()
       this.$emit('show-password')
-    }
-  }
+    },
+  },
 }
 </script>
 
 <style lang="scss">
-  .icon-wrapper {
-    margin-right: 2px;
-  }
+.icon-wrapper {
+  margin-right: 2px;
+}
 
-  .click-wrapper {
-    padding: 8px;
-    align-content: center;
-    color: $text-color-disabled;
-    cursor: pointer;
-  }
+.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;
+.click-wrapper:hover {
+  &:focus-within {
+    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;
     }
   }
+}
 </style>

From 588385bf5a254b1e24fa04316930c66161a41cb1 Mon Sep 17 00:00:00 2001
From: Brandon Tripp <brandongtripp@gmail.com>
Date: Sat, 8 May 2021 17:53:16 -0600
Subject: [PATCH 4/5] Implement the ShowPassword component in the registration
 slider.

---
 .../Registration/RegistrationSlideCreate.vue  | 105 +++++++++++++++---
 1 file changed, 90 insertions(+), 15 deletions(-)

diff --git a/webapp/components/Registration/RegistrationSlideCreate.vue b/webapp/components/Registration/RegistrationSlideCreate.vue
index 7ac235994..3343876b9 100644
--- a/webapp/components/Registration/RegistrationSlideCreate.vue
+++ b/webapp/components/Registration/RegistrationSlideCreate.vue
@@ -40,24 +40,33 @@
           :label="$t('settings.data.labelName')"
           :placeholder="$t('settings.data.namePlaceholder')"
         />
-        <ds-input
-          id="password"
-          model="password"
-          type="password"
-          autocomplete="off"
-          :label="$t('settings.security.change-password.label-new-password')"
-        />
-        <ds-input
-          id="passwordConfirmation"
-          model="passwordConfirmation"
-          type="password"
-          autocomplete="off"
-          :label="$t('settings.security.change-password.label-new-password-confirm')"
-        />
+        <label for='password'>{{$t('settings.security.change-password.label-new-password')}}</label>
+        <div class="password-wrapper">
+          <ds-input
+            id="password"
+            model="password"
+            :type="showPassword ? 'text' : 'password'"
+            autocomplete="off"
+            class="password-field"
+            ref="password"
+          />
+          <show-password @show-password="toggleShowPassword('password')" :iconName="iconNamePassword" />
+        </div>
+        <label for='passwordConfirmation'>{{$t('settings.security.change-password.label-new-password-confirm')}}</label>
+        <div class="password-wrapper">
+          <ds-input
+            id="passwordConfirmation"
+            model="passwordConfirmation"
+            :type="showPasswordConfirm ? 'text' : 'password'"
+            autocomplete="off"
+            class="password-field"
+            ref="confirmPassword"
+          />
+          <show-password @show-password="toggleShowPassword('confirmPassword')" :iconName="iconNamePasswordConfirm" />
+        </div>
         <password-strength class="password-strength" :password="formData.password" />
 
         <email-display-and-verify :email="sliderData.collectedInputData.email" />
-
         <ds-text>
           <input
             id="checkbox0"
@@ -106,6 +115,7 @@ import EmailDisplayAndVerify from './EmailDisplayAndVerify'
 import { SweetalertIcon } from 'vue-sweetalert-icons'
 import PasswordForm from '~/components/utils/PasswordFormHelper'
 import { SignupVerificationMutation } from '~/graphql/Registration.js'
+import ShowPassword from '../ShowPassword/ShowPassword.vue'
 
 export default {
   name: 'RegistrationSlideCreate',
@@ -113,6 +123,7 @@ export default {
     PasswordStrength,
     EmailDisplayAndVerify,
     SweetalertIcon,
+    ShowPassword,
   },
   props: {
     sliderData: { type: Object, required: true },
@@ -140,6 +151,8 @@ export default {
       // have checkmarks available.
       termsAndConditionsConfirmed: false,
       recieveCommunicationAsEmailsEtcConfirmed: false,
+      showPassword: false,
+      showPasswordConfirm: false,
     }
   },
   mounted: function () {
@@ -180,6 +193,12 @@ export default {
         this.recieveCommunicationAsEmailsEtcConfirmed
       )
     },
+    iconNamePassword() {
+      return this.showPassword ? 'eye-slash' : 'eye'
+    },
+    iconNamePasswordConfirm() {
+      return this.showPasswordConfirm ? 'eye-slash' : 'eye'
+    },
   },
   watch: {
     termsAndConditionsConfirmed() {
@@ -251,6 +270,22 @@ export default {
       this.submit()
       return true
     },
+    toggleShowPassword(e) {
+      if(e === 'password'){
+        this.showPassword = !this.showPassword
+        this.$nextTick(() => {
+          this.$refs.password.$el.children[1].children[0].focus()
+          this.$emit('focus')
+        })
+      } 
+      else {
+        this.showPasswordConfirm = !this.showPasswordConfirm
+        this.$nextTick(() => {
+          this.$refs.confirmPassword.$el.children[1].children[0].focus()
+          this.$emit('focus')
+        })
+      }
+    },
   },
 }
 </script>
@@ -259,4 +294,44 @@ export default {
 .password-strength {
   margin-bottom: 14px;
 }
+
+.password-wrapper {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  padding: $input-padding-vertical $space-x-small;
+  padding-left: 0;
+  padding-right: 0;
+  height: $input-height;
+  margin-bottom: 10px;
+  margin-bottom: 16px;
+
+  color: $text-color-base;
+  background: $background-color-disabled;
+
+  border: $input-border-size solid $border-color-softer;
+  border-left: none;
+  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;
+    }
+  }
+
+  .password-field {
+    position: relative;
+    padding-top: 16px;
+    border: none;
+    border-style: none;
+    appearance: none;
+    margin-left: 0;
+    width: 100%;
+  } 
+}
 </style>

From 654372f60999db70c5be6ce75311808c43c294c8 Mon Sep 17 00:00:00 2001
From: Brandon Tripp <brandongtripp@gmail.com>
Date: Sat, 8 May 2021 21:11:42 -0600
Subject: [PATCH 5/5] Linting for the component.

---
 .../Registration/RegistrationSlideCreate.vue  | 25 +++++++++++++------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/webapp/components/Registration/RegistrationSlideCreate.vue b/webapp/components/Registration/RegistrationSlideCreate.vue
index 3343876b9..cab0e1cce 100644
--- a/webapp/components/Registration/RegistrationSlideCreate.vue
+++ b/webapp/components/Registration/RegistrationSlideCreate.vue
@@ -40,7 +40,9 @@
           :label="$t('settings.data.labelName')"
           :placeholder="$t('settings.data.namePlaceholder')"
         />
-        <label for='password'>{{$t('settings.security.change-password.label-new-password')}}</label>
+        <label for="password">
+          {{ $t('settings.security.change-password.label-new-password') }}
+        </label>
         <div class="password-wrapper">
           <ds-input
             id="password"
@@ -50,9 +52,14 @@
             class="password-field"
             ref="password"
           />
-          <show-password @show-password="toggleShowPassword('password')" :iconName="iconNamePassword" />
+          <show-password
+            @show-password="toggleShowPassword('password')"
+            :iconName="iconNamePassword"
+          />
         </div>
-        <label for='passwordConfirmation'>{{$t('settings.security.change-password.label-new-password-confirm')}}</label>
+        <label for="passwordConfirmation">
+          {{ $t('settings.security.change-password.label-new-password-confirm') }}
+        </label>
         <div class="password-wrapper">
           <ds-input
             id="passwordConfirmation"
@@ -62,7 +69,10 @@
             class="password-field"
             ref="confirmPassword"
           />
-          <show-password @show-password="toggleShowPassword('confirmPassword')" :iconName="iconNamePasswordConfirm" />
+          <show-password
+            @show-password="toggleShowPassword('confirmPassword')"
+            :iconName="iconNamePasswordConfirm"
+          />
         </div>
         <password-strength class="password-strength" :password="formData.password" />
 
@@ -271,14 +281,13 @@ export default {
       return true
     },
     toggleShowPassword(e) {
-      if(e === 'password'){
+      if (e === 'password') {
         this.showPassword = !this.showPassword
         this.$nextTick(() => {
           this.$refs.password.$el.children[1].children[0].focus()
           this.$emit('focus')
         })
-      } 
-      else {
+      } else {
         this.showPasswordConfirm = !this.showPasswordConfirm
         this.$nextTick(() => {
           this.$refs.confirmPassword.$el.children[1].children[0].focus()
@@ -332,6 +341,6 @@ export default {
     appearance: none;
     margin-left: 0;
     width: 100%;
-  } 
+  }
 }
 </style>