mkrieger/byos_laravel
1
0
Fork 0
mirror of https://github.com/usetrmnl/byos_laravel.git synced 2026-01-16 16:37:47 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor: rebase on Livewire 4 starter kit

Browse source
This commit is contained in:
Benjamin Nussbaum 2026-01-15 21:55:24 +01:00
parent b097b0a7d7
commit e660da46fb
69 changed files with 1967 additions and 942 deletions
Download patch file Download diff file Expand all files Collapse all files

62
resources/views/livewire/auth/confirm-password.blade.php
View file

@ -1,62 +0,0 @@
<?php
use Illuminate\Support\Facades\Auth;
use Illuminate\Validation\ValidationException;
use Livewire\Attributes\Layout;
use Livewire\Component;
new #[Layout('layouts.auth')] class extends Component
{
public string $password = '';
/**
* Confirm the current user's password.
*/
public function confirmPassword(): void
{
$this->validate([
'password' => ['required', 'string'],
]);
if (! Auth::guard('web')->validate([
'email' => Auth::user()->email,
'password' => $this->password,
])) {
throw ValidationException::withMessages([
'password' => __('auth.password'),
]);
}
session(['auth.password_confirmed_at' => time()]);
$this->redirectIntended(default: route('dashboard', absolute: false), navigate: true);
}
}; ?>
<div class="flex flex-col gap-6">
<x-auth-header
title="Confirm password"
description="This is a secure area of the application. Please confirm your password before continuing."
/>
<!-- Session Status -->
<x-auth-session-status class="text-center" :status="session('status')" />
<form wire:submit="confirmPassword" class="flex flex-col gap-6">
<!-- Password -->
<div class="grid gap-2">
<flux:input
wire:model="password"
id="password"
label="{{ __('Password') }}"
type="password"
name="password"
required
autocomplete="new-password"
placeholder="Password"
/>
</div>
<flux:button variant="primary" type="submit" class="w-full">{{ __('Confirm') }}</flux:button>
</form>
</div>

45
resources/views/livewire/auth/forgot-password.blade.php
View file

@ -1,45 +0,0 @@
<?php
use Illuminate\Support\Facades\Password;
use Livewire\Attributes\Layout;
use Livewire\Component;
new #[Layout('layouts.auth')] class extends Component
{
public string $email = '';
/**
* Send a password reset link to the provided email address.
*/
public function sendPasswordResetLink(): void
{
$this->validate([
'email' => ['required', 'string', 'email'],
]);
Password::sendResetLink($this->only('email'));
session()->flash('status', __('A reset link will be sent if the account exists.'));
}
}; ?>
<div class="flex flex-col gap-6">
<x-auth-header title="Forgot password" description="Enter your email to receive a password reset link" />
<!-- Session Status -->
<x-auth-session-status class="text-center" :status="session('status')" />
<form wire:submit="sendPasswordResetLink" class="flex flex-col gap-6">
<!-- Email Address -->
<div class="grid gap-2">
<flux:input wire:model="email" label="{{ __('Email Address') }}" type="email" name="email" required autofocus placeholder="email@example.com" />
</div>
<flux:button variant="primary" type="submit" class="w-full">{{ __('Email password reset link') }}</flux:button>
</form>
<div class="space-x-1 text-center text-sm text-zinc-400">
Or, return to
<x-text-link href="{{ route('login') }}">log in</x-text-link>
</div>
</div>

153
resources/views/livewire/auth/login.blade.php
View file

