feat(components): visualize api errors for steppers

src/app/components/early-bird/EarlyBirdForm.vue

@@ -8,7 +8,7 @@
         {{ t('description') }}
       </TypographyBodyMedium>
     </div>
-    <FormEarlyBird ref="form" @success="emit('next')" />
+    <FormEarlyBird ref="form" v-model:error="error" @success="emit('next')" />
     <template #bottom>
       <ButtonColored
         :aria-label="t('button')"
@@ -28,6 +28,7 @@ const emit = defineEmits<{
 
 const { t } = useI18n()
 const templateForm = useTemplateRef('form')
+const error = defineModel<Error>('error')
 </script>
 
 <i18n lang="yaml">

src/app/components/event/report/EventReportDrawer.vue

@@ -3,6 +3,7 @@
     <AppStep v-slot="attributes" :is-active="step === 'default'">
       <EventReportForm
         ref="form"
+        v-model:error="error"
         v-bind="attributes"
         :account-id
         :event
@@ -27,6 +28,13 @@
         }}
       </div>
     </AppStep>
+    <AppStep v-slot="attributes" :is-active="step === 'error'">
+      <LayoutPageResult v-bind="attributes" type="error">
+        <template #description>
+          {{ t('somethingWentWrong') }}
+        </template>
+      </LayoutPageResult>
+    </AppStep>
     <template #title>
       <AppStep v-slot="attributes" :is-active="step === 'default'">
         <span v-bind="attributes">
@@ -43,6 +51,11 @@
           {{ t('titleBlockConfirmation') }}
         </span>
       </AppStep>
+      <AppStep v-slot="attributes" :is-active="step === 'error'">
+        <span v-bind="attributes">
+          {{ t('reportingFailed') }}
+        </span>
+      </AppStep>
     </template>
     <template #footer>
       <AppStep v-slot="attributes" :is-active="step === 'default'">
@@ -89,6 +102,16 @@
           </ButtonColored>
         </DrawerClose>
       </AppStep>
+      <AppStep v-slot="attributes" :is-active="step === 'error'">
+        <ButtonColored
+          v-bind="attributes"
+          :aria-label="t('tryAgain')"
+          variant="primary"
+          @click="restart"
+        >
+          {{ t('tryAgain') }}
+        </ButtonColored>
+      </AppStep>
     </template>
   </AppDrawer>
 </template>
@@ -108,15 +131,17 @@ const { accountId, event } = defineProps<{
 // template
 const templateForm = useTemplateRef('form')
 
+// stepper
+const { error, restart, step } = useStepper<
+  'reportConfirmation' | 'blockConfirmation' | 'error'
+>({ initial: 'blockConfirmation' })
+
 // drawer
 const isOpen = defineModel<boolean>()
 const open = () => (isOpen.value = true)
-
-// stepper
-const { step } = useStepper<'reportConfirmation' | 'blockConfirmation'>()
 const onAnimationEnd = (isOpen: boolean) => {
   if (isOpen) return
-  step.value = 'default'
+  restart()
 }
 
 // block
@@ -132,24 +157,16 @@ const blockOrganizer = async () => {
       createdBy: accountId,
     },
   })
-
   if (result.error) {
-    // TODO: confirm design
-    await showToast({
-      icon: 'error',
-      text: apiErrorMessages.value.join('\n'),
-      title: t('globalError'),
-    })
+    error.value = new Error(
+      apiErrorMessages.value.length > 0
+        ? apiErrorMessages.value.join('\n')
+        : t('globalError'),
+    )
     return
   }
-
   if (!result.data) {
-    // TODO: confirm design
-    await showToast({
-      icon: 'error',
-      text: t('globalErrorNoData'),
-      title: t('globalError'),
-    })
+    error.value = new Error(t('globalError'))
     return
   }
 
