Add Vue PasswordField component with readability toggling

resources/js/components/FormPasswordField.vue

@@ -0,0 +1,79 @@
+<template>
+    <div class="field" :class="{ 'pt-3' : hasOffset }">
+        <label :for="this.inputId(inputType,fieldName)" class="label" v-html="label"></label>
+        <div class="field has-addons">
+            <div class="control">
+                <input :disabled="isDisabled" :id="this.inputId(inputType,fieldName)" :type="inputType" class="input" v-model="form[fieldName]" :placeholder="placeholder" v-bind="$attrs" v-on:change="$emit('field-changed', form[fieldName])"/>
+            </div>
+            <div class="control">
+                <a v-if="!showPassword" class="button is-dark field-lock" @click="showPassword = true" :title="$t('auth.forms.reveal_password')">
+                    <span class="icon">
+                        <font-awesome-icon :icon="['fas', 'eye-slash']" />
+                    </span>
+                </a>
+                <a v-else class="button is-dark field-lock" @click="showPassword = false" :title="$t('auth.forms.hide_password')">
+                    <span class="icon">
+                        <font-awesome-icon :icon="['fas', 'eye']" />
+                    </span>
+                </a>
+            </div>
+        </div>
+        <field-error :form="form" :field="fieldName" />
+        <p class="help" v-html="help" v-if="help"></p>
+    </div> 
+</template>
+
+<script>
+    export default {
+        name: 'FormPasswordField',
+        inheritAttrs: false,
+        
+        data() {
+            return {
+            }
+        },
+
+        props: {
+            label: {
+                type: String,
+                default: ''
+            },
+
+            fieldName: {
+                type: String,
+                default: '',
+                required: true
+            },
+
+            inputType: {
+                type: String,
+                default: 'text'
+            },
+
+            form: {
+                type: Object,
+                required: true
+            },
+
+            placeholder: {
+                type: String,
+                default: ''
+            },
+
+            help: {
+                type: String,
+                default: ''
+            },
+
+            hasOffset: {
+                type: Boolean,
+                default: false
+            },
+
+            isDisabled: {
+                type: Boolean,
+                default: false
+            }
+        },
+    }
+</script>

resources/js/components/index.js

@@ -4,6 +4,7 @@ import Button           from './Button'
 import FieldError       from './FieldError'
 import FormWrapper      from './FormWrapper'
 import FormField        from './FormField'
+import FormPasswordField        from './FormPasswordField'
 import FormSelect       from './FormSelect'
 import FormSwitch       from './FormSwitch'
 import FormToggle       from './FormToggle'
@@ -20,6 +21,7 @@ import SettingTabs      from './SettingTabs'
     FieldError,
     FormWrapper,
     FormField,
+    FormPasswordField,
     FormSelect,
     FormSwitch,
     FormToggle,

resources/js/packages/fontawesome.js

@@ -34,6 +34,8 @@ import {
     faCopy,
     faSortAlphaDown,
     faSortAlphaUp,
+    faEye,
+    faEyeSlash,
 } from '@fortawesome/free-solid-svg-icons'
 
 import {
@@ -72,6 +74,8 @@ library.add(
     faCopy,
     faSortAlphaDown,
     faSortAlphaUp,
+    faEye,
+    faEyeSlash,
 );
 
 Vue.component('font-awesome-icon', FontAwesomeIcon)

resources/lang/en/auth.php

@@ -79,6 +79,8 @@ return [
         'webauthn_login' => 'WebAuthn login',
         'email' => 'Email',
         'password' => 'Password',
+        'reveal_password' => 'Reveal password',
+        'hide_password' => 'Hide password',
         'confirm_password' => 'Confirm password',
         'confirm_new_password' => 'Confirm new password',
         'dont_have_account_yet' => 'Don\'t have your account yet?',