app/Domains/Event/Views/Partials/ParticipantsList.vue

@@ -512,7 +512,7 @@ function mailToGroup(groupKey) {
                                 <span
                                     v-if="!participant.refund && Number(participant.amountPaidValue ?? 0) > 0"
                                     class="link"
-                                    style="color: #3cb62e;"
+                                    style="color: #da7070;"
                                     @click="openRefundDialog(participant)"
                                 > | Beitrag erstatten</span>
 

app/Domains/ParticipantRefund/Views/RefundPage.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {reactive, ref} from 'vue'
+import {computed, reactive, ref} from 'vue'
 import {toast} from 'vue3-toastify'
 import AppLayout from '../../../../resources/js/layouts/AppLayout.vue'
 import ShadowedBox from '../../../Views/Components/ShadowedBox.vue'
@@ -36,6 +36,18 @@ const form = reactive({accountOwner: '', accountIban: '', declarationAccepted: f
 const errors = reactive({accountOwner: '', accountIban: '', declaration: ''})
 const saving = ref(false)
 
+/**
+ * Die Erklärung erscheint erst, wenn beide Kontoangaben stehen -- man bestätigt nichts, bevor man weiß,
+ * worüber. Dasselbe Vorgehen wie beim Erfassen einer Abrechnung (refund-data.vue).
+ *
+ * Dort wird zusätzlich auf `iban.length === 27` geprüft, also auf die Länge einer formatierten deutschen
+ * IBAN. Das bleibt hier bewusst weg: eine österreichische oder schweizerische käme sonst nie durch. Ob
+ * die IBAN stimmt, prüft der Server mit Prüfziffer und länderabhängiger Länge.
+ */
+const accountComplete = computed(
+    () => form.accountOwner.trim() !== '' && form.accountIban.trim() !== ''
+)
+
 function validate() {
     errors.accountOwner = form.accountOwner.trim() ? '' : 'Bitte gib an, wem das Konto gehört.'
     errors.accountIban = form.accountIban.trim() ? '' : 'Bitte gib die IBAN des Kontos ein.'
@@ -155,6 +167,7 @@ async function submit() {
                             gelesen und angekreuzt werden -- sonst schriebe der Beleg dem Teili eine
                             Zusicherung zu, die er nie abgegeben hat.
                         -->
+                        <template v-if="accountComplete">
                             <div class="declaration">
                                 <input
                                     id="refund-declaration"
@@ -168,9 +181,17 @@ async function submit() {
                             </div>
                             <ErrorText :message="errors.declaration" />
 
-                        <button class="button" type="submit" :disabled="saving || !form.declarationAccepted">
+                            <!-- Beim Speichern gesperrt statt ausgeblendet, sonst verschwände der Knopf
+                                 unter dem Finger. -->
+                            <button
+                                v-if="form.declarationAccepted"
+                                class="button"
+                                type="submit"
+                                :disabled="saving"
+                            >
                                 {{ saving ? 'Wird gespeichert…' : 'Angaben absenden' }}
                             </button>
+                        </template>
                     </form>
                 </template>
             </template>