@@ -176,9 +193,12 @@ de:
   buttonReportSubmit: Meldung einreichen
   contentBlockConfirmation: Der Benutzer {username} wurde blockiert.
   contentReportConfirmation: Vielen Dank für die Meldung. Wir werden sie prüfen und dich über unsere Entscheidung benachrichtigen. Du kannst nun den Organisator {username} blockieren oder zur Event-Seite zurückkehren.
+  reportingFailed: Meldung fehlgeschlagen
+  somethingWentWrong: Etwas ist schief gelaufen.
   titleBlockConfirmation: Benutzer blockiert
   titleReport: Event melden
   titleReportConfirmation: Meldung erhalten
+  tryAgain: Erneut versuchen
 en:
   buttonBlockConfirmation: Back to Dashboard
   buttonReportCancel: Cancel
@@ -187,7 +207,10 @@ en:
   buttonReportSubmit: Report
   contentBlockConfirmation: The user {username} has been blocked.
   contentReportConfirmation: Thank you for your report. We will review it and notify you about our decision. You can block the organizer {username} now or return to the event.
+  reportingFailed: Reporting Failed
+  somethingWentWrong: Something went wrong.
   titleBlockConfirmation: User blocked
   titleReport: Report event
   titleReportConfirmation: Report received
+  tryAgain: Try Again
 </i18n>

src/app/components/event/report/EventReportForm.vue

@@ -46,13 +46,11 @@ const reasons = [
   { label: t('drawerRadioOther'), value: 'other' },
 ]
 const templateForm = useTemplateRef('form')
+const modelError = defineModel<Error>('error')
 
 // report
 const createReportMutation = useCreateReportMutation()
 const api = getApiData([createReportMutation])
-const apiErrorMessages = computed(() =>
-  getCombinedErrorMessages(api.value.errors),
-)
 
 // form
 const submit = () =>
@@ -75,32 +73,33 @@ const onSubmit = handleSubmit(async (values) => {
     },
   })
 
-  if (result.error) {
-    // TODO: confirm design
-    await showToast({
-      icon: 'error',
-      text: apiErrorMessages.value.join('\n'),
-      title: t('globalError'),
-    })
-    return
-  }
+  if (result.error) return
 
   if (!result.data) {
-    // TODO: confirm design
-    await showToast({
-      icon: 'error',
-      text: t('globalErrorNoData'),
-      title: t('globalError'),
-    })
+    modelError.value = new Error(t('globalErrorNoData'))
     return
   }
-
   emit('submitSuccess')
 })
 
 defineExpose({
   submit,
 })
+
+watch(
+  () => api.value.errors,
+  (current) => {
+    modelError.value = current?.length
+      ? // TODO: Use appropriate error codes here
+        new Error(
+          getCombinedErrorMessages(current, {
+            // postgres55000: t('postgres55000'),
+            // postgresP0002: t('postgresP0002'),
+          })[0],
+        )
+      : undefined
+  },
+)
 </script>
 
 <i18n lang="yaml">

src/app/components/form/FormEarlyBird.vue

@@ -63,9 +63,9 @@ const emit = defineEmits<{
   success: []
 }>()
 
-const fireAlert = useFireAlert()
 const { t } = useI18n()
 const templateForm = useTemplateRef('form')
+const modelError = defineModel<Error>('error')
 
 // form
 const submit = () => {
@@ -83,14 +83,8 @@ const onSubmit = handleSubmit(async (values) => {
       body: values,
     })
     emit('success')
-  } catch (error) {
-    // TODO: implement form error page
-    await fireAlert({
-      error,
-      level: 'error',
-      text: t('error'),
-      title: t('globalError'),
-    })
+  } catch {
+    modelError.value = new Error(t('globalError'))
   }
 })
 
