init

resources/views/pages/settings/⚡security.blade.php

@@ -0,0 +1,178 @@
+<?php
+
+use App\Concerns\PasswordValidationRules;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\ValidationException;
+use Laravel\Fortify\Actions\DisableTwoFactorAuthentication;
+use Laravel\Fortify\Features;
+use Laravel\Fortify\Fortify;
+use Livewire\Attributes\On;
+use Livewire\Attributes\Title;
+use Livewire\Component;
+
+new #[Title('Security settings')] class extends Component {
+    use PasswordValidationRules;
+
+    public string $current_password = '';
+    public string $password = '';
+    public string $password_confirmation = '';
+
+    public bool $canManageTwoFactor;
+
+    public bool $twoFactorEnabled;
+
+    public bool $requiresConfirmation;
+
+    /**
+     * Mount the component.
+     */
+    public function mount(DisableTwoFactorAuthentication $disableTwoFactorAuthentication): void
+    {
+        $this->canManageTwoFactor = Features::canManageTwoFactorAuthentication();
+
+        if ($this->canManageTwoFactor) {
+            if (Fortify::confirmsTwoFactorAuthentication() && is_null(auth()->user()->two_factor_confirmed_at)) {
+                $disableTwoFactorAuthentication(auth()->user());
+            }
+
+            $this->twoFactorEnabled = auth()->user()->hasEnabledTwoFactorAuthentication();
+            $this->requiresConfirmation = Features::optionEnabled(Features::twoFactorAuthentication(), 'confirm');
+        }
+    }
+
+    /**
+     * Update the password for the currently authenticated user.
+     */
+    public function updatePassword(): void
+    {
+        try {
+            $validated = $this->validate([
+                'current_password' => $this->currentPasswordRules(),
+                'password' => $this->passwordRules(),
+            ]);
+        } catch (ValidationException $e) {
+            $this->reset('current_password', 'password', 'password_confirmation');
+
+            throw $e;
+        }
+
+        Auth::user()->update([
+            'password' => $validated['password'],
+        ]);
+
+        $this->reset('current_password', 'password', 'password_confirmation');
+
+        $this->dispatch('password-updated');
+    }
+
+    /**
+     * Handle the two-factor authentication enabled event.
+     */
+    #[On('two-factor-enabled')]
+    public function onTwoFactorEnabled(): void
+    {
+        $this->twoFactorEnabled = true;
+    }
+
+    /**
+     * Disable two-factor authentication for the user.
+     */
+    public function disable(DisableTwoFactorAuthentication $disableTwoFactorAuthentication): void
+    {
+        $disableTwoFactorAuthentication(auth()->user());
+
+        $this->twoFactorEnabled = false;
+    }
+}; ?>
+
+<section class="w-full">
+    @include('partials.settings-heading')
+
+    <flux:heading class="sr-only">{{ __('Security settings') }}</flux:heading>
+
+    <x-pages::settings.layout :heading="__('Update password')" :subheading="__('Ensure your account is using a long, random password to stay secure')">
+        <form method="POST" wire:submit="updatePassword" class="mt-6 space-y-6">
+            <flux:input
+                wire:model="current_password"
+                :label="__('Current password')"
+                type="password"
+                required
+                autocomplete="current-password"
+                viewable
+            />
+            <flux:input
+                wire:model="password"
+                :label="__('New password')"
+                type="password"
+                required
+                autocomplete="new-password"
+                viewable
+            />
+            <flux:input
+                wire:model="password_confirmation"
+                :label="__('Confirm password')"
+                type="password"
+                required
+                autocomplete="new-password"
+                viewable
+            />
+
+            <div class="flex items-center gap-4">
+                <div class="flex items-center justify-end">
+                    <flux:button variant="primary" type="submit" class="w-full" data-test="update-password-button">
+                        {{ __('Save') }}
+                    </flux:button>
+                </div>
+
+                <x-action-message class="me-3" on="password-updated">
+                    {{ __('Saved.') }}
+                </x-action-message>
+            </div>
+        </form>
+
+        @if ($canManageTwoFactor)
+            <section class="mt-12">
+                <flux:heading>{{ __('Two-factor authentication') }}</flux:heading>
+                <flux:subheading>{{ __('Manage your two-factor authentication settings') }}</flux:subheading>
+
+                <div class="flex flex-col w-full mx-auto space-y-6 text-sm" wire:cloak>
+                    @if ($twoFactorEnabled)
+                        <div class="space-y-4">
+                            <flux:text>
+                                {{ __('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>
+
+                            <div class="flex justify-start">
+                                <flux:button
+                                    variant="danger"
+                                    wire:click="disable"
+                                >
+                                    {{ __('Disable 2FA') }}
+                                </flux:button>
+                            </div>
+
+                            <livewire:pages::settings.two-factor.recovery-codes :$requiresConfirmation />
+                        </div>
+                    @else
+                        <div class="space-y-4">
+                            <flux:text variant="subtle">
+                                {{ __('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>
+
+                            <flux:modal.trigger name="two-factor-setup-modal">
+                                <flux:button
+                                    variant="primary"
+                                    wire:click="$dispatch('start-two-factor-setup')"
+                                >
+                                    {{ __('Enable 2FA') }}
+                                </flux:button>
+                            </flux:modal.trigger>
+
+                            <livewire:pages::settings.two-factor-setup-modal :requires-confirmation="$requiresConfirmation" />
+                        </div>
+                    @endif
+                </div>
+            </section>
+        @endif
+    </x-pages::settings.layout>
+</section>