Add spaces removal on the Secret field - Closes #311

resources/js/components/formElements/FieldError.vue

@@ -7,6 +7,10 @@
         field: {
             type: String,
             required: true
+        },
+        alertType: {
+            type: String,
+            default: 'is-danger'
         }
     })
 </script>
@@ -14,7 +18,8 @@
 <template>
     <div role="alert">
         <p :id="'valError' + field[0].toUpperCase() + field.toLowerCase().slice(1)"
-            class="help is-danger"
+            class="help"
+            :class="alertType"
             v-html="error" />
     </div>
 </template>

resources/js/components/formElements/FormLockField.vue

@@ -9,7 +9,8 @@
     const { inputId } = useIdGenerator(props.inputType, props.fieldName)
 
     const props = defineProps({
-        modelValue: [String, Number, Boolean],
+        modelValue: String,
+        modelModifiers: { default: () => ({}) },
         isEditMode: {
             type: Boolean,
             default: false
@@ -55,15 +56,45 @@
     })
 
     const fieldIsLocked = ref(props.isDisabled || props.isEditMode)
+    const hasBeenTrimmed = ref(false)
+    const componentKey = ref(0);
+
+    const emit = defineEmits(['input:modelValue'])
+
+    /**
+     * Removes spaces from the input string
+     */
+    function emitValue(e) {
+        let value = e.target.value
+        
+
+        if (props.modelModifiers.trimAll) {
+            value = value.replace(/\s+/g, '')
+        }
+
+        emit('update:modelValue', value)
+    }
+
+    function alertOnSpace(e) {
+        let value = e.target.value
+        hasBeenTrimmed.value = value.includes(' ')
+
+        emit('update:modelValue', value)
+    }
+
+    function forceRefresh(e) {
+        hasBeenTrimmed.value = e.target.value.includes(' ')
+        componentKey.value += 1
+    }
+
 </script>
 
 <template>
-    <div class="field" style="margin-bottom: 0.5rem;">
-        <label :for="inputId" class="label" v-html="$t(label)" />
-    </div>
-    <div class="field has-addons" :class="{ 'pt-3' : hasOffset }">
+    <label :for="inputId" class="label" v-html="$t(label)" />
+    <div class="field has-addons mb-0" :class="{ 'pt-3' : hasOffset }">
         <div class="control" :class="{ 'is-expanded': isExpanded }">
             <input 
+                :key="componentKey"
                 :disabled="fieldIsLocked" 
                 :id="inputId" 
                 :type="inputType" 
@@ -71,7 +102,9 @@
                 :value="modelValue" 
                 :placeholder="placeholder" 
                 v-bind="$attrs"
-                v-on:input="$emit('update:modelValue', $event.target.value)"
+                v-on:input="alertOnSpace"
+                v-on:change="emitValue"
+                v-on:blur="forceRefresh"
                 :maxlength="maxLength" 
             />
         </div>
@@ -92,6 +125,7 @@
             </div>
         </UseColorMode>
     </div>
+    <FieldError v-if="hasBeenTrimmed" :error="$t('twofaccounts.forms.spaces_are_ignored')" :field="'spaces'" :alertType="'is-warning'" />
     <FieldError v-if="fieldError != undefined" :error="fieldError" :field="fieldName" />
     <p class="help" v-html="$t(help)" v-if="help"></p>
 </template>

resources/js/views/twofaccounts/CreateUpdate.vue

@@ -461,7 +461,7 @@
                 <FormToggle v-model="form.otp_type" :isDisabled="isEditMode" :choices="otp_types" fieldName="otp_type" :fieldError="form.errors.get('otp_type')" label="twofaccounts.forms.otp_type.label" help="twofaccounts.forms.otp_type.help" :hasOffset="true" />
                 <div v-if="form.otp_type != ''">
                     <!-- secret -->
-                    <FormLockField :isEditMode="isEditMode" v-model="form.secret" fieldName="secret" :fieldError="form.errors.get('secret')" label="twofaccounts.forms.secret.label" help="twofaccounts.forms.secret.help" />
+                    <FormLockField :isEditMode="isEditMode" v-model.trimAll="form.secret" fieldName="secret" :fieldError="form.errors.get('secret')" label="twofaccounts.forms.secret.label" help="twofaccounts.forms.secret.help" />
                     <!-- Options -->
                     <div v-if="form.otp_type !== 'steamtotp'">
                         <h2 class="title is-4 mt-5 mb-2">{{ $t('commons.options') }}</h2>

resources/lang/en/twofaccounts.php

@@ -96,6 +96,7 @@
         ],
         'options_help' => 'You can leave the following options blank if you don\'t know how to set them. The most commonly used values will be applied.',
         'alternative_methods' => 'Alternative methods',
+        'spaces_are_ignored' => 'Unwanted spaces will be automatically removed'
     ],
     'stream' => [
         'live_scan_cant_start' => 'Live scan can\'t start :(',