@@ -102,12 +96,10 @@ defineExpose({
 <i18n lang="yaml">
 de:
   agreement: Mit deiner Teilnahme stimmst du zu, dass wir deine Kontaktdaten speichern und dich im Rahmen des Programms kontaktieren dürfen.
-  error: Die Anmeldung für das Early Bird-Programm scheint nicht geklappt zu haben. Bitte versuche es noch einmal oder wende dich an den Support, wenn das Problem weiterhin besteht.
   emailAddress: E-Mail-Adresse
   name: Name
 en:
   agreement: By participating, you agree that we may save your contact details and contact you as part of the program.
-  error: The registration for the Early Bird program does not seem to have worked. Please try again or contact support if the problem persists.
   emailAddress: Email address
   name: Name
 </i18n>

src/app/components/form/account/FormAccountSignIn.vue

@@ -131,14 +131,14 @@ de:
   jwtStoreFail: Fehler beim Speichern der Authentifizierungsdaten!
   passwordReset: Passwort zurücksetzen
   postgres55000: Deine E-Mail-Adresse ist noch nicht verifiziert! Schau in dein E-Mail-Postfach, ggf. auch in den Spam-Ordner, oder kontaktiere den Support.
-  postgresP0002: Anmeldung fehlgeschlagen! Hast du dich schon registriert? Überprüfe deine Eingaben auf Schreibfehler oder kontaktiere den Support.
+  postgresP0002: Hast du dich schon registriert? Überprüfe deine Eingaben auf Schreibfehler oder kontaktiere den Support.
   register: Konto erstellen
   signIn: Einloggen
 en:
   jwtStoreFail: Failed to store the authentication data!
   passwordReset: I forgot my password
   postgres55000: Your email address has not been verified yet! Check your email inbox, including the spam folder if necessary, or contact support.
-  postgresP0002: Login failed! Have you registered yet? Check your input for spelling mistakes or contact support.
+  postgresP0002: Have you registered yet? Check your input for spelling mistakes or contact support.
   register: Create an account
   signIn: Log in
 </i18n>

src/app/components/form/account/password/FormAccountPasswordReset.vue

@@ -1,11 +1,5 @@
 <template>
   <AppForm
-    :errors="api.errors"
-    :errors-pg-ids="{
-      postgres22023: t('postgres22023'),
-      postgresP0002: t('postgresP0002'),
-      postgres55000: t('postgres55000'),
-    }"
     :form="v$"
     :is-form-sent="isFormSent"
     is-button-hidden
@@ -39,6 +33,7 @@ const form = reactive({
   password: ref<string>(),
 })
 const isFormSent = ref(false)
+const modelError = defineModel<Error>('error')
 
 // api data
 const passwordResetMutation = useAccountPasswordResetMutation()
@@ -67,6 +62,21 @@ const v$ = useVuelidate(rules, form)
 defineExpose({
   submit,
 })
+
+watch(
+  () => api.value.errors,
+  (current) => {
+    modelError.value = current?.length
+      ? new Error(
+          getCombinedErrorMessages(current, {
+            postgres22023: t('postgres22023'),
+            postgresP0002: t('postgresP0002'),
+            postgres55000: t('postgres55000'),
+          })[0],
+        )
+      : undefined
+  },
+)
 </script>
 
 <i18n lang="yaml">

src/app/components/form/account/password/FormAccountPasswordResetRequest.vue

@@ -1,7 +1,6 @@
 <template>
   <AppForm
     :class="classProps"
-    :errors="api.errors"
     :form="v$"
     :is-form-sent="isFormSent"
     is-button-hidden
@@ -35,10 +34,10 @@ const form = reactive({
   emailAddress: ref<string>(),
 })
 const isFormSent = ref(false)
+const modelError = defineModel<Error>('error')
 
 // api data
 const passwordResetRequestMutation = useAccountPasswordResetRequestMutation()
-const api = getApiData([passwordResetRequestMutation])
 
 // methods
 const submit = async () => {
@@ -48,9 +47,12 @@ const submit = async () => {
     emailAddress: form.emailAddress || '',
     language: locale.value,
   })
-
-  if (result.error || !result.data) return
-
+  // Backend returns success even for invalid emails (security); only handle network errors
+  if (result.error || !result.data) {
+    modelError.value = new Error()
+    return
+  }
+  modelError.value = undefined
   emit('success')
 }