added toggle functionality for password field through icon

webapp/components/LoginForm/LoginForm.vue

@@ -12,7 +12,7 @@
       </template>
       <h2 class="title">{{ $t('login.login') }}</h2>
       <form :disabled="pending" @submit.prevent="onSubmit">
-        <ds-input
+        <base-input
           v-model="form.email"
           :disabled="pending"
           :placeholder="$t('login.email')"
@@ -25,7 +25,7 @@
           :disabled="pending"
           :placeholder="$t('login.password')"
           icon="lock"
-          icon-right="eye"
+          icon-right="lock"
           icon-right-secondary="eye"
           name="password"
           type="password"

webapp/components/_new/generic/BaseIcon/BaseIcon.vue

@@ -39,6 +39,8 @@ export default {
   display: inline-flex;
   vertical-align: bottom;
 
+  
+
   > .svg {
     height: 1.2em;
     fill: currentColor;

webapp/components/_new/generic/BaseInput/BaseInput.vue

@@ -11,7 +11,8 @@
          ]"
          :id="id"
          :name="name ? name : model"
-         :type="type"
+         :type="[showPassword ? 'text' : 'password']"
+         :v-model="type"
          :autofocus="autofocus"
          :placeholder="placeholder"
          :tabindex="tabindex"
@@ -21,35 +22,52 @@
          @input="handleInput"
          @focus="handleFocus"
          @blur="handleBlur"
-         :rows="type === 'textarea' ? rows : null"
-         v-html="type === 'textarea'"
       />
       <base-icon 
          class="input-icon-right"
-         v-if="iconRight" 
+         v-if="[iconRight && capsLock]" 
          :name="iconRight" />
-      <base-icon 
+      <a
-         class="input-icon-right"
+         class="click-wrapper"
-         v-if="iconRightSecondary" 
+         @click="showPassword = !showPassword"
-         :name="iconRightSecondary" />
+      >
+         <base-icon 
+            class="toggle-icon"
+            icon="[showPassword ? iconRightSecondary : eye-slash]"
+            v-if="iconRightSecondary" 
+            :name="iconRightSecondary" 
+         />
+      </a>
    </div>
 </template>
 
 <script>
 
+import BaseButton from '../BaseButton/BaseButton'
 import BaseIcon from '../BaseIcon/BaseIcon'
+import IconButton from '../IconButton/IconButton'
 import inputMixin from '~/mixins/tempMixins-styleguide/input'
 
 export default {
    components: {
       BaseIcon,
+      BaseButton,
+      IconButton
+   },
+   data: function() {
+      return {
+         showPassword: false,
+         capsLock: false
+      }
    },
    mixins: [inputMixin],
    props: {
       type: {
          type: String, 
          default: 'text',
-         // validator - check if there is existing value helper
+         validator: value => {
+            return value.match(/(url|text|password|email|search|textarea)/)
+         }
       },
       placeholder: {
          type: String, 
@@ -63,10 +81,6 @@ export default {
          type: String, 
          default: null
       },
-      rows: {
-         type: [String, Number],
-         default: 1
-      },
       iconRight: {
          type: String, 
          default: null
@@ -76,14 +90,11 @@ export default {
          default: null
       }
    },
-   computed: {
+   // computed: {
-      tag() {
+   //    togglePassword(event) {
-         if (this.type === 'textarea') {
+   //       this.type = this.type === 'password' ? 'text' : 'password'
-            return 'textarea'
+   //    }
-         }
+   // }
-         return 'input'
-      }
-   }
 }
 </script>
 
@@ -117,7 +128,7 @@ export default {
 
       .base-input {
          border: none;
-         width: 76%;
+         width: 60%;
          background-color: $background-color-disabled;
          font-size: $input-font-size-base;
          line-height: $line-height-base;
@@ -136,9 +147,6 @@ export default {
                border: $input-border-size solid $border-color-active;
             }
          }
-
-         /* .input-is-disabled &, */
-      
       }
    }
 
@@ -148,45 +156,36 @@ export default {
       outline-width: 0;
    }
 
-   .input-icon,
+   .input-icon {
-   .input-icon-right {
-      top: 0;
-      bottom: 0;
-      left: 0;
-      /* width: 10%; */
       align-items: center;
       justify-content: center;
       width: $input-height;
       color: $text-color-softer;
       transition: color $duration-short $ease-out;
       pointer-events: none;
-      
-      .input-has-focus & {
-         color: $text-color-base;
-      }
    }
 
-   /* .input-has-icon-right {
+   .input-icon-right,
-      padding-right: $input-height;
+   .icon-button {
-
+      align-items: center;
-      .input-size-small & {
+      justify-content: center;
-         padding-right: $input-height-small;
+      width: $input-height;
-      }
+      color: $text-color-softer;
-
+      transition: color $duration-short $ease-out;
-      .input-size-large & {
+      pointer-events: none;
-         padding-right: $input-height-large;
+   }
-      }
+   .input-icon-right-secondary {
+      pointer-events: all;
+   }
+
+
+   .toggle-icon {
+      color: $text-color-disabled;
+      background-color: $background-color-disabled;
+      width: 100%;
+      height: 100%;
    }
    
-   .input-has-icon-right-secondary {
-      padding-right: $input-height;
 
-      .input-size-small & {
-         padding-right: $input-height-small;
-      }
    
-      .input-size-large & {
-         padding-right: $input-height-large;
-      }
-   } */
 </style>

webapp/components/_new/generic/IconButton/IconButton.vue

@@ -0,0 +1,33 @@
+<template>
+  <button
+    class="icon-button"
+    @click.prevent="clickFunction"
+  >
+    <base-icon :name="icon" />
+    <slot />
+  </button>
+</template>
+
+<script>
+import BaseIcon from '../BaseIcon/BaseIcon'
+
+export default {
+   components: {
+      BaseIcon
+   },
+   props: {
+      icon: {
+         type: String,
+      },
+
+   }
+
+}
+</script>
+
+<style>
+
+.icon-button {
+   background-color: red;
+}
+</style>