Skip to content

Instantly share code, notes, and snippets.

@kyledoesdev

kyledoesdev/delete-user-form.blade.php

Last active December 18, 2024 02:24
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kyledoesdev/8ee4066106da0f5d1caa54d453e569d9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kyledoesdev/8ee4066106da0f5d1caa54d453e569d9 to your computer and use it in GitHub Desktop.
Download ZIP
FluxUI Laravel Breeze Profile Components
Raw
delete-user-form.blade.php
<?php
use App\Livewire\Actions\Logout;
use Livewire\Volt\Component;
new class extends Component
{
public string $password = '';
public function deleteUser(Logout $logout): void
{
$this->validate([
'password' => ['required', 'string', 'current_password'],
]);
tap(auth()->user(), $logout(...))->delete();
$this->redirect('/', navigate: true);
}
}; ?>
<section class="mt-4">
<header>
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
{{ __('Delete Account') }}
</h2>
<p class="mt-1 mb-4 text-sm text-gray-600 dark:text-gray-400">
{{ __('Once your account is deleted, all of its resources and data will be permanently deleted. Before deleting your account, please download any data or information that you wish to retain.') }}
</p>
</header>
<flux:modal.trigger name="confirm-user-deletion">
<flux:button size="sm" variant="danger">Delete Account</flux:button>
</flux:modal.trigger>
<flux:modal name="confirm-user-deletion">
<form wire:submit="deleteUser" class="p-6">
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
{{ __('Are you sure you want to delete your account?') }}
</h2>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
{{ __('Once your account is deleted, all of its resources and data will be permanently deleted. Please enter your password to confirm you would like to permanently delete your account.') }}
</p>
<div class="mt-6">
<flux:input type="password" wire:model="password" label="Password" description="Please confirm your password."/>
</div>
<div class="mt-6 flex justify-end">
<flux:button variant="danger" size="sm">
{{ __('Delete Account') }}
</flux:button>
</div>
</form>
</flux:modal>
</section>
Raw
update-password-form.blade.php
<?php
use Flux\Flux;
use Illuminate\Validation\Rules\Password;
use Illuminate\Validation\ValidationException;
use Livewire\Volt\Component;
new class extends Component
{
public string $current_password = '';
public string $password = '';
public string $password_confirmation = '';
/**
* Update the password for the currently authenticated user.
*/
public function updatePassword(): void
{
try {
$validated = $this->validate([
'current_password' => ['required', 'string', 'current_password'],
'password' => ['required', 'string', Password::defaults(), 'confirmed'],
]);
} catch (ValidationException $e) {
$this->reset('current_password', 'password', 'password_confirmation');
throw $e;
}
auth()->user()->update([
'password' => bcrypt($validated['password']),
]);
$this->reset('current_password', 'password', 'password_confirmation');
$this->dispatch('password-updated');
Flux::toast(variant: 'success', text: 'Password Updated!', duration: 3000);
}
}; ?>
<section class="my-4">
<header>
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
{{ __('Update Password') }}
</h2>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
{{ __('Ensure your account is using a long, random password to stay secure.') }}
</p>
</header>
<form wire:submit="updatePassword" class="mt-6 space-y-6">
<div>
<flux:input type="password" wire:model="current_password" label="Current Password" description="Confirm your current password" requried />
</div>
<div>
<flux:input type="password" wire:model="password" label="New Password" description="Enter your new password" required />
</div>
<div>
<flux:input type="password" wire:model="password_confirmation" label="New Password Confirmation" description="Enter your new password again." required />
</div>
<div class="flex items-center gap-4">
<flux:button variant="primary" size="sm" wire:click="updatePassword">
Save
</flux:button>
</div>
</form>
</section>
Raw
update-profile-information-form.blade.php
<?php
use App\Models\User;
use Flux\Flux;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Session;
use Illuminate\Validation\Rule;
use Livewire\Volt\Component;
new class extends Component
{
public string $name = '';
public string $email = '';
public function mount(): void
{
$this->name = auth()->user()->name;
$this->email = auth()->user()->email;
}
public function updateProfileInformation(): void
{
$user = auth()->user();
$validated = $this->validate([
'name' => ['required', 'string', 'max:255'],
'email' => ['required', 'string', 'lowercase', 'email', 'max:255', Rule::unique(User::class)->ignore($user->id)],
]);
$user->fill($validated);
if ($user->isDirty('email')) {
$user->email_verified_at = null;
}
$user->save();
Flux::toast(variant: 'success', text: 'Profile Information Updated!', duration: 3000);
}
public function sendVerification(): void
{
$user = auth()->user();
if ($user->hasVerifiedEmail()) {
$this->redirectIntended(default: route('dashboard', absolute: false));
return;
}
$user->sendEmailVerificationNotification();
Session::flash('status', 'verification-link-sent');
}
}; ?>
<section class="mb-4">
<header>
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
{{ __('Profile Information') }}
</h2>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
{{ __("Update your account's profile information and email address.") }}
</p>
</header>
<form wire:submit="updateProfileInformation" class="mt-6 space-y-6">
<div>
<flux:input wire:model="name" label="Name" description="Your name." required />
</div>
<div>
<flux:input type="email" wire:model="email" label="Email" description="Your email address." required />
@if (auth()->user() instanceof \Illuminate\Contracts\Auth\MustVerifyEmail && ! auth()->user()->hasVerifiedEmail())
<div>
<p class="text-sm mt-2 text-gray-800 dark:text-gray-200">
{{ __('Your email address is unverified.') }}
<button wire:click.prevent="sendVerification" class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800">
{{ __('Click here to re-send the verification email.') }}
</button>
</p>
@if (session('status') === 'verification-link-sent')
<p class="mt-2 font-medium text-sm text-green-600 dark:text-green-400">
{{ __('A new verification link has been sent to your email address.') }}
</p>
@endif
</div>
@endif
</div>
<div class="flex items-center gap-4">
<flux:button variant="primary" size="sm" wire:click="updateupdateProfileInformationassword">
Save
</flux:button>
</div>
</form>
</section>
@kyledoesdev
Copy link
Author

kyledoesdev commented Dec 12, 2024

These gists use the Flux Toast component for sucess messages. Make sure to add:

@persist('toast')
    <flux:toast />
@endpersist

to your layout file(s)!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment