subhajit.pal/singleloginsystem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: replace flux components with maryUI equivalents and update Blade templates

Browse Source 
- Replaced deprecated `flux` components with `maryUI` counterparts (`flux:input` → `x-mary-input`, `flux:button` → `x-mary-button`, etc.).
- Removed unused partials (`settings-heading.blade.php`) and outdated structures from Blade files.
- Adjusted Livewire modal, form, and button implementations for consistency with `maryUI`.
- Streamlined layout and theme styling for improved maintainability and readability.
This commit is contained in:
= 2026-05-18 09:49:14 +00:00
parent 3d086b2821
commit d63489ea33
16 changed files with 412 additions and 400 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/Livewire/Settings/DeleteUserForm.php
View File

@ -15,6 +15,8 @@ final class DeleteUserForm extends Component
public string $password = ''; public string $password = '';
public bool $confirmingUserDeletion = false;
/** /**
* Delete the currently authenticated user. * Delete the currently authenticated user.
*/ */

4
resources/views/components/auth-header.blade.php
View File

@ -4,6 +4,6 @@
]) ])
<div class="flex w-full flex-col text-center"> <div class="flex w-full flex-col text-center">
<flux:heading size="xl">{{ $title }}</flux:heading> <p class="text-2xl font-bold">{{ $title }}</p>
<flux:subheading>{{ $description }}</flux:subheading> <p class="text-sm text-gray-500">{{ $description }}</p>
</div> </div>

23
resources/views/components/dashboard-sidebar.blade.php
View File

@ -54,17 +54,17 @@ public function navItems(): DataCollection
new NavItemData( new NavItemData(
label: 'Settings', label: 'Settings',
icon: 'lucide.settings', icon: 'lucide.settings',
active_pattern: 'settings.*', active_pattern: 'settings.*', // Kept as fallback, but handled dynamically in view
sub_menu: NavSubItemData::collect([ sub_menu: NavSubItemData::collect([
new NavSubItemData( new NavSubItemData(
label: 'Profile', label: 'Profile',
route: 'profile.edit', route: 'profile.edit',
active_pattern: 'settings.profile', active_pattern: 'profile.edit',
), ),
new NavSubItemData( new NavSubItemData(
label: 'Security', label: 'Security',
route: 'security.edit', route: 'security.edit',
active_pattern: 'settings.security', active_pattern: 'security.edit',
), ),
], DataCollection::class) ], DataCollection::class)
), ),
@ -72,6 +72,7 @@ public function navItems(): DataCollection
} }
}; };
?> ?>
<aside <aside
x-data="{ collapsed: @entangle('collapsed') }" x-data="{ collapsed: @entangle('collapsed') }"
:class="collapsed ? 'w-12' : 'w-64'" :class="collapsed ? 'w-12' : 'w-64'"
@ -114,7 +115,19 @@ class="flex-1 py-3 px-2 space-y-1 overflow-y-auto overflow-x-hidden"
aria-label="Main navigation" aria-label="Main navigation"
> >
@foreach ($this->navItems() as $item) @foreach ($this->navItems() as $item)
@php $isActive = request()->routeIs($item->active_pattern); @endphp @php
$isActive = request()->routeIs($item->active_pattern);
// Check sub-menu active states without triggering Arrayable casting
if (! $isActive && $item->sub_menu) {
foreach ($item->sub_menu as $subItem) {
if (request()->routeIs($subItem->active_pattern)) {
$isActive = true;
break;
}
}
}
@endphp
@if ($item->sub_menu) @if ($item->sub_menu)
{{-- ITEM WITH SUBMENU --}} {{-- ITEM WITH SUBMENU --}}
@ -230,7 +243,7 @@ class="group w-full flex items-center gap-3 px-2 py-2.5 rounded-lg
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-400" focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-400"
:aria-label="collapsed ? 'Expand sidebar' : 'Collapse sidebar'" :aria-label="collapsed ? 'Expand sidebar' : 'Collapse sidebar'"
> >
<span class="flex-shrink-0 flex items-center justify-center w-5 h-5" aria-hidden="true"> <span class="shrink-0 flex items-center justify-center w-5 h-5" aria-hidden="true">
<svg :class="collapsed ? 'rotate-180' : 'rotate-0'" <svg :class="collapsed ? 'rotate-180' : 'rotate-0'"
class="w-4 h-4 transition-transform duration-300 ease-in-out" fill="none" viewBox="0 0 24 24" class="w-4 h-4 transition-transform duration-300 ease-in-out" fill="none" viewBox="0 0 24 24"
stroke-width="2" stroke="currentColor"> stroke-width="2" stroke="currentColor">

