Bind Fields instead of full Form to the Login view inputs

resources/js_vue3/components/formElements/FieldError.vue

@@ -1,7 +1,7 @@
 <script setup>
     const props = defineProps({
-        form: {
+        error: {
-            type: Object,
+            type: String,
             required: true
         },
         field: {
@@ -13,6 +13,8 @@
 
 <template>
     <div role="alert">
-        <p :id="'valError' + field[0].toUpperCase() + field.toLowerCase().slice(1)" class="help is-danger" v-if="form.errors.has(field)" v-html="form.errors.get(field)" />
+        <p :id="'valError' + field[0].toUpperCase() + field.toLowerCase().slice(1)"
+            class="help is-danger"
+            v-html="error" />
     </div>
 </template>

resources/js_vue3/components/formElements/FormButtons.vue

@@ -14,7 +14,7 @@
             },
             caption: {
                 type: String,
-                default: 'Submit'
+                default: 'commons.submit'
             },
             cancelLandingView: {
                 type: String,
@@ -39,7 +39,7 @@
     <div class="field is-grouped">
         <div class="control">
             <VueButton :id="submitId" :color="color" :isLoading="isBusy" :disabled="isDisabled" >
-                {{ caption }}
+                {{ $t(caption) }}
             </VueButton>
         </div>
         <div class="control" v-if="showCancelButton">

resources/js_vue3/components/formElements/FormField.vue

@@ -1,88 +1,68 @@
+<script setup>
+    import { useIdGenerator } from '@/composables/helpers'
+
+    defineOptions({
+        inheritAttrs: false
+    })
+
+    const { inputId } = useIdGenerator(props.inputType, props.fieldName)
+
+    const props = defineProps({
+        modelValue: [String, Number, Boolean],
+        label: {
+            type: String,
+            default: ''
+        },
+        fieldName: {
+            type: String,
+            default: '',
+            required: true
+        },
+        fieldError: [String],
+        inputType: {
+            type: String,
+            default: 'text'
+        },
+        placeholder: {
+            type: String,
+            default: ''
+        },
+        help: {
+            type: String,
+            default: ''
+        },
+        hasOffset: {
+            type: Boolean,
+            default: false
+        },
+        isDisabled: {
+            type: Boolean,
+            default: false
+        },
+        maxLength: {
+            type: Number,
+            default: null
+        }
+    })
+</script>
+
 <template>
     <div class="field" :class="{ 'pt-3' : hasOffset }">
-        <label :for="inputId" class="label" v-html="label"></label>
+        <label :for="inputId" class="label" v-html="$t(label)"></label>
         <div class="control">
             <input 
                 :disabled="isDisabled" 
                 :id="inputId" 
                 :type="inputType" 
                 class="input" 
-                v-model="form[fieldName]" 
+                :value="modelValue" 
                 :placeholder="placeholder" 
-                v-bind="$attrs" 
+                v-bind="$attrs"
-                v-on:change="$emit('field-changed', form[fieldName])"
+                v-on:change="$emit('update:modelValue', $event.target.value)"
                 :maxlength="this.maxLength" 
             />
         </div>
-        <FieldError :form="form" :field="fieldName" />
+        <FieldError v-if="fieldError != undefined" :error="fieldError" :field="fieldName" />
-        <p class="help" v-html="help" v-if="help"></p>
+        <p class="help" v-html="$t(help)" v-if="help"></p>
     </div> 
 </template>
-
-<script>
-    import { useIdGenerator } from '../../composables/helpers'
-
-    export default {
-        name: 'FormField',
-        inheritAttrs: false,
-
-        setup(props) {
-            const { inputId } = useIdGenerator(props.inputType, props.fieldName)
-            return { inputId }
-        },
-        
-        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
-            },
-
-            maxLength: {
-                type: Number,
-                default: null
-            }
-        }
-    }
-</script>

resources/js_vue3/components/formElements/FormPasswordField.vue

@@ -1,16 +1,92 @@
+<script setup>
+    import { useIdGenerator } from '@/composables/helpers'
+
+    defineOptions({
+        inheritAttrs: false
+    })
+
+    const { inputId } = useIdGenerator(props.inputType, props.fieldName)
+    const currentType = ref(props.inputType)
+    const hasCapsLockOn = ref(false)
+
+    const props = defineProps({
+        modelValue: [String, Number, Boolean],
+        label: {
+            type: String,
+            default: ''
+        },
+        fieldName: {
+            type: String,
+            default: '',
+            required: true
+        },
+        fieldError: [String],
+        inputType: {
+            type: String,
+            default: 'password'
+        },
+        placeholder: {
+            type: String,
+            default: ''
+        },
+        help: {
+            type: String,
+            default: ''
+        },
+        hasOffset: {
+            type: Boolean,
+            default: false
+        },
+        isDisabled: {
+            type: Boolean,
+            default: false
+        },
+        showRules: {
+            type: Boolean,
+            default: false
+        },
+    })
+
+    const hasLowerCase = computed(() => {
+        return /[a-z]/.test(modelValue)
+    })
+    const hasUpperCase = computed(() => {
+        return /[A-Z]/.test(modelValue)
+    })
+    const hasNumber = computed(() => {
+        return /[0-9]/.test(modelValue)
+    })
+    const hasSpecialChar = computed(() => {
+        return /[^A-Za-z0-9]/.test(modelValue)
+    })
+    const IsLongEnough = computed(() => {
+        return modelValue.length >= 8
+    })
+
+    function checkCapsLock(event) {
+        hasCapsLockOn.value = event.getModifierState('CapsLock') ? true : false
+    }
+
+    function setFieldType(event) {
+        if (currentType.value != event) {
+            currentType.value = event
+        }
+    }
+</script>
+
 <template>
     <div class="field" :class="{ 'pt-3' : hasOffset }">
-        <label :for="inputId" class="label" v-html="label"></label>
+        <label :for="inputId" class="label" v-html="$t(label)" />
         <div class="control has-icons-right">
             <input
                 :disabled="isDisabled"
                 :id="inputId"
                 :type="currentType" 
                 class="input" 
-                v-model="form[fieldName]" 
+                :value="modelValue" 
                 :placeholder="placeholder" 
                 v-bind="$attrs" 
-                v-on:change="$emit('field-changed', form[fieldName])"
+                v-on:change="$emit('update:modelValue', $event.target.value)"
                 v-on:keyup="checkCapsLock"
             />
             <span v-if="currentType == 'password'" role="button" id="btnTogglePassword" tabindex="0" class="icon is-small is-right is-clickable" @keyup.enter="setFieldType('text')" @click="setFieldType('text')" :title="$t('auth.forms.reveal_password')">
@@ -21,8 +97,8 @@
             </span>
         </div>
         <p class="help is-warning" v-if="hasCapsLockOn" v-html="$t('auth.forms.caps_lock_is_on')" />
-        <FieldError :form="form" :field="fieldName" />
+        <FieldError v-if="fieldError != undefined" :error="fieldError" :field="fieldName" />
-        <p class="help" v-html="help" v-if="help"></p>
+        <p class="help" v-html="$t(help)" v-if="help" />
         <div v-if="showRules" class="columns is-mobile is-size-7 mt-0">
             <div class="column is-one-third">
                 <span class="has-text-weight-semibold">{{ $t("auth.forms.mandatory_rules") }}</span><br />
@@ -37,103 +113,4 @@
             </div>
         </div>
     </div> 
-</template>
+</template>
-
-<script>
-    import { useIdGenerator } from '../../composables/helpers'
-
-    export default {
-        name: 'FormPasswordField',
-        inheritAttrs: false,
-
-        setup(props) {
-            const { inputId } = useIdGenerator('password', props.fieldName)
-            return { inputId }
-        },
-        
-        data() {
-            return {
-                currentType: this.inputType,
-                hasCapsLockOn: false,
-            }
-        },
-
-        computed: {
-            hasLowerCase() {
-                return /[a-z]/.test(this.form[this.fieldName])
-            },
-            hasUpperCase() {
-                return /[A-Z]/.test(this.form[this.fieldName])
-            },
-            hasNumber() {
-                return /[0-9]/.test(this.form[this.fieldName])
-            },
-            hasSpecialChar() {
-                return /[^A-Za-z0-9]/.test(this.form[this.fieldName])
-            },
-            IsLongEnough() {
-                return this.form[this.fieldName].length >= 8
-            },
-        },
-
-        props: {
-            label: {
-                type: String,
-                default: ''
-            },
-
-            fieldName: {
-                type: String,
-                default: '',
-                required: true
-            },
-
-            inputType: {
-                type: String,
-                default: 'password'
-            },
-
-            form: {
-                type: Object,
-                required: true
-            },
-
-            placeholder: {
-                type: String,
-                default: ''
-            },
-
-            help: {
-                type: String,
-                default: ''
-            },
-
-            hasOffset: {
-                type: Boolean,
-                default: false
-            },
-
-            isDisabled: {
-                type: Boolean,
-                default: false
-            },
-
-            showRules: {
-                type: Boolean,
-                default: false
-            },
-        },
-
-        methods: {
-            checkCapsLock(event) {
-                this.hasCapsLockOn = event.getModifierState('CapsLock') ? true : false
-            },
-
-            setFieldType(event) {
-                if (this.currentType != event) {
-                    this.currentType = event
-                }
-            }
-        },
-    }
-</script>

resources/js_vue3/components/formElements/FormSelect.vue

@@ -10,6 +10,7 @@
             default: '',
             required: true
         },
+        fieldError: [String],
         options: {
             type: Array,
             required: true
@@ -33,7 +34,7 @@
                 </select>
             </div>
         </div>
-        <!-- <FieldError :form="form" :field="fieldName" /> -->
+        <FieldError v-if="fieldError != undefined" :error="fieldError" :field="fieldName" />
         <p class="help" v-html="$t(help)" v-if="help"></p>
     </div>
 </template>

resources/js_vue3/components/formElements/FormToggle.vue

@@ -12,6 +12,7 @@
             type: String,
             required: true
         },
+        fieldError: [String],
         hasOffset: Boolean,
         isDisabled: Boolean,
         label: {
@@ -67,7 +68,7 @@
                 </button>
             </UseColorMode>
         </div>
-        <!-- <FieldError :form="form" :field="fieldName" /> -->
+        <FieldError v-if="fieldError != undefined" :error="fieldError" :field="fieldName" />
         <p class="help" v-html="$t(help)" v-if="help" />
     </div>
 </template>

resources/js_vue3/layouts/FormWrapper.vue

@@ -1,31 +1,20 @@
+<script setup>
+    const props = defineProps({
+        title: {
+            type: String,
+            default: ''
+        },
+        punchline: {
+            type: String,
+            default: ''
+        },
+    })
+</script>
+
 <template>
     <ResponsiveWidthWrapper>
-        <h1 class="title has-text-grey-dark" v-html="title" v-if="title"></h1>
+        <h1 class="title has-text-grey-dark" v-html="$t(title)" v-if="title"></h1>
-        <div id="punchline" v-if="punchline" class="block" v-html="punchline"></div>
+        <div id="punchline" v-if="punchline" class="block" v-html="$t(punchline)" />
         <slot />
     </ResponsiveWidthWrapper>   
-</template>
+</template>
-
-<script>
-    export default {
-        name: 'FormWrapper',
-        
-        data() {
-            return {
-
-            }
-        },
-
-        props: {
-            title: {
-                type: String,
-                default: ''
-            },
-
-            punchline: {
-                type: String,
-                default: ''
-            },
-        }
-    }
-</script>

resources/js_vue3/views/auth/Login.vue

@@ -10,10 +10,11 @@
     const notify = useNotifyStore()
     const appSettings = useAppSettingsStore()
     const showWebauthnForm = user.preferences.useWebauthnOnly ? true : useStorage($2fauth.prefix + 'showWebauthnForm', false) 
-    const form = reactive(new Form({
+    const formData = {
         email: '',
         password: ''
-    }))
+    }
+    const form = reactive(new Form(formData))
 
     /**
      * Toggle the form between legacy and webauthn method
@@ -52,13 +53,13 @@
 
 <template>
     <!-- webauthn authentication -->
-    <FormWrapper v-if="showWebauthnForm" :title="$t('auth.forms.webauthn_login')" :punchline="$t('auth.welcome_to_2fauth')">
+    <FormWrapper v-if="showWebauthnForm" title="auth.forms.webauthn_login" punchline="auth.welcome_to_2fauth">
         <div class="field">
             {{ $t('auth.webauthn.use_security_device_to_sign_in') }}
         </div>
         <form id="frmWebauthnLogin" @submit.prevent="webauthnLogin" @keydown="form.onKeydown($event)">
-            <FormField :form="form" fieldName="email" inputType="email" :label="$t('auth.forms.email')" autofocus />
+            <FormField v-model="form.email" fieldName="email" :fieldError="form.errors.get('email')" inputType="email" label="auth.forms.email" autofocus />
-            <FormButtons :isBusy="form.isBusy" :caption="$t('commons.continue')" :submitId="'btnContinue'"/>
+            <FormButtons :isBusy="form.isBusy" caption="commons.continue" submitId="btnContinue"/>
         </form>
         <div class="nav-links">
             <p>
@@ -75,13 +76,13 @@
         </div>
     </FormWrapper>
     <!-- login/password legacy form -->
-    <FormWrapper v-else :title="$t('auth.forms.login')" :punchline="$t('auth.welcome_to_2fauth')">
+    <FormWrapper v-else title="auth.forms.login" punchline="auth.welcome_to_2fauth">
         <div v-if="$2fauth.isDemoApp" class="notification is-info has-text-centered is-radiusless" v-html="$t('auth.forms.welcome_to_demo_app_use_those_credentials')" />
         <div v-if="$2fauth.isTestingApp" class="notification is-warning has-text-centered is-radiusless" v-html="$t('auth.forms.welcome_to_testing_app_use_those_credentials')" />
         <form id="frmLegacyLogin" @submit.prevent="LegacysignIn" @keydown="form.onKeydown($event)">
-            <FormField :form="form" fieldName="email" inputType="email" :label="$t('auth.forms.email')" autofocus />
+            <FormField v-model="form.email" fieldName="email" :fieldError="form.errors.get('email')" inputType="email" label="auth.forms.email" autofocus />
-            <FormPasswordField :form="form" fieldName="password" :label="$t('auth.forms.password')" />
+            <FormPasswordField v-model="form.password" fieldName="password" :fieldError="form.errors.get('password')" label="auth.forms.password" />
-            <FormButtons :isBusy="form.isBusy" :caption="$t('auth.sign_in')" :submitId="'btnSignIn'"/>
+            <FormButtons :isBusy="form.isBusy" caption="auth.sign_in" submitId="btnSignIn"/>
         </form>
         <div class="nav-links">
             <p>{{ $t('auth.forms.forgot_your_password') }}&nbsp;

resources/lang/en/commons.php

@@ -71,4 +71,5 @@ return [
     'file' => 'File',
     'or' => 'OR',
     'close_the_x_page' => 'Close the :pagetitle page',
+    'submit' => 'Submit',
 ];