Merge pull request #3985 from Ocelot-Social-Community/bgt-show-hide-password-2434

[Feature] Show/Hide Password Icon - Issue # 2434

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'
@@ -57,5 +58,43 @@ describe('LoginForm', () => {
         })
       })
     })
+
+    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')
+      })
+
+      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 on password input container after show-password click', () => {
+      const wrapper = Wrapper()
+      const componentToGetFocus = wrapper.find('input[name ="password"]')
+      it('Focuses on the password field after click', async () => {
+        wrapper.find('span.click-wrapper').trigger('click', {
+          relateTarget: componentToGetFocus,
+        })
+        await Vue.nextTick()
+        await expect(wrapper.emitted('focus')).toBeTruthy()
+      })
+    })
   })
 })

webapp/components/LoginForm/LoginForm.vue

@@ -20,15 +20,23 @@
           name="email"
           icon="envelope"
         />
+        <div class="password-wrapper">
           <ds-input
             v-model="form.password"
             :disabled="pending"
             :placeholder="$t('login.password')"
             icon="lock"
-          icon-right="question-circle"
             name="password"
-          type="password"
+            class="password-field"
+            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>
+        </div>
         <nuxt-link to="/password-reset/request">
           {{ $t('login.forgotPassword') }}
         </nuxt-link>
@@ -49,10 +57,12 @@
 
 <script>
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
+import BaseIcon from '../_new/generic/BaseIcon/BaseIcon'
 
 export default {
   components: {
     LocaleSwitch,
+    BaseIcon,
   },
   data() {
     return {
@@ -60,12 +70,16 @@ export default {
         email: '',
         password: '',
       },
+      showPassword: false,
     }
   },
   computed: {
     pending() {
       return this.$store.getters['auth/pending']
     },
+    iconName() {
+      return this.showPassword ? 'eye-slash' : 'eye'
+    },
   },
   methods: {
     async onSubmit() {
@@ -78,6 +92,14 @@ export default {
         this.$toast.error(this.$t('login.failure'))
       }
     },
+    toggleShowPassword(event) {
+      this.showPassword = !this.showPassword
+      event.preventDefault()
+      this.$nextTick(() => {
+        this.$refs.password.$el.children[1].children[1].focus()
+        this.$emit('focus')
+      })
+    },
   },
 }
 </script>
@@ -95,4 +117,64 @@ export default {
     margin-bottom: $space-small;
   }
 }
+
+.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;
+
+  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;
+
+  .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;
+
+    .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>