16
resources/views/components/settings/layout.blade.php
View File

@ -1,17 +1,7 @@
<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]"> <div class="flex-1 self-stretch pt-6">
<flux:navlist aria-label="{{ __('Settings') }}"> <p class="text-xl text-gray-700 mb-2 font-medium">{{ $heading ?? '' }}</p>
<flux:navlist.item :href="route('profile.edit')" wire:navigate>{{ __('Profile') }}</flux:navlist.item> <p class="text-sm text-gray-500">{{ $subheading ?? '' }}</p>
<flux:navlist.item :href="route('security.edit')" wire:navigate>{{ __('Security') }}</flux:navlist.item>
<flux:navlist.item :href="route('appearance.edit')" wire:navigate>{{ __('Appearance') }}</flux:navlist.item>
</flux:navlist>
</div>
<flux:separator class="md:hidden" />
<div class="flex-1 self-stretch max-md:pt-6">
<flux:heading>{{ $heading ?? '' }}</flux:heading>
<flux:subheading>{{ $subheading ?? '' }}</flux:subheading>
<div class="mt-5 w-full max-w-lg"> <div class="mt-5 w-full max-w-lg">
{{ $slot }} {{ $slot }}

18
resources/views/layouts/auth/simple.blade.php
View File

@ -3,27 +3,21 @@
<head> <head>
@include('partials.head') @include('partials.head')
</head> </head>
<body class="min-h-screen bg-white antialiased dark:bg-linear-to-b dark:from-neutral-950 dark:to-neutral-900"> <body class="min-h-screen bg-gray-10 antialiased">
<div class="bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10"> <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-2"> <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> <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"> <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" /> <x-app-logo-icon class="size-9 fill-current text-black"/>
</span> </span>
<span class="sr-only">{{ config('app.name', 'Laravel') }}</span> <span class="sr-only">{{ config('app.name', 'Laravel') }}</span>
</a> </a>
<div class="flex flex-col gap-6"> <div class="flex flex-col gap-6 mt-4">
{{ $slot }} {{ $slot }}
</div> </div>
</div> </div>
<x-mary-toast/>
</div> </div>
@livewireScripts
@persist('toast')
<flux:toast.group>
<flux:toast />
</flux:toast.group>
@endpersist
@fluxScripts
</body> </body>
</html> </html>

6
resources/views/livewire/auth/confirm-password.blade.php
View File

@ -10,7 +10,7 @@
<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-mary-input
name="password" name="password"
:label="__('Password')" :label="__('Password')"
type="password" type="password"
@ -20,9 +20,9 @@
viewable viewable
/> />
<flux:button variant="primary" type="submit" class="w-full" data-test="confirm-password-button"> <x-mary-button type="submit" class="w-full btn-primary" data-test="confirm-password-button">
{{ __('Confirm') }} {{ __('Confirm') }}
</flux:button> </x-mary-button>
</form> </form>
</div> </div>
</x-layouts::auth> </x-layouts::auth>

12
resources/views/livewire/auth/forgot-password.blade.php
View File

