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.
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user