ChristophGraf/BauIN
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Flux durch TallStackUI 4 ersetzt

Browse Source 
- TallStackUI 4 (MIT) statt Flux; Komponenten mit Präfix ts- (<x-ts-…>)
- Layouts, Login-, Passwort-, 2FA- und Einstellungsseiten neu aufgebaut
- Livewire-Skripte explizit in beiden Layouts, damit Alpine auch auf den
  Fortify-Seiten ohne Livewire-Komponente läuft
- Dark Mode über tallstackui_darkTheme(), ohne Aufblitzen beim Laden
- Registrierungs-View und ungenutzte Layout-Varianten entfernt
- Test: Seiten laden keine Ressourcen von fremden Hosts (Vorgabe "alles lokal")

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Christoph
2026-10-01 09:33:26 +02:00
co-authored by Claude Opus 5.5
parent dedce594a0
commit b297518810
47 changed files with 644 additions and 1362 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/app.css
+4 -48
View File
@@ -1,43 +1,17 @@
@import 'tailwindcss';
@import '../../vendor/livewire/flux/dist/flux.css';
@import '../../vendor/tallstackui/tallstackui/css/v4.css';
@plugin '@tailwindcss/forms';
@source '../../vendor/tallstackui/tallstackui/**/*.php';
@source '../views';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../vendor/livewire/flux-pro/stubs/**/*.blade.php';
@source '../../vendor/livewire/flux/stubs/**/*.blade.php';
@custom-variant dark (&:where(.dark, .dark *));
@theme {
--font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--color-zinc-50: #fafafa;
--color-zinc-100: #f5f5f5;
--color-zinc-200: #e5e5e5;
--color-zinc-300: #d4d4d4;
--color-zinc-400: #a3a3a3;
--color-zinc-500: #737373;
--color-zinc-600: #525252;
--color-zinc-700: #404040;
--color-zinc-800: #262626;
--color-zinc-900: #171717;
--color-zinc-950: #0a0a0a;
--color-accent: var(--color-neutral-800);
--color-accent-content: var(--color-neutral-800);
--color-accent-foreground: var(--color-white);
}
@layer theme {
.dark {
--color-accent: var(--color-white);
--color-accent-content: var(--color-white);
--color-accent-foreground: var(--color-neutral-800);
}
}
@layer base {
*,
::after,
::before,
@@ -46,21 +20,3 @@
border-color: var(--color-gray-200, currentColor);
}
}
[data-flux-field]:not(ui-radio, ui-checkbox) {
@apply grid gap-2;
}
[data-flux-label] {
@apply !mb-0 !leading-tight;
}
input:focus[data-flux-control],
textarea:focus[data-flux-control],
select:focus[data-flux-control] {
@apply outline-hidden ring-2 ring-accent ring-offset-2 ring-offset-accent-foreground;
}
/* \[:where(&)\]:size-4 {
@apply size-4;
} */
resources/views/components/app-logo.blade.php
+6 -17
View File
@@ -1,17 +1,6 @@
@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
<a href="{{ route('dashboard') }}" wire:navigate {{ $attributes->merge(['class' => 'flex items-center gap-2']) }}>
<span class="flex aspect-square size-8 shrink-0 items-center justify-center rounded-md bg-primary-600 text-white">
<x-app-logo-icon class="size-5 fill-current" />
</span>
<span class="truncate font-semibold text-gray-900 dark:text-dark-50">{{ config('app.name', 'Laravel') }}</span>
</a>
resources/views/components/auth-header.blade.php
+3 -3
View File
@@ -3,7 +3,7 @@
'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 class="flex w-full flex-col gap-1 text-center">
<x-heading level="1" size="xl">{{ $title }}</x-heading>
<x-subheading>{{ $description }}</x-subheading>
</div>
resources/views/components/desktop-user-menu.blade.php
-39
View File
@@ -1,39 +0,0 @@
<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>
resources/views/components/heading.blade.php
+14
View File
@@ -0,0 +1,14 @@
@props([
'level' => 2,
'size' => 'base',
])
@php
$sizeClass = match ($size) {
'xl' => 'text-2xl',
'lg' => 'text-lg',
default => 'text-base',
};
@endphp
<h{{ $level }} {{ $attributes->class([$sizeClass, 'font-semibold text-gray-900 dark:text-dark-50']) }}>{{ $slot }}</h{{ $level }}>
resources/views/components/passkey-registration.blade.php
+15 -28
View File
@@ -66,50 +66,37 @@
}"
>
<template x-if="!supported">
<flux:text>{{ __('Passkeys are not supported in this browser.') }}</flux:text>
<p class="text-sm text-gray-600 dark:text-dark-300">{{ __('Passkeys are not supported in this browser.') }}</p>
</template>
<template x-if="supported && !showForm">
<div>
<flux:button
variant="primary"
icon="plus"
x-on:click="showForm = true"
>
<x-ts-button icon="plus" x-on:click="showForm = true">
{{ __('Add passkey') }}
</flux:button>
</x-ts-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>
<div class="space-y-4 rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-dark-600 dark:bg-dark-700/50">
<x-ts-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())"
:hint="__('Give this passkey a name to help you identify it later.')" />
<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()"
>
<x-ts-button 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()"
>
</x-ts-button>
<x-ts-button flat color="secondary" x-on:click="cancel()">
{{ __('Cancel') }}
</flux:button>
</x-ts-button>
</div>
</div>
</template>
resources/views/components/passkey-verify.blade.php
+9 -11
View File
@@ -47,26 +47,24 @@
<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"
>
<x-ts-button 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>
</x-ts-button>
<p x-show="error" x-text="error" x-cloak
class="text-sm text-center text-red-600 dark:text-red-400"></p>
class="text-center text-sm 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 class="w-full border-t border-gray-200 dark:border-dark-600"></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">
<span class="bg-white px-2 text-gray-500 dark:bg-dark-800 dark:text-dark-300">
{{ $separator }}
</span>
</div>
resources/views/components/settings/layout.blade.php
+21 -10
View File
@@ -1,17 +1,28 @@
<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>
<nav class="me-10 w-full pb-4 md:w-[220px]" aria-label="{{ __('Settings') }}">
<ul class="flex flex-col gap-1">
@foreach ([
'profile.edit' => __('Profile'),
'security.edit' => __('Security'),
'appearance.edit' => __('Appearance'),
] as $route => $label)
<li>
<a href="{{ route($route) }}"
wire:navigate
wire:current="bg-gray-100 text-gray-900 dark:bg-dark-700 dark:text-dark-50"
class="block rounded-md px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 dark:text-dark-300 dark:hover:bg-dark-700">
{{ $label }}
</a>
</li>
@endforeach
</ul>
</nav>
<flux:separator class="md:hidden" />
<hr class="w-full border-gray-200 md:hidden dark:border-dark-600" />
<div class="flex-1 self-stretch max-md:pt-6">
<flux:heading>{{ $heading ?? '' }}</flux:heading>
<flux:subheading>{{ $subheading ?? '' }}</flux:subheading>
<x-heading>{{ $heading ?? '' }}</x-heading>
<x-subheading>{{ $subheading ?? '' }}</x-subheading>
<div class="mt-5 w-full max-w-lg">
{{ $slot }}
resources/views/components/subheading.blade.php
+1
View File
@@ -0,0 +1 @@
<p {{ $attributes->class('text-sm text-gray-500 dark:text-dark-300') }}>{{ $slot }}</p>
resources/views/components/user-menu.blade.php
+33
View File
@@ -0,0 +1,33 @@
<div>
<x-ts-dropdown position="bottom-end">
<x-slot:action>
<button type="button"
x-on:click="show = !show"
class="flex shrink-0 cursor-pointer items-center gap-2 rounded-md p-1 text-sm hover:bg-gray-100 dark:hover:bg-dark-700"
data-test="user-menu-button">
{{-- Nur Initialen: ohne image/model lädt ts-avatar nichts von externen Diensten. --}}
<x-ts-avatar :text="auth()->user()->initials()" sm />
<span class="hidden whitespace-nowrap font-medium text-gray-700 sm:inline dark:text-dark-200">{{ auth()->user()->name }}</span>
<x-ts-icon name="chevron-down" class="size-4 shrink-0 text-gray-500 dark:text-dark-400" />
</button>
</x-slot:action>
<x-slot:header>
<div class="px-2 py-1 text-sm">
<p class="truncate font-medium text-gray-900 dark:text-dark-50">{{ auth()->user()->name }}</p>
<p class="truncate text-gray-500 dark:text-dark-300">{{ auth()->user()->email }}</p>
</div>
</x-slot:header>
<x-ts-dropdown.items :text="__('Settings')" icon="cog-6-tooth" :href="route('profile.edit')" navigate />
<x-ts-dropdown.items :text="__('Log out')"
icon="arrow-right-start-on-rectangle"
separator
x-on:click="document.getElementById('logout-form').submit()"
data-test="logout-button" />
</x-ts-dropdown>
<form id="logout-form" method="POST" action="{{ route('logout') }}" class="hidden">
@csrf
</form>
</div>
resources/views/dashboard.blade.php
+1 -1
View File
@@ -11,7 +11,7 @@
<x-placeholder-pattern class="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
</div>
</div>
<div class="relative h-full flex-1 overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700">
<div class="relative min-h-96 flex-1 overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700">
<x-placeholder-pattern class="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
</div>
</div>
resources/views/flux/icon/book-open-text.blade.php
-47
View File
@@ -1,47 +0,0 @@
{{-- Credit: Lucide (https://lucide.dev) --}}
@props([
'variant' => 'outline',
])
@php
if ($variant === 'solid') {
throw new \Exception('The "solid" variant is not supported in Lucide.');
}
$classes = Flux::classes('shrink-0')->add(
match ($variant) {
'outline' => '[:where(&)]:size-6',
'solid' => '[:where(&)]:size-6',
'mini' => '[:where(&)]:size-5',
'micro' => '[:where(&)]:size-4',
},
);
$strokeWidth = match ($variant) {
'outline' => 2,
'mini' => 2.25,
'micro' => 2.5,
};
@endphp
<svg
{{ $attributes->class($classes) }}
data-flux-icon
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="{{ $strokeWidth }}"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
data-slot="icon"
>
<path d="M12 7v14" />
<path d="M16 12h2" />
<path d="M16 8h2" />
<path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z" />
<path d="M6 12h2" />
<path d="M6 8h2" />
</svg>
resources/views/flux/icon/chevrons-up-down.blade.php
-43
View File
@@ -1,43 +0,0 @@
{{-- Credit: Lucide (https://lucide.dev) --}}
@props([
'variant' => 'outline',
])
@php
if ($variant === 'solid') {
throw new \Exception('The "solid" variant is not supported in Lucide.');
}
$classes = Flux::classes('shrink-0')->add(
match ($variant) {
'outline' => '[:where(&)]:size-6',
'solid' => '[:where(&)]:size-6',
'mini' => '[:where(&)]:size-5',
'micro' => '[:where(&)]:size-4',
},
);
$strokeWidth = match ($variant) {
'outline' => 2,
'mini' => 2.25,
'micro' => 2.5,
};
@endphp
<svg
{{ $attributes->class($classes) }}
data-flux-icon
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="{{ $strokeWidth }}"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
data-slot="icon"
>
<path d="m7 15 5 5 5-5" />
<path d="m7 9 5-5 5 5" />
</svg>
resources/views/flux/icon/folder-git-2.blade.php
-45
View File
@@ -1,45 +0,0 @@
{{-- Credit: Lucide (https://lucide.dev) --}}
@props([
'variant' => 'outline',
])
@php
if ($variant === 'solid') {
throw new \Exception('The "solid" variant is not supported in Lucide.');
}
$classes = Flux::classes('shrink-0')->add(
match ($variant) {
'outline' => '[:where(&)]:size-6',
'solid' => '[:where(&)]:size-6',
'mini' => '[:where(&)]:size-5',
'micro' => '[:where(&)]:size-4',
},
);
$strokeWidth = match ($variant) {
'outline' => 2,
'mini' => 2.25,
'micro' => 2.5,
};
@endphp
<svg
{{ $attributes->class($classes) }}
data-flux-icon
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="{{ $strokeWidth }}"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
data-slot="icon"
>
<path d="M9 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v5" />
<circle cx="13" cy="12" r="2" />
<path d="M18 19c-2.8 0-5-2.2-5-5v8" />
<circle cx="20" cy="19" r="2" />
</svg>
resources/views/flux/icon/layout-grid.blade.php
-45
View File
@@ -1,45 +0,0 @@
{{-- Credit: Lucide (https://lucide.dev) --}}
@props([
'variant' => 'outline',
])
@php
if ($variant === 'solid') {
throw new \Exception('The "solid" variant is not supported in Lucide.');
}
$classes = Flux::classes('shrink-0')->add(
match ($variant) {
'outline' => '[:where(&)]:size-6',
'solid' => '[:where(&)]:size-6',
'mini' => '[:where(&)]:size-5',
'micro' => '[:where(&)]:size-4',
},
);
$strokeWidth = match ($variant) {
'outline' => 2,
'mini' => 2.25,
'micro' => 2.5,
};
@endphp
<svg
{{ $attributes->class($classes) }}
data-flux-icon
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="{{ $strokeWidth }}"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
data-slot="icon"
>
<rect width="7" height="7" x="3" y="3" rx="1" />
<rect width="7" height="7" x="14" y="3" rx="1" />
<rect width="7" height="7" x="14" y="14" rx="1" />
<rect width="7" height="7" x="3" y="14" rx="1" />
</svg>
resources/views/flux/navlist/group.blade.php
-51
View File
@@ -1,51 +0,0 @@
@props([
'expandable' => false,
'expanded' => true,
'heading' => null,
])
<?php if ($expandable && $heading): ?>
<ui-disclosure
{{ $attributes->class('group/disclosure') }}
@if ($expanded === true) open @endif
data-flux-navlist-group
>
<button
type="button"
class="group/disclosure-button mb-[2px] flex h-10 w-full items-center rounded-lg text-zinc-500 hover:bg-zinc-800/5 hover:text-zinc-800 lg:h-8 dark:text-white/80 dark:hover:bg-white/[7%] dark:hover:text-white"
>
<div class="ps-3 pe-4">
<flux:icon.chevron-down class="hidden size-3! group-data-open/disclosure-button:block" />
<flux:icon.chevron-right class="block size-3! group-data-open/disclosure-button:hidden" />
</div>
<span class="text-sm font-medium leading-none">{{ $heading }}</span>
</button>
<div class="relative hidden space-y-[2px] ps-7 data-open:block" @if ($expanded === true) data-open @endif>
<div class="absolute inset-y-[3px] start-0 ms-4 w-px bg-zinc-200 dark:bg-white/30"></div>
{{ $slot }}
</div>
</ui-disclosure>
<?php elseif ($heading): ?>
<div {{ $attributes->class('block space-y-[2px]') }}>
<div class="px-1 py-2">
<div class="text-xs leading-none text-zinc-400">{{ $heading }}</div>
</div>
<div>
{{ $slot }}
</div>
</div>
<?php else: ?>
<div {{ $attributes->class('block space-y-[2px]') }}>
{{ $slot }}
</div>
<?php endif; ?>
resources/views/layouts/app.blade.php
+36 -5
View File
@@ -1,5 +1,36 @@
<x-layouts::app.sidebar :title="$title ?? null">
<flux:main>
{{ $slot }}
</flux:main>
</x-layouts::app.sidebar>
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"
x-data="tallstackui_darkTheme({ default: 'system' })"
x-bind:class="{ 'dark': darkTheme }">
<head>
@include('partials.head')
</head>
<body class="min-h-screen bg-gray-50 antialiased dark:bg-dark-900">
<x-ts-toast />
<x-ts-dialog />
<x-ts-layout>
<x-slot:header>
<x-ts-layout.header>
<x-slot:right>
<x-user-menu />
</x-slot:right>
</x-ts-layout.header>
</x-slot:header>
<x-slot:menu>
<x-ts-side-bar smart navigate>
<x-slot:brand>
<x-app-logo class="px-4 py-5" />
</x-slot:brand>
<x-ts-side-bar.item :text="__('Dashboard')" icon="home" :route="route('dashboard')" />
</x-ts-side-bar>
</x-slot:menu>
{{ $slot }}
</x-ts-layout>
@livewireScripts
</body>
</html>
resources/views/layouts/app/header.blade.php
-84
View File
@@ -1,84 +0,0 @@
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
<head>
@include('partials.head')
</head>
<body class="min-h-screen bg-white dark:bg-zinc-800">
<flux:header container class="border-b border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
<flux:sidebar.toggle class="lg:hidden mr-2" icon="bars-2" inset="left" />
<x-app-logo href="{{ route('dashboard') }}" wire:navigate />
<flux:navbar class="-mb-px max-lg:hidden">
<flux:navbar.item icon="layout-grid" :href="route('dashboard')" :current="request()->routeIs('dashboard')" wire:navigate>
{{ __('Dashboard') }}
</flux:navbar.item>
</flux:navbar>
<flux:spacer />
<flux:navbar class="me-1.5 space-x-0.5 rtl:space-x-reverse py-0!">
<flux:tooltip :content="__('Search')" position="bottom">
<flux:navbar.item class="!h-10 [&>div>svg]:size-5" icon="magnifying-glass" href="#" :label="__('Search')" />
</flux:tooltip>
<flux:tooltip :content="__('Repository')" position="bottom">
<flux:navbar.item
class="h-10 max-lg:hidden [&>div>svg]:size-5"
icon="folder-git-2"
href="https://github.com/laravel/livewire-starter-kit"
target="_blank"
:label="__('Repository')"
/>
</flux:tooltip>
<flux:tooltip :content="__('Documentation')" position="bottom">
<flux:navbar.item
class="h-10 max-lg:hidden [&>div>svg]:size-5"
icon="book-open-text"
href="https://laravel.com/docs/starter-kits#livewire"
target="_blank"
:label="__('Documentation')"
/>
</flux:tooltip>
</flux:navbar>
<x-desktop-user-menu />
</flux:header>
<!-- Mobile Menu -->
<flux:sidebar collapsible="mobile" sticky class="lg:hidden border-e border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
<flux:sidebar.header>
<x-app-logo :sidebar="true" href="{{ route('dashboard') }}" wire:navigate />
<flux:sidebar.collapse class="in-data-flux-sidebar-on-desktop:not-in-data-flux-sidebar-collapsed-desktop:-mr-2" />
</flux:sidebar.header>
<flux:sidebar.nav>
<flux:sidebar.group :heading="__('Platform')">
<flux:sidebar.item icon="layout-grid" :href="route('dashboard')" :current="request()->routeIs('dashboard')" wire:navigate>
{{ __('Dashboard') }}
</flux:sidebar.item>
</flux:sidebar.group>
</flux:sidebar.nav>
<flux:spacer />
<flux:sidebar.nav>
<flux:sidebar.item icon="folder-git-2" href="https://github.com/laravel/livewire-starter-kit" target="_blank">
{{ __('Repository') }}
</flux:sidebar.item>
<flux:sidebar.item icon="book-open-text" href="https://laravel.com/docs/starter-kits#livewire" target="_blank">
{{ __('Documentation') }}
</flux:sidebar.item>
</flux:sidebar.nav>
</flux:sidebar>
{{ $slot }}
@persist('toast')
<flux:toast.group>
<flux:toast />
</flux:toast.group>
@endpersist
@fluxScripts
</body>
</html>
resources/views/layouts/app/sidebar.blade.php
-101
View File
@@ -1,101 +0,0 @@
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
<head>
@include('partials.head')
</head>
<body class="min-h-screen bg-white dark:bg-zinc-800">
<flux:sidebar sticky collapsible="mobile" class="border-e border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
<flux:sidebar.header>
<x-app-logo :sidebar="true" href="{{ route('dashboard') }}" wire:navigate />
<flux:sidebar.collapse class="lg:hidden" />
</flux:sidebar.header>
<flux:sidebar.nav>
<flux:sidebar.group :heading="__('Platform')" class="grid">
<flux:sidebar.item icon="home" :href="route('dashboard')" :current="request()->routeIs('dashboard')" wire:navigate>
{{ __('Dashboard') }}
</flux:sidebar.item>
</flux:sidebar.group>
</flux:sidebar.nav>
<flux:spacer />
<flux:sidebar.nav>
<flux:sidebar.item icon="folder-git-2" href="https://github.com/laravel/livewire-starter-kit" target="_blank">
{{ __('Repository') }}
</flux:sidebar.item>
<flux:sidebar.item icon="book-open-text" href="https://laravel.com/docs/starter-kits#livewire" target="_blank">
{{ __('Documentation') }}
</flux:sidebar.item>
</flux:sidebar.nav>
<x-desktop-user-menu class="hidden lg:block" :name="auth()->user()->name" />
</flux:sidebar>
<!-- Mobile User Menu -->
<flux:header class="lg:hidden">
<flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left" />
<flux:spacer />
<flux:dropdown position="top" align="end">
<flux:profile
:initials="auth()->user()->initials()"
icon-trailing="chevron-down"
/>
<flux:menu>
<flux:menu.radio.group>
<div class="p-0 text-sm font-normal">
<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>
</div>
</flux:menu.radio.group>
<flux:menu.separator />
<flux:menu.radio.group>
<flux:menu.item :href="route('profile.edit')" icon="cog" wire:navigate>
{{ __('Settings') }}
</flux:menu.item>
</flux:menu.radio.group>
<flux:menu.separator />
<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>
</flux:dropdown>
</flux:header>
{{ $slot }}
@persist('toast')
<flux:toast.group>
<flux:toast />
</flux:toast.group>
@endpersist
@fluxScripts
</body>
</html>
resources/views/layouts/auth.blade.php
+28 -3
View File
@@ -1,3 +1,28 @@
<x-layouts::auth.simple :title="$title ?? null">
{{ $slot }}
</x-layouts::auth.simple>
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"
x-data="tallstackui_darkTheme({ default: 'system' })"
x-bind:class="{ 'dark': darkTheme }">
<head>
@include('partials.head')
</head>
<body class="min-h-screen bg-gray-50 antialiased dark:bg-dark-900">
<x-ts-toast />
<div class="flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
<div class="flex w-full max-w-sm flex-col gap-6">
<a href="{{ route('home') }}" class="flex flex-col items-center gap-2 font-medium" wire:navigate>
<span class="flex size-9 items-center justify-center rounded-md">
<x-app-logo-icon class="size-9 fill-current text-black dark:text-white" />
</span>
<span class="sr-only">{{ config('app.name', 'Laravel') }}</span>
</a>
<x-ts-card>
{{ $slot }}
</x-ts-card>
</div>
</div>
@livewireScripts
</body>
</html>
resources/views/layouts/auth/card.blade.php
-33
View File
@@ -1,33 +0,0 @@
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
<head>
@include('partials.head')
</head>
<body class="min-h-screen bg-neutral-100 antialiased dark:bg-linear-to-b dark:from-neutral-950 dark:to-neutral-900">
<div class="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
<div class="flex w-full max-w-md flex-col gap-6">
<a href="{{ route('home') }}" class="flex flex-col items-center gap-2 font-medium" wire:navigate>
<span class="flex h-9 w-9 items-center justify-center rounded-md">
<x-app-logo-icon class="size-9 fill-current text-black dark:text-white" />
</span>
<span class="sr-only">{{ config('app.name', 'Laravel') }}</span>
</a>
<div class="flex flex-col gap-6">
<div class="rounded-xl border bg-white dark:bg-stone-950 dark:border-stone-800 text-stone-800 shadow-xs">
<div class="px-10 py-8">{{ $slot }}</div>
</div>
</div>
</div>
</div>
@persist('toast')
<flux:toast.group>
<flux:toast />
</flux:toast.group>
@endpersist
@fluxScripts
</body>
</html>
resources/views/layouts/auth/simple.blade.php
-29
View File
@@ -1,29 +0,0 @@
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
<head>
@include('partials.head')
</head>
<body class="min-h-screen bg-white antialiased dark:bg-linear-to-b dark:from-neutral-950 dark:to-neutral-900">
<div class="bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
<div class="flex w-full max-w-sm flex-col gap-2">
<a href="{{ route('home') }}" class="flex flex-col items-center gap-2 font-medium" wire:navigate>
<span class="flex h-9 w-9 mb-1 items-center justify-center rounded-md">
<x-app-logo-icon class="size-9 fill-current text-black dark:text-white" />
</span>
<span class="sr-only">{{ config('app.name', 'Laravel') }}</span>
</a>
<div class="flex flex-col gap-6">
{{ $slot }}
</div>
</div>
</div>
@persist('toast')
<flux:toast.group>
<flux:toast />
</flux:toast.group>
@endpersist
@fluxScripts
</body>
</html>
resources/views/layouts/auth/split.blade.php
-50
View File
@@ -1,50 +0,0 @@
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
<head>
@include('partials.head')
</head>
<body class="min-h-screen bg-white antialiased dark:bg-linear-to-b dark:from-neutral-950 dark:to-neutral-900">
<div class="relative grid h-dvh flex-col items-center justify-center px-8 sm:px-0 lg:max-w-none lg:grid-cols-2 lg:px-0">
<div class="bg-muted relative hidden h-full flex-col p-10 text-white lg:flex dark:border-e dark:border-neutral-800">
<div class="absolute inset-0 bg-neutral-900"></div>
<a href="{{ route('home') }}" class="relative z-20 flex items-center text-lg font-medium" wire:navigate>
<span class="flex h-10 w-10 items-center justify-center rounded-md">
<x-app-logo-icon class="me-2 h-7 fill-current text-white" />
</span>
{{ config('app.name', 'Laravel') }}
</a>
@php
[$message, $author] = str(Illuminate\Foundation\Inspiring::quotes()->random())->explode('-');
@endphp
<div class="relative z-20 mt-auto">
<blockquote class="space-y-2">
<flux:heading size="lg">&ldquo;{{ trim($message) }}&rdquo;</flux:heading>
<footer><flux:heading>{{ trim($author) }}</flux:heading></footer>
</blockquote>
</div>
</div>
<div class="w-full lg:p-8">
<div class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
<a href="{{ route('home') }}" class="z-20 flex flex-col items-center gap-2 font-medium lg:hidden" wire:navigate>
<span class="flex h-9 w-9 items-center justify-center rounded-md">
<x-app-logo-icon class="size-9 fill-current text-black dark:text-white" />
</span>
<span class="sr-only">{{ config('app.name', 'Laravel') }}</span>
</a>
{{ $slot }}
</div>
</div>
</div>
@persist('toast')
<flux:toast.group>
<flux:toast />
</flux:toast.group>
@endpersist
@fluxScripts
</body>
</html>
resources/views/livewire/auth/confirm-password.blade.php
+14 -22
View File
@@ -1,36 +1,28 @@
<x-layouts::auth :title="__('Confirm password')">
<div class="flex flex-col gap-6">
<x-auth-header
:title="__('Confirm password')"
:description="__('This is a secure area of the application. Please confirm your password before continuing.')"
/>
<x-auth-header :title="__('Confirm password')"
:description="__('This is a secure area of the application. Please confirm your password before continuing.')" />
<x-auth-session-status class="text-center" :status="session('status')" />
<x-passkey-verify
options-route="passkey.confirm-options"
submit-route="passkey.confirm"
:label="__('Confirm with passkey')"
:loading-label="__('Confirming...')"
:separator="__('Or confirm with password')"
/>
<x-passkey-verify options-route="passkey.confirm-options"
submit-route="passkey.confirm"
:label="__('Confirm with passkey')"
:loading-label="__('Confirming...')"
:separator="__('Or confirm with password')" />
<form method="POST" action="{{ route('password.confirm.store') }}" class="flex flex-col gap-6">
@csrf
<flux:input
name="password"
:label="__('Password')"
type="password"
required
autocomplete="current-password"
:placeholder="__('Password')"
viewable
/>
<x-ts-password name="password"
:label="__('Password')"
required
autocomplete="current-password"
:placeholder="__('Password')" />
<flux:button variant="primary" type="submit" class="w-full" data-test="confirm-password-button">
<x-ts-button submit class="w-full" data-test="confirm-password-button">
{{ __('Confirm') }}
</flux:button>
</x-ts-button>
</form>
</div>
</x-layouts::auth>
resources/views/livewire/auth/forgot-password.blade.php
+10 -12
View File
@@ -9,23 +9,21 @@
@csrf
<!-- Email Address -->
<flux:input
name="email"
:label="__('Email address')"
type="email"
required
autofocus
placeholder="email@example.com"
/>
<x-ts-input name="email"
:label="__('Email address')"
type="email"
required
autofocus
placeholder="email@example.com" />
<flux:button variant="primary" type="submit" class="w-full" data-test="email-password-reset-link-button">
<x-ts-button submit class="w-full" data-test="email-password-reset-link-button">
{{ __('Email password reset link') }}
</flux:button>
</x-ts-button>
</form>
<div class="space-x-1 rtl:space-x-reverse text-center text-sm text-zinc-400">
<div class="space-x-1 text-center text-sm text-gray-500 rtl:space-x-reverse dark:text-dark-300">
<span>{{ __('Or, return to') }}</span>
<flux:link :href="route('login')" wire:navigate>{{ __('log in') }}</flux:link>
<x-ts-link :href="route('login')" navigate>{{ __('log in') }}</x-ts-link>
</div>
</div>
</x-layouts::auth>
resources/views/livewire/auth/login.blade.php
+21 -29
View File
@@ -11,50 +11,42 @@
@csrf
<!-- Email Address -->
<flux:input
name="email"
:label="__('Email address')"
:value="old('email')"
type="email"
required
autofocus
autocomplete="email"
placeholder="email@example.com"
/>
<x-ts-input name="email"
:label="__('Email address')"
:value="old('email')"
type="email"
required
autofocus
autocomplete="email"
placeholder="email@example.com" />
<!-- Password -->
<div class="relative">
<flux:input
name="password"
:label="__('Password')"
type="password"
required
autocomplete="current-password"
:placeholder="__('Password')"
viewable
/>
<x-ts-password name="password"
:label="__('Password')"
required
autocomplete="current-password"
:placeholder="__('Password')" />
@if (Route::has('password.request'))
<flux:link class="absolute top-0 text-sm end-0" :href="route('password.request')" wire:navigate>
<x-ts-link :href="route('password.request')" class="absolute end-0 top-0 text-sm" navigate>
{{ __('Forgot your password?') }}
</flux:link>
</x-ts-link>
@endif
</div>
<!-- Remember Me -->
<flux:checkbox name="remember" :label="__('Remember me')" :checked="old('remember')" />
<x-ts-checkbox name="remember" :label="__('Remember me')" :checked="(bool) old('remember')" />
<div class="flex items-center justify-end">
<flux:button variant="primary" type="submit" class="w-full" data-test="login-button">
{{ __('Log in') }}
</flux:button>
</div>
<x-ts-button submit class="w-full" data-test="login-button">
{{ __('Log in') }}
</x-ts-button>
</form>
@if (Route::has('register'))
<div class="space-x-1 text-sm text-center rtl:space-x-reverse text-zinc-600 dark:text-zinc-400">
<div class="space-x-1 text-center text-sm text-gray-600 rtl:space-x-reverse dark:text-dark-300">
<span>{{ __('Don\'t have an account?') }}</span>
<flux:link :href="route('register')" wire:navigate>{{ __('Sign up') }}</flux:link>
<x-ts-link :href="route('register')" navigate>{{ __('Sign up') }}</x-ts-link>
</div>
@endif
</div>
resources/views/livewire/auth/register.blade.php
-69
View File
@@ -1,69 +0,0 @@
<x-layouts::auth :title="__('Register')">
<div class="flex flex-col gap-6">
<x-auth-header :title="__('Create an account')" :description="__('Enter your details below to create your account')" />
<!-- Session Status -->
<x-auth-session-status class="text-center" :status="session('status')" />
<form method="POST" action="{{ route('register.store') }}" class="flex flex-col gap-6">
@csrf
<!-- Name -->
<flux:input
name="name"
:label="__('Name')"
:value="old('name')"
type="text"
required
autofocus
autocomplete="name"
:placeholder="__('Full name')"
/>
<!-- Email Address -->
<flux:input
name="email"
:label="__('Email address')"
:value="old('email')"
type="email"
required
autocomplete="email"
placeholder="email@example.com"
/>
<!-- Password -->
<flux:input
name="password"
:label="__('Password')"
type="password"
required
autocomplete="new-password"
:placeholder="__('Password')"
passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}"
viewable
/>
<!-- Confirm Password -->
<flux:input
name="password_confirmation"
:label="__('Confirm password')"
type="password"
required
autocomplete="new-password"
:placeholder="__('Confirm password')"
passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}"
viewable
/>
<div class="flex items-center justify-end">
<flux:button type="submit" variant="primary" class="w-full" data-test="register-user-button">
{{ __('Create account') }}
</flux:button>
</div>
</form>
<div class="space-x-1 rtl:space-x-reverse text-center text-sm text-zinc-600 dark:text-zinc-400">
<span>{{ __('Already have an account?') }}</span>
<flux:link :href="route('login')" wire:navigate>{{ __('Log in') }}</flux:link>
</div>
</div>
</x-layouts::auth>
resources/views/livewire/auth/reset-password.blade.php
+21 -33
View File
@@ -11,44 +11,32 @@
<input type="hidden" name="token" value="{{ request()->route('token') }}">
<!-- Email Address -->
<flux:input
name="email"
value="{{ request('email') }}"
:label="__('Email')"
type="email"
required
autocomplete="email"
/>
<x-ts-input name="email"
value="{{ request('email') }}"
:label="__('Email')"
type="email"
required
autocomplete="email" />
<!-- Password -->
<flux:input
name="password"
:label="__('Password')"
type="password"
required
autocomplete="new-password"
:placeholder="__('Password')"
passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}"
viewable
/>
<x-ts-password name="password"
:label="__('Password')"
required
autocomplete="new-password"
:placeholder="__('Password')"
passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}" />
<!-- Confirm Password -->
<flux:input
name="password_confirmation"
:label="__('Confirm password')"
type="password"
required
autocomplete="new-password"
:placeholder="__('Confirm password')"
passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}"
viewable
/>
<x-ts-password name="password_confirmation"
:label="__('Confirm password')"
required
autocomplete="new-password"
:placeholder="__('Confirm password')"
passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}" />
<div class="flex items-center justify-end">
<flux:button type="submit" variant="primary" class="w-full" data-test="reset-password-button">
{{ __('Reset password') }}
</flux:button>
</div>
<x-ts-button submit class="w-full" data-test="reset-password-button">
{{ __('Reset password') }}
</x-ts-button>
</form>
</div>
</x-layouts::auth>
resources/views/livewire/auth/two-factor-challenge.blade.php
+33 -57
View File
@@ -1,18 +1,14 @@
<x-layouts::auth :title="__('Two-factor authentication')">
<div class="flex flex-col gap-6">
<div
class="relative w-full h-auto"
x-cloak
x-data="{
<div class="relative h-auto w-full"
x-cloak
x-data="{
showRecoveryInput: @js($errors->has('recovery_code')),
code: '',
recovery_code: '',
focusOtp() {
this.$nextTick(() => this.$refs.otp?.querySelector('input')?.focus());
},
init() {
if (! this.showRecoveryInput) {
this.focusOtp();
this.$nextTick(() => this.$refs.code?.focus());
}
},
toggleInput() {
@@ -24,76 +20,56 @@
$nextTick(() => {
this.showRecoveryInput
? this.$refs.recovery_code?.focus()
: this.focusOtp();
: this.$refs.code?.focus();
});
},
}"
>
}">
<div x-show="!showRecoveryInput">
<x-auth-header
:title="__('Authentication code')"
:description="__('Enter the authentication code provided by your authenticator application.')"
/>
<x-auth-header :title="__('Authentication code')"
:description="__('Enter the authentication code provided by your authenticator application.')" />
</div>
<div x-show="showRecoveryInput">
<x-auth-header
:title="__('Recovery code')"
:description="__('Please confirm access to your account by entering one of your emergency recovery codes.')"
/>
<x-auth-header :title="__('Recovery code')"
:description="__('Please confirm access to your account by entering one of your emergency recovery codes.')" />
</div>
<form method="POST" action="{{ route('two-factor.login.store') }}">
@csrf
<div class="space-y-5 text-center">
<div class="my-5 space-y-5">
<div x-show="!showRecoveryInput">
<div class="flex items-center justify-center my-5" x-ref="otp">
<flux:otp
x-model="code"
length="6"
name="code"
label="OTP Code"
label:sr-only
class="mx-auto"
/>
</div>
<x-ts-input name="code"
:label="__('Authentication code')"
x-model="code"
x-ref="code"
x-bind:required="!showRecoveryInput"
inputmode="numeric"
maxlength="6"
autocomplete="one-time-code"
class="text-center font-mono tracking-[0.5em]" />
</div>
<div x-show="showRecoveryInput">
<div class="my-5">
<flux:input
type="text"
name="recovery_code"
x-ref="recovery_code"
x-bind:required="showRecoveryInput"
autocomplete="one-time-code"
x-model="recovery_code"
/>
</div>
@error('recovery_code')
<flux:text color="red">
{{ $message }}
</flux:text>
@enderror
<x-ts-input name="recovery_code"
:label="__('Recovery code')"
x-model="recovery_code"
x-ref="recovery_code"
x-bind:required="showRecoveryInput"
autocomplete="one-time-code" />
</div>
<flux:button
variant="primary"
type="submit"
class="w-full"
>
<x-ts-button submit class="w-full">
{{ __('Continue') }}
</flux:button>
</x-ts-button>
</div>
<div class="mt-5 space-x-0.5 text-sm leading-5 text-center">
<div class="mt-5 space-x-0.5 text-center text-sm leading-5">
<span class="opacity-50">{{ __('or you can') }}</span>
<div class="inline font-medium underline cursor-pointer opacity-80">
<span x-show="!showRecoveryInput" @click="toggleInput()">{{ __('login using a recovery code') }}</span>
<span x-show="showRecoveryInput" @click="toggleInput()">{{ __('login using an authentication code') }}</span>
</div>
<button type="button" class="inline cursor-pointer font-medium underline opacity-80" x-on:click="toggleInput()">
<span x-show="!showRecoveryInput">{{ __('login using a recovery code') }}</span>
<span x-show="showRecoveryInput">{{ __('login using an authentication code') }}</span>
</button>
</div>
</form>
</div>
resources/views/livewire/auth/verify-email.blade.php
+9 -9
View File
@@ -1,28 +1,28 @@
<x-layouts::auth :title="__('Email verification')">
<div class="mt-4 flex flex-col gap-6">
<flux:text class="text-center">
<p class="text-center text-sm text-gray-600 dark:text-dark-300">
{{ __('Please verify your email address by clicking on the link we just emailed to you.') }}
</flux:text>
</p>
@if (session('status') == 'verification-link-sent')
<flux:text class="text-center font-medium !dark:text-green-400 !text-green-600">
<p class="text-center text-sm font-medium text-green-600 dark:text-green-400">
{{ __('A new verification link has been sent to the email address you provided during registration.') }}
</flux:text>
</p>
@endif
<div class="flex flex-col items-center justify-between space-y-3">
<form method="POST" action="{{ route('verification.send') }}">
<form method="POST" action="{{ route('verification.send') }}" class="w-full">
@csrf
<flux:button type="submit" variant="primary" class="w-full">
<x-ts-button submit class="w-full">
{{ __('Resend verification email') }}
</flux:button>
</x-ts-button>
</form>
<form method="POST" action="{{ route('logout') }}">
@csrf
<flux:button variant="ghost" type="submit" class="text-sm cursor-pointer" data-test="logout-button">
<x-ts-button submit flat color="secondary" sm data-test="logout-button">
{{ __('Log out') }}
</flux:button>
</x-ts-button>
</form>
</div>
</div>
resources/views/livewire/settings/appearance.blade.php
+4 -7
View File
@@ -1,13 +1,10 @@
<section class="w-full">
@include('partials.settings-heading')
<flux:heading level="2" class="sr-only">{{ __('Appearance settings') }}</flux:heading>
<x-heading class="sr-only">{{ __('Appearance settings') }}</x-heading>
<x-settings.layout :heading="__('Appearance')" :subheading=" __('Update the appearance settings for your account')">
<flux:radio.group x-data variant="segmented" x-model="$flux.appearance">
<flux:radio value="light" icon="sun">{{ __('Light') }}</flux:radio>
<flux:radio value="dark" icon="moon">{{ __('Dark') }}</flux:radio>
<flux:radio value="system" icon="computer-desktop">{{ __('System') }}</flux:radio>
</flux:radio.group>
<x-settings.layout :heading="__('Appearance')" :subheading="__('Update the appearance settings for your account')">
{{-- Hell / Dunkel / System; nutzt den Theme-Zustand aus tallstackui_darkTheme() am <html>-Element. --}}
<x-ts-theme-switch />
</x-settings.layout>
</section>
resources/views/livewire/settings/delete-user-form.blade.php
+27 -26
View File
@@ -1,34 +1,35 @@
<section class="mt-10 space-y-6">
<div class="relative mb-5">
<flux:heading>{{ __('Delete account') }}</flux:heading>
<flux:subheading>{{ __('Delete your account and all of its resources') }}</flux:subheading>
<x-heading>{{ __('Delete account') }}</x-heading>
<x-subheading>{{ __('Delete your account and all of its resources') }}</x-subheading>
</div>
<flux:modal.trigger name="confirm-user-deletion">
<flux:button variant="danger" x-data="" x-on:click.prevent="$dispatch('open-modal', 'confirm-user-deletion')">
{{ __('Delete account') }}
</flux:button>
</flux:modal.trigger>
<x-ts-button color="red" x-on:click="$tsui.open.modal('confirm-user-deletion')">
{{ __('Delete account') }}
</x-ts-button>
<flux:modal name="confirm-user-deletion" :show="$errors->isNotEmpty()" focusable class="max-w-lg">
<form method="POST" wire:submit="deleteUser" class="space-y-6">
<div>
<flux:heading size="lg">{{ __('Are you sure you want to delete your account?') }}</flux:heading>
<x-ts-modal id="confirm-user-deletion" size="lg" center :title="__('Are you sure you want to delete your account?')">
<form id="delete-user-form" wire:submit="deleteUser" class="space-y-6">
<p class="text-sm text-gray-600 dark:text-dark-300">
{{ __('Once your account is deleted, all of its resources and data will be permanently deleted. Please enter your password to confirm you would like to permanently delete your account.') }}
</p>
<flux:subheading>
{{ __('Once your account is deleted, all of its resources and data will be permanently deleted. Please enter your password to confirm you would like to permanently delete your account.') }}
</flux:subheading>
</div>
<flux:input wire:model="password" :label="__('Password')" type="password" viewable />
<div class="flex justify-end space-x-2 rtl:space-x-reverse">
<flux:modal.close>
<flux:button variant="filled">{{ __('Cancel') }}</flux:button>
</flux:modal.close>
<flux:button variant="danger" type="submit">{{ __('Delete account') }}</flux:button>
</div>
<x-ts-password wire:model="password" :label="__('Password')" />
</form>
</flux:modal>
<x-slot:footer>
<div class="flex justify-end gap-2">
<x-ts-button flat color="secondary" x-on:click="$tsui.close.modal('confirm-user-deletion')">
{{ __('Cancel') }}
</x-ts-button>
<x-ts-button submit form="delete-user-form" color="red" loading="deleteUser">
{{ __('Delete account') }}
</x-ts-button>
</div>
</x-slot:footer>
</x-ts-modal>
@if ($errors->isNotEmpty())
<div x-init="$tsui.open.modal('confirm-user-deletion')"></div>
@endif
</section>
resources/views/livewire/settings/profile.blade.php
+10 -13
View File
@@ -1,31 +1,28 @@
<section class="w-full">
@include('partials.settings-heading')
<flux:heading level="2" class="sr-only">{{ __('Profile settings') }}</flux:heading>
<x-heading class="sr-only">{{ __('Profile settings') }}</x-heading>
<x-settings.layout :heading="__('Profile')" :subheading="__('Update your name and email address')">
<form wire:submit="updateProfileInformation" class="my-6 w-full space-y-6">
<flux:input wire:model="name" :label="__('Name')" type="text" required autofocus autocomplete="name" />
<x-ts-input wire:model="name" :label="__('Name')" type="text" required autofocus autocomplete="name" />
<div>
<flux:input wire:model="email" :label="__('Email')" type="email" required autocomplete="email" />
<x-ts-input wire:model="email" :label="__('Email')" type="email" required autocomplete="email" />
@if ($this->hasUnverifiedEmail)
<div>
<flux:text class="mt-4">
{{ __('Your email address is unverified.') }}
<p class="mt-4 text-sm text-gray-600 dark:text-dark-300">
{{ __('Your email address is unverified.') }}
<flux:link class="text-sm cursor-pointer" wire:click.prevent="resendVerificationNotification">
{{ __('Click here to re-send the verification email.') }}
</flux:link>
</flux:text>
</div>
<x-ts-link href="#" class="cursor-pointer text-sm" wire:click.prevent="resendVerificationNotification">
{{ __('Click here to re-send the verification email.') }}
</x-ts-link>
</p>
@endif
</div>
<div class="flex items-center gap-4">
<flux:button variant="primary" type="submit">{{ __('Save') }}</flux:button>
<x-ts-button submit loading="updateProfileInformation">{{ __('Save') }}</x-ts-button>
</div>
</form>
resources/views/livewire/settings/security.blade.php
+103 -212
View File
@@ -1,289 +1,194 @@
<section class="w-full">
@include('partials.settings-heading')
<flux:heading level="2" class="sr-only">{{ __('Security settings') }}</flux:heading>
<x-heading class="sr-only">{{ __('Security settings') }}</x-heading>
<x-settings.layout :heading="__('Update password')" :subheading="__('Ensure your account is using a long, random password to stay secure')">
<form method="POST" wire:submit="updatePassword" class="mt-6 space-y-6">
<flux:input
wire:model="current_password"
:label="__('Current password')"
type="password"
required
autocomplete="current-password"
viewable
/>
<flux:input
wire:model="password"
:label="__('New password')"
type="password"
required
autocomplete="new-password"
passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}"
viewable
/>
<flux:input
wire:model="password_confirmation"
:label="__('Confirm password')"
type="password"
required
autocomplete="new-password"
passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}"
viewable
/>
<form wire:submit="updatePassword" class="mt-6 space-y-6">
<x-ts-password wire:model="current_password"
:label="__('Current password')"
required
autocomplete="current-password" />
<x-ts-password wire:model="password"
:label="__('New password')"
required
autocomplete="new-password"
passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}" />
<x-ts-password wire:model="password_confirmation"
:label="__('Confirm password')"
required
autocomplete="new-password"
passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}" />
<div class="flex items-center gap-4">
<flux:button variant="primary" type="submit" data-test="update-password-button">{{ __('Save') }}</flux:button>
<x-ts-button submit loading="updatePassword" data-test="update-password-button">{{ __('Save') }}</x-ts-button>
</div>
</form>
@if ($canManageTwoFactor)
<section class="mt-12">
<flux:heading>{{ __('Two-factor authentication') }}</flux:heading>
<flux:subheading>{{ __('Manage your two-factor authentication settings') }}</flux:subheading>
<x-heading>{{ __('Two-factor authentication') }}</x-heading>
<x-subheading>{{ __('Manage your two-factor authentication settings') }}</x-subheading>
<div class="flex flex-col w-full mx-auto space-y-6 text-sm" wire:cloak>
<div class="mx-auto mt-4 flex w-full flex-col space-y-6 text-sm" wire:cloak>
@if ($twoFactorEnabled)
<div class="space-y-4">
<flux:text>
<p class="text-gray-600 dark:text-dark-300">
{{ __('You will be prompted for a secure, random pin during login, which you can retrieve from the TOTP-supported application on your phone.') }}
</flux:text>
</p>
<div class="flex justify-start">
<flux:button
variant="danger"
wire:click="disable"
>
<x-ts-button color="red" wire:click="disable" loading="disable">
{{ __('Disable 2FA') }}
</flux:button>
</x-ts-button>
</div>
<livewire:settings.two-factor.recovery-codes :$requiresConfirmation />
</div>
@else
<div class="space-y-4">
<flux:text variant="subtle">
<p class="text-gray-500 dark:text-dark-300">
{{ __('When you enable two-factor authentication, you will be prompted for a secure pin during login. This pin can be retrieved from a TOTP-supported application on your phone.') }}
</flux:text>
</p>
<flux:button
variant="primary"
wire:click="enable"
>
<x-ts-button wire:click="enable" loading="enable">
{{ __('Enable 2FA') }}
</flux:button>
</x-ts-button>
</div>
@endif
</div>
</section>
@endif
@if ($canManageTwoFactor)
<flux:modal
name="two-factor-setup-modal"
class="max-w-md md:min-w-md"
@close="closeModal"
wire:model="showModal"
>
<x-ts-modal wire="showModal" size="md" center x-on:close="$wire.closeModal()">
<div class="space-y-6">
<div class="flex flex-col items-center space-y-4">
<div class="p-0.5 w-auto rounded-full border border-stone-100 dark:border-stone-600 bg-white dark:bg-stone-800 shadow-sm">
<div class="p-2.5 rounded-full border border-stone-200 dark:border-stone-600 overflow-hidden bg-stone-100 dark:bg-stone-200 relative">
<div class="flex items-stretch absolute inset-0 w-full h-full divide-x [&>div]:flex-1 divide-stone-200 dark:divide-stone-300 justify-around opacity-50">
@for ($i = 1; $i <= 5; $i++)
<div></div>
@endfor
</div>
<div class="flex flex-col items-stretch absolute w-full h-full divide-y [&>div]:flex-1 inset-0 divide-stone-200 dark:divide-stone-300 justify-around opacity-50">
@for ($i = 1; $i <= 5; $i++)
<div></div>
@endfor
</div>
<flux:icon.qr-code class="relative z-20 dark:text-accent-foreground"/>
</div>
<div class="rounded-full border border-gray-200 bg-gray-100 p-3 dark:border-dark-600 dark:bg-dark-700">
<x-ts-icon name="qr-code" lg />
</div>
<div class="space-y-2 text-center">
<flux:heading size="lg">{{ $this->modalConfig['title'] }}</flux:heading>
<flux:text>{{ $this->modalConfig['description'] }}</flux:text>
<x-heading size="lg">{{ $this->modalConfig['title'] }}</x-heading>
<p class="text-sm text-gray-600 dark:text-dark-300">{{ $this->modalConfig['description'] }}</p>
</div>
</div>
@if ($showVerificationStep)
<div class="space-y-6">
<div
class="flex flex-col items-center space-y-3 justify-center"
x-data
x-init="$nextTick(() => $el.querySelector('input')?.focus())"
>
<flux:otp
name="code"
wire:model="code"
length="6"
label="OTP Code"
label:sr-only
class="mx-auto"
/>
<div x-data x-init="$nextTick(() => $el.querySelector('input')?.focus())">
<x-ts-input wire:model="code"
name="code"
:label="__('Authentication code')"
inputmode="numeric"
maxlength="6"
autocomplete="one-time-code"
class="text-center font-mono tracking-[0.5em]" />
</div>
<div class="flex items-center space-x-3">
<flux:button
variant="outline"
class="flex-1"
wire:click="resetVerification"
>
<div class="flex items-center gap-3">
<x-ts-button outline class="flex-1" wire:click="resetVerification">
{{ __('Back') }}
</flux:button>
</x-ts-button>
<flux:button
variant="primary"
class="flex-1"
wire:click="confirmTwoFactor"
x-bind:disabled="$wire.code.length < 6"
>
<x-ts-button class="flex-1"
wire:click="confirmTwoFactor"
loading="confirmTwoFactor"
x-bind:disabled="$wire.code.length < 6">
{{ __('Confirm') }}
</flux:button>
</x-ts-button>
</div>
</div>
@else
@error('setupData')
<flux:callout variant="danger" icon="x-circle" heading="{{ $message }}"/>
<x-ts-alert color="red" icon="x-circle" :text="$message" />
@enderror
<div class="flex justify-center">
<div class="relative w-64 overflow-hidden border rounded-lg border-stone-200 dark:border-stone-700 aspect-square">
{{-- QR-Code immer dunkel auf hell, damit ihn jede Authenticator-App scannen kann. --}}
<div class="relative aspect-square w-64 overflow-hidden rounded-lg border border-gray-200 bg-white dark:border-dark-600">
@empty($qrCodeSvg)
<div class="absolute inset-0 flex items-center justify-center bg-white dark:bg-stone-700 animate-pulse">
<flux:icon.loading/>
<div class="absolute inset-0 flex animate-pulse items-center justify-center">
<x-ts-icon name="arrow-path" class="animate-spin text-gray-400" />
</div>
@else
<div x-data class="flex items-center justify-center h-full p-4">
<div
class="bg-white p-3 rounded"
:style="($flux.appearance === 'dark' || ($flux.appearance === 'system' && $flux.dark)) ? 'filter: invert(1) brightness(1.5)' : ''"
>
{!! $qrCodeSvg !!}
</div>
<div class="flex h-full items-center justify-center p-4">
{!! $qrCodeSvg !!}
</div>
@endempty
</div>
</div>
<div>
<flux:button
:disabled="$errors->has('setupData')"
variant="primary"
class="w-full"
wire:click="showVerificationIfNecessary"
>
{{ $this->modalConfig['buttonText'] }}
</flux:button>
</div>
<x-ts-button class="w-full"
:disabled="$errors->has('setupData')"
wire:click="showVerificationIfNecessary">
{{ $this->modalConfig['buttonText'] }}
</x-ts-button>
<div class="space-y-4">
<div class="relative flex items-center justify-center w-full">
<div class="absolute inset-0 w-full h-px top-1/2 bg-stone-200 dark:bg-stone-600"></div>
<span class="relative px-2 text-sm bg-white dark:bg-stone-800 text-stone-600 dark:text-stone-400">
<div class="relative flex w-full items-center justify-center">
<div class="absolute inset-0 top-1/2 h-px w-full bg-gray-200 dark:bg-dark-600"></div>
<span class="relative bg-white px-2 text-sm text-gray-600 dark:bg-dark-800 dark:text-dark-300">
{{ __('or, enter the code manually') }}
</span>
</div>
<div
class="flex items-center space-x-2"
x-data="{
copied: false,
async copy() {
try {
await navigator.clipboard.writeText('{{ $manualSetupKey }}');
this.copied = true;
setTimeout(() => this.copied = false, 1500);
} catch (e) {
console.warn('Could not copy to clipboard');
}
}
}"
>
<div class="flex items-stretch w-full border rounded-xl dark:border-stone-700">
@empty($manualSetupKey)
<div class="flex items-center justify-center w-full p-3 bg-stone-100 dark:bg-stone-700">
<flux:icon.loading variant="mini"/>
</div>
@else
<input
type="text"
readonly
value="{{ $manualSetupKey }}"
class="w-full p-3 bg-transparent outline-none text-stone-900 dark:text-stone-100"
/>
<button
@click="copy()"
class="px-3 transition-colors border-l cursor-pointer border-stone-200 dark:border-stone-600"
>
<flux:icon.document-duplicate x-show="!copied" variant="outline"></flux:icon>
<flux:icon.check
x-show="copied"
variant="solid"
class="text-green-500"
></flux:icon>
</button>
@endempty
@empty($manualSetupKey)
<div class="flex w-full items-center justify-center rounded-lg bg-gray-100 p-3 dark:bg-dark-700">
<x-ts-icon name="arrow-path" sm class="animate-spin text-gray-400" />
</div>
</div>
@else
<x-ts-clipboard :text="$manualSetupKey" />
@endempty
</div>
@endif
</div>
</flux:modal>
</x-ts-modal>
@endif
@if ($canManagePasskeys)
<section class="mt-12">
<flux:heading>{{ __('Passkeys') }}</flux:heading>
<flux:subheading>{{ __('Manage your passkeys for passwordless sign-in') }}</flux:subheading>
<x-heading>{{ __('Passkeys') }}</x-heading>
<x-subheading>{{ __('Manage your passkeys for passwordless sign-in') }}</x-subheading>
<div class="mt-6 flex flex-col w-full mx-auto space-y-6 text-sm" wire:cloak>
<div class="border rounded-lg border-zinc-200 dark:border-zinc-700 overflow-hidden">
<div class="mx-auto mt-6 flex w-full flex-col space-y-6 text-sm" wire:cloak>
<div class="overflow-hidden rounded-lg border border-gray-200 dark:border-dark-600">
@forelse ($passkeys as $passkey)
<div class="flex items-center justify-between p-4 {{ ! $loop->last ? 'border-b border-zinc-200 dark:border-zinc-700' : '' }}">
<div @class([
'flex items-center justify-between p-4',
'border-b border-gray-200 dark:border-dark-600' => ! $loop->last,
])>
<div class="flex items-center gap-4">
<div class="flex size-10 shrink-0 items-center justify-center rounded-xl bg-zinc-100 dark:bg-zinc-800">
<flux:icon.key class="size-5 text-zinc-500 dark:text-zinc-400" />
<div class="flex size-10 shrink-0 items-center justify-center rounded-xl bg-gray-100 dark:bg-dark-700">
<x-ts-icon name="key" class="text-gray-500 dark:text-dark-300" />
</div>
<div class="space-y-1">
<div class="flex items-center gap-2.5">
<p class="font-medium tracking-tight">{{ $passkey['name'] }}</p>
@if ($passkey['authenticator'])
<flux:badge size="sm">{{ $passkey['authenticator'] }}</flux:badge>
<x-ts-badge :text="$passkey['authenticator']" color="gray" light />
@endif
</div>
<p class="text-zinc-500 dark:text-zinc-400 text-xs">
<p class="text-xs text-gray-500 dark:text-dark-300">
{{ __('Added :time', ['time' => $passkey['created_at_diff']]) }}
@if ($passkey['last_used_at_diff'])
<span class="opacity-50 mx-1">/</span>
<span class="mx-1 opacity-50">/</span>
{{ __('Last used :time', ['time' => $passkey['last_used_at_diff']]) }}
@endif
</p>
</div>
</div>
<flux:button
variant="ghost"
size="sm"
icon="trash"
icon:variant="outline"
wire:click="confirmDelete({{ $passkey['id'] }})"
class="text-red-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-950/50"
/>
<x-ts-button.circle icon="trash"
color="red"
flat
wire:click="confirmDelete({{ $passkey['id'] }})" />
</div>
@empty
<div class="p-8 text-center">
<div class="mx-auto mb-4 flex size-14 items-center justify-center rounded-2xl bg-zinc-100 dark:bg-zinc-800">
<flux:icon.key class="size-7 text-zinc-400 dark:text-zinc-500" />
<div class="mx-auto mb-4 flex size-14 items-center justify-center rounded-2xl bg-gray-100 dark:bg-dark-700">
<x-ts-icon name="key" lg class="text-gray-400 dark:text-dark-400" />
</div>
<p class="font-medium">{{ __('No passkeys yet') }}</p>
<flux:text class="mt-1">{{ __('Add a passkey to sign in without a password') }}</flux:text>
<p class="mt-1 text-gray-500 dark:text-dark-300">{{ __('Add a passkey to sign in without a password') }}</p>
</div>
@endforelse
</div>
@@ -294,34 +199,20 @@
@endif
</x-settings.layout>
<flux:modal
name="delete-passkey-modal"
class="max-w-md md:min-w-md"
@close="closeDeleteModal"
wire:model="showDeleteModal"
>
<div class="space-y-6">
<div class="space-y-2">
<flux:heading size="lg">{{ __('Remove passkey') }}</flux:heading>
<flux:text>
{{ __('Are you sure you want to remove the passkey ":name"? You will no longer be able to use it to sign in.', ['name' => $deletingPasskeyName]) }}
</flux:text>
</div>
<x-ts-modal wire="showDeleteModal" size="md" center :title="__('Remove passkey')" x-on:close="$wire.closeDeleteModal()">
<p class="text-sm text-gray-600 dark:text-dark-300">
{{ __('Are you sure you want to remove the passkey ":name"? You will no longer be able to use it to sign in.', ['name' => $deletingPasskeyName]) }}
</p>
<div class="flex gap-3 justify-end">
<flux:button
variant="outline"
wire:click="closeDeleteModal"
>
<x-slot:footer>
<div class="flex justify-end gap-3">
<x-ts-button outline wire:click="closeDeleteModal">
{{ __('Cancel') }}
</flux:button>
<flux:button
variant="danger"
wire:click="deletePasskey"
>
</x-ts-button>
<x-ts-button color="red" wire:click="deletePasskey" loading="deletePasskey">
{{ __('Remove passkey') }}
</flux:button>
</x-ts-button>
</div>
</div>
</flux:modal>
</x-slot:footer>
</x-ts-modal>
</section>
resources/views/livewire/settings/two-factor/recovery-codes.blade.php
+40 -58
View File
@@ -1,87 +1,69 @@
<div
class="py-6 space-y-6 border shadow-sm rounded-xl border-zinc-200 dark:border-white/10"
wire:cloak
x-data="{ showRecoveryCodes: false }"
>
<div class="px-6 space-y-2">
<div class="space-y-6 rounded-xl border border-gray-200 py-6 shadow-sm dark:border-dark-600"
wire:cloak
x-data="{ showRecoveryCodes: false }">
<div class="space-y-2 px-6">
<div class="flex items-center gap-2">
<flux:icon.lock-closed variant="outline" class="size-4"/>
<flux:heading size="lg" level="3">{{ __('2FA recovery codes') }}</flux:heading>
<x-ts-icon name="lock-closed" sm />
<x-heading level="3" size="lg">{{ __('2FA recovery codes') }}</x-heading>
</div>
<flux:text variant="subtle">
<x-subheading>
{{ __('Recovery codes let you regain access if you lose your 2FA device. Store them in a secure password manager.') }}
</flux:text>
</x-subheading>
</div>
<div class="px-6">
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<flux:button
x-show="!showRecoveryCodes"
icon="eye"
icon:variant="outline"
variant="primary"
@click="showRecoveryCodes = true;"
aria-expanded="false"
aria-controls="recovery-codes-section"
>
<x-ts-button x-show="!showRecoveryCodes"
icon="eye"
x-on:click="showRecoveryCodes = true"
aria-expanded="false"
aria-controls="recovery-codes-section">
{{ __('View recovery codes') }}
</flux:button>
</x-ts-button>
<flux:button
x-show="showRecoveryCodes"
icon="eye-slash"
icon:variant="outline"
variant="primary"
@click="showRecoveryCodes = false"
aria-expanded="true"
aria-controls="recovery-codes-section"
>
<x-ts-button x-show="showRecoveryCodes"
icon="eye-slash"
x-on:click="showRecoveryCodes = false"
aria-expanded="true"
aria-controls="recovery-codes-section">
{{ __('Hide recovery codes') }}
</flux:button>
</x-ts-button>
@if (filled($recoveryCodes))
<flux:button
x-show="showRecoveryCodes"
icon="arrow-path"
variant="filled"
wire:click="regenerateRecoveryCodes"
>
<x-ts-button x-show="showRecoveryCodes"
icon="arrow-path"
color="secondary"
outline
wire:click="regenerateRecoveryCodes"
loading="regenerateRecoveryCodes">
{{ __('Regenerate codes') }}
</flux:button>
</x-ts-button>
@endif
</div>
<div
x-show="showRecoveryCodes"
x-transition
id="recovery-codes-section"
class="relative overflow-hidden"
x-bind:aria-hidden="!showRecoveryCodes"
>
<div x-show="showRecoveryCodes"
x-transition
id="recovery-codes-section"
class="relative overflow-hidden"
x-bind:aria-hidden="!showRecoveryCodes">
<div class="mt-3 space-y-3">
@error('recoveryCodes')
<flux:callout variant="danger" icon="x-circle" heading="{{$message}}"/>
<x-ts-alert color="red" icon="x-circle" :text="$message" />
@enderror
@if (filled($recoveryCodes))
<div
class="grid gap-1 p-4 font-mono text-sm rounded-lg bg-zinc-100 dark:bg-white/5"
role="list"
aria-label="{{ __('Recovery codes') }}"
>
@foreach($recoveryCodes as $code)
<div
role="listitem"
class="select-text"
wire:loading.class="opacity-50 animate-pulse"
>
<div class="grid gap-1 rounded-lg bg-gray-100 p-4 font-mono text-sm dark:bg-dark-700"
role="list"
aria-label="{{ __('Recovery codes') }}">
@foreach ($recoveryCodes as $code)
<div role="listitem" class="select-text" wire:loading.class="opacity-50 animate-pulse">
{{ $code }}
</div>
@endforeach
</div>
<flux:text variant="subtle" class="text-xs">
<p class="text-xs text-gray-500 dark:text-dark-300">
{{ __('Each recovery code can be used once to access your account and will be removed after use. If you need more, click Regenerate codes above.') }}
</flux:text>
</p>
@endif
</div>
</div>
resources/views/partials/head.blade.php
+13 -1
View File
@@ -9,7 +9,19 @@
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
{{-- Theme vor dem ersten Rendern setzen, damit die Seite im Dark Mode nicht hell aufblitzt.
Gleiche Logik und gleicher Speicherschlüssel wie tallstackui_darkTheme(). --}}
<script>
(() => {
const mode = localStorage.getItem('dark-theme') ?? 'system';
const dark = mode === 'dark' || mode === 'true'
|| (mode === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
document.documentElement.classList.toggle('dark', dark);
})();
</script>
@fonts
<tallstackui:script />
@livewireStyles
@vite(['resources/css/app.css', 'resources/js/app.js'])
@fluxAppearance
resources/views/partials/settings-heading.blade.php
+3 -3
View File
@@ -1,5 +1,5 @@
<div class="relative mb-6 w-full">
<flux:heading size="xl" level="1">{{ __('Settings') }}</flux:heading>
<flux:subheading size="lg" class="mb-6">{{ __('Manage your profile and account settings') }}</flux:subheading>
<flux:separator variant="subtle" />
<x-heading level="1" size="xl">{{ __('Settings') }}</x-heading>
<x-subheading class="mb-6 text-base">{{ __('Manage your profile and account settings') }}</x-subheading>
<hr class="border-gray-200 dark:border-dark-600" />
</div>