Initial commit device-management

2026-08-25 09:42:00 +07:00
commit 1e80be180e
1159 changed files with 149545 additions and 0 deletions
@@ -0,0 +1,74 @@
+import type { UrlMethodPair } from '@inertiajs/core';
+import { router } from '@inertiajs/react';
+import { usePasskeyVerify } from '@laravel/passkeys/react';
+import { KeyRound } from 'lucide-react';
+import InputError from '@/components/input-error';
+import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+import { Spinner } from '@/components/ui/spinner';
+
+type Props = {
+    routes?: {
+        options: UrlMethodPair;
+        submit: UrlMethodPair;
+    };
+    label?: string;
+    loadingLabel?: string;
+    separator?: string;
+};
+
+export default function PasskeyVerify({
+    routes,
+    label,
+    loadingLabel,
+    separator,
+}: Props = {}) {
+    const { verify, isLoading, error, isSupported } = usePasskeyVerify({
+        ...(routes && {
+            routes: {
+                options: routes.options.url,
+                submit: routes.submit.url,
+            },
+        }),
+        onSuccess: (response) => {
+            router.visit(response.redirect ?? '/dashboard');
+        },
+    });
+
+    if (!isSupported) {
+        return null;
+    }
+
+    return (
+        <>
+            <div className="grid gap-2">
+                <Button
+                    type="button"
+                    variant="outline"
+                    className="w-full"
+                    onClick={verify}
+                    disabled={isLoading}
+                >
+                    {isLoading ? <Spinner /> : <KeyRound className="h-4 w-4" />}
+                    {isLoading
+                        ? (loadingLabel ?? 'Authenticating...')
+                        : (label ?? 'Sign in with a passkey')}
+                </Button>
+                {error && (
+                    <InputError message={error} className="text-center" />
+                )}
+            </div>
+
+            <div className="relative my-6">
+                <div className="absolute inset-0 flex items-center">
+                    <Separator className="w-full" />
+                </div>
+                <div className="relative flex justify-center text-xs uppercase">
+                    <span className="bg-background px-2 text-muted-foreground">
+                        {separator ?? 'Or continue with email'}
+                    </span>
+                </div>
+            </div>
+        </>
+    );
+}