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

@@ -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 Indicator -->
-      <!-- Secure Connection Text -->
+    <SecureConnectionIndicator />
-      <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>

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>

app/components/ui/secure-connection-indicator/index.ts

@@ -0,0 +1 @@
+export { default as SecureConnectionIndicator } from './SecureConnectionIndicator.vue'