feat(button): show password toggle (#4960)

* feat(button): show password toggle * fix: restore transparent prop behavior
Satellite-im · Sep 21, 2022 · aa9bd42 · aa9bd42
1 parent 165d323
commit aa9bd42
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 37 deletions.
diff --git a/components/interactables/Input/Input.html b/components/interactables/Input/Input.html
@@ -3,20 +3,22 @@
     {{ label }}
   </TypographyText>
   <div class="input-outer" :class="`font-size-${size}`">
-    <div class="input-inner">
+    <div
+      class="input-inner"
+      :class="[
+        `is-${color}`,
+        {
+          'is-danger': error || invalid,
+          'has-sibling': $slots.default,
+          transparent: transparent,
+        },
+      ]"
+    >
       <input
         ref="input"
         class="input font-body font-color-light"
-        :class="[
-            `is-${color}`,
-            {
-              'show-clear-button': showClearButton,
-              'is-danger': error || invalid,
-              transparent,
-            },
-          ]"
         :value="text"
-        :type="type"
+        :type="derivedType"
         :readonly="readonly"
         :placeholder="placeholder"
         :minLength="minLength"
@@ -27,6 +29,10 @@
         @input="handleInput"
       />
       <div class="append input-options">
+        <button v-if="type === 'password'" @click="toggleShowPassword">
+          <eye-icon size="1x" v-if="!showPassword" />
+          <eye-off-icon size="1x" v-else />
+        </button>
         <button v-if="showClearButton && !isEmpty" @click="clearInput">
           <delete-icon size="1x" />
         </button>

diff --git a/components/interactables/Input/Input.less b/components/interactables/Input/Input.less
@@ -15,43 +15,50 @@
       display: flex;
       flex-grow: 1;
       min-width: 0;
+      box-shadow: none;
+      background: @input-gradient 100% center;
+      border-radius: @corner-rounding;
+      border: 1px solid transparent;
 
-      .input {
-        flex-grow: 1;
-        padding: 0.5rem;
-        box-shadow: none;
-        background: @input-gradient 100% center;
-        border: none;
-        border-radius: @corner-rounding;
-        border: 1px solid transparent;
-        min-width: 0;
+      &:focus-within {
+        background-image: @semitransparent-lightest-gradient;
+      }
 
-        &.is-danger {
-          border-color: @red;
-        }
+      &.has-sibling {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
 
-        &.show-clear-button {
-          padding-right: 2rem;
-        }
+      &.transparent {
+        background: #fff0;
+        border: 0;
 
-        &.transparent {
+        .input {
           padding: 0;
-          border: none;
+        }
+
+        &:focus-within {
           background: #fff0;
-          flex-grow: 1;
 
-          &:focus {
+          .input {
             outline: none;
-            background: #fff0;
           }
         }
+      }
 
-        &:focus {
-          background-image: @semitransparent-lightest-gradient;
+      .input {
+        flex-grow: 1;
+        padding: 0.5rem;
+        min-width: 0;
+        background: none;
+        border: 0;
+
+        &.is-danger {
+          border-color: @red;
         }
 
-        ::placeholder {
-          color: @body;
+        &::placeholder {
+          color: @dark;
         }
 
         &[type='search']::-webkit-search-cancel-button {
@@ -60,14 +67,15 @@
       }
 
       .append {
-        position: absolute;
         inset: 0 0 0 auto;
         font-size: @tiny-icon-size;
         display: flex;
         align-items: center;
         justify-content: center;
-        padding: 0.5rem;
+        padding-right: 0.75rem;
+        padding-left: 0.25rem;
         color: @text-muted;
+        gap: 0.75rem;
 
         .slot {
           display: flex;

diff --git a/components/interactables/Input/Input.vue b/components/interactables/Input/Input.vue
@@ -2,7 +2,7 @@
 
 <script lang="ts">
 import Vue, { PropType } from 'vue'
-import { DeleteIcon } from 'satellite-lucide-icons'
+import { DeleteIcon, EyeIcon, EyeOffIcon } from 'satellite-lucide-icons'
 import { InputType, InputColor } from './types'
 import { Size } from '~/types/typography'
 
@@ -11,6 +11,8 @@ const MOBILE_FOCUS_DELAY = 300 // ms
 export default Vue.extend({
   components: {
     DeleteIcon,
+    EyeIcon,
+    EyeOffIcon,
   },
   model: {
     prop: 'text',
@@ -90,13 +92,21 @@ export default Vue.extend({
       default: false,
     },
   },
+  data() {
+    return {
+      showPassword: false,
+    }
+  },
   computed: {
     isEmpty(): boolean {
       return !this.text.length
     },
     showClearButton(): boolean {
       return this.showClear || this.type === 'search'
     },
+    derivedType(): string {
+      return this.showPassword ? 'text' : this.type
+    },
   },
   mounted() {
     if (this.autofocus) {
@@ -128,6 +138,9 @@ export default Vue.extend({
     clearInput() {
       this.$emit('change', '')
     },
+    toggleShowPassword() {
+      this.showPassword = !this.showPassword
+    },
   },
 })
 </script>