Flux durch TallStackUI 4 ersetzt
- 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
co-authored by
Claude Opus 5.5
Claude Opus 5.5
parent
dedce594a0
commit
b297518810
@@ -72,3 +72,6 @@ MEILISEARCH_UPGRADE_DB=true
|
|||||||
# Host-Ports für Sail (80 und 3306 sind auf dem Entwicklungsrechner belegt)
|
# Host-Ports für Sail (80 und 3306 sind auf dem Entwicklungsrechner belegt)
|
||||||
APP_PORT=8080
|
APP_PORT=8080
|
||||||
FORWARD_DB_PORT=3307
|
FORWARD_DB_PORT=3307
|
||||||
|
|
||||||
|
# TallStackUI-Komponenten als <x-ts-…>, damit sie nicht mit eigenen Komponenten kollidieren
|
||||||
|
TALLSTACKUI_PREFIX=ts-
|
||||||
|
|||||||
@@ -3,17 +3,17 @@
|
|||||||
namespace App\Livewire\Settings;
|
namespace App\Livewire\Settings;
|
||||||
|
|
||||||
use App\Concerns\ProfileValidationRules;
|
use App\Concerns\ProfileValidationRules;
|
||||||
use Flux\Flux;
|
|
||||||
use Illuminate\Contracts\Auth\MustVerifyEmail;
|
use Illuminate\Contracts\Auth\MustVerifyEmail;
|
||||||
use Illuminate\Support\Facades\Auth;
|
use Illuminate\Support\Facades\Auth;
|
||||||
use Livewire\Attributes\Computed;
|
use Livewire\Attributes\Computed;
|
||||||
use Livewire\Attributes\Title;
|
use Livewire\Attributes\Title;
|
||||||
use Livewire\Component;
|
use Livewire\Component;
|
||||||
|
use TallStackUi\Traits\Interactions;
|
||||||
|
|
||||||
#[Title('Profile settings')]
|
#[Title('Profile settings')]
|
||||||
class Profile extends Component
|
class Profile extends Component
|
||||||
{
|
{
|
||||||
use ProfileValidationRules;
|
use Interactions, ProfileValidationRules;
|
||||||
|
|
||||||
public string $name = '';
|
public string $name = '';
|
||||||
|
|
||||||
@@ -45,7 +45,7 @@ class Profile extends Component
|
|||||||
|
|
||||||
$user->save();
|
$user->save();
|
||||||
|
|
||||||
Flux::toast(variant: 'success', text: __('Profile updated.'));
|
$this->toast()->success(__('Profile updated.'))->send();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -63,7 +63,7 @@ class Profile extends Component
|
|||||||
|
|
||||||
$user->sendEmailVerificationNotification();
|
$user->sendEmailVerificationNotification();
|
||||||
|
|
||||||
Flux::toast(text: __('A new verification link has been sent to your email address.'));
|
$this->toast()->info(__('A new verification link has been sent to your email address.'))->send();
|
||||||
}
|
}
|
||||||
|
|
||||||
#[Computed]
|
#[Computed]
|
||||||
|
|||||||
@@ -4,7 +4,6 @@ namespace App\Livewire\Settings;
|
|||||||
|
|
||||||
use App\Concerns\PasswordValidationRules;
|
use App\Concerns\PasswordValidationRules;
|
||||||
use Exception;
|
use Exception;
|
||||||
use Flux\Flux;
|
|
||||||
use Illuminate\Support\Facades\Auth;
|
use Illuminate\Support\Facades\Auth;
|
||||||
use Illuminate\Validation\ValidationException;
|
use Illuminate\Validation\ValidationException;
|
||||||
use Laravel\Fortify\Actions\ConfirmTwoFactorAuthentication;
|
use Laravel\Fortify\Actions\ConfirmTwoFactorAuthentication;
|
||||||
@@ -18,11 +17,12 @@ use Livewire\Attributes\Locked;
|
|||||||
use Livewire\Attributes\Title;
|
use Livewire\Attributes\Title;
|
||||||
use Livewire\Attributes\Validate;
|
use Livewire\Attributes\Validate;
|
||||||
use Livewire\Component;
|
use Livewire\Component;
|
||||||
|
use TallStackUi\Traits\Interactions;
|
||||||
|
|
||||||
#[Title('Security settings')]
|
#[Title('Security settings')]
|
||||||
class Security extends Component
|
class Security extends Component
|
||||||
{
|
{
|
||||||
use PasswordValidationRules;
|
use Interactions, PasswordValidationRules;
|
||||||
|
|
||||||
public string $current_password = '';
|
public string $current_password = '';
|
||||||
|
|
||||||
@@ -114,7 +114,7 @@ class Security extends Component
|
|||||||
|
|
||||||
$this->reset('current_password', 'password', 'password_confirmation');
|
$this->reset('current_password', 'password', 'password_confirmation');
|
||||||
|
|
||||||
Flux::toast(variant: 'success', text: __('Password updated.'));
|
$this->toast()->success(__('Password updated.'))->send();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -49,7 +49,6 @@ class FortifyServiceProvider extends ServiceProvider
|
|||||||
Fortify::verifyEmailView(fn () => view('livewire.auth.verify-email'));
|
Fortify::verifyEmailView(fn () => view('livewire.auth.verify-email'));
|
||||||
Fortify::twoFactorChallengeView(fn () => view('livewire.auth.two-factor-challenge'));
|
Fortify::twoFactorChallengeView(fn () => view('livewire.auth.two-factor-challenge'));
|
||||||
Fortify::confirmPasswordView(fn () => view('livewire.auth.confirm-password'));
|
Fortify::confirmPasswordView(fn () => view('livewire.auth.confirm-password'));
|
||||||
Fortify::registerView(fn () => view('livewire.auth.register'));
|
|
||||||
Fortify::resetPasswordView(fn () => view('livewire.auth.reset-password'));
|
Fortify::resetPasswordView(fn () => view('livewire.auth.reset-password'));
|
||||||
Fortify::requestPasswordResetLinkView(fn () => view('livewire.auth.forgot-password'));
|
Fortify::requestPasswordResetLinkView(fn () => view('livewire.auth.forgot-password'));
|
||||||
}
|
}
|
||||||
|
|||||||
+2
-2
@@ -15,9 +15,9 @@
|
|||||||
"laravel/framework": "^13.17",
|
"laravel/framework": "^13.17",
|
||||||
"laravel/tinker": "^3.0",
|
"laravel/tinker": "^3.0",
|
||||||
"livewire/blaze": "^1.0",
|
"livewire/blaze": "^1.0",
|
||||||
"livewire/flux": "^2.13.1",
|
|
||||||
"livewire/livewire": "^4.1",
|
"livewire/livewire": "^4.1",
|
||||||
"spatie/laravel-permission": "^8.3"
|
"spatie/laravel-permission": "^8.3",
|
||||||
|
"tallstackui/tallstackui": "^4.0"
|
||||||
},
|
},
|
||||||
"require-dev": {
|
"require-dev": {
|
||||||
"fakerphp/faker": "^1.24",
|
"fakerphp/faker": "^1.24",
|
||||||
|
|||||||
Generated
+81
-67
@@ -4,7 +4,7 @@
|
|||||||
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
|
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
|
||||||
"This file is @generated automatically"
|
"This file is @generated automatically"
|
||||||
],
|
],
|
||||||
"content-hash": "3dfa984d6bf252bdd70906ed897c535e",
|
"content-hash": "57105dffaaadf223d295f7e9d25f68f2",
|
||||||
"packages": [
|
"packages": [
|
||||||
{
|
{
|
||||||
"name": "bacon/bacon-qr-code",
|
"name": "bacon/bacon-qr-code",
|
||||||
@@ -2432,72 +2432,6 @@
|
|||||||
},
|
},
|
||||||
"time": "2026-09-15T09:45:15+00:00"
|
"time": "2026-09-15T09:45:15+00:00"
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"name": "livewire/flux",
|
|
||||||
"version": "v2.20.1",
|
|
||||||
"source": {
|
|
||||||
"type": "git",
|
|
||||||
"url": "https://github.com/livewire/flux.git",
|
|
||||||
"reference": "ee9ad7f91087ea117a2c80993a14cb25bb902f70"
|
|
||||||
},
|
|
||||||
"dist": {
|
|
||||||
"type": "zip",
|
|
||||||
"url": "https://api.github.com/repos/livewire/flux/zipball/ee9ad7f91087ea117a2c80993a14cb25bb902f70",
|
|
||||||
"reference": "ee9ad7f91087ea117a2c80993a14cb25bb902f70",
|
|
||||||
"shasum": ""
|
|
||||||
},
|
|
||||||
"require": {
|
|
||||||
"illuminate/console": "^10.0|^11.0|^12.0|^13.0",
|
|
||||||
"illuminate/support": "^10.0|^11.0|^12.0|^13.0",
|
|
||||||
"illuminate/view": "^10.0|^11.0|^12.0|^13.0",
|
|
||||||
"laravel/prompts": "^0.1|^0.2|^0.3",
|
|
||||||
"livewire/livewire": "^3.7.4|^4.0|dev-main",
|
|
||||||
"php": "^8.1",
|
|
||||||
"symfony/console": "^6.0|^7.0|^8.0"
|
|
||||||
},
|
|
||||||
"conflict": {
|
|
||||||
"livewire/blaze": "<1.0.0-beta.2"
|
|
||||||
},
|
|
||||||
"type": "library",
|
|
||||||
"extra": {
|
|
||||||
"laravel": {
|
|
||||||
"aliases": {
|
|
||||||
"Flux": "Flux\\Flux"
|
|
||||||
},
|
|
||||||
"providers": [
|
|
||||||
"Flux\\FluxServiceProvider"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"autoload": {
|
|
||||||
"psr-4": {
|
|
||||||
"Flux\\": "src/"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"notification-url": "https://packagist.org/downloads/",
|
|
||||||
"license": [
|
|
||||||
"proprietary"
|
|
||||||
],
|
|
||||||
"authors": [
|
|
||||||
{
|
|
||||||
"name": "Caleb Porzio",
|
|
||||||
"email": "calebporzio@gmail.com"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"description": "The official UI component library for Livewire.",
|
|
||||||
"keywords": [
|
|
||||||
"components",
|
|
||||||
"flux",
|
|
||||||
"laravel",
|
|
||||||
"livewire",
|
|
||||||
"ui"
|
|
||||||
],
|
|
||||||
"support": {
|
|
||||||
"issues": "https://github.com/livewire/flux/issues",
|
|
||||||
"source": "https://github.com/livewire/flux/tree/v2.20.1"
|
|
||||||
},
|
|
||||||
"time": "2026-09-28T18:14:53+00:00"
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"name": "livewire/livewire",
|
"name": "livewire/livewire",
|
||||||
"version": "v4.4.7",
|
"version": "v4.4.7",
|
||||||
@@ -7605,6 +7539,86 @@
|
|||||||
],
|
],
|
||||||
"time": "2026-08-30T20:10:52+00:00"
|
"time": "2026-08-30T20:10:52+00:00"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"name": "tallstackui/tallstackui",
|
||||||
|
"version": "v4.2.1",
|
||||||
|
"source": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://github.com/tallstackui/tallstackui.git",
|
||||||
|
"reference": "b2333d59893e3fccd382b3f2c7a87653056c14d4"
|
||||||
|
},
|
||||||
|
"dist": {
|
||||||
|
"type": "zip",
|
||||||
|
"url": "https://api.github.com/repos/tallstackui/tallstackui/zipball/b2333d59893e3fccd382b3f2c7a87653056c14d4",
|
||||||
|
"reference": "b2333d59893e3fccd382b3f2c7a87653056c14d4",
|
||||||
|
"shasum": ""
|
||||||
|
},
|
||||||
|
"require": {
|
||||||
|
"ext-zip": "*",
|
||||||
|
"illuminate/console": "^10.0|^11.0|^12.0|^13.0",
|
||||||
|
"illuminate/contracts": "^10.0|^11.0|^12.0|^13.0",
|
||||||
|
"illuminate/pagination": "^10.0|^11.0|^12.0|^13.0",
|
||||||
|
"illuminate/support": "^10.0|^11.0|^12.0|^13.0",
|
||||||
|
"illuminate/view": "^10.0|^11.0|^12.0|^13.0",
|
||||||
|
"livewire/livewire": "^4.3.0",
|
||||||
|
"php": "^8.1"
|
||||||
|
},
|
||||||
|
"require-dev": {
|
||||||
|
"blade-ui-kit/blade-icons": "^1.7",
|
||||||
|
"larastan/larastan": "^3.9",
|
||||||
|
"laravel/pint": "^1.13",
|
||||||
|
"orchestra/testbench": "^8.21.0|^9.0|^10.0|^11.0",
|
||||||
|
"orchestra/testbench-dusk": "^8.24|^9.1|^10.0|^11.0",
|
||||||
|
"pestphp/pest": "^5.0",
|
||||||
|
"pestphp/pest-plugin-type-coverage": "^5.0",
|
||||||
|
"spatie/ray": "^1.41"
|
||||||
|
},
|
||||||
|
"type": "library",
|
||||||
|
"extra": {
|
||||||
|
"laravel": {
|
||||||
|
"aliases": {
|
||||||
|
"TallStackUi": "TallStackUi\\Facades\\TallStackUi"
|
||||||
|
},
|
||||||
|
"providers": [
|
||||||
|
"TallStackUi\\TallStackUiServiceProvider"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"autoload": {
|
||||||
|
"files": [
|
||||||
|
"src/helpers.php"
|
||||||
|
],
|
||||||
|
"psr-4": {
|
||||||
|
"TallStackUi\\": "src/"
|
||||||
|
},
|
||||||
|
"exclude-from-classmap": [
|
||||||
|
"src/**/*FeatureTest.php",
|
||||||
|
"src/**/*BrowserTest.php"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"notification-url": "https://packagist.org/downloads/",
|
||||||
|
"license": [
|
||||||
|
"MIT"
|
||||||
|
],
|
||||||
|
"authors": [
|
||||||
|
{
|
||||||
|
"name": "AJ Meireles",
|
||||||
|
"email": "alvaro.meireles@live.com"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"description": "TallStackUI is a powerful suite of Blade components that elevate your workflow of Livewire applications.",
|
||||||
|
"support": {
|
||||||
|
"issues": "https://github.com/tallstackui/tallstackui/issues",
|
||||||
|
"source": "https://github.com/tallstackui/tallstackui/tree/v4.2.1"
|
||||||
|
},
|
||||||
|
"funding": [
|
||||||
|
{
|
||||||
|
"url": "https://github.com/devajmeireles",
|
||||||
|
"type": "github"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"time": "2026-09-27T02:17:50+00:00"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "tijsverkoyen/css-to-inline-styles",
|
"name": "tijsverkoyen/css-to-inline-styles",
|
||||||
"version": "v2.4.0",
|
"version": "v2.4.0",
|
||||||
|
|||||||
Generated
+26
@@ -13,6 +13,9 @@
|
|||||||
"vite": "^8.0.0",
|
"vite": "^8.0.0",
|
||||||
"vite-plus": "0.3.0"
|
"vite-plus": "0.3.0"
|
||||||
},
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@tailwindcss/forms": "^0.5.11"
|
||||||
|
},
|
||||||
"optionalDependencies": {
|
"optionalDependencies": {
|
||||||
"@laravel/multiplex": "^0.4.1",
|
"@laravel/multiplex": "^0.4.1",
|
||||||
"@rollup/rollup-linux-x64-gnu": "4.9.5",
|
"@rollup/rollup-linux-x64-gnu": "4.9.5",
|
||||||
@@ -1245,6 +1248,19 @@
|
|||||||
"integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
|
"integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/@tailwindcss/forms": {
|
||||||
|
"version": "0.5.11",
|
||||||
|
"resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.11.tgz",
|
||||||
|
"integrity": "sha512-h9wegbZDPurxG22xZSoWtdzc41/OlNEUQERNqI/0fOwa2aVlWGu7C35E/x6LDyD3lgtztFSSjKZyuVM0hxhbgA==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"mini-svg-data-uri": "^1.2.3"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20 || >= 4.0.0-beta.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@tailwindcss/node": {
|
"node_modules/@tailwindcss/node": {
|
||||||
"version": "4.3.3",
|
"version": "4.3.3",
|
||||||
"resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.3.3.tgz",
|
"resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.3.3.tgz",
|
||||||
@@ -3405,6 +3421,16 @@
|
|||||||
"node": ">=6"
|
"node": ">=6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/mini-svg-data-uri": {
|
||||||
|
"version": "1.4.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
|
||||||
|
"integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"bin": {
|
||||||
|
"mini-svg-data-uri": "cli.js"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/mrmime": {
|
"node_modules/mrmime": {
|
||||||
"version": "2.0.1",
|
"version": "2.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
|
||||||
|
|||||||
@@ -20,5 +20,8 @@
|
|||||||
"@rollup/rollup-linux-x64-gnu": "4.9.5",
|
"@rollup/rollup-linux-x64-gnu": "4.9.5",
|
||||||
"@tailwindcss/oxide-linux-x64-gnu": "^4.0.1",
|
"@tailwindcss/oxide-linux-x64-gnu": "^4.0.1",
|
||||||
"lightningcss-linux-x64-gnu": "^1.29.1"
|
"lightningcss-linux-x64-gnu": "^1.29.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@tailwindcss/forms": "^0.5.11"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+4
-48
@@ -1,43 +1,17 @@
|
|||||||
@import 'tailwindcss';
|
@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 '../views';
|
||||||
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
|
@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 {
|
@theme {
|
||||||
--font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
--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 {
|
@layer base {
|
||||||
|
|
||||||
*,
|
*,
|
||||||
::after,
|
::after,
|
||||||
::before,
|
::before,
|
||||||
@@ -46,21 +20,3 @@
|
|||||||
border-color: var(--color-gray-200, currentColor);
|
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;
|
|
||||||
} */
|
|
||||||
|
|||||||
@@ -1,17 +1,6 @@
|
|||||||
@props([
|
<a href="{{ route('dashboard') }}" wire:navigate {{ $attributes->merge(['class' => 'flex items-center gap-2']) }}>
|
||||||
'sidebar' => false,
|
<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>
|
||||||
@if($sidebar)
|
<span class="truncate font-semibold text-gray-900 dark:text-dark-50">{{ config('app.name', 'Laravel') }}</span>
|
||||||
<flux:sidebar.brand :name="config('app.name', 'Laravel')" {{ $attributes }}>
|
</a>
|
||||||
<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
|
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
'description',
|
'description',
|
||||||
])
|
])
|
||||||
|
|
||||||
<div class="flex w-full flex-col text-center">
|
<div class="flex w-full flex-col gap-1 text-center">
|
||||||
<flux:heading size="xl" level="1">{{ $title }}</flux:heading>
|
<x-heading level="1" size="xl">{{ $title }}</x-heading>
|
||||||
<flux:subheading>{{ $description }}</flux:subheading>
|
<x-subheading>{{ $description }}</x-subheading>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -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>
|
|
||||||
@@ -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 }}>
|
||||||
@@ -66,50 +66,37 @@
|
|||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<template x-if="!supported">
|
<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>
|
||||||
|
|
||||||
<template x-if="supported && !showForm">
|
<template x-if="supported && !showForm">
|
||||||
<div>
|
<div>
|
||||||
<flux:button
|
<x-ts-button icon="plus" x-on:click="showForm = true">
|
||||||
variant="primary"
|
|
||||||
icon="plus"
|
|
||||||
x-on:click="showForm = true"
|
|
||||||
>
|
|
||||||
{{ __('Add passkey') }}
|
{{ __('Add passkey') }}
|
||||||
</flux:button>
|
</x-ts-button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template x-if="supported && showForm">
|
<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">
|
<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">
|
||||||
<flux:input
|
<x-ts-input :label="__('Passkey name')"
|
||||||
label="{{ __('Passkey name') }}"
|
|
||||||
x-model="name"
|
x-model="name"
|
||||||
placeholder="{{ __('e.g., MacBook Pro, iPhone') }}"
|
:placeholder="__('e.g., MacBook Pro, iPhone')"
|
||||||
x-on:keydown.enter.prevent="register()"
|
x-on:keydown.enter.prevent="register()"
|
||||||
x-ref="passkeyNameInput"
|
x-ref="passkeyNameInput"
|
||||||
x-init="$nextTick(() => $refs.passkeyNameInput?.focus())"
|
x-init="$nextTick(() => $refs.passkeyNameInput?.focus())"
|
||||||
/>
|
:hint="__('Give this passkey a name to help you identify it later.')" />
|
||||||
<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>
|
<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">
|
<div class="flex gap-2">
|
||||||
<flux:button
|
<x-ts-button x-on:click="register()" x-bind:disabled="loading || !name.trim()">
|
||||||
variant="primary"
|
|
||||||
x-on:click="register()"
|
|
||||||
x-bind:disabled="loading || !name.trim()"
|
|
||||||
>
|
|
||||||
<span x-show="!loading">{{ __('Register passkey') }}</span>
|
<span x-show="!loading">{{ __('Register passkey') }}</span>
|
||||||
<span x-show="loading" x-cloak>{{ __('Registering...') }}</span>
|
<span x-show="loading" x-cloak>{{ __('Registering...') }}</span>
|
||||||
</flux:button>
|
</x-ts-button>
|
||||||
<flux:button
|
<x-ts-button flat color="secondary" x-on:click="cancel()">
|
||||||
variant="ghost"
|
|
||||||
x-on:click="cancel()"
|
|
||||||
>
|
|
||||||
{{ __('Cancel') }}
|
{{ __('Cancel') }}
|
||||||
</flux:button>
|
</x-ts-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -47,26 +47,24 @@
|
|||||||
<template x-if="supported">
|
<template x-if="supported">
|
||||||
<div>
|
<div>
|
||||||
<div class="grid gap-2">
|
<div class="grid gap-2">
|
||||||
<flux:button
|
<x-ts-button outline
|
||||||
variant="outline"
|
|
||||||
icon="finger-print"
|
icon="finger-print"
|
||||||
class="w-full"
|
class="w-full"
|
||||||
x-on:click="verify()"
|
x-on:click="verify()"
|
||||||
x-bind:disabled="loading"
|
x-bind:disabled="loading">
|
||||||
>
|
|
||||||
<span x-show="!loading">{{ $label }}</span>
|
<span x-show="!loading">{{ $label }}</span>
|
||||||
<span x-show="loading" x-cloak>{{ $loadingLabel }}</span>
|
<span x-show="loading" x-cloak>{{ $loadingLabel }}</span>
|
||||||
</flux:button>
|
</x-ts-button>
|
||||||
<p x-show="error" x-text="error" x-cloak
|
<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>
|
||||||
|
|
||||||
<div class="relative my-6">
|
<div class="relative my-6">
|
||||||
<div class="absolute inset-0 flex items-center">
|
<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>
|
||||||
<div class="relative flex justify-center text-xs uppercase">
|
<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 }}
|
{{ $separator }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,17 +1,28 @@
|
|||||||
<div class="flex items-start max-md:flex-col">
|
<div class="flex items-start max-md:flex-col">
|
||||||
<div class="me-10 w-full pb-4 md:w-[220px]">
|
<nav class="me-10 w-full pb-4 md:w-[220px]" aria-label="{{ __('Settings') }}">
|
||||||
<flux:navlist aria-label="{{ __('Settings') }}">
|
<ul class="flex flex-col gap-1">
|
||||||
<flux:navlist.item :href="route('profile.edit')" wire:navigate>{{ __('Profile') }}</flux:navlist.item>
|
@foreach ([
|
||||||
<flux:navlist.item :href="route('security.edit')" wire:navigate>{{ __('Security') }}</flux:navlist.item>
|
'profile.edit' => __('Profile'),
|
||||||
<flux:navlist.item :href="route('appearance.edit')" wire:navigate>{{ __('Appearance') }}</flux:navlist.item>
|
'security.edit' => __('Security'),
|
||||||
</flux:navlist>
|
'appearance.edit' => __('Appearance'),
|
||||||
</div>
|
] 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">
|
<div class="flex-1 self-stretch max-md:pt-6">
|
||||||
<flux:heading>{{ $heading ?? '' }}</flux:heading>
|
<x-heading>{{ $heading ?? '' }}</x-heading>
|
||||||
<flux:subheading>{{ $subheading ?? '' }}</flux:subheading>
|
<x-subheading>{{ $subheading ?? '' }}</x-subheading>
|
||||||
|
|
||||||
<div class="mt-5 w-full max-w-lg">
|
<div class="mt-5 w-full max-w-lg">
|
||||||
{{ $slot }}
|
{{ $slot }}
|
||||||
|
|||||||
@@ -0,0 +1 @@
|
|||||||
|
<p {{ $attributes->class('text-sm text-gray-500 dark:text-dark-300') }}>{{ $slot }}</p>
|
||||||
@@ -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>
|
||||||
@@ -11,7 +11,7 @@
|
|||||||
<x-placeholder-pattern class="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
|
<x-placeholder-pattern class="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
|
||||||
</div>
|
</div>
|
||||||
</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" />
|
<x-placeholder-pattern class="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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; ?>
|
|
||||||
@@ -1,5 +1,36 @@
|
|||||||
<x-layouts::app.sidebar :title="$title ?? null">
|
<!DOCTYPE html>
|
||||||
<flux:main>
|
<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 }}
|
{{ $slot }}
|
||||||
</flux:main>
|
</x-ts-layout>
|
||||||
</x-layouts::app.sidebar>
|
|
||||||
|
@livewireScripts
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -1,3 +1,28 @@
|
|||||||
<x-layouts::auth.simple :title="$title ?? null">
|
<!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 }}
|
{{ $slot }}
|
||||||
</x-layouts::auth.simple>
|
</x-ts-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@livewireScripts
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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">“{{ trim($message) }}”</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>
|
|
||||||
@@ -1,36 +1,28 @@
|
|||||||
<x-layouts::auth :title="__('Confirm password')">
|
<x-layouts::auth :title="__('Confirm password')">
|
||||||
<div class="flex flex-col gap-6">
|
<div class="flex flex-col gap-6">
|
||||||
<x-auth-header
|
<x-auth-header :title="__('Confirm password')"
|
||||||
:title="__('Confirm password')"
|
:description="__('This is a secure area of the application. Please confirm your password before continuing.')" />
|
||||||
: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-auth-session-status class="text-center" :status="session('status')" />
|
||||||
|
|
||||||
<x-passkey-verify
|
<x-passkey-verify options-route="passkey.confirm-options"
|
||||||
options-route="passkey.confirm-options"
|
|
||||||
submit-route="passkey.confirm"
|
submit-route="passkey.confirm"
|
||||||
:label="__('Confirm with passkey')"
|
:label="__('Confirm with passkey')"
|
||||||
:loading-label="__('Confirming...')"
|
:loading-label="__('Confirming...')"
|
||||||
:separator="__('Or confirm with password')"
|
:separator="__('Or confirm with password')" />
|
||||||
/>
|
|
||||||
|
|
||||||
<form method="POST" action="{{ route('password.confirm.store') }}" class="flex flex-col gap-6">
|
<form method="POST" action="{{ route('password.confirm.store') }}" class="flex flex-col gap-6">
|
||||||
@csrf
|
@csrf
|
||||||
|
|
||||||
<flux:input
|
<x-ts-password name="password"
|
||||||
name="password"
|
|
||||||
:label="__('Password')"
|
:label="__('Password')"
|
||||||
type="password"
|
|
||||||
required
|
required
|
||||||
autocomplete="current-password"
|
autocomplete="current-password"
|
||||||
:placeholder="__('Password')"
|
:placeholder="__('Password')" />
|
||||||
viewable
|
|
||||||
/>
|
|
||||||
|
|
||||||
<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') }}
|
{{ __('Confirm') }}
|
||||||
</flux:button>
|
</x-ts-button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</x-layouts::auth>
|
</x-layouts::auth>
|
||||||
|
|||||||
@@ -9,23 +9,21 @@
|
|||||||
@csrf
|
@csrf
|
||||||
|
|
||||||
<!-- Email Address -->
|
<!-- Email Address -->
|
||||||
<flux:input
|
<x-ts-input name="email"
|
||||||
name="email"
|
|
||||||
:label="__('Email address')"
|
:label="__('Email address')"
|
||||||
type="email"
|
type="email"
|
||||||
required
|
required
|
||||||
autofocus
|
autofocus
|
||||||
placeholder="email@example.com"
|
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') }}
|
{{ __('Email password reset link') }}
|
||||||
</flux:button>
|
</x-ts-button>
|
||||||
</form>
|
</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>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</x-layouts::auth>
|
</x-layouts::auth>
|
||||||
|
|||||||
@@ -11,50 +11,42 @@
|
|||||||
@csrf
|
@csrf
|
||||||
|
|
||||||
<!-- Email Address -->
|
<!-- Email Address -->
|
||||||
<flux:input
|
<x-ts-input name="email"
|
||||||
name="email"
|
|
||||||
:label="__('Email address')"
|
:label="__('Email address')"
|
||||||
:value="old('email')"
|
:value="old('email')"
|
||||||
type="email"
|
type="email"
|
||||||
required
|
required
|
||||||
autofocus
|
autofocus
|
||||||
autocomplete="email"
|
autocomplete="email"
|
||||||
placeholder="email@example.com"
|
placeholder="email@example.com" />
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Password -->
|
<!-- Password -->
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<flux:input
|
<x-ts-password name="password"
|
||||||
name="password"
|
|
||||||
:label="__('Password')"
|
:label="__('Password')"
|
||||||
type="password"
|
|
||||||
required
|
required
|
||||||
autocomplete="current-password"
|
autocomplete="current-password"
|
||||||
:placeholder="__('Password')"
|
:placeholder="__('Password')" />
|
||||||
viewable
|
|
||||||
/>
|
|
||||||
|
|
||||||
@if (Route::has('password.request'))
|
@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?') }}
|
{{ __('Forgot your password?') }}
|
||||||
</flux:link>
|
</x-ts-link>
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Remember Me -->
|
<!-- 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">
|
<x-ts-button submit class="w-full" data-test="login-button">
|
||||||
<flux:button variant="primary" type="submit" class="w-full" data-test="login-button">
|
|
||||||
{{ __('Log in') }}
|
{{ __('Log in') }}
|
||||||
</flux:button>
|
</x-ts-button>
|
||||||
</div>
|
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
@if (Route::has('register'))
|
@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>
|
<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>
|
</div>
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -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>
|
|
||||||
@@ -11,44 +11,32 @@
|
|||||||
<input type="hidden" name="token" value="{{ request()->route('token') }}">
|
<input type="hidden" name="token" value="{{ request()->route('token') }}">
|
||||||
|
|
||||||
<!-- Email Address -->
|
<!-- Email Address -->
|
||||||
<flux:input
|
<x-ts-input name="email"
|
||||||
name="email"
|
|
||||||
value="{{ request('email') }}"
|
value="{{ request('email') }}"
|
||||||
:label="__('Email')"
|
:label="__('Email')"
|
||||||
type="email"
|
type="email"
|
||||||
required
|
required
|
||||||
autocomplete="email"
|
autocomplete="email" />
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Password -->
|
<!-- Password -->
|
||||||
<flux:input
|
<x-ts-password name="password"
|
||||||
name="password"
|
|
||||||
:label="__('Password')"
|
:label="__('Password')"
|
||||||
type="password"
|
|
||||||
required
|
required
|
||||||
autocomplete="new-password"
|
autocomplete="new-password"
|
||||||
:placeholder="__('Password')"
|
:placeholder="__('Password')"
|
||||||
passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}"
|
passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}" />
|
||||||
viewable
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Confirm Password -->
|
<!-- Confirm Password -->
|
||||||
<flux:input
|
<x-ts-password name="password_confirmation"
|
||||||
name="password_confirmation"
|
|
||||||
:label="__('Confirm password')"
|
:label="__('Confirm password')"
|
||||||
type="password"
|
|
||||||
required
|
required
|
||||||
autocomplete="new-password"
|
autocomplete="new-password"
|
||||||
:placeholder="__('Confirm password')"
|
:placeholder="__('Confirm password')"
|
||||||
passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}"
|
passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}" />
|
||||||
viewable
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="flex items-center justify-end">
|
<x-ts-button submit class="w-full" data-test="reset-password-button">
|
||||||
<flux:button type="submit" variant="primary" class="w-full" data-test="reset-password-button">
|
|
||||||
{{ __('Reset password') }}
|
{{ __('Reset password') }}
|
||||||
</flux:button>
|
</x-ts-button>
|
||||||
</div>
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</x-layouts::auth>
|
</x-layouts::auth>
|
||||||
|
|||||||
@@ -1,18 +1,14 @@
|
|||||||
<x-layouts::auth :title="__('Two-factor authentication')">
|
<x-layouts::auth :title="__('Two-factor authentication')">
|
||||||
<div class="flex flex-col gap-6">
|
<div class="flex flex-col gap-6">
|
||||||
<div
|
<div class="relative h-auto w-full"
|
||||||
class="relative w-full h-auto"
|
|
||||||
x-cloak
|
x-cloak
|
||||||
x-data="{
|
x-data="{
|
||||||
showRecoveryInput: @js($errors->has('recovery_code')),
|
showRecoveryInput: @js($errors->has('recovery_code')),
|
||||||
code: '',
|
code: '',
|
||||||
recovery_code: '',
|
recovery_code: '',
|
||||||
focusOtp() {
|
|
||||||
this.$nextTick(() => this.$refs.otp?.querySelector('input')?.focus());
|
|
||||||
},
|
|
||||||
init() {
|
init() {
|
||||||
if (! this.showRecoveryInput) {
|
if (! this.showRecoveryInput) {
|
||||||
this.focusOtp();
|
this.$nextTick(() => this.$refs.code?.focus());
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
toggleInput() {
|
toggleInput() {
|
||||||
@@ -24,76 +20,56 @@
|
|||||||
$nextTick(() => {
|
$nextTick(() => {
|
||||||
this.showRecoveryInput
|
this.showRecoveryInput
|
||||||
? this.$refs.recovery_code?.focus()
|
? this.$refs.recovery_code?.focus()
|
||||||
: this.focusOtp();
|
: this.$refs.code?.focus();
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
}"
|
}">
|
||||||
>
|
|
||||||
<div x-show="!showRecoveryInput">
|
<div x-show="!showRecoveryInput">
|
||||||
<x-auth-header
|
<x-auth-header :title="__('Authentication code')"
|
||||||
:title="__('Authentication code')"
|
:description="__('Enter the authentication code provided by your authenticator application.')" />
|
||||||
:description="__('Enter the authentication code provided by your authenticator application.')"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div x-show="showRecoveryInput">
|
<div x-show="showRecoveryInput">
|
||||||
<x-auth-header
|
<x-auth-header :title="__('Recovery code')"
|
||||||
:title="__('Recovery code')"
|
:description="__('Please confirm access to your account by entering one of your emergency recovery codes.')" />
|
||||||
:description="__('Please confirm access to your account by entering one of your emergency recovery codes.')"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form method="POST" action="{{ route('two-factor.login.store') }}">
|
<form method="POST" action="{{ route('two-factor.login.store') }}">
|
||||||
@csrf
|
@csrf
|
||||||
|
|
||||||
<div class="space-y-5 text-center">
|
<div class="my-5 space-y-5">
|
||||||
<div x-show="!showRecoveryInput">
|
<div x-show="!showRecoveryInput">
|
||||||
<div class="flex items-center justify-center my-5" x-ref="otp">
|
<x-ts-input name="code"
|
||||||
<flux:otp
|
:label="__('Authentication code')"
|
||||||
x-model="code"
|
x-model="code"
|
||||||
length="6"
|
x-ref="code"
|
||||||
name="code"
|
x-bind:required="!showRecoveryInput"
|
||||||
label="OTP Code"
|
inputmode="numeric"
|
||||||
label:sr-only
|
maxlength="6"
|
||||||
class="mx-auto"
|
autocomplete="one-time-code"
|
||||||
/>
|
class="text-center font-mono tracking-[0.5em]" />
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div x-show="showRecoveryInput">
|
<div x-show="showRecoveryInput">
|
||||||
<div class="my-5">
|
<x-ts-input name="recovery_code"
|
||||||
<flux:input
|
:label="__('Recovery code')"
|
||||||
type="text"
|
x-model="recovery_code"
|
||||||
name="recovery_code"
|
|
||||||
x-ref="recovery_code"
|
x-ref="recovery_code"
|
||||||
x-bind:required="showRecoveryInput"
|
x-bind:required="showRecoveryInput"
|
||||||
autocomplete="one-time-code"
|
autocomplete="one-time-code" />
|
||||||
x-model="recovery_code"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@error('recovery_code')
|
<x-ts-button submit class="w-full">
|
||||||
<flux:text color="red">
|
|
||||||
{{ $message }}
|
|
||||||
</flux:text>
|
|
||||||
@enderror
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<flux:button
|
|
||||||
variant="primary"
|
|
||||||
type="submit"
|
|
||||||
class="w-full"
|
|
||||||
>
|
|
||||||
{{ __('Continue') }}
|
{{ __('Continue') }}
|
||||||
</flux:button>
|
</x-ts-button>
|
||||||
</div>
|
</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>
|
<span class="opacity-50">{{ __('or you can') }}</span>
|
||||||
<div class="inline font-medium underline cursor-pointer opacity-80">
|
<button type="button" class="inline cursor-pointer font-medium underline opacity-80" x-on:click="toggleInput()">
|
||||||
<span x-show="!showRecoveryInput" @click="toggleInput()">{{ __('login using a recovery code') }}</span>
|
<span x-show="!showRecoveryInput">{{ __('login using a recovery code') }}</span>
|
||||||
<span x-show="showRecoveryInput" @click="toggleInput()">{{ __('login using an authentication code') }}</span>
|
<span x-show="showRecoveryInput">{{ __('login using an authentication code') }}</span>
|
||||||
</div>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,28 +1,28 @@
|
|||||||
<x-layouts::auth :title="__('Email verification')">
|
<x-layouts::auth :title="__('Email verification')">
|
||||||
<div class="mt-4 flex flex-col gap-6">
|
<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.') }}
|
{{ __('Please verify your email address by clicking on the link we just emailed to you.') }}
|
||||||
</flux:text>
|
</p>
|
||||||
|
|
||||||
@if (session('status') == 'verification-link-sent')
|
@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.') }}
|
{{ __('A new verification link has been sent to the email address you provided during registration.') }}
|
||||||
</flux:text>
|
</p>
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
<div class="flex flex-col items-center justify-between space-y-3">
|
<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
|
@csrf
|
||||||
<flux:button type="submit" variant="primary" class="w-full">
|
<x-ts-button submit class="w-full">
|
||||||
{{ __('Resend verification email') }}
|
{{ __('Resend verification email') }}
|
||||||
</flux:button>
|
</x-ts-button>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<form method="POST" action="{{ route('logout') }}">
|
<form method="POST" action="{{ route('logout') }}">
|
||||||
@csrf
|
@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') }}
|
{{ __('Log out') }}
|
||||||
</flux:button>
|
</x-ts-button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,13 +1,10 @@
|
|||||||
<section class="w-full">
|
<section class="w-full">
|
||||||
@include('partials.settings-heading')
|
@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')">
|
<x-settings.layout :heading="__('Appearance')" :subheading="__('Update the appearance settings for your account')">
|
||||||
<flux:radio.group x-data variant="segmented" x-model="$flux.appearance">
|
{{-- Hell / Dunkel / System; nutzt den Theme-Zustand aus tallstackui_darkTheme() am <html>-Element. --}}
|
||||||
<flux:radio value="light" icon="sun">{{ __('Light') }}</flux:radio>
|
<x-ts-theme-switch />
|
||||||
<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>
|
</x-settings.layout>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@@ -1,34 +1,35 @@
|
|||||||
<section class="mt-10 space-y-6">
|
<section class="mt-10 space-y-6">
|
||||||
<div class="relative mb-5">
|
<div class="relative mb-5">
|
||||||
<flux:heading>{{ __('Delete account') }}</flux:heading>
|
<x-heading>{{ __('Delete account') }}</x-heading>
|
||||||
<flux:subheading>{{ __('Delete your account and all of its resources') }}</flux:subheading>
|
<x-subheading>{{ __('Delete your account and all of its resources') }}</x-subheading>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<flux:modal.trigger name="confirm-user-deletion">
|
<x-ts-button color="red" x-on:click="$tsui.open.modal('confirm-user-deletion')">
|
||||||
<flux:button variant="danger" x-data="" x-on:click.prevent="$dispatch('open-modal', 'confirm-user-deletion')">
|
|
||||||
{{ __('Delete account') }}
|
{{ __('Delete account') }}
|
||||||
</flux:button>
|
</x-ts-button>
|
||||||
</flux:modal.trigger>
|
|
||||||
|
|
||||||
<flux:modal name="confirm-user-deletion" :show="$errors->isNotEmpty()" focusable class="max-w-lg">
|
<x-ts-modal id="confirm-user-deletion" size="lg" center :title="__('Are you sure you want to delete your account?')">
|
||||||
<form method="POST" wire:submit="deleteUser" class="space-y-6">
|
<form id="delete-user-form" wire:submit="deleteUser" class="space-y-6">
|
||||||
<div>
|
<p class="text-sm text-gray-600 dark:text-dark-300">
|
||||||
<flux:heading size="lg">{{ __('Are you sure you want to delete your account?') }}</flux:heading>
|
|
||||||
|
|
||||||
<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.') }}
|
{{ __('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>
|
</p>
|
||||||
</div>
|
|
||||||
|
|
||||||
<flux:input wire:model="password" :label="__('Password')" type="password" viewable />
|
<x-ts-password wire:model="password" :label="__('Password')" />
|
||||||
|
|
||||||
<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>
|
|
||||||
</form>
|
</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>
|
</section>
|
||||||
|
|||||||
@@ -1,31 +1,28 @@
|
|||||||
<section class="w-full">
|
<section class="w-full">
|
||||||
@include('partials.settings-heading')
|
@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')">
|
<x-settings.layout :heading="__('Profile')" :subheading="__('Update your name and email address')">
|
||||||
<form wire:submit="updateProfileInformation" class="my-6 w-full space-y-6">
|
<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>
|
<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)
|
@if ($this->hasUnverifiedEmail)
|
||||||
<div>
|
<p class="mt-4 text-sm text-gray-600 dark:text-dark-300">
|
||||||
<flux:text class="mt-4">
|
|
||||||
{{ __('Your email address is unverified.') }}
|
{{ __('Your email address is unverified.') }}
|
||||||
|
|
||||||
<flux:link class="text-sm cursor-pointer" wire:click.prevent="resendVerificationNotification">
|
<x-ts-link href="#" class="cursor-pointer text-sm" wire:click.prevent="resendVerificationNotification">
|
||||||
{{ __('Click here to re-send the verification email.') }}
|
{{ __('Click here to re-send the verification email.') }}
|
||||||
</flux:link>
|
</x-ts-link>
|
||||||
</flux:text>
|
</p>
|
||||||
|
|
||||||
</div>
|
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex items-center gap-4">
|
<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>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
|
|||||||
@@ -1,289 +1,194 @@
|
|||||||
<section class="w-full">
|
<section class="w-full">
|
||||||
@include('partials.settings-heading')
|
@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')">
|
<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">
|
<form wire:submit="updatePassword" class="mt-6 space-y-6">
|
||||||
<flux:input
|
<x-ts-password wire:model="current_password"
|
||||||
wire:model="current_password"
|
|
||||||
:label="__('Current password')"
|
:label="__('Current password')"
|
||||||
type="password"
|
|
||||||
required
|
required
|
||||||
autocomplete="current-password"
|
autocomplete="current-password" />
|
||||||
viewable
|
<x-ts-password wire:model="password"
|
||||||
/>
|
|
||||||
<flux:input
|
|
||||||
wire:model="password"
|
|
||||||
:label="__('New password')"
|
:label="__('New password')"
|
||||||
type="password"
|
|
||||||
required
|
required
|
||||||
autocomplete="new-password"
|
autocomplete="new-password"
|
||||||
passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}"
|
passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}" />
|
||||||
viewable
|
<x-ts-password wire:model="password_confirmation"
|
||||||
/>
|
|
||||||
<flux:input
|
|
||||||
wire:model="password_confirmation"
|
|
||||||
:label="__('Confirm password')"
|
:label="__('Confirm password')"
|
||||||
type="password"
|
|
||||||
required
|
required
|
||||||
autocomplete="new-password"
|
autocomplete="new-password"
|
||||||
passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}"
|
passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}" />
|
||||||
viewable
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="flex items-center gap-4">
|
<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>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
@if ($canManageTwoFactor)
|
@if ($canManageTwoFactor)
|
||||||
<section class="mt-12">
|
<section class="mt-12">
|
||||||
<flux:heading>{{ __('Two-factor authentication') }}</flux:heading>
|
<x-heading>{{ __('Two-factor authentication') }}</x-heading>
|
||||||
<flux:subheading>{{ __('Manage your two-factor authentication settings') }}</flux:subheading>
|
<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)
|
@if ($twoFactorEnabled)
|
||||||
<div class="space-y-4">
|
<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.') }}
|
{{ __('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">
|
<div class="flex justify-start">
|
||||||
<flux:button
|
<x-ts-button color="red" wire:click="disable" loading="disable">
|
||||||
variant="danger"
|
|
||||||
wire:click="disable"
|
|
||||||
>
|
|
||||||
{{ __('Disable 2FA') }}
|
{{ __('Disable 2FA') }}
|
||||||
</flux:button>
|
</x-ts-button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<livewire:settings.two-factor.recovery-codes :$requiresConfirmation />
|
<livewire:settings.two-factor.recovery-codes :$requiresConfirmation />
|
||||||
</div>
|
</div>
|
||||||
@else
|
@else
|
||||||
<div class="space-y-4">
|
<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.') }}
|
{{ __('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
|
<x-ts-button wire:click="enable" loading="enable">
|
||||||
variant="primary"
|
|
||||||
wire:click="enable"
|
|
||||||
>
|
|
||||||
{{ __('Enable 2FA') }}
|
{{ __('Enable 2FA') }}
|
||||||
</flux:button>
|
</x-ts-button>
|
||||||
</div>
|
</div>
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@endif
|
|
||||||
|
|
||||||
@if ($canManageTwoFactor)
|
<x-ts-modal wire="showModal" size="md" center x-on:close="$wire.closeModal()">
|
||||||
<flux:modal
|
|
||||||
name="two-factor-setup-modal"
|
|
||||||
class="max-w-md md:min-w-md"
|
|
||||||
@close="closeModal"
|
|
||||||
wire:model="showModal"
|
|
||||||
>
|
|
||||||
<div class="space-y-6">
|
<div class="space-y-6">
|
||||||
<div class="flex flex-col items-center space-y-4">
|
<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="rounded-full border border-gray-200 bg-gray-100 p-3 dark:border-dark-600 dark:bg-dark-700">
|
||||||
<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">
|
<x-ts-icon name="qr-code" lg />
|
||||||
<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>
|
</div>
|
||||||
|
|
||||||
<div class="space-y-2 text-center">
|
<div class="space-y-2 text-center">
|
||||||
<flux:heading size="lg">{{ $this->modalConfig['title'] }}</flux:heading>
|
<x-heading size="lg">{{ $this->modalConfig['title'] }}</x-heading>
|
||||||
<flux:text>{{ $this->modalConfig['description'] }}</flux:text>
|
<p class="text-sm text-gray-600 dark:text-dark-300">{{ $this->modalConfig['description'] }}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@if ($showVerificationStep)
|
@if ($showVerificationStep)
|
||||||
<div class="space-y-6">
|
<div class="space-y-6">
|
||||||
<div
|
<div x-data x-init="$nextTick(() => $el.querySelector('input')?.focus())">
|
||||||
class="flex flex-col items-center space-y-3 justify-center"
|
<x-ts-input wire:model="code"
|
||||||
x-data
|
|
||||||
x-init="$nextTick(() => $el.querySelector('input')?.focus())"
|
|
||||||
>
|
|
||||||
<flux:otp
|
|
||||||
name="code"
|
name="code"
|
||||||
wire:model="code"
|
:label="__('Authentication code')"
|
||||||
length="6"
|
inputmode="numeric"
|
||||||
label="OTP Code"
|
maxlength="6"
|
||||||
label:sr-only
|
autocomplete="one-time-code"
|
||||||
class="mx-auto"
|
class="text-center font-mono tracking-[0.5em]" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex items-center space-x-3">
|
<div class="flex items-center gap-3">
|
||||||
<flux:button
|
<x-ts-button outline class="flex-1" wire:click="resetVerification">
|
||||||
variant="outline"
|
|
||||||
class="flex-1"
|
|
||||||
wire:click="resetVerification"
|
|
||||||
>
|
|
||||||
{{ __('Back') }}
|
{{ __('Back') }}
|
||||||
</flux:button>
|
</x-ts-button>
|
||||||
|
|
||||||
<flux:button
|
<x-ts-button class="flex-1"
|
||||||
variant="primary"
|
|
||||||
class="flex-1"
|
|
||||||
wire:click="confirmTwoFactor"
|
wire:click="confirmTwoFactor"
|
||||||
x-bind:disabled="$wire.code.length < 6"
|
loading="confirmTwoFactor"
|
||||||
>
|
x-bind:disabled="$wire.code.length < 6">
|
||||||
{{ __('Confirm') }}
|
{{ __('Confirm') }}
|
||||||
</flux:button>
|
</x-ts-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@else
|
@else
|
||||||
@error('setupData')
|
@error('setupData')
|
||||||
<flux:callout variant="danger" icon="x-circle" heading="{{ $message }}"/>
|
<x-ts-alert color="red" icon="x-circle" :text="$message" />
|
||||||
@enderror
|
@enderror
|
||||||
|
|
||||||
<div class="flex justify-center">
|
<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)
|
@empty($qrCodeSvg)
|
||||||
<div class="absolute inset-0 flex items-center justify-center bg-white dark:bg-stone-700 animate-pulse">
|
<div class="absolute inset-0 flex animate-pulse items-center justify-center">
|
||||||
<flux:icon.loading/>
|
<x-ts-icon name="arrow-path" class="animate-spin text-gray-400" />
|
||||||
</div>
|
</div>
|
||||||
@else
|
@else
|
||||||
<div x-data class="flex items-center justify-center h-full p-4">
|
<div class="flex h-full items-center justify-center 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 !!}
|
{!! $qrCodeSvg !!}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
@endempty
|
@endempty
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<x-ts-button class="w-full"
|
||||||
<flux:button
|
|
||||||
:disabled="$errors->has('setupData')"
|
:disabled="$errors->has('setupData')"
|
||||||
variant="primary"
|
wire:click="showVerificationIfNecessary">
|
||||||
class="w-full"
|
|
||||||
wire:click="showVerificationIfNecessary"
|
|
||||||
>
|
|
||||||
{{ $this->modalConfig['buttonText'] }}
|
{{ $this->modalConfig['buttonText'] }}
|
||||||
</flux:button>
|
</x-ts-button>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-4">
|
<div class="space-y-4">
|
||||||
<div class="relative flex items-center justify-center w-full">
|
<div class="relative flex w-full items-center justify-center">
|
||||||
<div class="absolute inset-0 w-full h-px top-1/2 bg-stone-200 dark:bg-stone-600"></div>
|
<div class="absolute inset-0 top-1/2 h-px w-full bg-gray-200 dark:bg-dark-600"></div>
|
||||||
<span class="relative px-2 text-sm bg-white dark:bg-stone-800 text-stone-600 dark:text-stone-400">
|
<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') }}
|
{{ __('or, enter the code manually') }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</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)
|
@empty($manualSetupKey)
|
||||||
<div class="flex items-center justify-center w-full p-3 bg-stone-100 dark:bg-stone-700">
|
<div class="flex w-full items-center justify-center rounded-lg bg-gray-100 p-3 dark:bg-dark-700">
|
||||||
<flux:icon.loading variant="mini"/>
|
<x-ts-icon name="arrow-path" sm class="animate-spin text-gray-400" />
|
||||||
</div>
|
</div>
|
||||||
@else
|
@else
|
||||||
<input
|
<x-ts-clipboard :text="$manualSetupKey" />
|
||||||
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
|
@endempty
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
</flux:modal>
|
</x-ts-modal>
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
@if ($canManagePasskeys)
|
@if ($canManagePasskeys)
|
||||||
<section class="mt-12">
|
<section class="mt-12">
|
||||||
<flux:heading>{{ __('Passkeys') }}</flux:heading>
|
<x-heading>{{ __('Passkeys') }}</x-heading>
|
||||||
<flux:subheading>{{ __('Manage your passkeys for passwordless sign-in') }}</flux:subheading>
|
<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="mx-auto mt-6 flex w-full flex-col space-y-6 text-sm" wire:cloak>
|
||||||
<div class="border rounded-lg border-zinc-200 dark:border-zinc-700 overflow-hidden">
|
<div class="overflow-hidden rounded-lg border border-gray-200 dark:border-dark-600">
|
||||||
@forelse ($passkeys as $passkey)
|
@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 items-center gap-4">
|
||||||
<div class="flex size-10 shrink-0 items-center justify-center rounded-xl bg-zinc-100 dark:bg-zinc-800">
|
<div class="flex size-10 shrink-0 items-center justify-center rounded-xl bg-gray-100 dark:bg-dark-700">
|
||||||
<flux:icon.key class="size-5 text-zinc-500 dark:text-zinc-400" />
|
<x-ts-icon name="key" class="text-gray-500 dark:text-dark-300" />
|
||||||
</div>
|
</div>
|
||||||
<div class="space-y-1">
|
<div class="space-y-1">
|
||||||
<div class="flex items-center gap-2.5">
|
<div class="flex items-center gap-2.5">
|
||||||
<p class="font-medium tracking-tight">{{ $passkey['name'] }}</p>
|
<p class="font-medium tracking-tight">{{ $passkey['name'] }}</p>
|
||||||
@if ($passkey['authenticator'])
|
@if ($passkey['authenticator'])
|
||||||
<flux:badge size="sm">{{ $passkey['authenticator'] }}</flux:badge>
|
<x-ts-badge :text="$passkey['authenticator']" color="gray" light />
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</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']]) }}
|
{{ __('Added :time', ['time' => $passkey['created_at_diff']]) }}
|
||||||
@if ($passkey['last_used_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']]) }}
|
{{ __('Last used :time', ['time' => $passkey['last_used_at_diff']]) }}
|
||||||
@endif
|
@endif
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<flux:button
|
<x-ts-button.circle icon="trash"
|
||||||
variant="ghost"
|
color="red"
|
||||||
size="sm"
|
flat
|
||||||
icon="trash"
|
wire:click="confirmDelete({{ $passkey['id'] }})" />
|
||||||
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"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
@empty
|
@empty
|
||||||
<div class="p-8 text-center">
|
<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">
|
<div class="mx-auto mb-4 flex size-14 items-center justify-center rounded-2xl bg-gray-100 dark:bg-dark-700">
|
||||||
<flux:icon.key class="size-7 text-zinc-400 dark:text-zinc-500" />
|
<x-ts-icon name="key" lg class="text-gray-400 dark:text-dark-400" />
|
||||||
</div>
|
</div>
|
||||||
<p class="font-medium">{{ __('No passkeys yet') }}</p>
|
<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>
|
</div>
|
||||||
@endforelse
|
@endforelse
|
||||||
</div>
|
</div>
|
||||||
@@ -294,34 +199,20 @@
|
|||||||
@endif
|
@endif
|
||||||
</x-settings.layout>
|
</x-settings.layout>
|
||||||
|
|
||||||
<flux:modal
|
<x-ts-modal wire="showDeleteModal" size="md" center :title="__('Remove passkey')" x-on:close="$wire.closeDeleteModal()">
|
||||||
name="delete-passkey-modal"
|
<p class="text-sm text-gray-600 dark:text-dark-300">
|
||||||
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]) }}
|
{{ __('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>
|
</p>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex gap-3 justify-end">
|
<x-slot:footer>
|
||||||
<flux:button
|
<div class="flex justify-end gap-3">
|
||||||
variant="outline"
|
<x-ts-button outline wire:click="closeDeleteModal">
|
||||||
wire:click="closeDeleteModal"
|
|
||||||
>
|
|
||||||
{{ __('Cancel') }}
|
{{ __('Cancel') }}
|
||||||
</flux:button>
|
</x-ts-button>
|
||||||
<flux:button
|
<x-ts-button color="red" wire:click="deletePasskey" loading="deletePasskey">
|
||||||
variant="danger"
|
|
||||||
wire:click="deletePasskey"
|
|
||||||
>
|
|
||||||
{{ __('Remove passkey') }}
|
{{ __('Remove passkey') }}
|
||||||
</flux:button>
|
</x-ts-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</x-slot:footer>
|
||||||
</flux:modal>
|
</x-ts-modal>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@@ -1,87 +1,69 @@
|
|||||||
<div
|
<div class="space-y-6 rounded-xl border border-gray-200 py-6 shadow-sm dark:border-dark-600"
|
||||||
class="py-6 space-y-6 border shadow-sm rounded-xl border-zinc-200 dark:border-white/10"
|
|
||||||
wire:cloak
|
wire:cloak
|
||||||
x-data="{ showRecoveryCodes: false }"
|
x-data="{ showRecoveryCodes: false }">
|
||||||
>
|
<div class="space-y-2 px-6">
|
||||||
<div class="px-6 space-y-2">
|
|
||||||
<div class="flex items-center gap-2">
|
<div class="flex items-center gap-2">
|
||||||
<flux:icon.lock-closed variant="outline" class="size-4"/>
|
<x-ts-icon name="lock-closed" sm />
|
||||||
<flux:heading size="lg" level="3">{{ __('2FA recovery codes') }}</flux:heading>
|
<x-heading level="3" size="lg">{{ __('2FA recovery codes') }}</x-heading>
|
||||||
</div>
|
</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.') }}
|
{{ __('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>
|
||||||
|
|
||||||
<div class="px-6">
|
<div class="px-6">
|
||||||
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||||
<flux:button
|
<x-ts-button x-show="!showRecoveryCodes"
|
||||||
x-show="!showRecoveryCodes"
|
|
||||||
icon="eye"
|
icon="eye"
|
||||||
icon:variant="outline"
|
x-on:click="showRecoveryCodes = true"
|
||||||
variant="primary"
|
|
||||||
@click="showRecoveryCodes = true;"
|
|
||||||
aria-expanded="false"
|
aria-expanded="false"
|
||||||
aria-controls="recovery-codes-section"
|
aria-controls="recovery-codes-section">
|
||||||
>
|
|
||||||
{{ __('View recovery codes') }}
|
{{ __('View recovery codes') }}
|
||||||
</flux:button>
|
</x-ts-button>
|
||||||
|
|
||||||
<flux:button
|
<x-ts-button x-show="showRecoveryCodes"
|
||||||
x-show="showRecoveryCodes"
|
|
||||||
icon="eye-slash"
|
icon="eye-slash"
|
||||||
icon:variant="outline"
|
x-on:click="showRecoveryCodes = false"
|
||||||
variant="primary"
|
|
||||||
@click="showRecoveryCodes = false"
|
|
||||||
aria-expanded="true"
|
aria-expanded="true"
|
||||||
aria-controls="recovery-codes-section"
|
aria-controls="recovery-codes-section">
|
||||||
>
|
|
||||||
{{ __('Hide recovery codes') }}
|
{{ __('Hide recovery codes') }}
|
||||||
</flux:button>
|
</x-ts-button>
|
||||||
|
|
||||||
@if (filled($recoveryCodes))
|
@if (filled($recoveryCodes))
|
||||||
<flux:button
|
<x-ts-button x-show="showRecoveryCodes"
|
||||||
x-show="showRecoveryCodes"
|
|
||||||
icon="arrow-path"
|
icon="arrow-path"
|
||||||
variant="filled"
|
color="secondary"
|
||||||
|
outline
|
||||||
wire:click="regenerateRecoveryCodes"
|
wire:click="regenerateRecoveryCodes"
|
||||||
>
|
loading="regenerateRecoveryCodes">
|
||||||
{{ __('Regenerate codes') }}
|
{{ __('Regenerate codes') }}
|
||||||
</flux:button>
|
</x-ts-button>
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div x-show="showRecoveryCodes"
|
||||||
x-show="showRecoveryCodes"
|
|
||||||
x-transition
|
x-transition
|
||||||
id="recovery-codes-section"
|
id="recovery-codes-section"
|
||||||
class="relative overflow-hidden"
|
class="relative overflow-hidden"
|
||||||
x-bind:aria-hidden="!showRecoveryCodes"
|
x-bind:aria-hidden="!showRecoveryCodes">
|
||||||
>
|
|
||||||
<div class="mt-3 space-y-3">
|
<div class="mt-3 space-y-3">
|
||||||
@error('recoveryCodes')
|
@error('recoveryCodes')
|
||||||
<flux:callout variant="danger" icon="x-circle" heading="{{$message}}"/>
|
<x-ts-alert color="red" icon="x-circle" :text="$message" />
|
||||||
@enderror
|
@enderror
|
||||||
|
|
||||||
@if (filled($recoveryCodes))
|
@if (filled($recoveryCodes))
|
||||||
<div
|
<div class="grid gap-1 rounded-lg bg-gray-100 p-4 font-mono text-sm dark:bg-dark-700"
|
||||||
class="grid gap-1 p-4 font-mono text-sm rounded-lg bg-zinc-100 dark:bg-white/5"
|
|
||||||
role="list"
|
role="list"
|
||||||
aria-label="{{ __('Recovery codes') }}"
|
aria-label="{{ __('Recovery codes') }}">
|
||||||
>
|
@foreach ($recoveryCodes as $code)
|
||||||
@foreach($recoveryCodes as $code)
|
<div role="listitem" class="select-text" wire:loading.class="opacity-50 animate-pulse">
|
||||||
<div
|
|
||||||
role="listitem"
|
|
||||||
class="select-text"
|
|
||||||
wire:loading.class="opacity-50 animate-pulse"
|
|
||||||
>
|
|
||||||
{{ $code }}
|
{{ $code }}
|
||||||
</div>
|
</div>
|
||||||
@endforeach
|
@endforeach
|
||||||
</div>
|
</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.') }}
|
{{ __('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
|
@endif
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -9,7 +9,19 @@
|
|||||||
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
||||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
<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
|
@fonts
|
||||||
|
|
||||||
|
<tallstackui:script />
|
||||||
|
@livewireStyles
|
||||||
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
||||||
@fluxAppearance
|
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<div class="relative mb-6 w-full">
|
<div class="relative mb-6 w-full">
|
||||||
<flux:heading size="xl" level="1">{{ __('Settings') }}</flux:heading>
|
<x-heading level="1" size="xl">{{ __('Settings') }}</x-heading>
|
||||||
<flux:subheading size="lg" class="mb-6">{{ __('Manage your profile and account settings') }}</flux:subheading>
|
<x-subheading class="mb-6 text-base">{{ __('Manage your profile and account settings') }}</x-subheading>
|
||||||
<flux:separator variant="subtle" />
|
<hr class="border-gray-200 dark:border-dark-600" />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,41 +0,0 @@
|
|||||||
<?php
|
|
||||||
|
|
||||||
namespace Tests\Feature\Auth;
|
|
||||||
|
|
||||||
use Illuminate\Foundation\Testing\RefreshDatabase;
|
|
||||||
use Laravel\Fortify\Features;
|
|
||||||
use Tests\TestCase;
|
|
||||||
|
|
||||||
class RegistrationTest extends TestCase
|
|
||||||
{
|
|
||||||
use RefreshDatabase;
|
|
||||||
|
|
||||||
protected function setUp(): void
|
|
||||||
{
|
|
||||||
parent::setUp();
|
|
||||||
|
|
||||||
$this->skipUnlessFortifyHas(Features::registration());
|
|
||||||
}
|
|
||||||
|
|
||||||
public function test_registration_screen_can_be_rendered(): void
|
|
||||||
{
|
|
||||||
$response = $this->get(route('register'));
|
|
||||||
|
|
||||||
$response->assertOk();
|
|
||||||
}
|
|
||||||
|
|
||||||
public function test_new_users_can_register(): void
|
|
||||||
{
|
|
||||||
$response = $this->post(route('register.store'), [
|
|
||||||
'name' => 'John Doe',
|
|
||||||
'email' => 'test@example.com',
|
|
||||||
'password' => 'password',
|
|
||||||
'password_confirmation' => 'password',
|
|
||||||
]);
|
|
||||||
|
|
||||||
$response->assertSessionHasNoErrors()
|
|
||||||
->assertRedirect(route('dashboard', absolute: false));
|
|
||||||
|
|
||||||
$this->assertAuthenticated();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,43 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace Tests\Feature;
|
||||||
|
|
||||||
|
use App\Models\User;
|
||||||
|
use Illuminate\Foundation\Testing\RefreshDatabase;
|
||||||
|
use Tests\TestCase;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Vorgabe "alles lokal": Seiten dürfen keine Ressourcen von fremden Hosts laden
|
||||||
|
* (z. B. ui-avatars.com oder gravatar.com über ts-avatar, Web-Fonts von CDNs).
|
||||||
|
*/
|
||||||
|
class NoExternalResourcesTest extends TestCase
|
||||||
|
{
|
||||||
|
use RefreshDatabase;
|
||||||
|
|
||||||
|
public function test_guest_pages_only_reference_the_application_host(): void
|
||||||
|
{
|
||||||
|
$this->assertNoExternalUrls($this->get(route('login'))->assertOk()->getContent());
|
||||||
|
}
|
||||||
|
|
||||||
|
public function test_authenticated_pages_only_reference_the_application_host(): void
|
||||||
|
{
|
||||||
|
$this->actingAs(User::factory()->create())
|
||||||
|
->withSession(['auth.password_confirmed_at' => time()]);
|
||||||
|
|
||||||
|
foreach (['dashboard', 'profile.edit', 'security.edit', 'appearance.edit'] as $route) {
|
||||||
|
$this->assertNoExternalUrls($this->get(route($route))->assertOk()->getContent(), $route);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private function assertNoExternalUrls(string $html, string $page = 'login'): void
|
||||||
|
{
|
||||||
|
preg_match_all('/(?:src|href|action)=["\'](https?:\/\/[^"\']+)/i', $html, $matches);
|
||||||
|
|
||||||
|
$external = array_values(array_filter(
|
||||||
|
$matches[1],
|
||||||
|
fn (string $url) => ! str_starts_with($url, config('app.url')),
|
||||||
|
));
|
||||||
|
|
||||||
|
$this->assertSame([], $external, "Externe URLs auf Seite {$page}");
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user