@ -1,153 +0,0 @@
<?php
use Illuminate\Auth\Events\Lockout;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\RateLimiter;
use Illuminate\Support\Facades\Session;
use Illuminate\Support\Str;
use Illuminate\Validation\ValidationException;
use Livewire\Attributes\Layout;
use Livewire\Attributes\Validate;
use Livewire\Component;
new #[Layout('layouts.auth')] class extends Component
{
#[Validate('required|string|email')]
public string $email = '';
#[Validate('required|string')]
public string $password = '';
public bool $remember = true;
/**
* Handle an incoming authentication request.
*/
public function login(): void
{
$this->validate();
$this->ensureIsNotRateLimited();
if (! Auth::attempt(['email' => $this->email, 'password' => $this->password], $this->remember)) {
RateLimiter::hit($this->throttleKey());
throw ValidationException::withMessages([
'email' => __('auth.failed'),
]);
}
RateLimiter::clear($this->throttleKey());
Session::regenerate();
$this->redirectIntended(default: route('dashboard', absolute: false), navigate: true);
}
/**
* Ensure the authentication request is not rate limited.
*/
protected function ensureIsNotRateLimited(): void
{
if (! RateLimiter::tooManyAttempts($this->throttleKey(), 5)) {
return;
}
event(new Lockout(request()));
$seconds = RateLimiter::availableIn($this->throttleKey());
throw ValidationException::withMessages([
'email' => __('auth.throttle', [
'seconds' => $seconds,
'minutes' => ceil($seconds / 60),
]),
]);
}
/**
* Get the authentication rate limiting throttle key.
*/
protected function throttleKey(): string
{
return Str::transliterate(Str::lower($this->email).'|'.request()->ip());
}
public function mount(): void
{
if (app()->isLocal()) {
$this->email = 'admin@example.com';
$this->password = 'admin@example.com';
}
}
}; ?>
<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"/>
<!-- Session Status -->
<x-auth-session-status class="text-center" :status="session('status')"/>
<form wire:submit="login" class="flex flex-col gap-6">
<!-- Email Address -->
<flux:input wire:model="email" label="{{ __('Email address') }}" type="email" name="email" required autofocus
autocomplete="email" placeholder="admin@example.com"/>
<!-- Password -->
<div class="relative">
<flux:input
wire:model="password"
label="{{ __('Password') }}"
type="password"
name="password"
required
autocomplete="current-password"
placeholder="Password"
/>
@if (Route::has('password.request'))
<x-text-link class="absolute right-0 top-0" href="{{ route('password.request') }}">
{{ __('Forgot your password?') }}
</x-text-link>
@endif
</div>
<!-- Remember Me -->
<flux:checkbox wire:model="remember" label="{{ __('Remember me') }}"/>
<div class="flex items-center justify-end">
<flux:button variant="primary" type="submit" class="w-full">{{ __('Log in') }}</flux:button>
</div>
</form>
@if (config('services.oidc.enabled'))
<div class="relative">
<div class="absolute inset-0 flex items-center">
<span class="w-full border-t border-zinc-300 dark:border-zinc-600"></span>
</div>
<div class="relative flex justify-center text-sm">
<span class="bg-white dark:bg-zinc-900 px-2 text-zinc-500 dark:text-zinc-400">
{{ __('Or') }}
</span>
</div>
</div>
<div class="flex items-center justify-end">
<flux:button
variant="outline"
type="button"
class="w-full"
href="{{ route('auth.oidc.redirect') }}"
>
{{ __('Continue with OIDC') }}
</flux:button>
</div>
@endif
@if (Route::has('register'))
<div class="space-x-1 text-center text-sm text-zinc-600 dark:text-zinc-400">
Don't have an account?
<x-text-link href="{{ route('register') }}">Sign up</x-text-link>
</div>
@endif
</div>

98
resources/views/livewire/auth/register.blade.php
View file

