From 36ed32089327c13089460b59010a7b7f6e95af4f Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Wed, 11 Mar 2026 20:19:16 +0100
Subject: [PATCH] feat(MembersView): add HTML support for info dialog details

- Introduced a new property `detailsHtml` to the info dialog for rendering HTML content.
- Added a new method `showInfoHtml` to display messages with HTML details.
- Updated the Click-TT application submission flow to utilize the new HTML details feature for improved user feedback.
---
 frontend/src/views/MembersView.vue | 56 ++++++++----------------------
 1 file changed, 14 insertions(+), 42 deletions(-)

diff --git a/frontend/src/views/MembersView.vue b/frontend/src/views/MembersView.vue
index 037b64c9..fed27c2c 100644
--- a/frontend/src/views/MembersView.vue
+++ b/frontend/src/views/MembersView.vue
@@ -317,6 +317,7 @@
         :title="infoDialog.title"
         :message="infoDialog.message"
         :details="infoDialog.details"
+        :details-html="infoDialog.detailsHtml"
         :type="infoDialog.type"
     />
     
@@ -434,6 +435,7 @@ export default {
                 title: '',
                 message: '',
                 details: '',
+                detailsHtml: '',
                 type: 'info'
             },
             confirmDialog: {
@@ -497,6 +499,13 @@ export default {
         async showInfo(title, message, details = '', type = 'info') {
             this.infoDialog = buildInfoConfig({ title, message, details, type });
         },
+
+        async showInfoHtml(title, message, detailsHtml = '', type = 'info') {
+            this.infoDialog = {
+                ...buildInfoConfig({ title, message, details: '', type }),
+                detailsHtml
+            };
+        },
         
         async showConfirm(title, message, details = '', type = 'info', options = {}) {
             return new Promise((resolve) => {
@@ -675,21 +684,19 @@ export default {
             this.clickTtPendingMemberIds = [...this.clickTtPendingMemberIds, member.id];
             try {
                 const response = await apiClient.post(`/clubmembers/clicktt-registration/${this.currentClub}/${member.id}`);
-                const detailsText = this.formatClickTtDetails(response.data?.details);
                 if (response.data?.success) {
                     member.clickTtApplicationSubmitted = true;
-                    const successDetails = [response.data.finalUrl || '', detailsText].filter(Boolean).join('\n\n');
-                    await this.showInfo(
+                    await this.showInfoHtml(
                         'Click-TT-Antrag',
-                        getSafeMessage(response.data.message, 'Der Click-TT-Antrag wurde erfolgreich eingereicht.'),
-                        successDetails,
+                        'Bitte loggen Sie sich noch auf click-tt ein und senden Sie den Antrag ab.',
+                        '<a href="https://httv.click-tt.de" target="_blank" rel="noopener noreferrer">click-tt</a>',
                         'success'
                     );
                 } else {
                     await this.showInfo(
                         'Click-TT-Antrag',
                         getSafeMessage(response.data?.error, 'Der Click-TT-Antrag konnte nicht eingereicht werden.'),
-                        detailsText,
+                        '',
                         'error'
                     );
                 }
@@ -699,48 +706,13 @@ export default {
                 await this.showInfo(
                     'Click-TT-Antrag',
                     errorMessage,
-                    this.formatClickTtDetails(error?.response?.data?.details),
+                    '',
                     'error'
                 );
             } finally {
                 this.clickTtPendingMemberIds = this.clickTtPendingMemberIds.filter(id => id !== member.id);
             }
         },
-        formatClickTtDetails(details) {
-            if (!details) {
-                return '';
-            }
-
-            const parts = [];
-            const selected = details.selectedSearchResult;
-            const lastSubmit = details.lastSubmitResult;
-
-            if (selected?.name || selected?.birthDate || selected?.href) {
-                parts.push([
-                    'Ausgewaehlter Suchtreffer:',
-                    selected?.name ? `Name: ${selected.name}` : '',
-                    selected?.birthDate ? `Geburtsdatum: ${selected.birthDate}` : '',
-                    selected?.href ? `Link: ${selected.href}` : ''
-                ].filter(Boolean).join('\n'));
-            }
-
-            if (lastSubmit?.action || lastSubmit?.applicant || lastSubmit?.pageText) {
-                parts.push([
-                    'Ergebnis letzter Submit:',
-                    lastSubmit?.action ? `Aktion: ${lastSubmit.action}` : '',
-                    lastSubmit?.applicant
-                        ? `Antrag fuer: ${[
-                            lastSubmit.applicant.lastName,
-                            lastSubmit.applicant.firstName
-                        ].filter(Boolean).join(', ')}${lastSubmit.applicant.birthDate ? ` (${lastSubmit.applicant.birthDate})` : ''}`
-                        : '',
-                    lastSubmit?.url ? `URL: ${lastSubmit.url}` : '',
-                    lastSubmit?.pageText ? `Seitenstatus: ${lastSubmit.pageText}` : ''
-                ].filter(Boolean).join('\n'));
-            }
-
-            return parts.join('\n\n');
-        },
         toggleNewMember() {
             this.memberFormIsOpen = !this.memberFormIsOpen;
         },