From be06e16880e565f727b7fc44620b69a67885d48c Mon Sep 17 00:00:00 2001
From: Bastian Masanek <bastian.masanek@experimenta.science>
Date: Fri, 31 Oct 2025 21:10:54 +0100
Subject: [PATCH] Refactor secure connection handling in LoginForm and
 introduce SecureConnectionIndicator component

- Remove inline secure connection checks from LoginForm and replace them with a new SecureConnectionIndicator component.
- The SecureConnectionIndicator displays secure connection status messages based on the current protocol.
- Clean up LoginForm template for improved readability and maintainability.
---
 app/components/Auth/LoginForm.vue             | 21 ++------------
 .../SecureConnectionIndicator.vue             | 29 +++++++++++++++++++
 .../ui/secure-connection-indicator/index.ts   |  1 +
 3 files changed, 33 insertions(+), 18 deletions(-)
 create mode 100644 app/components/ui/secure-connection-indicator/SecureConnectionIndicator.vue
 create mode 100644 app/components/ui/secure-connection-indicator/index.ts

diff --git a/app/components/Auth/LoginForm.vue b/app/components/Auth/LoginForm.vue
index 5306d20..3ae4e01 100644
--- a/app/components/Auth/LoginForm.vue
+++ b/app/components/Auth/LoginForm.vue
@@ -4,7 +4,7 @@
 import { z } from 'zod'
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
-import { AlertCircle, AlertTriangle, Loader2, ShieldCheck, ShieldAlert } from 'lucide-vue-next'
+import { AlertCircle, Loader2 } from 'lucide-vue-next'
 
 const { login } = useAuth()
 
@@ -37,12 +37,6 @@ const onSubmit = handleSubmit(async (values) => {
     submitError.value = error.message || 'Anmeldung fehlgeschlagen. Bitte versuche es erneut.'
   }
 })
-
-// Is the connection secure?
-const isSecureConnection = ref(false)
-onMounted(() => {
-  isSecureConnection.value = window.location.protocol === 'https:'
-})
 </script>
 
 <template>
@@ -81,17 +75,8 @@ onMounted(() => {
       {{ isSubmitting ? 'Wird angemeldet...' : 'Anmelden' }}
     </Button>
 
-    <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>
+    <!-- Secure Connection Indicator -->
+    <SecureConnectionIndicator />
 
   </form>
 </template>
diff --git a/app/components/ui/secure-connection-indicator/SecureConnectionIndicator.vue b/app/components/ui/secure-connection-indicator/SecureConnectionIndicator.vue
new file mode 100644
index 0000000..7a06924
--- /dev/null
+++ b/app/components/ui/secure-connection-indicator/SecureConnectionIndicator.vue
@@ -0,0 +1,29 @@
+<!-- app/components/ui/SecureConnectionIndicator.vue -->
+
+<script setup lang="ts">
+import { ShieldCheck, ShieldAlert, ShieldOff } from 'lucide-vue-next'
+
+// Check if connection is secure (HTTPS)
+const isSecureConnection = ref(false)
+
+// Runs only on the client side
+onMounted(() => {
+	isSecureConnection.value = window.location.protocol === 'https:'
+})
+</script>
+
+<template>
+	<ClientOnly>
+		<p v-if="!isSecureConnection" class="flex items-center justify-center gap-2 text-sm text-white/70">
+			<ShieldAlert :size="18" class="flex-shrink-0 text-error" />
+			<ShieldOff :size="18" class="flex-shrink-0 text-error" />
+			<span class="text-error"><span class="font-bold">Warnung:</span> Diese Verbindung ist nicht verschlüsselt. Deine
+				Eingaben könnten von anderen gelesen
+				werden.</span>
+		</p>
+		<p v-else class="flex items-center justify-center gap-2 text-sm text-white/70">
+			<ShieldCheck :size="18" class="flex-shrink-0 text-success" />
+			<span class="text-success">Deine Verbindung ist sicher und verschlüsselt</span>
+		</p>
+	</ClientOnly>
+</template>
diff --git a/app/components/ui/secure-connection-indicator/index.ts b/app/components/ui/secure-connection-indicator/index.ts
new file mode 100644
index 0000000..84a05f5
--- /dev/null
+++ b/app/components/ui/secure-connection-indicator/index.ts
@@ -0,0 +1 @@
+export { default as SecureConnectionIndicator } from './SecureConnectionIndicator.vue'