@ -1,6 +1,7 @@
<x-layouts::auth :title="__('Forgot password')"> <x-layouts::auth :title="__('Forgot password')">
<div class="flex flex-col gap-6"> <div class="flex flex-col gap-6">
<x-auth-header :title="__('Forgot password')" :description="__('Enter your email to receive a password reset link')" /> <x-auth-header :title="__('Forgot password')"
:description="__('Enter your email to receive a password reset link')"/>
<!-- Session Status --> <!-- Session Status -->
<x-auth-session-status class="text-center" :status="session('status')"/> <x-auth-session-status class="text-center" :status="session('status')"/>
@ -9,7 +10,7 @@
@csrf @csrf
<!-- Email Address --> <!-- Email Address -->
<flux:input <x-mary-input
name="email" name="email"
:label="__('Email address')" :label="__('Email address')"
type="email" type="email"
@ -18,14 +19,15 @@
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-mary-button type="submit" class="w-full btn-primary" data-test="email-password-reset-link-button">
{{ __('Email password reset link') }} {{ __('Email password reset link') }}
</flux:button> </x-mary-button>
</form> </form>
<div class="space-x-1 rtl:space-x-reverse text-center text-sm text-zinc-400"> <div class="space-x-1 rtl:space-x-reverse text-center text-sm text-zinc-400">
<span>{{ __('Or, return to') }}</span> <span>{{ __('Or, return to') }}</span>
<flux:link :href="route('login')" wire:navigate>{{ __('log in') }}</flux:link> <a class="font-bold text-gray-900 hover:text-blue-500" href="{{route('login')}}"
wire:navigate>{{ __('log in') }}</a>
</div> </div>
</div> </div>
</x-layouts::auth> </x-layouts::auth>

22
resources/views/livewire/auth/login.blade.php
View File

@ -1,6 +1,7 @@
<x-layouts::auth :title="__('Log in')"> <x-layouts::auth :title="__('Log in')">
<div class="flex flex-col gap-6"> <div class="flex flex-col gap-6">
<x-auth-header :title="__('Log in to your account')" :description="__('Enter your email and password below to log in')" /> <x-auth-header :title="__('Log in to your account')"
:description="__('Enter your email and password below to log in')"/>
<!-- Session Status --> <!-- Session Status -->
<x-auth-session-status class="text-center" :status="session('status')"/> <x-auth-session-status class="text-center" :status="session('status')"/>
@ -9,7 +10,7 @@
@csrf @csrf
<!-- Email Address --> <!-- Email Address -->
<flux:input <x-mary-input
name="email" name="email"
:label="__('Email address')" :label="__('Email address')"
:value="old('email')" :value="old('email')"
@ -22,7 +23,7 @@
<!-- Password --> <!-- Password -->
<div class="relative"> <div class="relative">
<flux:input <x-mary-input
name="password" name="password"
:label="__('Password')" :label="__('Password')"
type="password" type="password"
@ -33,26 +34,29 @@
/> />
@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> <a class="absolute top-0 text-sm inset-e-0 hover:text-blue-500"
href="{{route('password.request')}}"
wire:navigate>
{{ __('Forgot your password?') }} {{ __('Forgot your password?') }}
</flux:link> </a>
@endif @endif
</div> </div>
<!-- Remember Me --> <!-- Remember Me -->
<flux:checkbox name="remember" :label="__('Remember me')" :checked="old('remember')" /> <x-mary-checkbox name="remember" :label="__('Remember me')" :checked="old('remember')"/>
<div class="flex items-center justify-end"> <div class="flex items-center justify-end">
<flux:button variant="primary" type="submit" class="w-full" data-test="login-button"> <x-mary-button type="submit" class="w-full btn-primary" data-test="login-button">
{{ __('Log in') }} {{ __('Log in') }}
</flux:button> </x-mary-button>
</div> </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-sm text-center rtl:space-x-reverse text-zinc-600 dark:text-zinc-400">
<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> <a href="{{route('register')}}" class="font-bold text-gray-900 hover:text-blue-500"
wire:navigate>{{ __('Sign up') }}</a>
</div> </div>
@endif @endif
</div> </div>

21
resources/views/livewire/auth/register.blade.php
View File

