Refactor backend CORS settings to include default origins and improve error handling in chat services: Introduce dynamic CORS origin handling, enhance RabbitMQ message sending with fallback mechanisms, and update WebSocket service to manage pending messages. Update UI components for better accessibility and responsiveness, including adjustments to dialog and navigation elements. Enhance styling for improved user experience across various components.

frontend/src/dialogues/auth/PasswordResetDialog.vue

@@ -1,7 +1,12 @@
 <template>
     <DialogWidget ref="dialog" title="passwordReset.title" :isTitleTranslated="true" :show-close=true :buttons="buttons" @close="closeDialog" @reset="resetPassword" name="PasswordReset">
-        <div>
-            <label>{{ $t("passwordReset.email") }} <input type="email" v-model="email" required /></label>
+        <div class="form-stack">
+            <div class="form-field">
+                <label for="password-reset-email">{{ $t("passwordReset.email") }}</label>
+                <input id="password-reset-email" type="email" v-model="email" required :class="{ 'field-error': emailTouched && !isEmailValid }" />
+                <span class="form-hint">Wir senden den Link an die hinterlegte E-Mail-Adresse.</span>
+                <span v-if="emailTouched && !isEmailValid" class="form-error">Bitte eine gueltige E-Mail-Adresse eingeben.</span>
+            </div>
         </div>
     </DialogWidget>
 </template>
@@ -9,6 +14,7 @@
 <script>
 import apiClient from '@/utils/axios.js';
 import DialogWidget from '@/components/DialogWidget.vue';
+import { showApiError, showSuccess } from '@/utils/feedback.js';
 
 export default {
     name: 'PasswordResetDialog',
@@ -18,9 +24,21 @@ export default {
     data() {
         return {
             email: '',
-            buttons: [{ text: 'passwordReset.reset', action: 'reset' }]
+            emailTouched: false,
+            buttons: [{ text: 'passwordReset.reset', action: 'reset', disabled: true }]
         };
     },
+    computed: {
+        isEmailValid() {
+            return /\S+@\S+\.\S+/.test(this.email);
+        }
+    },
+    watch: {
+        email() {
+            this.emailTouched = true;
+            this.buttons[0].disabled = !this.isEmailValid;
+        }
+    },
     methods: {
         open() {
             this.$refs.dialog.open();
@@ -29,15 +47,18 @@ export default {
             this.$refs.dialog.close();
         },
         async resetPassword() {
+            if (!this.isEmailValid) {
+                return;
+            }
             try {
                 await apiClient.post('/api/users/requestPasswordReset', {
                     email: this.email
                 });
                 this.$refs.dialog.close();
-                alert(this.$t("passwordReset.success"));
+                showSuccess(this, 'tr:passwordReset.success');
             } catch (error) {
                 console.error('Error resetting password:', error);
-                alert(this.$t("passwordReset.failure"));
+                showApiError(this, error, 'tr:passwordReset.failure');
             }
         }
     }