@ -1,98 +0,0 @@
<?php
use App\Models\User;
use Illuminate\Auth\Events\Registered;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Hash;
use Illuminate\Validation\Rules;
use Livewire\Attributes\Layout;
use Livewire\Component;
new #[Layout('layouts.auth')] class extends Component
{
public string $name = '';
public string $email = '';
public string $password = '';
public string $password_confirmation = '';
/**
* Handle an incoming registration request.
*/
public function register(): void
{
$validated = $this->validate([
'name' => ['required', 'string', 'max:255'],
'email' => ['required', 'string', 'lowercase', 'email', 'max:255', 'unique:'.User::class],
'password' => ['required', 'string', 'confirmed', Rules\Password::defaults()],
]);
$validated['password'] = Hash::make($validated['password']);
event(new Registered(($user = User::create($validated))));
Auth::login($user);
$this->redirect(route('dashboard', absolute: false), navigate: true);
}
}; ?>
<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 wire:submit="register" class="flex flex-col gap-6">
<!-- Name -->
<div class="grid gap-2">
<flux:input wire:model="name" id="name" label="{{ __('Name') }}" type="text" name="name" required autofocus autocomplete="name" placeholder="Full name" />
</div>
<!-- Email Address -->
<div class="grid gap-2">
<flux:input wire:model="email" id="email" label="{{ __('Email address') }}" type="email" name="email" required autocomplete="email" placeholder="email@example.com" />
</div>
<!-- Password -->
<div class="grid gap-2">
<flux:input
wire:model="password"
id="password"
label="{{ __('Password') }}"
type="password"
name="password"
required
autocomplete="new-password"
placeholder="Password"
/>
</div>
<!-- Confirm Password -->
<div class="grid gap-2">
<flux:input
wire:model="password_confirmation"
id="password_confirmation"
label="{{ __('Confirm password') }}"
type="password"
name="password_confirmation"
required
autocomplete="new-password"
placeholder="Confirm password"
/>
</div>
<div class="flex items-center justify-end">
<flux:button type="submit" variant="primary" class="w-full">
{{ __('Create account') }}
</flux:button>
</div>
</form>
<div class="space-x-1 text-center text-sm text-zinc-600 dark:text-zinc-400">
Already have an account?
<x-text-link href="{{ route('login') }}">Log in</x-text-link>
</div>
</div>

121
resources/views/livewire/auth/reset-password.blade.php
View file

@ -1,121 +0,0 @@
<?php
use Illuminate\Auth\Events\PasswordReset;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Password;
use Illuminate\Support\Facades\Session;
use Illuminate\Support\Str;
use Illuminate\Validation\Rules;
use Livewire\Attributes\Layout;
use Livewire\Attributes\Locked;
use Livewire\Component;
new #[Layout('layouts.auth')] class extends Component
{
#[Locked]
public string $token = '';
public string $email = '';
public string $password = '';
public string $password_confirmation = '';
/**
* Mount the component.
*/
public function mount(string $token): void
{
$this->token = $token;
$this->email = request()->string('email');
}
/**
* Reset the password for the given user.
*/
public function resetPassword(): void
{
$this->validate([
'token' => ['required'],
'email' => ['required', 'string', 'email'],
'password' => ['required', 'string', 'confirmed', Rules\Password::defaults()],
]);
// Here we will attempt to reset the user's password. If it is successful we
// will update the password on an actual user model and persist it to the
// database. Otherwise we will parse the error and return the response.
$status = Password::reset(
$this->only('email', 'password', 'password_confirmation', 'token'),
function ($user) {
$user->forceFill([
'password' => Hash::make($this->password),
'remember_token' => Str::random(60),
])->save();
event(new PasswordReset($user));
}
);
// If the password was successfully reset, we will redirect the user back to
// the application's home authenticated view. If there is an error we can
// redirect them back to where they came from with their error message.
if ($status !== Password::PasswordReset) {
$this->addError('email', __($status));
return;
}
Session::flash('status', __($status));
$this->redirectRoute('login', navigate: true);
}
}; ?>
<div class="flex flex-col gap-6">
<x-auth-header title="Reset password" description="Please enter your new password below" />
<!-- Session Status -->
<x-auth-session-status class="text-center" :status="session('status')" />
<form wire:submit="resetPassword" class="flex flex-col gap-6">
<!-- Email Address -->
<div class="grid gap-2">
<flux:input wire:model="email" id="email" label="{{ __('Email') }}" type="email" name="email" required autocomplete="email" />
</div>
<!-- Password -->
<div class="grid gap-2">
<flux:input
wire:model="password"
id="password"
label="{{ __('Password') }}"
type="password"
name="password"
required
autocomplete="new-password"
placeholder="Password"
/>
</div>
<!-- Confirm Password -->
<div class="grid gap-2">
<flux:input
wire:model="password_confirmation"
id="password_confirmation"
label="{{ __('Confirm password') }}"
type="password"
name="password_confirmation"
required
autocomplete="new-password"
placeholder="Confirm password"
/>
</div>
<div class="flex items-center justify-end">
<flux:button type="submit" variant="primary" class="w-full">
{{ __('Reset password') }}
</flux:button>
</div>
</form>
</div>

