Refactor authentication and data handling in API; implement encryption for user and member data storage. Update relevant components to utilize new encryption methods, ensuring secure data management across the application. Enhance error handling and streamline data writing processes for improved reliability.

components/PublicNews.vue

@@ -16,7 +16,8 @@
           <article
             v-for="item in news"
             :key="item.id"
-            class="bg-gray-50 rounded-xl p-6 border border-gray-200 hover:shadow-lg transition-shadow w-full max-w-sm flex flex-col"
+            @click="openNewsModal(item)"
+            class="bg-gray-50 rounded-xl p-6 border border-gray-200 hover:shadow-lg transition-shadow w-full max-w-sm flex flex-col cursor-pointer"
           >
             <div class="flex items-center text-sm text-gray-500 mb-3">
               <Calendar :size="16" class="mr-2" />
@@ -34,14 +35,50 @@
         </div>
       </div>
     </div>
+
+    <!-- News Modal -->
+    <div
+      v-if="selectedNews"
+      class="fixed inset-0 z-50 bg-black bg-opacity-50 flex items-center justify-center p-4"
+      @click.self="closeNewsModal"
+    >
+      <div class="bg-white rounded-xl shadow-2xl max-w-4xl w-full max-h-[90vh] flex flex-col">
+        <!-- Modal Header -->
+        <div class="flex items-center justify-between p-6 border-b border-gray-200">
+          <div class="flex-1">
+            <div class="flex items-center text-sm text-gray-500 mb-2">
+              <Calendar :size="16" class="mr-2" />
+              {{ formatDate(selectedNews.created) }}
+            </div>
+            <h2 class="text-2xl font-display font-bold text-gray-900">
+              {{ selectedNews.title }}
+            </h2>
+          </div>
+          <button
+            @click="closeNewsModal"
+            class="ml-4 p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
+          >
+            <X :size="24" />
+          </button>
+        </div>
+
+        <!-- Modal Content (scrollable) -->
+        <div class="p-6 overflow-y-auto flex-1">
+          <div class="prose max-w-none text-gray-700 whitespace-pre-wrap">
+            {{ selectedNews.content }}
+          </div>
+        </div>
+      </div>
+    </div>
   </section>
 </template>
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { Calendar } from 'lucide-vue-next'
+import { Calendar, X } from 'lucide-vue-next'
 
 const news = ref([])
+const selectedNews = ref(null)
 
 const loadNews = async () => {
   try {
@@ -77,6 +114,18 @@ const getGridClass = () => {
   }
 }
 
+const openNewsModal = (item) => {
+  selectedNews.value = item
+  // Verhindere Scrollen im Hintergrund
+  document.body.style.overflow = 'hidden'
+}
+
+const closeNewsModal = () => {
+  selectedNews.value = null
+  // Erlaube Scrollen wieder
+  document.body.style.overflow = ''
+}
+
 onMounted(() => {
   loadNews()
 })