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,55 +131,55 @@ export default {
     }),
     async onLogin(event) {
       if (this.isAuthenticated) {
-        this.$store.dispatch('userSourceUser/logoff')
+        await this.$store.dispatch('userSourceUser/logoff')
-      } else {
-        this.$v.$touch()
-        if (this.$v.$invalid) {
-          this.focusOnFirstError()
-          return
-        }
-        this.loading = true
-        this.hideError()
-        try {
-          await this.$store.dispatch('userSourceUser/authenticate', {
-            userSource: this.selectedUserSource,
-            credentials: {
-              email: this.values.email,
-              password: this.values.password,
-            },
-            setCookie: this.mode === 'public',
-          })
-          this.values.password = ''
-          this.values.email = ''
-          this.$v.$reset()
-          this.fireAfterLoginEvent()
-        } catch (error) {
-          if (error.handler) {
-            const response = error.handler.response
-            if (response && response.status === 401) {
-              this.values.password = ''
-              this.$v.$reset()
-              this.$v.$touch()
-              this.$refs.passwordRef.focus()
-
-              if (response.data?.error === 'ERROR_INVALID_CREDENTIALS') {
-                this.showError(
-                  this.$t('error.incorrectCredentialTitle'),
-                  this.$t('error.incorrectCredentialMessage')
-                )
-              }
-            } else {
-              const message = error.handler.getMessage('login')
-              this.showError(message)
-            }
-
-            error.handler.handled()
-          } else {
-            throw error
-          }
-        }
-        this.loading = false
       }
+
+      this.$v.$touch()
+      if (this.$v.$invalid) {
+        this.focusOnFirstError()
+        return
+      }
+      this.loading = true
+      this.hideError()
+      try {
+        await this.$store.dispatch('userSourceUser/authenticate', {
+          userSource: this.selectedUserSource,
+          credentials: {
+            email: this.values.email,
+            password: this.values.password,
+          },
+          setCookie: this.mode === 'public',
+        })
+        this.values.password = ''
+        this.values.email = ''
+        this.$v.$reset()
+        this.fireAfterLoginEvent()
+      } catch (error) {
+        if (error.handler) {
+          const response = error.handler.response
+          if (response && response.status === 401) {
+            this.values.password = ''
+            this.$v.$reset()
+            this.$v.$touch()
+            this.$refs.passwordRef.focus()
+
+            if (response.data?.error === 'ERROR_INVALID_CREDENTIALS') {
+              this.showError(
+                this.$t('error.incorrectCredentialTitle'),
+                this.$t('error.incorrectCredentialMessage')
+              )
+            }
+          } else {
+            const message = error.handler.getMessage('login')
+            this.showError(message)
+          }
+
+          error.handler.handled()
+        } else {
+          throw error
+        }
+      }
+      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="errorMessage"
-      :error-message="errorForValidationType"
       :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: {
     /**