62
resources/views/livewire/auth/verify-email.blade.php
View file

@ -1,62 +0,0 @@
<?php
use App\Livewire\Actions\Logout;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Session;
use Livewire\Attributes\Layout;
use Livewire\Component;
new #[Layout('layouts.auth')] class extends Component
{
/**
* Send an email verification notification to the user.
*/
public function sendVerification(): void
{
if (Auth::user()->hasVerifiedEmail()) {
$this->redirectIntended(default: route('dashboard', absolute: false), navigate: true);
return;
}
Auth::user()->sendEmailVerificationNotification();
Session::flash('status', 'verification-link-sent');
}
/**
* Log the current user out of the application.
*/
public function logout(Logout $logout): void
{
$logout();
$this->redirect('/', navigate: true);
}
}; ?>
<div class="mt-4 flex flex-col gap-6">
<div class="text-center text-sm text-gray-600">
{{ __('Please verify your email address by clicking on the link we just emailed to you.') }}
</div>
@if (session('status') == 'verification-link-sent')
<div class="font-medium text-center text-sm text-green-600">
{{ __('A new verification link has been sent to the email address you provided during registration.') }}
</div>
@endif
<div class="flex flex-col items-center justify-between space-y-3">
<flux:button wire:click="sendVerification" variant="primary" class="w-full">
{{ __('Resend verification email') }}
</flux:button>
<button
wire:click="logout"
type="submit"
class="rounded-md text-sm text-gray-600 underline hover:text-gray-900 focus:outline-hidden focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
{{ __('Log out') }}
</button>
</div>
</div>

20
resources/views/livewire/settings/appearance.blade.php
View file

@ -1,20 +0,0 @@
<?php
use Livewire\Component;
new class extends Component
{
//
}; ?>
<div class="flex flex-col items-start">
@include('partials.settings-heading')
<x-settings.layout heading="Appearance" subheading="Update your account's appearance settings">
<flux:radio.group x-data variant="segmented" x-model="$flux.appearance">
<flux:radio value="light" icon="sun">Light</flux:radio>
<flux:radio value="dark" icon="moon">Dark</flux:radio>
<flux:radio value="system" icon="computer-desktop">System</flux:radio>
</flux:radio.group>
</x-settings.layout>
</div>

61
resources/views/livewire/settings/delete-user-form.blade.php
View file

