Small Improvements

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,22 +167,31 @@ async function submit() {
                             gelesen und angekreuzt werden -- sonst schriebe der Beleg dem Teili eine
                             Zusicherung zu, die er nie abgegeben hat.
                         -->
-                        <div class="declaration">
-                            <input
-                                id="refund-declaration"
-                                v-model="form.declarationAccepted"
-                                type="checkbox"
-                            />
-                            <TextResource
-                                text-name="CONFIRMATION_PARTICIPANT_REFUND"
-                                belongs-to="refund-declaration"
-                            />
-                        </div>
-                        <ErrorText :message="errors.declaration" />
+                        <template v-if="accountComplete">
+                            <div class="declaration">
+                                <input
+                                    id="refund-declaration"
+                                    v-model="form.declarationAccepted"
+                                    type="checkbox"
+                                />
+                                <TextResource
+                                    text-name="CONFIRMATION_PARTICIPANT_REFUND"
+                                    belongs-to="refund-declaration"
+                                />
+                            </div>
+                            <ErrorText :message="errors.declaration" />
 
-                        <button class="button" type="submit" :disabled="saving || !form.declarationAccepted">
-                            {{ saving ? 'Wird gespeichert…' : 'Angaben absenden' }}
-                        </button>
+                            <!-- 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>