66 lines
1.8 KiB
Vue
66 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { router } from '@inertiajs/vue3';
|
|
import { KeyRound } from '@lucide/vue';
|
|
import type { Passkey } from '@/types/auth';
|
|
import Heading from '@/components/Heading.vue';
|
|
import PasskeyItem from '@/components/PasskeyItem.vue';
|
|
import PasskeyRegister from '@/components/PasskeyRegister.vue';
|
|
import { destroy } from '@/actions/Laravel/Passkeys/Http/Controllers/PasskeyRegistrationController';
|
|
|
|
export type Props = {
|
|
canManagePasskeys?: boolean;
|
|
passkeys?: Passkey[];
|
|
};
|
|
|
|
withDefaults(defineProps<Props>(), {
|
|
canManagePasskeys: false,
|
|
passkeys: () => [],
|
|
});
|
|
|
|
const handleDelete = (id: number, onError: () => void) => {
|
|
router.delete(destroy.url(id), {
|
|
preserveScroll: true,
|
|
onError,
|
|
});
|
|
};
|
|
|
|
const handleRegisterSuccess = () => {
|
|
router.reload();
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="canManagePasskeys" class="space-y-6">
|
|
<Heading
|
|
variant="small"
|
|
title="Passkeys"
|
|
description="Manage your passkeys for passwordless sign-in"
|
|
/>
|
|
|
|
<div class="border-border overflow-hidden rounded-lg border">
|
|
<template v-if="passkeys.length">
|
|
<PasskeyItem
|
|
v-for="passkey in passkeys"
|
|
:key="passkey.id"
|
|
:passkey="passkey"
|
|
@remove="handleDelete"
|
|
/>
|
|
</template>
|
|
|
|
<div v-else class="p-8 text-center">
|
|
<div
|
|
class="bg-muted mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl"
|
|
>
|
|
<KeyRound class="text-muted-foreground h-7 w-7" />
|
|
</div>
|
|
<p class="font-medium">No passkeys yet</p>
|
|
<p class="text-muted-foreground mt-1 text-sm">
|
|
Add a passkey to sign in without a password
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<PasskeyRegister @success="handleRegisterSuccess" />
|
|
</div>
|
|
</template>
|