From 15733f0b38a6e9e0f7cfbfc6a7d0a1833bd48ac5 Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Wed, 4 Oct 2023 10:43:59 +0200
Subject: [PATCH] Bind Fields instead of full Form to the Login view inputs

---
 .../components/formElements/FieldError.vue    |   8 +-
 .../components/formElements/FormButtons.vue   |   4 +-
 .../components/formElements/FormField.vue     | 128 +++++-------
 .../formElements/FormPasswordField.vue        | 187 ++++++++----------
 .../components/formElements/FormSelect.vue    |   3 +-
 .../components/formElements/FormToggle.vue    |   3 +-
 resources/js_vue3/layouts/FormWrapper.vue     |  43 ++--
 resources/js_vue3/views/auth/Login.vue        |  19 +-
 resources/lang/en/commons.php                 |   1 +
 9 files changed, 174 insertions(+), 222 deletions(-)

diff --git a/resources/js_vue3/components/formElements/FieldError.vue b/resources/js_vue3/components/formElements/FieldError.vue
index b4977b32..f4e8f0fb 100644
--- a/resources/js_vue3/components/formElements/FieldError.vue
+++ b/resources/js_vue3/components/formElements/FieldError.vue
@@ -1,7 +1,7 @@
 <script setup>
     const props = defineProps({
-        form: {
-            type: Object,
+        error: {
+            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>
\ No newline at end of file
diff --git a/resources/js_vue3/components/formElements/FormButtons.vue b/resources/js_vue3/components/formElements/FormButtons.vue
index 731c29a1..ca214d13 100644
--- a/resources/js_vue3/components/formElements/FormButtons.vue
+++ b/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">
diff --git a/resources/js_vue3/components/formElements/FormField.vue b/resources/js_vue3/components/formElements/FormField.vue
index c7fa2be7..e0321d7b 100644
--- a/resources/js_vue3/components/formElements/FormField.vue
+++ b/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-on:change="$emit('field-changed', form[fieldName])"
+                v-bind="$attrs"
+                v-on:change="$emit('update:modelValue', $event.target.value)"
                 :maxlength="this.maxLength" 
             />
         </div>
-        <FieldError :form="form" :field="fieldName" />
-        <p class="help" v-html="help" v-if="help"></p>
+        <FieldError v-if="fieldError != undefined" :error="fieldError" :field="fieldName" />
+        <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>
\ No newline at end of file
diff --git a/resources/js_vue3/components/formElements/FormPasswordField.vue b/resources/js_vue3/components/formElements/FormPasswordField.vue
index 6bc944b5..020685f6 100644
--- a/resources/js_vue3/components/formElements/FormPasswordField.vue
+++ b/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" />
-        <p class="help" v-html="help" v-if="help"></p>
+        <FieldError v-if="fieldError != undefined" :error="fieldError" :field="fieldName" />
+        <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>
-
-<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>
\ No newline at end of file
+</template>
\ No newline at end of file
diff --git a/resources/js_vue3/components/formElements/FormSelect.vue b/resources/js_vue3/components/formElements/FormSelect.vue
index 2264d971..17273c62 100644
--- a/resources/js_vue3/components/formElements/FormSelect.vue
+++ b/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>
\ No newline at end of file
diff --git a/resources/js_vue3/components/formElements/FormToggle.vue b/resources/js_vue3/components/formElements/FormToggle.vue
index 1d9960ea..5c81c8d7 100644
--- a/resources/js_vue3/components/formElements/FormToggle.vue
+++ b/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>
\ No newline at end of file
diff --git a/resources/js_vue3/layouts/FormWrapper.vue b/resources/js_vue3/layouts/FormWrapper.vue
index 83c27b58..cd85804c 100644
--- a/resources/js_vue3/layouts/FormWrapper.vue
+++ b/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>
-        <div id="punchline" v-if="punchline" class="block" v-html="punchline"></div>
+        <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="$t(punchline)" />
         <slot />
     </ResponsiveWidthWrapper>   
-</template>
-
-<script>
-    export default {
-        name: 'FormWrapper',
-        
-        data() {
-            return {
-
-            }
-        },
-
-        props: {
-            title: {
-                type: String,
-                default: ''
-            },
-
-            punchline: {
-                type: String,
-                default: ''
-            },
-        }
-    }
-</script>
\ No newline at end of file
+</template>
\ No newline at end of file
diff --git a/resources/js_vue3/views/auth/Login.vue b/resources/js_vue3/views/auth/Login.vue
index 9b0cb34d..f75ae650 100644
--- a/resources/js_vue3/views/auth/Login.vue
+++ b/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 />
-            <FormButtons :isBusy="form.isBusy" :caption="$t('commons.continue')" :submitId="'btnContinue'"/>
+            <FormField v-model="form.email" fieldName="email" :fieldError="form.errors.get('email')" inputType="email" label="auth.forms.email" autofocus />
+            <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 />
-            <FormPasswordField :form="form" fieldName="password" :label="$t('auth.forms.password')" />
-            <FormButtons :isBusy="form.isBusy" :caption="$t('auth.sign_in')" :submitId="'btnSignIn'"/>
+            <FormField v-model="form.email" fieldName="email" :fieldError="form.errors.get('email')" inputType="email" label="auth.forms.email" autofocus />
+            <FormPasswordField v-model="form.password" fieldName="password" :fieldError="form.errors.get('password')" label="auth.forms.password" />
+            <FormButtons :isBusy="form.isBusy" caption="auth.sign_in" submitId="btnSignIn"/>
         </form>
         <div class="nav-links">
             <p>{{ $t('auth.forms.forgot_your_password') }}&nbsp;
diff --git a/resources/lang/en/commons.php b/resources/lang/en/commons.php
index bbf2f8d2..b045ab5a 100644
--- a/resources/lang/en/commons.php
+++ b/resources/lang/en/commons.php
@@ -71,4 +71,5 @@
     'file' => 'File',
     'or' => 'OR',
     'close_the_x_page' => 'Close the :pagetitle page',
+    'submit' => 'Submit',
 ];