@ -1,6 +1,7 @@
<x-layouts::auth :title="__('Register')"> <x-layouts::auth :title="__('Register')">
<div class="flex flex-col gap-6"> <div class="flex flex-col gap-6">
<x-auth-header :title="__('Create an account')" :description="__('Enter your details below to create your account')" /> <x-auth-header :title="__('Create an account')"
:description="__('Enter your details below to create your account')"/>
<!-- Session Status --> <!-- Session Status -->
<x-auth-session-status class="text-center" :status="session('status')"/> <x-auth-session-status class="text-center" :status="session('status')"/>
@ -8,7 +9,7 @@
<form method="POST" action="{{ route('register.store') }}" class="flex flex-col gap-6"> <form method="POST" action="{{ route('register.store') }}" class="flex flex-col gap-6">
@csrf @csrf
<!-- Name --> <!-- Name -->
<flux:input <x-mary-input
name="name" name="name"
:label="__('Name')" :label="__('Name')"
:value="old('name')" :value="old('name')"
@ -20,7 +21,7 @@
/> />
<!-- Email Address --> <!-- Email Address -->
<flux:input <x-mary-input
name="email" name="email"
:label="__('Email address')" :label="__('Email address')"
:value="old('email')" :value="old('email')"
@ -31,7 +32,7 @@
/> />
<!-- Password --> <!-- Password -->
<flux:input <x-mary-input
name="password" name="password"
:label="__('Password')" :label="__('Password')"
type="password" type="password"
@ -42,7 +43,7 @@
/> />
<!-- Confirm Password --> <!-- Confirm Password -->
<flux:input <x-mary-input
name="password_confirmation" name="password_confirmation"
:label="__('Confirm password')" :label="__('Confirm password')"
type="password" type="password"
@ -53,15 +54,17 @@
/> />
<div class="flex items-center justify-end"> <div class="flex items-center justify-end">
<flux:button type="submit" variant="primary" class="w-full" data-test="register-user-button"> <x-mary-button type="submit" class="w-full btn-primary" data-test="register-user-button">
{{ __('Create account') }} {{ __('Create account') }}
</flux:button> </x-mary-button>
</div> </div>
</form> </form>
<div class="space-x-1 rtl:space-x-reverse text-center text-sm text-zinc-600 dark:text-zinc-400"> <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> <span>{{ __('Already have an account ?') }}</span>
<flux:link :href="route('login')" wire:navigate>{{ __('Log in') }}</flux:link> <a href="{{route('login')}}" class="font-bold text-gray-900 hover:text-blue-500"
wire:navigate>{{ __('Log in') }}</a>
</div> </div>
</div> </div>
</x-layouts::auth> </x-layouts::auth>

10
resources/views/livewire/auth/reset-password.blade.php
View File

@ -11,7 +11,7 @@
<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-mary-input
name="email" name="email"
value="{{ request('email') }}" value="{{ request('email') }}"
:label="__('Email')" :label="__('Email')"
@ -21,7 +21,7 @@
/> />
<!-- Password --> <!-- Password -->
<flux:input <x-mary-input
name="password" name="password"
:label="__('Password')" :label="__('Password')"
type="password" type="password"
@ -32,7 +32,7 @@
/> />
<!-- Confirm Password --> <!-- Confirm Password -->
<flux:input <x-mary-input
name="password_confirmation" name="password_confirmation"
:label="__('Confirm password')" :label="__('Confirm password')"
type="password" type="password"
@ -43,9 +43,9 @@
/> />
<div class="flex items-center justify-end"> <div class="flex items-center justify-end">
<flux:button type="submit" variant="primary" class="w-full" data-test="reset-password-button"> <x-mary-button type="submit" class="w-full btn-primary" data-test="reset-password-button">
{{ __('Reset password') }} {{ __('Reset password') }}
</flux:button> </x-mary-button>
</div> </div>
</form> </form>
</div> </div>

48
resources/views/livewire/settings/delete-user-form.blade.php
View File

