From 0caa31e3ebe804029ce03c632dbbed0d62751485 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Thu, 13 Nov 2025 15:55:33 +0100
Subject: [PATCH] Refactor file input sections in ImageViewerDialog and
 MembersView to enhance user experience. The updates include separate file
 input options for selecting files and capturing images via the device camera,
 improving accessibility and usability for image uploads.

---
 frontend/src/components/ImageViewerDialog.vue | 14 ++++++++++----
 frontend/src/views/MembersView.vue            |  9 ++++++++-
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/ImageViewerDialog.vue b/frontend/src/components/ImageViewerDialog.vue
index 2958a93..8220dc0 100644
--- a/frontend/src/components/ImageViewerDialog.vue
+++ b/frontend/src/components/ImageViewerDialog.vue
@@ -79,10 +79,16 @@
       </div>
 
       <div v-if="allowUpload" class="upload-section">
-        <label class="upload-label">
-          📤 Bilder hochladen
-          <input type="file" multiple accept="image/*" @change="handleFileSelect" />
-        </label>
+        <div style="display: flex; gap: 10px; align-items: center;">
+          <input type="file" multiple accept="image/*" @change="handleFileSelect" ref="fileInput" style="display: none;" id="image-upload-file">
+          <label for="image-upload-file" class="upload-label" style="cursor: pointer; padding: 8px 15px; border: 1px solid #ccc; border-radius: 4px; background: #f5f5f5; display: inline-block;">
+            📁 Dateien auswählen
+          </label>
+          <input type="file" multiple accept="image/*" capture="environment" @change="handleFileSelect" ref="cameraInput" style="display: none;" id="image-upload-camera">
+          <label for="image-upload-camera" class="upload-label" style="cursor: pointer; padding: 8px 15px; border: 1px solid #ccc; border-radius: 4px; background: #f5f5f5; display: inline-block;">
+            📷 Kamera
+          </label>
+        </div>
       </div>
 
       <div v-if="hasImages" class="thumbnail-strip">
diff --git a/frontend/src/views/MembersView.vue b/frontend/src/views/MembersView.vue
index c969872..bbafcd3 100644
--- a/frontend/src/views/MembersView.vue
+++ b/frontend/src/views/MembersView.vue
@@ -93,7 +93,14 @@
                 <label class="checkbox-item"><span>Pics in Internet erlaubt:</span> <input type="checkbox" v-model="newPicsInInternetAllowed"></label>
                 <label class="checkbox-item"><span>Testmitgliedschaft:</span> <input type="checkbox" v-model="testMembership"></label>
                 <label class="checkbox-item"><span>Mitgliedsformular ausgehändigt:</span> <input type="checkbox" v-model="newMemberFormHandedOver"></label>
-                    <label><span>Bild:</span> <input type="file" accept="image/*" @change="onFileSelected"></label>
+                    <label><span>Bild:</span>
+                        <div style="display: flex; gap: 10px; align-items: center;">
+                            <input type="file" accept="image/*" @change="onFileSelected" ref="fileInput" style="display: none;" id="member-image-file">
+                            <label for="member-image-file" style="cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; border-radius: 4px; background: #f5f5f5;">📁 Datei auswählen</label>
+                            <input type="file" accept="image/*" capture="environment" @change="onFileSelected" ref="cameraInput" style="display: none;" id="member-image-camera">
+                            <label for="member-image-camera" style="cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; border-radius: 4px; background: #f5f5f5;">📷 Kamera</label>
+                        </div>
+                    </label>
                     <div v-if="memberImagePreview">
                         <img :src="memberImagePreview" alt="Vorschau des Mitgliedsbildes"
                             style="max-width: 200px; max-height: 200px;">