Files
newznab-tmux/resources/views/partials/passkeys-manage.blade.php
T

104 lines
5.6 KiB
PHP

@php
$passkeyPayload = $user->passkeys->map(function ($passkey) {
return [
'id' => $passkey->id,
'name' => $passkey->name,
'created_at' => optional($passkey->created_at)?->toIso8601String(),
'last_used_at' => optional($passkey->last_used_at)?->toIso8601String(),
];
});
@endphp
<div
x-data="passkeyManage"
x-cloak
data-options-url="{{ route('passkeys.register_options') }}"
data-store-url="{{ route('passkeys.store') }}"
data-destroy-base-url="{{ url('passkeys') }}"
data-passkeys='@json($passkeyPayload)'
>
<p class="text-sm text-gray-600 dark:text-gray-300">
Register a passkey using Windows Hello, Touch ID / Face ID, your phone, a password manager, or a FIDO2 security key.
</p>
<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
On a Windows domain / managed device the browser will show all available options. If Windows Hello is still disabled by group policy, you can fall back to a hardware security key or scan a QR code with your phone.
</p>
<template x-if="!supported">
<div class="mt-4 rounded-lg border border-yellow-200 bg-yellow-50 p-3 text-sm text-yellow-800 dark:border-yellow-700 dark:bg-yellow-900/20 dark:text-yellow-200">
Your browser does not support passkeys.
</div>
</template>
<template x-if="supported">
<div class="mt-4 space-y-4">
<form @submit.prevent="createPasskey()" class="space-y-3">
<label for="passkey_name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
Passkey name
</label>
<div class="flex flex-col gap-3 sm:flex-row">
<input
id="passkey_name"
x-model="name"
type="text"
maxlength="255"
required
placeholder="Work laptop, iPhone, etc."
class="w-full rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-900 focus:border-primary-500 focus:ring-2 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100"
>
<button
type="submit"
:disabled="busy"
class="rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700 disabled:cursor-not-allowed disabled:opacity-60 dark:bg-primary-700 dark:hover:bg-primary-800"
>
<i class="fas fa-plus mr-2"></i>
<span x-text="busy ? 'Creating...' : 'Create passkey'"></span>
</button>
</div>
</form>
<p x-show="error" x-text="error" class="text-sm text-red-600 dark:text-red-400"></p>
<p x-show="success" x-text="success" class="text-sm text-green-600 dark:text-green-400"></p>
<template x-if="passkeys.length === 0">
<div class="rounded-lg border border-dashed border-gray-300 p-4 text-sm text-gray-600 dark:border-gray-600 dark:text-gray-300">
No passkeys registered yet.
</div>
</template>
<template x-if="passkeys.length > 0">
<div class="overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700">
<table class="min-w-full divide-y divide-gray-200 text-sm dark:divide-gray-700">
<thead class="bg-gray-50 dark:bg-gray-800">
<tr>
<th class="px-4 py-3 text-left font-semibold text-gray-700 dark:text-gray-300">Name</th>
<th class="px-4 py-3 text-left font-semibold text-gray-700 dark:text-gray-300">Created</th>
<th class="px-4 py-3 text-left font-semibold text-gray-700 dark:text-gray-300">Last used</th>
<th class="px-4 py-3 text-right font-semibold text-gray-700 dark:text-gray-300">Actions</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 bg-white dark:divide-gray-700 dark:bg-gray-900">
<template x-for="passkey in passkeys" :key="passkey.id">
<tr>
<td class="px-4 py-3 text-gray-900 dark:text-gray-100" x-text="passkey.name"></td>
<td class="px-4 py-3 text-gray-600 dark:text-gray-300" x-text="formatDate(passkey.created_at)"></td>
<td class="px-4 py-3 text-gray-600 dark:text-gray-300" x-text="formatLastUsed(passkey.last_used_at)"></td>
<td class="px-4 py-3 text-right">
<button
type="button"
@click="deletePasskey(passkey.id)"
class="rounded-lg border border-red-300 px-3 py-1.5 text-xs font-medium text-red-700 hover:bg-red-50 dark:border-red-700 dark:text-red-300 dark:hover:bg-red-900/30"
>
Delete
</button>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</template>
</div>
</template>
</div>