@ -1,34 +1,48 @@
<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-mary-header
<flux:subheading>{{ __('Delete your account and all of its resources') }}</flux:subheading> title="{{ __('Delete account') }}"
subtitle="{{ __('Delete your account and all of its resources') }}"
/>
</div> </div>
<flux:modal.trigger name="confirm-user-deletion"> <x-mary-button
<flux:button variant="danger" x-data="" x-on:click.prevent="$dispatch('open-modal', 'confirm-user-deletion')"> class="btn-error"
wire:click="$set('confirmingUserDeletion', true)"
>
{{ __('Delete account') }} {{ __('Delete account') }}
</flux:button> </x-mary-button>
</flux:modal.trigger>
<flux:modal name="confirm-user-deletion" :show="$errors->isNotEmpty()" focusable class="max-w-lg"> <x-mary-modal wire:model="confirmingUserDeletion" class="backdrop-blur">
<form method="POST" wire:submit="deleteUser" class="space-y-6"> <form method="POST" wire:submit="deleteUser" class="space-y-6">
<div> <div>
<flux:heading size="lg">{{ __('Are you sure you want to delete your account?') }}</flux:heading> <h2 class="text-lg font-bold text-base-content">
{{ __('Are you sure you want to delete your account?') }}
<flux:subheading> </h2>
<p class="mt-1 text-sm text-base-content/70">
{{ __('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> </div>
<flux:input wire:model="password" :label="__('Password')" type="password" viewable /> <x-mary-input
wire:model="password"
label="{{ __('Password') }}"
type="password"
icon="o-key"
/>
<x-slot:actions>
<div class="flex justify-end space-x-2 rtl:space-x-reverse"> <div class="flex justify-end space-x-2 rtl:space-x-reverse">
<flux:modal.close> <x-mary-button @click="$wire.confirmingUserDeletion = false">
<flux:button variant="filled">{{ __('Cancel') }}</flux:button> {{ __('Cancel') }}
</flux:modal.close> </x-mary-button>
<flux:button variant="danger" type="submit">{{ __('Delete account') }}</flux:button> <x-mary-button type="submit" class="btn-error" spinner="deleteUser">
{{ __('Delete account') }}
</x-mary-button>
</div> </div>
</x-slot:actions>
</form> </form>
</flux:modal> </x-mary-modal>
</section> </section>

20
resources/views/livewire/settings/profile.blade.php
View File

@ -1,31 +1,29 @@
<section class="w-full"> <section class="w-full">
@include('partials.settings-heading')
<flux:heading class="sr-only">{{ __('Profile settings') }}</flux: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-mary-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-mary-input wire:model="email" :label="__('Email')" type="email" required autocomplete="email"/>
@if ($this->hasUnverifiedEmail) @if ($this->hasUnverifiedEmail)
<div> <div>
<flux:text class="mt-4"> <div class="mt-4">
{{ __('Your email address is unverified.') }} {{ __('Your email address is unverified.') }}
<flux:link class="text-sm cursor-pointer" wire:click.prevent="resendVerificationNotification"> <div class="text-sm cursor-pointer"
wire:click.prevent="resendVerificationNotification">
{{ __('Click here to re-send the verification email.') }} {{ __('Click here to re-send the verification email.') }}
</flux:link> </div>
</flux:text> </div>
</div> </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-mary-button class="btn-primary" spinner="updateProfileInformation"
type="submit">{{ __('Save') }}</x-mary-button>
</div> </div>
</form> </form>

165
resources/views/livewire/settings/security.blade.php
View File

@ -1,11 +1,7 @@
<section class="w-full"> <section class="w-full">
@include('partials.settings-heading') <x-shared.card title="{{ __('Change your password') }}">
<x-mary-form method="POST" wire:submit="updatePassword" class="p-4">
<flux:heading class="sr-only">{{ __('Security settings') }}</flux:heading> <x-mary-input
<x-settings.layout :heading="__('Update password')" :subheading="__('Ensure your account is using a long, random password to stay secure')">
<form method="POST" wire:submit="updatePassword" class="mt-6 space-y-6">
<flux:input
wire:model="current_password" wire:model="current_password"
:label="__('Current password')" :label="__('Current password')"
type="password" type="password"
@ -13,7 +9,7 @@
autocomplete="current-password" autocomplete="current-password"
viewable viewable
/> />
<flux:input <x-mary-input
wire:model="password" wire:model="password"
:label="__('New password')" :label="__('New password')"
type="password" type="password"
@ -21,7 +17,7 @@
autocomplete="new-password" autocomplete="new-password"
viewable viewable
/> />
<flux:input <x-mary-input
wire:model="password_confirmation" wire:model="password_confirmation"
:label="__('Confirm password')" :label="__('Confirm password')"
type="password" type="password"
@ -30,135 +26,134 @@
viewable viewable
/> />
<div class="flex items-center gap-4"> <x-slot:actions>
<flux:button variant="primary" type="submit" data-test="update-password-button">{{ __('Save') }}</flux:button> <x-mary-button type="submit" class="btn-primary"
</div> data-test="update-password-button">{{ __('Save') }}</x-mary-button>
</form> </x-slot:actions>
</x-mary-form>
</x-shared.card>
@if ($canManageTwoFactor) @if ($canManageTwoFactor)
<section class="mt-12"> <section class="mt-12">
<flux:heading>{{ __('Two-factor authentication') }}</flux:heading> <p class="text-xl text-gray-700 mb-2 font-medium">{{ __('Manage your two-factor authentication settings') }}</p>
<flux:subheading>{{ __('Manage your two-factor authentication settings') }}</flux:subheading> <p class="text-sm text-gray-500">{{ __('Manage your two-factor authentication settings') }}</p>
<div class="flex flex-col w-full mx-auto space-y-6 text-sm" wire:cloak> <div class="flex flex-col w-full mx-auto 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-500 mt-4">
{{ __('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-mary-button
variant="danger" class="btn-error"
wire:click="disable" wire:click="disable"
> >
{{ __('Disable 2FA') }} {{ __('Disable 2FA') }}
</flux:button> </x-mary-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-400 mt-4">
{{ __('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-mary-button
variant="primary" class="btn-secondary"
wire:click="enable" wire:click="enable"
> >
{{ __('Enable 2FA') }} {{ __('Enable 2FA') }}
</flux:button> </x-mary-button>
</div> </div>
@endif @endif
</div> </div>
</section> </section>
<flux:modal <x-mary-modal wire:model="showModal" class="backdrop-blur" @close="closeModal">
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
<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"> class="p-0.5 w-auto rounded-full border border-base-200 dark:border-base-content/20 bg-base-100 shadow-sm">
<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"> <div
class="p-2.5 rounded-full border border-base-200 dark:border-base-content/20 overflow-hidden bg-base-200 relative">
<div
class="flex items-stretch absolute inset-0 w-full h-full divide-x [&>div]:flex-1 divide-base-300 dark:divide-base-content/20 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-base-300 dark:divide-base-content/20 justify-around opacity-50">
@for ($i = 1; $i <= 5; $i++) @for ($i = 1; $i <= 5; $i++)
<div></div> <div></div>
@endfor @endfor
</div> </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"> <x-mary-icon name="o-qr-code" class="relative z-20 w-8 h-8 text-base-content"/>
@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>
<div class="space-y-2 text-center"> <div class="space-y-2 text-center">
<flux:heading size="lg">{{ $this->modalConfig['title'] }}</flux:heading> <div class="text-xl font-bold text-base-content">{{ $this->modalConfig['title'] }}</div>
<flux:text>{{ $this->modalConfig['description'] }}</flux:text> <div class="text-sm text-base-content/70">{{ $this->modalConfig['description'] }}</div>
</div> </div>
</div> </div>
@if ($showVerificationStep) @if ($showVerificationStep)
<div class="space-y-6"> <div class="space-y-6">
<div <div class="flex flex-col items-center justify-center space-y-3" x-data
class="flex flex-col items-center space-y-3 justify-center" x-init="$nextTick(() => $el.querySelector('input')?.focus())">
x-data <x-mary-input
x-init="$nextTick(() => $el.querySelector('input')?.focus())"
>
<flux:otp
name="code"
wire:model="code" wire:model="code"
length="6" maxlength="6"
label="OTP Code" placeholder="------"
label:sr-only class="mx-auto text-2xl tracking-widest text-center"
class="mx-auto" aria-label="OTP Code"
/> />
</div> </div>
<div class="flex items-center space-x-3"> <div class="flex items-center space-x-3">
<flux:button <x-mary-button
variant="outline" class="flex-1 btn-outline"
class="flex-1"
wire:click="resetVerification" wire:click="resetVerification"
> >
{{ __('Back') }} {{ __('Back') }}
</flux:button> </x-mary-button>
<flux:button <x-mary-button
variant="primary" class="flex-1 btn-primary"
class="flex-1"
wire:click="confirmTwoFactor" wire:click="confirmTwoFactor"
x-bind:disabled="$wire.code.length < 6" x-bind:disabled="$wire.code.length < 6"
> >
{{ __('Confirm') }} {{ __('Confirm') }}
</flux:button> </x-mary-button>
</div> </div>
</div> </div>
@else @else
@error('setupData') @error('setupData')
<flux:callout variant="danger" icon="x-circle" heading="{{ $message }}"/> <x-mary-alert icon="o-x-circle" class="alert-error">
{{ $message }}
</x-mary-alert>
@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"> <div
class="relative w-64 overflow-hidden border rounded-lg border-base-200 dark:border-base-content/20 aspect-square">
@empty($qrCodeSvg) @empty($qrCodeSvg)
<div class="absolute inset-0 flex items-center justify-center bg-white dark:bg-stone-700 animate-pulse"> <div
<flux:icon.loading/> class="absolute inset-0 flex items-center justify-center bg-base-100 animate-pulse">
<x-mary-loading class="text-primary loading-lg"/>
</div> </div>
@else @else
<div x-data class="flex items-center justify-center h-full p-4"> <div x-data class="flex items-center justify-center h-full p-4">
<div <div
class="bg-white p-3 rounded" class="p-3 bg-white rounded"
:style="($flux.appearance === 'dark' || ($flux.appearance === 'system' && $flux.dark)) ? 'filter: invert(1) brightness(1.5)' : ''" :style="(localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) ? 'filter: invert(1) brightness(1.5)' : ''"
> >
{!! $qrCodeSvg !!} {!! $qrCodeSvg !!}
</div> </div>
@ -168,20 +163,19 @@ class="bg-white p-3 rounded"
</div> </div>
<div> <div>
<flux:button <x-mary-button
:disabled="$errors->has('setupData')" :disabled="$errors->has('setupData')"
variant="primary" class="w-full btn-primary"
class="w-full"
wire:click="showVerificationIfNecessary" wire:click="showVerificationIfNecessary"
> >
{{ $this->modalConfig['buttonText'] }} {{ $this->modalConfig['buttonText'] }}
</flux:button> </x-mary-button>
</div> </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 items-center justify-center w-full">
<div class="absolute inset-0 w-full h-px top-1/2 bg-stone-200 dark:bg-stone-600"></div> <div class="absolute inset-0 w-full h-px top-1/2 bg-base-200 dark:bg-base-content/20"></div>
<span class="relative px-2 text-sm bg-white dark:bg-stone-800 text-stone-600 dark:text-stone-400"> <span class="relative px-2 text-sm bg-base-100 text-base-content/60">
{{ __('or, enter the code manually') }} {{ __('or, enter the code manually') }}
</span> </span>
</div> </div>
@ -201,29 +195,27 @@ class="flex items-center space-x-2"
} }
}" }"
> >
<div class="flex items-stretch w-full border rounded-xl dark:border-stone-700"> <div
class="flex items-stretch w-full border rounded-xl border-base-300 dark:border-base-content/20">
@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 items-center justify-center w-full p-3 bg-base-200">
<flux:icon.loading variant="mini"/> <x-mary-loading class="loading-sm"/>
</div> </div>
@else @else
<input <input
type="text" type="text"
readonly readonly
value="{{ $manualSetupKey }}" value="{{ $manualSetupKey }}"
class="w-full p-3 bg-transparent outline-none text-stone-900 dark:text-stone-100" class="w-full p-3 bg-transparent outline-none text-base-content"
/> />
<button <button
@click="copy()" @click="copy()"
class="px-3 transition-colors border-l cursor-pointer border-stone-200 dark:border-stone-600" class="px-3 transition-colors border-l cursor-pointer border-base-300 dark:border-base-content/20 hover:bg-base-200 dark:hover:bg-base-content/10"
> >
<flux:icon.document-duplicate x-show="!copied" variant="outline"></flux:icon> <x-mary-icon name="o-document-duplicate" x-show="!copied"
<flux:icon.check class="w-5 h-5 text-base-content/70"/>
x-show="copied" <x-mary-icon name="o-check" x-show="copied" class="w-5 h-5 text-success"/>
variant="solid"
class="text-green-500"
></flux:icon>
</button> </button>
@endempty @endempty
</div> </div>
@ -231,7 +223,6 @@ class="text-green-500"
</div> </div>
@endif @endif
</div> </div>
</flux:modal> </x-mary-modal>
@endif @endif
</x-settings.layout>
</section> </section>

52
resources/views/livewire/settings/two-factor/recovery-codes.blade.php
View File

@ -1,53 +1,50 @@
<div <x-shared.card
class="py-6 space-y-6 border shadow-sm rounded-xl border-zinc-200 dark:border-white/10" title="{{ __('Recovery codes') }}"
icon="lucide-key"
wire:cloak wire:cloak
x-data="{ showRecoveryCodes: false }" x-data="{ showRecoveryCodes: false }"
> >
<div class="px-6 space-y-2"> <div class="p-4">
<div class="flex items-center gap-2">
<flux:icon.lock-closed variant="outline" class="size-4"/> <div class="space-y-2">
<flux:heading size="lg" level="3">{{ __('2FA recovery codes') }}</flux:heading> <p class="text-sm text-gray-400">
</div>
<flux:text variant="subtle">
{{ __('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> </p>
</div> </div>
<div class="px-6"> <div class="mt-4">
<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-mary-button
class="btn-neutral"
x-show="!showRecoveryCodes" x-show="!showRecoveryCodes"
icon="eye" icon="lucide.eye"
icon:variant="outline"
variant="primary"
@click="showRecoveryCodes = true;" @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-mary-button>
<flux:button <x-mary-button
class="btn-neutral"
x-show="showRecoveryCodes" x-show="showRecoveryCodes"
icon="eye-slash" icon="lucide.eye-closed"
icon:variant="outline"
variant="primary"
@click="showRecoveryCodes = false" @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-mary-button>
@if (filled($recoveryCodes)) @if (filled($recoveryCodes))
<flux:button <x-mary-button
x-show="showRecoveryCodes" x-show="showRecoveryCodes"
icon="arrow-path" icon="lucide.refresh-cw"
variant="filled" class="btn-primary"
wire:click="regenerateRecoveryCodes" wire:click="regenerateRecoveryCodes"
> >
{{ __('Regenerate codes') }} {{ __('Regenerate codes') }}
</flux:button> </x-mary-button>
@endif @endif
</div> </div>
@ -60,7 +57,7 @@ class="relative overflow-hidden"
> >
<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-mary-alert class="alert-error" icon="lucide.x" title="{{$message}}"/>
@enderror @enderror
@if (filled($recoveryCodes)) @if (filled($recoveryCodes))
@ -79,11 +76,12 @@ class="select-text"
</div> </div>
@endforeach @endforeach
</div> </div>
<flux:text variant="subtle" class="text-xs"> <p class="text-xs text-gray-400">
{{ __('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>
</div> </div>
</div> </div>
</x-shared.card>

5
resources/views/partials/settings-heading.blade.php
View File

@ -1,5 +0,0 @@
<div class="relative mb-6 w-full">
<flux:heading size="xl" level="1">{{ __('Settings') }}</flux:heading>
<flux:subheading size="lg" class="mb-6">{{ __('Manage your profile and account settings') }}</flux:subheading>
<flux:separator variant="subtle" />
</div>

22
routes/settings.php
View File

@ -6,16 +6,23 @@
use Illuminate\Support\Facades\Route; use Illuminate\Support\Facades\Route;
use Laravel\Fortify\Features; use Laravel\Fortify\Features;
Route::middleware(['auth'])->group(function (): void { // Grouping by the "Settings" sidebar category
Route::redirect('settings', 'settings/profile')->name('settings'); Route::middleware(['auth'])->prefix('settings')->group(function (): void {
Route::livewire('settings/profile', Profile::class)->name('profile.edit'); // Base settings redirect
}); Route::redirect('/', '/settings/profile')->name('settings');
Route::middleware(['auth', 'verified'])->group(function (): void { // Profile Settings
Route::livewire('settings/appearance', Appearance::class)->name('appearance.edit'); Route::livewire('profile', Profile::class)->name('profile.edit');
Route::livewire('settings/security', Security::class) // Settings that require email verification
Route::middleware(['verified'])->group(function (): void {
// Appearance Settings
Route::livewire('appearance', Appearance::class)->name('appearance.edit');
// Security Settings
Route::livewire('security', Security::class)
->middleware( ->middleware(
when( when(
Features::canManageTwoFactorAuthentication() Features::canManageTwoFactorAuthentication()
@ -26,3 +33,4 @@
) )
->name('security.edit'); ->name('security.edit');
}); });
});