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/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>