@ -1,61 +0,0 @@
<?php
use App\Livewire\Actions\Logout;
use Illuminate\Support\Facades\Auth;
use Livewire\Component;
new class extends Component
{
public string $password = '';
/**
* Delete the currently authenticated user.
*/
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-10 space-y-6">
<div class="relative mb-5">
<flux:heading>{{ __('Delete Account') }}</flux:heading>
<flux:subheading>{{ __('Delete your account and all of its resources') }}</flux:subheading>
</div>
<flux:modal.trigger name="confirm-user-deletion">
<flux:button {{--variant="danger" --}} x-data="" x-on:click.prevent="$dispatch('open-modal', 'confirm-user-deletion')">
{{ __('Delete Account') }}
</flux:button>
</flux:modal.trigger>
<flux:modal name="confirm-user-deletion" :show="$errors->isNotEmpty()" focusable class="max-w-lg space-y-6">
<form wire:submit="deleteUser">
<h2 class="text-lg font-medium text-gray-900">
{{ __('Are you sure you want to delete your account?') }}
</h2>
<p class="mt-1 text-sm text-gray-600">
{{ __('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 wire:model="password" id="password" label="{{ __('Password') }}" type="password" name="password" />
</div>
<div class="mt-6 flex justify-end space-x-2">
<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>
</flux:modal>
</section>

87
resources/views/livewire/settings/password.blade.php
View file

@ -1,87 +0,0 @@
<?php
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Hash;
use Illuminate\Validation\Rules\Password;
use Illuminate\Validation\ValidationException;
use Livewire\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' => Hash::make($validated['password']),
]);
$this->reset('current_password', 'password', 'password_confirmation');
$this->dispatch('password-updated');
}
}; ?>
<section class="w-full">
@include('partials.settings-heading')
<x-settings.layout heading="Update password" subheading="Ensure your account is using a long, random password to stay secure">
<form wire:submit="updatePassword" class="mt-6 space-y-6">
<flux:input
wire:model="current_password"
id="update_password_current_passwordpassword"
label="{{ __('Current password') }}"
type="password"
name="current_password"
required
autocomplete="current-password"
/>
<flux:input
wire:model="password"
id="update_password_password"
label="{{ __('New password') }}"
type="password"
name="password"
required
autocomplete="new-password"
/>
<flux:input
wire:model="password_confirmation"
id="update_password_password_confirmation"
label="{{ __('Confirm Password') }}"
type="password"
name="password_confirmation"
required
autocomplete="new-password"
/>
<div class="flex items-center gap-4">
<div class="flex items-center justify-end">
<flux:button variant="primary" type="submit" class="w-full">{{ __('Save') }}</flux:button>
</div>
<x-action-message class="me-3" on="password-updated">
{{ __('Saved.') }}
</x-action-message>
</div>
</form>
</x-settings.layout>
</section>

76
resources/views/livewire/settings/preferences.blade.php
View file

@ -1,76 +0,0 @@
<?php
use Illuminate\Support\Facades\Auth;
use Illuminate\Validation\Rule;
use Livewire\Component;
new class extends Component
{
public ?int $assign_new_device_id = null;
public ?string $timezone = null;
public function mount(): void
{
$this->assign_new_device_id = Auth::user()->assign_new_device_id;
$this->timezone = Auth::user()->timezone ?? config('app.timezone');
}
public function updatePreferences(): void
{
$validated = $this->validate([
'assign_new_device_id' => [
'nullable',
Rule::exists('devices', 'id')->where(function ($query) {
$query->where('user_id', Auth::id())
->whereNull('mirror_device_id');
}),
],
'timezone' => [
'nullable',
'string',
Rule::in(timezone_identifiers_list()),
],
]);
Auth::user()->update($validated);
$this->dispatch('profile-updated');
}
}; ?>
<section class="w-full">
@include('partials.settings-heading')
<x-settings.layout heading="Preferences" subheading="Update your preferences">
<form wire:submit="updatePreferences" class="my-6 w-full space-y-6">
<flux:select wire:model="timezone" label="Timezone">
<flux:select.option value="" disabled>Select timezone...</flux:select.option>
@foreach(timezone_identifiers_list() as $tz)
<flux:select.option value="{{ $tz }}">{{ $tz }}</flux:select.option>
@endforeach
</flux:select>
<flux:select wire:model="assign_new_device_id" label="Auto-Joined Devices should mirror">
<flux:select.option value="">None</flux:select.option>
@foreach(auth()->user()->devices->where('mirror_device_id', null) as $device)
<flux:select.option value="{{ $device->id }}">
{{ $device->name }} ({{ $device->friendly_id }})
</flux:select.option>
@endforeach
</flux:select>
<div class="flex items-center gap-4">
<div class="flex items-center justify-end">
<flux:button variant="primary" type="submit" class="w-full">{{ __('Save') }}</flux:button>
</div>
<x-action-message class="me-3" on="profile-updated">
{{ __('Saved.') }}
</x-action-message>
</div>
</form>
</x-settings.layout>
</section>

