Fix re-login process with the auth form

changelog/entries/unreleased/bug/2476_using_login_form_if_you_are_already_logged_doesnt_require_to.json

@@ -0,0 +1,7 @@
+{
+    "type": "bug",
+    "message": "Using login form if you are already logged doesn't require to click twice on the button anymore",
+    "issue_number": 2476,
+    "bullet_points": [],
+    "created_at": "2024-03-28"
+}

enterprise/web-frontend/modules/baserow_enterprise/builder/components/elements/AuthFormElement.vue

@@ -131,8 +131,9 @@ export default {
     }),
     async onLogin(event) {
       if (this.isAuthenticated) {
-        this.$store.dispatch('userSourceUser/logoff')
-      } else {
+        await this.$store.dispatch('userSourceUser/logoff')
+      }
+
       this.$v.$touch()
       if (this.$v.$invalid) {
         this.focusOnFirstError()
@@ -179,7 +180,6 @@ export default {
         }
       }
       this.loading = false
-      }
     },
   },
   validations: {

web-frontend/modules/builder/components/elements/baseComponents/ABFormGroup.vue

@@ -37,11 +37,6 @@ export default {
       required: false,
       default: null,
     },
-    isInError: {
-      type: Boolean,
-      required: false,
-      default: null,
-    },
     label: {
       type: String,
       required: false,
@@ -70,7 +65,7 @@ export default {
   },
   computed: {
     hasError() {
-      return this.isInError !== null ? this.isInError : Boolean(this.error)
+      return Boolean(this.errorMessage)
     },
   },
 }

web-frontend/modules/builder/components/elements/components/InputTextElement.vue

@@ -2,8 +2,7 @@
   <div>
     <ABFormGroup
       :label="resolvedLabel"
-      :is-in-error="displayFormDataError"
-      :error-message="errorForValidationType"
+      :error-message="errorMessage"
       :autocomplete="isEditMode ? 'off' : ''"
       :required="element.required"
     >
@@ -40,16 +39,6 @@ export default {
     },
   },
   computed: {
-    errorForValidationType() {
-      switch (this.element.validation_type) {
-        case 'integer':
-          return this.$t('error.invalidNumber')
-        case 'email':
-          return this.$t('error.invalidEmail')
-        default:
-          return this.$t('error.requiredField')
-      }
-    },
     resolvedDefaultValue() {
       return this.resolveFormula(this.element.default_value)
     },
@@ -68,5 +57,17 @@ export default {
       immediate: true,
     },
   },
+  methods: {
+    getErrorMessage() {
+      switch (this.element.validation_type) {
+        case 'integer':
+          return this.$t('error.invalidNumber')
+        case 'email':
+          return this.$t('error.invalidEmail')
+        default:
+          return this.$t('error.requiredField')
+      }
+    },
+  },
 }
 </script>

web-frontend/modules/builder/mixins/formElement.js

@@ -25,6 +25,9 @@ export default {
         !this.isEditMode
       )
     },
+    errorMessage() {
+      return this.displayFormDataError ? this.getErrorMessage() : ''
+    },
     formElementTouched() {
       return this.$store.getters['formData/getElementTouched'](
         this.page,
@@ -81,6 +84,10 @@ export default {
         elementId: this.element.id,
       })
     },
+    /** Override this method to display the right error message */
+    getErrorMessage() {
+      return ''
+    },
   },
   watch: {
     /**