Projektgrundlage: Laravel 13 mit Livewire-Starter-Kit und Sail

- Livewire-Starter-Kit (Livewire 4, Flux, Fortify) mit Pest - Sail mit PHP 8.5, MySQL 8.4, Redis, Meilisearch 1.54.2, Mailpit - Registrierung deaktiviert, 2FA und Passkeys verfügbar - Spatie laravel-permission - gitleaks als Pre-Commit-Hook (.githooks) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-01 08:53:42 +02:00
commit dedce594a0
131 changed files with 22922 additions and 0 deletions
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 42" {{ $attributes }}>
+    <path 
+        fill="currentColor" 
+        fill-rule="evenodd" 
+        clip-rule="evenodd"
+        d="M17.2 5.633 8.6.855 0 5.633v26.51l16.2 9 16.2-9v-8.442l7.6-4.223V9.856l-8.6-4.777-8.6 4.777V18.3l-5.6 3.111V5.633ZM38 18.301l-5.6 3.11v-6.157l5.6-3.11V18.3Zm-1.06-7.856-5.54 3.078-5.54-3.079 5.54-3.078 5.54 3.079ZM24.8 18.3v-6.157l5.6 3.111v6.158L24.8 18.3Zm-1 1.732 5.54 3.078-13.14 7.302-5.54-3.078 13.14-7.3v-.002Zm-16.2 7.89 7.6 4.222V38.3L2 30.966V7.92l5.6 3.111v16.892ZM8.6 9.3 3.06 6.222 8.6 3.143l5.54 3.08L8.6 9.3Zm21.8 15.51-13.2 7.334V38.3l13.2-7.334v-6.156ZM9.6 11.034l5.6-3.11v14.6l-5.6 3.11v-14.6Z"
+    />
+</svg>
@@ -0,0 +1,17 @@
+@props([
+    'sidebar' => false,
+])
+
+@if($sidebar)
+    <flux:sidebar.brand :name="config('app.name', 'Laravel')" {{ $attributes }}>
+        <x-slot name="logo" class="flex aspect-square size-8 items-center justify-center rounded-md bg-accent-content text-accent-foreground">
+            <x-app-logo-icon class="size-5 fill-current text-white dark:text-black" />
+        </x-slot>
+    </flux:sidebar.brand>
+@else
+    <flux:brand :name="config('app.name', 'Laravel')" {{ $attributes }}>
+        <x-slot name="logo" class="flex aspect-square size-8 items-center justify-center rounded-md bg-accent-content text-accent-foreground">
+            <x-app-logo-icon class="size-5 fill-current text-white dark:text-black" />
+        </x-slot>
+    </flux:brand>
+@endif
@@ -0,0 +1,9 @@
+@props([
+    'title',
+    'description',
+])
+
+<div class="flex w-full flex-col text-center">
+    <flux:heading size="xl" level="1">{{ $title }}</flux:heading>
+    <flux:subheading>{{ $description }}</flux:subheading>
+</div>
@@ -0,0 +1,9 @@
+@props([
+    'status',
+])
+
+@if ($status)
+    <div {{ $attributes->merge(['class' => 'font-medium text-sm text-green-600']) }}>
+        {{ $status }}
+    </div>
+@endif
@@ -0,0 +1,39 @@
+<flux:dropdown position="bottom" align="start">
+    <flux:sidebar.profile
+        :name="auth()->user()->name"
+        :initials="auth()->user()->initials()"
+        icon:trailing="chevrons-up-down"
+        data-test="sidebar-menu-button"
+    />
+
+    <flux:menu>
+        <div class="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
+            <flux:avatar
+                :name="auth()->user()->name"
+                :initials="auth()->user()->initials()"
+            />
+            <div class="grid flex-1 text-start text-sm leading-tight">
+                <flux:heading class="truncate">{{ auth()->user()->name }}</flux:heading>
+                <flux:text class="truncate">{{ auth()->user()->email }}</flux:text>
+            </div>
+        </div>
+        <flux:menu.separator />
+        <flux:menu.radio.group>
+            <flux:menu.item :href="route('profile.edit')" icon="cog" wire:navigate>
+                {{ __('Settings') }}
+            </flux:menu.item>
+            <form method="POST" action="{{ route('logout') }}" class="w-full">
+                @csrf
+                <flux:menu.item
+                    as="button"
+                    type="submit"
+                    icon="arrow-right-start-on-rectangle"
+                    class="w-full cursor-pointer"
+                    data-test="logout-button"
+                >
+                    {{ __('Log out') }}
+                </flux:menu.item>
+            </form>
+        </flux:menu.radio.group>
+    </flux:menu>
+</flux:dropdown>
@@ -0,0 +1,116 @@
+@assets
+@vite('resources/js/passkeys.js')
+@endassets
+
+<div
+    x-data="{
+        supported: false,
+        showForm: false,
+        name: '',
+        loading: false,
+        error: null,
+        updateSupport() {
+            this.supported = Boolean(window.Passkeys?.isSupported());
+        },
+        getDefaultPasskeyName() {
+            const ua = navigator.userAgent;
+
+            const browser = [
+                { pattern: /Edg|Edge/, name: 'Edge' },
+                { pattern: /OPR|Opera|OPiOS/, name: 'Opera' },
+                { pattern: /Firefox|FxiOS/, name: 'Firefox' },
+                { pattern: /Chrome|CriOS/, name: 'Chrome' },
+                { pattern: /Safari/, name: 'Safari' },
+            ].find(({ pattern }) => pattern.test(ua))?.name;
+
+            const os = [
+                { pattern: /iPhone/, name: 'iPhone' },
+                { pattern: /iPad|Macintosh(?=.*Mobile)/, name: 'iPad' },
+                { pattern: /Android/, name: 'Android' },
+                { pattern: /Mac/, name: 'Mac' },
+                { pattern: /Windows/, name: 'Windows' },
+            ].find(({ pattern }) => pattern.test(ua))?.name;
+
+            return [browser, os].filter(Boolean).join(' on ') || '';
+        },
+        init() {
+            this.name = this.getDefaultPasskeyName();
+            this.updateSupport();
+
+            window.addEventListener('passkeys:ready', () => this.updateSupport(), { once: true });
+        },
+        async register() {
+            if (!this.name.trim()) return;
+
+            this.loading = true;
+            this.error = null;
+
+            try {
+                await window.Passkeys.register({ name: this.name });
+                this.name = '';
+                this.showForm = false;
+                await $wire.loadPasskeys();
+            } catch (e) {
+                if (e.constructor?.name !== 'UserCancelledError') {
+                    this.error = e.message;
+                }
+            } finally {
+                this.loading = false;
+            }
+        },
+        cancel() {
+            this.showForm = false;
+            this.name = '';
+            this.error = null;
+        },
+    }"
+>
+    <template x-if="!supported">
+        <flux:text>{{ __('Passkeys are not supported in this browser.') }}</flux:text>
+    </template>
+
+    <template x-if="supported && !showForm">
+        <div>
+            <flux:button
+                variant="primary"
+                icon="plus"
+                x-on:click="showForm = true"
+            >
+                {{ __('Add passkey') }}
+            </flux:button>
+        </div>
+    </template>
+
+    <template x-if="supported && showForm">
+        <div class="space-y-4 rounded-lg border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50 p-4">
+            <flux:input
+                label="{{ __('Passkey name') }}"
+                x-model="name"
+                placeholder="{{ __('e.g., MacBook Pro, iPhone') }}"
+                x-on:keydown.enter.prevent="register()"
+                x-ref="passkeyNameInput"
+                x-init="$nextTick(() => $refs.passkeyNameInput?.focus())"
+            />
+            <flux:text class="!mt-1">{{ __('Give this passkey a name to help you identify it later.') }}</flux:text>
+
+            <p x-show="error" x-text="error" x-cloak class="text-sm text-red-600 dark:text-red-400"></p>
+
+            <div class="flex gap-2">
+                <flux:button
+                    variant="primary"
+                    x-on:click="register()"
+                    x-bind:disabled="loading || !name.trim()"
+                >
+                    <span x-show="!loading">{{ __('Register passkey') }}</span>
+                    <span x-show="loading" x-cloak>{{ __('Registering...') }}</span>
+                </flux:button>
+                <flux:button
+                    variant="ghost"
+                    x-on:click="cancel()"
+                >
+                    {{ __('Cancel') }}
+                </flux:button>
+            </div>
+        </div>
+    </template>
+</div>
@@ -0,0 +1,76 @@
+@props([
+    'optionsRoute' => 'passkey.login-options',
+    'submitRoute' => 'passkey.login',
+    'label' => __('Sign in with a passkey'),
+    'loadingLabel' => __('Authenticating...'),
+    'separator' => __('Or continue with email'),
+])
+
+@assets
+@vite('resources/js/passkeys.js')
+@endassets
+
+<div
+    x-data="{
+        supported: false,
+        loading: false,
+        error: null,
+        updateSupport() {
+            this.supported = Boolean(window.Passkeys?.isSupported());
+        },
+        init() {
+            this.updateSupport();
+
+            window.addEventListener('passkeys:ready', () => this.updateSupport(), { once: true });
+        },
+        async verify() {
+            this.loading = true;
+            this.error = null;
+            try {
+                const response = await window.Passkeys.verify({
+                    routes: {
+                        options: '{{ route($optionsRoute) }}',
+                        submit: '{{ route($submitRoute) }}',
+                    },
+                });
+                Livewire.navigate(response.redirect || '/dashboard');
+            } catch (e) {
+                if (e.constructor?.name !== 'UserCancelledError') {
+                    this.error = e.message;
+                }
+            } finally {
+                this.loading = false;
+            }
+        },
+    }"
+>
+    <template x-if="supported">
+        <div>
+            <div class="grid gap-2">
+                <flux:button
+                    variant="outline"
+                    icon="finger-print"
+                    class="w-full"
+                    x-on:click="verify()"
+                    x-bind:disabled="loading"
+                >
+                    <span x-show="!loading">{{ $label }}</span>
+                    <span x-show="loading" x-cloak>{{ $loadingLabel }}</span>
+                </flux:button>
+                <p x-show="error" x-text="error" x-cloak
+                   class="text-sm text-center text-red-600 dark:text-red-400"></p>
+            </div>
+
+            <div class="relative my-6">
+                <div class="absolute inset-0 flex items-center">
+                    <div class="w-full border-t border-zinc-200 dark:border-zinc-700"></div>
+                </div>
+                <div class="relative flex justify-center text-xs uppercase">
+                    <span class="px-2 text-zinc-500 dark:text-zinc-400 bg-white dark:bg-zinc-900">
+                        {{ $separator }}
+                    </span>
+                </div>
+            </div>
+        </div>
+    </template>
+</div>
@@ -0,0 +1,12 @@
+@props([
+    'id' => uniqid(),
+])
+
+<svg {{ $attributes }} fill="none">
+    <defs>
+        <pattern id="pattern-{{ $id }}" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse">
+            <path d="M-1 5L5 -1M3 9L8.5 3.5" stroke-width="0.5"></path>
+        </pattern>
+    </defs>
+    <rect stroke="none" fill="url(#pattern-{{ $id }})" width="100%" height="100%"></rect>
+</svg>
@@ -0,0 +1,20 @@
+<div class="flex items-start max-md:flex-col">
+    <div class="me-10 w-full pb-4 md:w-[220px]">
+        <flux:navlist aria-label="{{ __('Settings') }}">
+            <flux:navlist.item :href="route('profile.edit')" wire:navigate>{{ __('Profile') }}</flux:navlist.item>
+            <flux:navlist.item :href="route('security.edit')" wire:navigate>{{ __('Security') }}</flux:navlist.item>
+            <flux:navlist.item :href="route('appearance.edit')" wire:navigate>{{ __('Appearance') }}</flux:navlist.item>
+        </flux:navlist>
+    </div>
+
+    <flux:separator class="md:hidden" />
+
+    <div class="flex-1 self-stretch max-md:pt-6">
+        <flux:heading>{{ $heading ?? '' }}</flux:heading>
+        <flux:subheading>{{ $subheading ?? '' }}</flux:subheading>
+
+        <div class="mt-5 w-full max-w-lg">
+            {{ $slot }}
+        </div>
+    </div>
+</div>