119
resources/views/livewire/settings/profile.blade.php
View file

@ -1,119 +0,0 @@
<?php
use App\Models\User;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Session;
use Illuminate\Validation\Rule;
use Livewire\Component;
new class extends Component
{
public string $name = '';
public string $email = '';
/**
* Mount the component.
*/
public function mount(): void
{
$this->name = Auth::user()->name;
$this->email = Auth::user()->email;
}
/**
* Update the profile information for the currently authenticated user.
*/
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();
$this->dispatch('profile-updated', name: $user->name);
}
/**
* Send an email verification notification to the current user.
*/
public function resendVerificationNotification(): 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="w-full">
@include('partials.settings-heading')
<x-settings.layout heading="Profile" subheading="Update your name and email address">
<form wire:submit="updateProfileInformation" class="my-6 w-full space-y-6">
<flux:input wire:model="name" label="{{ __('Name') }}" type="text" name="name" required autofocus autocomplete="name" />
<div>
<flux:input wire:model="email" label="{{ __('Email') }}" type="email" name="email" required autocomplete="email" />
@if (auth()->user() instanceof \Illuminate\Contracts\Auth\MustVerifyEmail &&! auth()->user()->hasVerifiedEmail())
<div>
<p class="mt-2 text-sm text-gray-800">
{{ __('Your email address is unverified.') }}
<button
wire:click.prevent="resendVerificationNotification"
class="rounded-md text-sm text-gray-600 underline hover:text-gray-900 focus:outline-hidden focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
{{ __('Click here to re-send the verification email.') }}
</button>
</p>
@if (session('status') === 'verification-link-sent')
<p class="mt-2 text-sm font-medium text-green-600">
{{ __('A new verification link has been sent to your email address.') }}
</p>
@endif
</div>
@endif
</div>
<div class="flex items-center gap-4">
<div class="flex items-center justify-end">
<flux:button variant="primary" type="submit" class="w-full">{{ __('Save') }}</flux:button>
</div>
<x-action-message class="me-3" on="profile-updated">
{{ __('Saved.') }}
</x-action-message>
</div>
</form>
<livewire:settings.delete-user-form />
</x-settings.layout>
</section>

39
resources/views/livewire/settings/support.blade.php
View file

@ -1,39 +0,0 @@
<?php
use Livewire\Component;
new class extends Component {}
?>
<section class="w-full">
@include('partials.settings-heading')
<x-settings.layout heading="Support" subheading="Support the development of this project">
<div class="flex items-center gap-4">
<div class="flex items-center justify-end gap-2">
<flux:button class="w-42"
href="https://github.com/sponsors/bnussbau"
target="_blank"
icon:trailing="arrow-up-right">{{ __('GitHub Sponsors') }}</flux:button>
<flux:button class="w-42"
href="https://www.buymeacoffee.com/bnussbau"
target="_blank"
icon:trailing="arrow-up-right">{{ __('Buy me a coffee') }}</flux:button>
</div>
</div>
<div class="relative mt-10">
<flux:heading>{{ __('Referral Code') }}</flux:heading>
<flux:subheading>{{ __('Use the code to receive a $15 discount on your TRMNL device purchase.') }}</flux:subheading>
<div class="mt-3 flex items-center justify-start gap-2">
<flux:input value="laravel-trmnl" readonly copyable class="max-w-42"/>
<flux:button class="w-42"
href="https://usetrmnl.com/?ref=laravel-trmnl"
target="_blank"
icon:trailing="arrow-up-right">{{ __('Referral link') }}</flux:button>
</div>
</div>
</x-settings.layout>
</section>