torsten/harheimertc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement passkey support checks in registration page, including user feedback for unsupported scenarios. Update logic to determine passkey availability based on secure context and browser compatibility, enhancing user experience during registration.
Some checks failed
Code Analysis (JS/Vue) / analyze (push) Failing after 50s
Details

Browse Source
This commit is contained in:
Torsten Schulz (local)
2026-01-07 18:46:45 +01:00
parent fde25d92c5
commit 8bdebf6a73
1 changed files with 20 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
pages/registrieren.vue
View File

@@ -20,6 +20,9 @@
<div class="text-sm text-gray-700"> <div class="text-sm text-gray-700">
<div class="font-medium">Registrierungsmethode</div> <div class="font-medium">Registrierungsmethode</div>
<div class="text-xs text-gray-600">Passkey = Anmeldung ohne Passwort (z.B. FaceID/TouchID/Windows Hello)</div> <div class="text-xs text-gray-600">Passkey = Anmeldung ohne Passwort (z.B. FaceID/TouchID/Windows Hello)</div>
<div v-if="!isPasskeySupported" class="text-xs text-red-700 mt-1">
Passkeys aktuell nicht verfügbar: {{ passkeySupportReason || 'Bitte HTTPS/aktuellen Browser verwenden.' }}
</div>
</div> </div>
<label class="flex items-center gap-2 text-sm font-medium text-gray-800"> <label class="flex items-center gap-2 text-sm font-medium text-gray-800">
<input v-model="usePasskey" type="checkbox" class="h-4 w-4" :disabled="isLoading || !isPasskeySupported"> <input v-model="usePasskey" type="checkbox" class="h-4 w-4" :disabled="isLoading || !isPasskeySupported">
@@ -194,7 +197,7 @@
</template> </template>
<script setup> <script setup>
import { ref } from 'vue' import { onMounted, ref } from 'vue'
import { AlertCircle, Check, Loader2, Info } from 'lucide-vue-next' import { AlertCircle, Check, Loader2, Info } from 'lucide-vue-next'
const formData = ref({ const formData = ref({
@@ -210,9 +213,21 @@ const errorMessage = ref('')
const successMessage = ref('') const successMessage = ref('')
const usePasskey = ref(false) const usePasskey = ref(false)
const isPasskeySupported = ref(false) const isPasskeySupported = ref(false)
if (process.client) { const passkeySupportReason = ref('')
isPasskeySupported.value = !!window.PublicKeyCredential
} onMounted(() => {
try {
const hasPKC = typeof window !== 'undefined' && typeof window.PublicKeyCredential !== 'undefined'
const secure = typeof window !== 'undefined' && !!window.isSecureContext
isPasskeySupported.value = !!(hasPKC && secure)
if (!secure) passkeySupportReason.value = 'Kein Secure Context (HTTPS oder localhost erforderlich).'
else if (!hasPKC) passkeySupportReason.value = 'Browser unterstützt WebAuthn/Passkeys nicht.'
else passkeySupportReason.value = ''
} catch {
isPasskeySupported.value = false
passkeySupportReason.value = 'Passkey-Check fehlgeschlagen.'
}
})
const handleRegister = async () => { const handleRegister = async () => {
errorMessage.value = '' errorMessage.value = ''
@@ -271,7 +286,7 @@ const handleRegisterWithPasskey = async () => {
successMessage.value = '' successMessage.value = ''
if (!isPasskeySupported.value) { if (!isPasskeySupported.value) {
errorMessage.value = 'Passkeys sind in diesem Browser/unter dieser URL nicht verfügbar (HTTPS erforderlich).' errorMessage.value = passkeySupportReason.value || 'Passkeys sind in diesem Browser/unter dieser URL nicht verfügbar (HTTPS erforderlich).'
return return
} }