Extracted password input in a dedicated component

front/src/components/auth/Settings.vue

@@ -35,21 +35,13 @@
           </div>
           <div class="field">
             <label><i18next path="Old password"/></label>
-            <input
+            <password-input required v-model="old_password" />
-            required
+
-            type="password"
-            autofocus
-            placeholder="Enter your old password"
-            v-model="old_password">
           </div>
           <div class="field">
             <label><i18next path="New password"/></label>
-            <input
+            <password-input required v-model="new_password" />
-            required
+
-            type="password"
-            autofocus
-            placeholder="Enter your new password"
-            v-model="new_password">
           </div>
           <button :class="['ui', {'loading': isLoading}, 'button']" type="submit"><i18next path="Change password"/></button>
         </form>
@@ -62,8 +54,12 @@
 import $ from 'jquery'
 import axios from 'axios'
 import logger from '@/logging'
+import PasswordInput from '@/components/forms/PasswordInput'
 
 export default {
+  components: {
+    PasswordInput
+  },
   data () {
     let d = {
       // We need to initialize the component with any

front/src/components/auth/Signup.vue

@@ -34,16 +34,7 @@
           </div>
           <div class="field">
             <i18next tag="label" path="Password"/>
-            <div class="ui action input">
+            <password-input v-model="password" />
-              <input
-              required
-              :type="passwordInputType"
-              placeholder="Enter your password"
-              v-model="password">
-              <span @click="showPassword = !showPassword" title="Show/hide password" class="ui icon button">
-                <i class="eye icon"></i>
-              </span>
-            </div>
           </div>
           <button :class="['ui', 'green', {'loading': isLoading}, 'button']" type="submit"><i18next path="Create my account"/></button>
         </form>
@@ -57,8 +48,13 @@
 import axios from 'axios'
 import logger from '@/logging'
 
+import PasswordInput from '@/components/forms/PasswordInput'
+
 export default {
   name: 'login',
+  components: {
+    PasswordInput
+  },
   props: {
     next: {type: String, default: '/'}
   },
@@ -69,8 +65,7 @@ export default {
       password: '',
       isLoadingInstanceSetting: true,
       errors: [],
-      isLoading: false,
+      isLoading: false
-      showPassword: false
     }
   },
   created () {
@@ -104,16 +99,7 @@ export default {
         self.isLoading = false
       })
     }
-  },
-  computed: {
-    passwordInputType () {
-      if (this.showPassword) {
-        return 'text'
   }
-      return 'password'
-    }
-  }
-
 }
 </script>
 

front/src/components/forms/PasswordInput.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="ui action input">
+    <input
+    required
+    :tabindex="index"
+    :type="passwordInputType"
+    @input="$emit('input', $event.target.value)"
+    :value="value">
+    <span @click="showPassword = !showPassword" :title="$t('Show/hide password')" class="ui icon button">
+      <i class="eye icon"></i>
+    </span>
+  </div>
+</template>
+<script>
+export default {
+  props: ['value', 'index'],
+  data () {
+    return {
+      showPassword: false
+    }
+  },
+  computed: {
+    passwordInputType () {
+      if (this.showPassword) {
+        return 'text'
+      }
+      return 'password'
+    }
+  }
+}
+</script>