From f603840f34963ae2de54119c795ad13a04b447b4 Mon Sep 17 00:00:00 2001
From: Bastian Masanek <bastian.masanek@experimenta.science>
Date: Fri, 31 Oct 2025 20:05:26 +0100
Subject: [PATCH] Refactor secure connection handling in LoginForm component

- Change isSecureConnection from computed to ref and initialize it on component mount.
- Wrap secure connection status messages in ClientOnly to prevent rendering issues during server-side rendering.
---
 app/components/Auth/LoginForm.vue | 25 ++++++++++++++-----------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/app/components/Auth/LoginForm.vue b/app/components/Auth/LoginForm.vue
index d271f7a..5306d20 100644
--- a/app/components/Auth/LoginForm.vue
+++ b/app/components/Auth/LoginForm.vue
@@ -39,8 +39,9 @@ const onSubmit = handleSubmit(async (values) => {
 })
 
 // Is the connection secure?
-const isSecureConnection = computed(() => {
-  return window.location.protocol === 'https:'
+const isSecureConnection = ref(false)
+onMounted(() => {
+  isSecureConnection.value = window.location.protocol === 'https:'
 })
 </script>
 
@@ -80,15 +81,17 @@ const isSecureConnection = computed(() => {
       {{ isSubmitting ? 'Wird angemeldet...' : 'Anmelden' }}
     </Button>
 
-    <!-- Secure Connection Text -->
-    <p v-if="!isSecureConnection" class="flex items-center justify-center gap-2 text-sm text-white/70">
-      <ShieldAlert :size="16" class="flex-shrink-0 text-error" />
-      <span class="text-error">Die Datenübertragung erfolgt NICHT verschlüsselt</span>
-    </p>
-    <p v-else class="flex items-center justify-center gap-2 text-sm text-white/70">
-      <ShieldCheck :size="16" class="flex-shrink-0 text-success" />
-      <span class="text-success">Die Datenübertragung erfolgt verschlüsselt</span>
-    </p>
+    <ClientOnly>
+      <!-- Secure Connection Text -->
+      <p v-if="!isSecureConnection" class="flex items-center justify-center gap-2 text-sm text-white/70">
+        <ShieldAlert :size="16" class="flex-shrink-0 text-error" />
+        <span class="text-error">Die Datenübertragung erfolgt NICHT verschlüsselt</span>
+      </p>
+      <p v-else class="flex items-center justify-center gap-2 text-sm text-white/70">
+        <ShieldCheck :size="16" class="flex-shrink-0 text-success" />
+        <span class="text-success">Die Datenübertragung erfolgt verschlüsselt</span>
+      </p>
+    </ClientOnly>
 
   </form>
 </template>