You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
29 lines
1.0 KiB
29 lines
1.0 KiB
<!-- 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>
|
|
|