You've already forked Atomcms-edit
Complete Hubbly theme conversion: all pages rewritten with CSS variable theming
- Converted all views from Dusk components (x-content.content-card, x-form.*) to inline Hubbly style - All pages use consistent card pattern: rounded-lg, gradient headers, color-mix borders - Added Hubbly-style homepage with 2-column layout, login card, swiper news carousel - Rewrote navigation with Alpine.js dropdowns, CSS variable colors, Hubbly assets - Updated profile page with Hubbly cards, fixed data bugs (friend/guild relationships) - Rewrote register page to match Hubbly layout: banner header, avatar preview with Frank GIF, 2-column form, avatar carousel selector, border-4 inputs - Rewrote login, settings, help center, radio, applications, utility pages - All colors use CSS variables controlled by Filament theme editor - Added Hubbly assets: banner, Frank GIF, navigation icons, online badge - Removed all dependencies on x-content.* and x-form.* components
This commit is contained in:
root
@@ -6,71 +6,66 @@
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 flex flex-col gap-y-3 md:col-span-9">
|
||||
<x-content.content-card icon="hotel-icon" classes="border dark:border-gray-900">
|
||||
<x-slot:title>
|
||||
{{ __('Account settings') }}
|
||||
</x-slot:title>
|
||||
<div class="rounded-lg overflow-hidden" style="background-color: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<div class="flex items-center gap-3 p-3" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
|
||||
<div>
|
||||
<h1 class="text-white font-bold text-lg">{{ __('Account settings') }}</h1>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Manage your account settings') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Manage your account settings') }}
|
||||
</x-slot:under-title>
|
||||
<div class="p-4">
|
||||
<form action="{{ route('settings.account.update') }}" method="POST" class="flex flex-col gap-y-4">
|
||||
@method('PUT')
|
||||
@csrf
|
||||
|
||||
<form action="{{ route('settings.account.update') }}" method="POST" class="flex flex-col gap-y-4">
|
||||
@method('PUT')
|
||||
@csrf
|
||||
<div class="flex flex-col gap-y-1">
|
||||
<label class="block text-sm font-semibold" style="color: var(--color-text);" for="mail">
|
||||
{{ __('E-mail') }}
|
||||
</label>
|
||||
<p class="text-xs mb-1" style="color: var(--color-text-muted);">
|
||||
{{ __('Make sure to use an email that you remember, if you ever lose your password, your email will be required.') }}
|
||||
</p>
|
||||
<input name="mail" type="email" value="{{ $user->mail }}" autofocus class="w-full rounded-lg px-3 py-2 text-sm border-2 focus:ring-0" style="background-color: var(--color-background); color: var(--color-text); border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-y-1">
|
||||
<x-form.label for="mail">
|
||||
{{ __('E-mail') }}
|
||||
@if ($user->settings?->allow_name_change)
|
||||
<div class="flex flex-col gap-y-1">
|
||||
<label class="block text-sm font-semibold" style="color: var(--color-text);" for="username">
|
||||
{{ __('Username') }}
|
||||
</label>
|
||||
<p class="text-xs mb-1" style="color: var(--color-text-muted);">
|
||||
{{ __('Your username is what you and others will see in-game') }}
|
||||
</p>
|
||||
<input name="username" value="{{ $user->username }}" class="w-full rounded-lg px-3 py-2 text-sm border-2 focus:ring-0" style="background-color: var(--color-background); color: var(--color-text); border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);" />
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<x-slot:info>
|
||||
{{ __('Make sure to use an email that you remember, if you ever lose your password, your email will be required.') }}
|
||||
</x-slot:info>
|
||||
</x-form.label>
|
||||
<div class="flex flex-col gap-y-1">
|
||||
<label class="block text-sm font-semibold" style="color: var(--color-text);" for="motto">
|
||||
{{ __('Motto') }}
|
||||
</label>
|
||||
<p class="text-xs mb-1" style="color: var(--color-text-muted);">
|
||||
{{ __('Spice up your profile with a nice motto') }}
|
||||
</p>
|
||||
<input name="motto" value="{{ $user->motto }}" class="w-full rounded-lg px-3 py-2 text-sm border-2 focus:ring-0" style="background-color: var(--color-background); color: var(--color-text); border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);" />
|
||||
</div>
|
||||
|
||||
<x-form.input name="mail" type="email" value="{{ $user->mail }}" :autofocus="true" />
|
||||
</div>
|
||||
@if (setting('google_recaptcha_enabled'))
|
||||
<div class="g-recaptcha" data-sitekey="{{ config('habbo.site.recaptcha_site_key') }}"></div>
|
||||
@endif
|
||||
|
||||
@if ($user->settings?->allow_name_change)
|
||||
<div class="flex flex-col gap-y-1">
|
||||
<x-form.label for="username">
|
||||
{{ __('Username') }}
|
||||
@if (setting('cloudflare_turnstile_enabled'))
|
||||
<x-turnstile />
|
||||
@endif
|
||||
|
||||
<x-slot:info>
|
||||
{{ __('Your username is what you and others will see in-game') }}
|
||||
</x-slot:info>
|
||||
</x-form.label>
|
||||
|
||||
<x-form.input name="username" value="{{ $user->username }}" />
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="flex flex-col gap-y-1">
|
||||
<x-form.label for="motto">
|
||||
{{ __('Motto') }}
|
||||
|
||||
<x-slot:info>
|
||||
{{ __('Spice up your profile with a nice motto') }}
|
||||
</x-slot:info>
|
||||
</x-form.label>
|
||||
|
||||
<x-form.input name="motto" value="{{ $user->motto }}" />
|
||||
</div>
|
||||
|
||||
@if (setting('google_recaptcha_enabled'))
|
||||
<div class="g-recaptcha" data-sitekey="{{ config('habbo.site.recaptcha_site_key') }}"></div>
|
||||
@endif
|
||||
|
||||
@if (setting('cloudflare_turnstile_enabled'))
|
||||
<x-turnstile />
|
||||
@endif
|
||||
|
||||
<div class="flex w-full justify-start md:justify-end">
|
||||
<x-form.secondary-button classes="lg:w-1/4">
|
||||
{{ __('Update settings') }}
|
||||
</x-form.secondary-button>
|
||||
</div>
|
||||
</form>
|
||||
</x-content.content-card>
|
||||
<div class="flex w-full justify-start md:justify-end">
|
||||
<button type="submit" class="rounded-lg px-4 py-2 font-semibold transition-all duration-200 hover:opacity-90" style="background-color: var(--color-primary); color: var(--button-text-color);">
|
||||
{{ __('Update settings') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -6,69 +6,64 @@
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 flex flex-col gap-y-3 md:col-span-9">
|
||||
<x-content.content-card icon="hotel-icon" classes="border dark:border-gray-900">
|
||||
<x-slot:title>
|
||||
{{ __('Password settings') }}
|
||||
</x-slot:title>
|
||||
<div class="rounded-lg overflow-hidden" style="background-color: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<div class="flex items-center gap-3 p-3" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
|
||||
<div>
|
||||
<h1 class="text-white font-bold text-lg">{{ __('Password settings') }}</h1>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Change your password by filling out the fields below') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Change your password by filling out the fields below') }}
|
||||
</x-slot:under-title>
|
||||
<div class="p-4">
|
||||
<form action="{{ route('settings.password.update') }}" method="POST" class="flex flex-col gap-y-4">
|
||||
@method('PUT')
|
||||
@csrf
|
||||
|
||||
<form action="{{ route('settings.password.update') }}" method="POST" class="flex flex-col gap-y-4">
|
||||
@method('PUT')
|
||||
@csrf
|
||||
<div class="flex flex-col gap-y-1">
|
||||
<label class="block text-sm font-semibold" style="color: var(--color-text);" for="current_password">
|
||||
{{ __('Current password') }}
|
||||
</label>
|
||||
<p class="text-xs mb-1" style="color: var(--color-text-muted);">
|
||||
{{ __('Enter your current password') }}
|
||||
</p>
|
||||
<input name="current_password" type="password" autofocus class="w-full rounded-lg px-3 py-2 text-sm border-2 focus:ring-0" style="background-color: var(--color-background); color: var(--color-text); border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-y-1">
|
||||
<x-form.label for="current_password">
|
||||
{{ __('Current password') }}
|
||||
<div class="flex flex-col gap-y-1">
|
||||
<label class="block text-sm font-semibold" style="color: var(--color-text);" for="password">
|
||||
{{ __('New password') }}
|
||||
</label>
|
||||
<p class="text-xs mb-1" style="color: var(--color-text-muted);">
|
||||
{{ __('Enter a new secure password. Do not forget to save it somewhere safe') }}
|
||||
</p>
|
||||
<input name="password" type="password" class="w-full rounded-lg px-3 py-2 text-sm border-2 focus:ring-0" style="background-color: var(--color-background); color: var(--color-text); border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);" />
|
||||
</div>
|
||||
|
||||
<x-slot:info>
|
||||
{{ __('Enter your current password') }}
|
||||
</x-slot:info>
|
||||
</x-form.label>
|
||||
<div class="flex flex-col gap-y-1">
|
||||
<label class="block text-sm font-semibold" style="color: var(--color-text);" for="password_confirmation">
|
||||
{{ __('Confirm new password') }}
|
||||
</label>
|
||||
<p class="text-xs mb-1" style="color: var(--color-text-muted);">
|
||||
{{ __('Please confirm your new password') }}
|
||||
</p>
|
||||
<input name="password_confirmation" type="password" class="w-full rounded-lg px-3 py-2 text-sm border-2 focus:ring-0" style="background-color: var(--color-background); color: var(--color-text); border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);" />
|
||||
</div>
|
||||
|
||||
<x-form.input name="current_password" type="password" :autofocus="true" />
|
||||
</div>
|
||||
@if (setting('google_recaptcha_enabled'))
|
||||
<div class="g-recaptcha" data-sitekey="{{ config('habbo.site.recaptcha_site_key') }}"></div>
|
||||
@endif
|
||||
|
||||
<div class="flex flex-col gap-y-1">
|
||||
<x-form.label for="password">
|
||||
{{ __('New password') }}
|
||||
@if (setting('cloudflare_turnstile_enabled'))
|
||||
<x-turnstile />
|
||||
@endif
|
||||
|
||||
<x-slot:info>
|
||||
{{ __('Enter a new secure password. Do not forget to save it somewhere safe') }}
|
||||
</x-slot:info>
|
||||
</x-form.label>
|
||||
|
||||
<x-form.input name="password" type="password" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-y-1">
|
||||
<x-form.label for="password_confirmation">
|
||||
{{ __('Confirm new password') }}
|
||||
|
||||
<x-slot:info>
|
||||
{{ __('Please confirm your new password') }}
|
||||
</x-slot:info>
|
||||
</x-form.label>
|
||||
|
||||
<x-form.input name="password_confirmation" type="password" />
|
||||
</div>
|
||||
|
||||
@if (setting('google_recaptcha_enabled'))
|
||||
<div class="g-recaptcha" data-sitekey="{{ config('habbo.site.recaptcha_site_key') }}"></div>
|
||||
@endif
|
||||
|
||||
@if (setting('cloudflare_turnstile_enabled'))
|
||||
<x-turnstile />
|
||||
@endif
|
||||
|
||||
<div class="flex w-full justify-start md:justify-end">
|
||||
<x-form.secondary-button classes="lg:w-1/4">
|
||||
{{ __('Update password') }}
|
||||
</x-form.secondary-button>
|
||||
</div>
|
||||
</form>
|
||||
</x-content.content-card>
|
||||
<div class="flex w-full justify-start md:justify-end">
|
||||
<button type="submit" class="rounded-lg px-4 py-2 font-semibold transition-all duration-200 hover:opacity-90" style="background-color: var(--color-primary); color: var(--button-text-color);">
|
||||
{{ __('Update password') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -6,204 +6,205 @@
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 flex flex-col gap-y-3 md:col-span-9">
|
||||
<x-content.content-card icon="cog-icon" classes="border">
|
||||
<x-slot:title>
|
||||
{{ __('Preferences') }}
|
||||
</x-slot:title>
|
||||
<div class="rounded-lg overflow-hidden" style="background-color: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<div class="flex items-center gap-3 p-3" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
|
||||
<div>
|
||||
<h1 class="text-white font-bold text-lg">{{ __('Preferences') }}</h1>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Manage your preferences') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Manage your preferences') }}
|
||||
</x-slot:under-title>
|
||||
<div class="p-4">
|
||||
<form action="{{ route('settings.preferences.update') }}" method="POST" class="flex flex-col gap-y-6">
|
||||
@method('PUT')
|
||||
@csrf
|
||||
|
||||
<form action="{{ route('settings.preferences.update') }}" method="POST" class="flex flex-col gap-y-6">
|
||||
@method('PUT')
|
||||
@csrf
|
||||
{{-- Radio Settings --}}
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4" style="color: var(--color-text);">{{ __('Radio Settings') }}</h3>
|
||||
<div class="space-y-4">
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded-lg" style="background-color: color-mix(in srgb, var(--color-text-muted) 5%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<div>
|
||||
<span class="font-semibold text-sm" style="color: var(--color-text);">{{ __('Auto-play radio') }}</span>
|
||||
<p class="text-xs" style="color: var(--color-text-muted);">{{ __('Automatically start playing radio when you visit the site') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="radio_auto_play" value="0">
|
||||
<input type="checkbox" name="radio_auto_play" value="1" {{ old('radio_auto_play', $preferences['radio_auto_play'] ?? false) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
|
||||
{{-- Radio Settings --}}
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4" style="color: var(--color-text);">{{ __('Radio Settings') }}</h3>
|
||||
<div class="space-y-4">
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded" style="background-color: var(--color-surface);">
|
||||
<div>
|
||||
<span class="font-semibold" style="color: var(--color-text);">{{ __('Auto-play radio') }}</span>
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">{{ __('Automatically start playing radio when you visit the site') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="radio_auto_play" value="0">
|
||||
<input type="checkbox" name="radio_auto_play" value="1" {{ old('radio_auto_play', $preferences['radio_auto_play'] ?? false) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded-lg" style="background-color: color-mix(in srgb, var(--color-text-muted) 5%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<div>
|
||||
<span class="font-semibold text-sm" style="color: var(--color-text);">{{ __('Show radio shouts') }}</span>
|
||||
<p class="text-xs" style="color: var(--color-text-muted);">{{ __('Show live shouts panel on the radio player') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="radio_shouts" value="0">
|
||||
<input type="checkbox" name="radio_shouts" value="1" {{ old('radio_shouts', $preferences['radio_shouts'] ?? true) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded" style="background-color: var(--color-surface);">
|
||||
<div>
|
||||
<span class="font-semibold" style="color: var(--color-text);">{{ __('Show radio shouts') }}</span>
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">{{ __('Show live shouts panel on the radio player') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="radio_shouts" value="0">
|
||||
<input type="checkbox" name="radio_shouts" value="1" {{ old('radio_shouts', $preferences['radio_shouts'] ?? true) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded-lg" style="background-color: color-mix(in srgb, var(--color-text-muted) 5%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<div>
|
||||
<span class="font-semibold text-sm" style="color: var(--color-text);">{{ __('Radio notifications') }}</span>
|
||||
<p class="text-xs" style="color: var(--color-text-muted);">{{ __('Show notifications when a new song plays') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="radio_notifications" value="0">
|
||||
<input type="checkbox" name="radio_notifications" value="1" {{ old('radio_notifications', $preferences['radio_notifications'] ?? true) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded" style="background-color: var(--color-surface);">
|
||||
<div>
|
||||
<span class="font-semibold" style="color: var(--color-text);">{{ __('Radio notifications') }}</span>
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">{{ __('Show notifications when a new song plays') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="radio_notifications" value="0">
|
||||
<input type="checkbox" name="radio_notifications" value="1" {{ old('radio_notifications', $preferences['radio_notifications'] ?? true) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<hr style="border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
|
||||
<hr style="border-color: var(--color-text-muted);">
|
||||
{{-- Social Settings --}}
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4" style="color: var(--color-text);">{{ __('Social Settings') }}</h3>
|
||||
<div class="space-y-4">
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded-lg" style="background-color: color-mix(in srgb, var(--color-text-muted) 5%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<div>
|
||||
<span class="font-semibold text-sm" style="color: var(--color-text);">{{ __('Friend requests') }}</span>
|
||||
<p class="text-xs" style="color: var(--color-text-muted);">{{ __('Allow other users to send you friend requests') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="friend_requests" value="0">
|
||||
<input type="checkbox" name="friend_requests" value="1" {{ old('friend_requests', $preferences['friend_requests'] ?? true) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
|
||||
{{-- Social Settings --}}
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4" style="color: var(--color-text);">{{ __('Social Settings') }}</h3>
|
||||
<div class="space-y-4">
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded" style="background-color: var(--color-surface);">
|
||||
<div>
|
||||
<span class="font-semibold" style="color: var(--color-text);">{{ __('Friend requests') }}</span>
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">{{ __('Allow other users to send you friend requests') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="friend_requests" value="0">
|
||||
<input type="checkbox" name="friend_requests" value="1" {{ old('friend_requests', $preferences['friend_requests'] ?? true) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded-lg" style="background-color: color-mix(in srgb, var(--color-text-muted) 5%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<div>
|
||||
<span class="font-semibold text-sm" style="color: var(--color-text);">{{ __('Room invites') }}</span>
|
||||
<p class="text-xs" style="color: var(--color-text-muted);">{{ __('Allow other users to invite you to rooms') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="room_invites" value="0">
|
||||
<input type="checkbox" name="room_invites" value="1" {{ old('room_invites', $preferences['room_invites'] ?? true) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded" style="background-color: var(--color-surface);">
|
||||
<div>
|
||||
<span class="font-semibold" style="color: var(--color-text);">{{ __('Room invites') }}</span>
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">{{ __('Allow other users to invite you to rooms') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="room_invites" value="0">
|
||||
<input type="checkbox" name="room_invites" value="1" {{ old('room_invites', $preferences['room_invites'] ?? true) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<hr style="border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
|
||||
<hr style="border-color: var(--color-text-muted);">
|
||||
{{-- Client Settings --}}
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4" style="color: var(--color-text);">{{ __('Client Settings') }}</h3>
|
||||
<div class="space-y-4">
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded-lg" style="background-color: color-mix(in srgb, var(--color-text-muted) 5%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<div>
|
||||
<span class="font-semibold text-sm" style="color: var(--color-text);">{{ __('Open client in new window') }}</span>
|
||||
<p class="text-xs" style="color: var(--color-text-muted);">{{ __('When enabled, the game client will open in a new browser tab instead of navigating away from the site') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="client_open_mode" value="same">
|
||||
<input type="checkbox" name="client_open_mode" value="new_window" {{ old('client_open_mode', $preferences['client_open_mode'] ?? 'same') === 'new_window' ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
|
||||
{{-- Client Settings --}}
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4" style="color: var(--color-text);">{{ __('Client Settings') }}</h3>
|
||||
<div class="space-y-4">
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded" style="background-color: var(--color-surface);">
|
||||
<div>
|
||||
<span class="font-semibold" style="color: var(--color-text);">{{ __('Open client in new window') }}</span>
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">{{ __('When enabled, the game client will open in a new browser tab instead of navigating away from the site') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="client_open_mode" value="same">
|
||||
<input type="checkbox" name="client_open_mode" value="new_window" {{ old('client_open_mode', $preferences['client_open_mode'] ?? 'same') === 'new_window' ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
<label class="flex items-center justify-between p-3 rounded-lg" style="background-color: color-mix(in srgb, var(--color-text-muted) 5%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<div>
|
||||
<span class="font-semibold text-sm" style="color: var(--color-text);">{{ __('Client volume') }}</span>
|
||||
<p class="text-xs" style="color: var(--color-text-muted);">{{ __('Default volume for the game client') }}</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-sm" style="color: var(--color-text-muted);">0</span>
|
||||
<input type="range" name="client_volume" min="0" max="100" value="{{ old('client_volume', $preferences['client_volume'] ?? 50) }}"
|
||||
class="w-24 h-2 rounded-full cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
<span class="text-sm" style="color: var(--color-text-muted);">100</span>
|
||||
<span class="text-sm font-semibold min-w-[2rem] text-center" id="volume-display" style="color: var(--color-text);">{{ old('client_volume', $preferences['client_volume'] ?? 50) }}%</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="flex items-center justify-between p-3 rounded" style="background-color: var(--color-surface);">
|
||||
<div>
|
||||
<span class="font-semibold" style="color: var(--color-text);">{{ __('Client volume') }}</span>
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">{{ __('Default volume for the game client') }}</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-sm" style="color: var(--color-text-muted);">0</span>
|
||||
<input type="range" name="client_volume" min="0" max="100" value="{{ old('client_volume', $preferences['client_volume'] ?? 50) }}"
|
||||
class="w-24 h-2 rounded-full cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
<span class="text-sm" style="color: var(--color-text-muted);">100</span>
|
||||
<span class="text-sm font-semibold min-w-[2rem] text-center" id="volume-display" style="color: var(--color-text);">{{ old('client_volume', $preferences['client_volume'] ?? 50) }}%</span>
|
||||
</div>
|
||||
</label>
|
||||
<hr style="border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{{-- Layout Settings --}}
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4" style="color: var(--color-text);">{{ __('Layout Settings') }}</h3>
|
||||
<div class="space-y-4">
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded-lg" style="background-color: color-mix(in srgb, var(--color-text-muted) 5%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<div>
|
||||
<span class="font-semibold text-sm" style="color: var(--color-text);">{{ __('Compact mode') }}</span>
|
||||
<p class="text-xs" style="color: var(--color-text-muted);">{{ __('Use a more compact layout with tighter spacing') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="compact_mode" value="0">
|
||||
<input type="checkbox" name="compact_mode" value="1" {{ old('compact_mode', $preferences['compact_mode'] ?? false) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
|
||||
<hr style="border-color: var(--color-text-muted);">
|
||||
<label class="flex items-center justify-between p-3 rounded-lg" style="background-color: color-mix(in srgb, var(--color-text-muted) 5%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<div>
|
||||
<span class="font-semibold text-sm" style="color: var(--color-text);">{{ __('Default page') }}</span>
|
||||
<p class="text-xs" style="color: var(--color-text-muted);">{{ __('Page to show after logging in') }}</p>
|
||||
</div>
|
||||
<select name="default_page"
|
||||
class="rounded-lg border px-3 py-2 text-sm focus:outline-none"
|
||||
style="background-color: var(--color-background); color: var(--color-text); border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<option value="me" {{ old('default_page', $preferences['default_page'] ?? 'me') === 'me' ? 'selected' : '' }}>{{ __('Me page') }}</option>
|
||||
<option value="hotel" {{ old('default_page', $preferences['default_page'] ?? 'me') === 'hotel' ? 'selected' : '' }}>{{ __('Hotel') }}</option>
|
||||
<option value="community" {{ old('default_page', $preferences['default_page'] ?? 'me') === 'community' ? 'selected' : '' }}>{{ __('Community') }}</option>
|
||||
<option value="shop" {{ old('default_page', $preferences['default_page'] ?? 'me') === 'shop' ? 'selected' : '' }}>{{ __('Shop') }}</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Layout Settings --}}
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4" style="color: var(--color-text);">{{ __('Layout Settings') }}</h3>
|
||||
<div class="space-y-4">
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded" style="background-color: var(--color-surface);">
|
||||
<div>
|
||||
<span class="font-semibold" style="color: var(--color-text);">{{ __('Compact mode') }}</span>
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">{{ __('Use a more compact layout with tighter spacing') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="compact_mode" value="0">
|
||||
<input type="checkbox" name="compact_mode" value="1" {{ old('compact_mode', $preferences['compact_mode'] ?? false) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
<hr style="border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
|
||||
<label class="flex items-center justify-between p-3 rounded" style="background-color: var(--color-surface);">
|
||||
<div>
|
||||
<span class="font-semibold" style="color: var(--color-text);">{{ __('Default page') }}</span>
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">{{ __('Page to show after logging in') }}</p>
|
||||
</div>
|
||||
<select name="default_page"
|
||||
class="border-2 rounded-lg px-3 py-1.5 text-sm font-semibold cursor-pointer" style="background-color: var(--color-background); color: var(--color-text); border-color: var(--input-border-color, var(--color-text-muted));">
|
||||
<option value="me" {{ old('default_page', $preferences['default_page'] ?? 'me') === 'me' ? 'selected' : '' }}>{{ __('Me page') }}</option>
|
||||
<option value="hotel" {{ old('default_page', $preferences['default_page'] ?? 'me') === 'hotel' ? 'selected' : '' }}>{{ __('Hotel') }}</option>
|
||||
<option value="community" {{ old('default_page', $preferences['default_page'] ?? 'me') === 'community' ? 'selected' : '' }}>{{ __('Community') }}</option>
|
||||
<option value="shop" {{ old('default_page', $preferences['default_page'] ?? 'me') === 'shop' ? 'selected' : '' }}>{{ __('Shop') }}</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{{-- Privacy Settings --}}
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4" style="color: var(--color-text);">{{ __('Privacy Settings') }}</h3>
|
||||
<div class="space-y-4">
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded-lg" style="background-color: color-mix(in srgb, var(--color-text-muted) 5%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<div>
|
||||
<span class="font-semibold text-sm" style="color: var(--color-text);">{{ __('Hide online status') }}</span>
|
||||
<p class="text-xs" style="color: var(--color-text-muted);">{{ __('Hide your online status from other users on the site') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="hide_online" value="0">
|
||||
<input type="checkbox" name="hide_online" value="1" {{ old('hide_online', $preferences['hide_online'] ?? false) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="border-color: var(--color-text-muted);">
|
||||
<hr style="border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
|
||||
{{-- Privacy Settings --}}
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4" style="color: var(--color-text);">{{ __('Privacy Settings') }}</h3>
|
||||
<div class="space-y-4">
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded" style="background-color: var(--color-surface);">
|
||||
<div>
|
||||
<span class="font-semibold" style="color: var(--color-text);">{{ __('Hide online status') }}</span>
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">{{ __('Hide your online status from other users on the site') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="hide_online" value="0">
|
||||
<input type="checkbox" name="hide_online" value="1" {{ old('hide_online', $preferences['hide_online'] ?? false) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{{-- Notification Settings --}}
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4" style="color: var(--color-text);">{{ __('Notification Settings') }}</h3>
|
||||
<div class="space-y-4">
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded-lg" style="background-color: color-mix(in srgb, var(--color-text-muted) 5%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<div>
|
||||
<span class="font-semibold text-sm" style="color: var(--color-text);">{{ __('Email notifications') }}</span>
|
||||
<p class="text-xs" style="color: var(--color-text-muted);">{{ __('Receive email notifications for important updates') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="email_notifications" value="0">
|
||||
<input type="checkbox" name="email_notifications" value="1" {{ old('email_notifications', $preferences['email_notifications'] ?? false) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="border-color: var(--color-text-muted);">
|
||||
|
||||
{{-- Notification Settings --}}
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4" style="color: var(--color-text);">{{ __('Notification Settings') }}</h3>
|
||||
<div class="space-y-4">
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded" style="background-color: var(--color-surface);">
|
||||
<div>
|
||||
<span class="font-semibold" style="color: var(--color-text);">{{ __('Email notifications') }}</span>
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">{{ __('Receive email notifications for important updates') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="email_notifications" value="0">
|
||||
<input type="checkbox" name="email_notifications" value="1" {{ old('email_notifications', $preferences['email_notifications'] ?? false) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex w-full justify-start md:justify-end">
|
||||
<x-form.primary-button classes="lg:w-1/4">
|
||||
{{ __('Save preferences') }}
|
||||
</x-form.primary-button>
|
||||
</div>
|
||||
</form>
|
||||
</x-content.content-card>
|
||||
<div class="flex w-full justify-start md:justify-end">
|
||||
<button type="submit" class="rounded-lg px-4 py-2 font-semibold transition-all duration-200 hover:opacity-90" style="background-color: var(--color-primary); color: var(--button-text-color);">
|
||||
{{ __('Save preferences') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@push('javascript')
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var volumeInput = document.querySelector('input[name="client_volume"]');
|
||||
var volumeDisplay = document.getElementById('volume-display');
|
||||
if (volumeInput && volumeDisplay) {
|
||||
volumeInput.addEventListener('input', function() {
|
||||
volumeDisplay.textContent = this.value + '%';
|
||||
});
|
||||
}
|
||||
});
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var volumeInput = document.querySelector('input[name="client_volume"]');
|
||||
var volumeDisplay = document.getElementById('volume-display');
|
||||
if (volumeInput && volumeDisplay) {
|
||||
volumeInput.addEventListener('input', function() {
|
||||
volumeDisplay.textContent = this.value + '%';
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
</x-app-layout>
|
||||
|
||||
@@ -6,67 +6,68 @@
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 flex flex-col gap-y-3 md:col-span-9">
|
||||
<x-content.content-card icon="hotel-icon" classes="border dark:border-gray-900">
|
||||
<x-slot:title>
|
||||
{{ __('Session logs') }}
|
||||
</x-slot:title>
|
||||
<div class="rounded-lg overflow-hidden" style="background-color: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<div class="flex items-center gap-3 p-3" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
|
||||
<div>
|
||||
<h1 class="text-white font-bold text-lg">{{ __('Session logs') }}</h1>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Keep an eye on all your active sessions') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Keep an eye on all your active sessions') }}
|
||||
</x-slot:under-title>
|
||||
<div class="p-4">
|
||||
<div class="overflow-hidden overflow-x-auto rounded-lg" style="border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<table class="min-w-full text-sm divide-y" style="border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<thead style="background-color: color-mix(in srgb, var(--color-text-muted) 5%, transparent);">
|
||||
<tr>
|
||||
<th class="whitespace-nowrap px-4 py-3 text-left font-medium" style="color: var(--color-text);">
|
||||
{{ __('IP') }}
|
||||
</th>
|
||||
<th class="whitespace-nowrap px-4 py-3 text-left font-medium" style="color: var(--color-text);">
|
||||
{{ __('IP Current Device') }}
|
||||
</th>
|
||||
<th class="whitespace-nowrap px-4 py-3 text-left font-medium" style="color: var(--color-text);">
|
||||
{{ __('Is Desktop') }}
|
||||
</th>
|
||||
<th class="whitespace-nowrap px-4 py-3 text-left font-medium" style="color: var(--color-text);">
|
||||
{{ __('Platform') }}
|
||||
</th>
|
||||
<th class="whitespace-nowrap px-4 py-3 text-left font-medium" style="color: var(--color-text);">
|
||||
{{ __('Browser') }}
|
||||
</th>
|
||||
<th class="whitespace-nowrap px-4 py-3 text-left font-medium" style="color: var(--color-text);">
|
||||
{{ __('Last Activity') }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<div class="overflow-hidden overflow-x-auto rounded border border-[var(--color-text-muted)]">
|
||||
<table class="min-w-full text-sm divide-y divide-[var(--color-text-muted)]">
|
||||
<thead class="bg-[var(--color-surface)]">
|
||||
<tr>
|
||||
<th class="whitespace-nowrap px-4 py-2 text-left font-medium text-[var(--color-text)]">
|
||||
{{ __('IP') }}
|
||||
</th>
|
||||
<th class="whitespace-nowrap px-4 py-2 text-left font-medium text-[var(--color-text)]">
|
||||
{{ __('IP Current Device') }}
|
||||
</th>
|
||||
<th class="whitespace-nowrap px-4 py-2 text-left font-medium text-[var(--color-text)]">
|
||||
{{ __('Is Desktop') }}
|
||||
</th>
|
||||
<th class="whitespace-nowrap px-4 py-2 text-left font-medium text-[var(--color-text)]">
|
||||
{{ __('Platform') }}
|
||||
</th>
|
||||
<th class="whitespace-nowrap px-4 py-2 text-left font-medium text-[var(--color-text)]">
|
||||
{{ __('Browser') }}
|
||||
</th>
|
||||
<th class="whitespace-nowrap px-4 py-2 text-left font-medium text-[var(--color-text)]">
|
||||
{{ __('Last Activity') }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody class="divide-y divide-[var(--color-text-muted)]">
|
||||
@forelse ($logs as $log)
|
||||
<tr>
|
||||
<td class="whitespace-nowrap px-4 py-2 font-medium text-[var(--color-text)]">
|
||||
{{ $log->ip_address }}
|
||||
</td>
|
||||
<td class="px-4 py-2 text-[var(--color-text-muted)]">
|
||||
{{ $log->is_current_device ? 'true' : 'false' }}</td>
|
||||
<td class="px-4 py-2 text-[var(--color-text-muted)]">
|
||||
{{ $log->agent['is_desktop'] ? 'true' : 'false' }}</td>
|
||||
<td class="px-4 py-2 text-[var(--color-text-muted)]">{{ $log->agent['platform'] }}
|
||||
</td>
|
||||
<td class="px-4 py-2 text-[var(--color-text-muted)]">{{ $log->agent['browser'] }}</td>
|
||||
<td class="whitespace-nowrap px-4 py-2 text-[var(--color-text-muted)]">
|
||||
{{ $log->last_active }}</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td class="whitespace-nowrap px-4 py-2 text-center text-[var(--color-text-muted)]"
|
||||
colspan="3">
|
||||
{{ __('No session logs found') }}
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
<tbody class="divide-y" style="border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
@forelse ($logs as $log)
|
||||
<tr>
|
||||
<td class="whitespace-nowrap px-4 py-3 font-medium" style="color: var(--color-text);">
|
||||
{{ $log->ip_address }}
|
||||
</td>
|
||||
<td class="px-4 py-3" style="color: var(--color-text-muted);">
|
||||
{{ $log->is_current_device ? 'true' : 'false' }}</td>
|
||||
<td class="px-4 py-3" style="color: var(--color-text-muted);">
|
||||
{{ $log->agent['is_desktop'] ? 'true' : 'false' }}</td>
|
||||
<td class="px-4 py-3" style="color: var(--color-text-muted);">{{ $log->agent['platform'] }}
|
||||
</td>
|
||||
<td class="px-4 py-3" style="color: var(--color-text-muted);">{{ $log->agent['browser'] }}</td>
|
||||
<td class="whitespace-nowrap px-4 py-3" style="color: var(--color-text-muted);">
|
||||
{{ $log->last_active }}</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td class="whitespace-nowrap px-4 py-3 text-center" style="color: var(--color-text-muted);"
|
||||
colspan="6">
|
||||
{{ __('No session logs found') }}
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -6,102 +6,105 @@
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 flex flex-col gap-y-3 md:col-span-9">
|
||||
<x-content.content-card icon="hotel-icon" classes="border dark:border-gray-900">
|
||||
<x-slot:title>
|
||||
{{ __('Two factor authentication') }}
|
||||
</x-slot:title>
|
||||
<div class="rounded-lg overflow-hidden" style="background-color: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<div class="flex items-center gap-3 p-3" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
|
||||
<div>
|
||||
<h1 class="text-white font-bold text-lg">{{ __('Two factor authentication') }}</h1>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Add an extra layer of security to your account by enabling two-factor authentication') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Add an extra layer of security to your account by enabling two-factor authentication') }}
|
||||
</x-slot:under-title>
|
||||
<div class="p-4">
|
||||
@if (auth()->user()->two_factor_confirmed)
|
||||
<form action="{{ route('user.two-factor.disable') }}" method="post">
|
||||
@csrf
|
||||
@method('delete')
|
||||
|
||||
<!-- 2FA enabled, we display the QR code : -->
|
||||
@if (auth()->user()->two_factor_confirmed)
|
||||
<form action="{{ route('user.two-factor.disable') }}" method="post">
|
||||
@csrf
|
||||
@method('delete')
|
||||
<button type="submit" class="rounded-lg px-4 py-2 font-semibold transition-all duration-200 hover:opacity-90" style="background-color: color-mix(in srgb, var(--color-text-muted) 20%, transparent); color: var(--button-danger-color, #ef4444);">
|
||||
{{ __('Disable 2FA') }}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<x-form.danger-button>
|
||||
{{ __('Disable 2FA') }}
|
||||
</x-form.danger-button>
|
||||
</form>
|
||||
@elseif(auth()->user()->two_factor_secret)
|
||||
<div class="space-y-4">
|
||||
<p class="text-sm" style="color: var(--color-text);">{{ __('Validate your two-factor enabling by scanning the following QR-code and enter your auto-generated 2-factor code from your phone.') }}
|
||||
</p>
|
||||
|
||||
{{-- 2FA enabled but not yet confirmed, we show the QRcode and ask for confirmation --}}
|
||||
@elseif(auth()->user()->two_factor_secret)
|
||||
<p>{{ __('Validate your two-factor enabling by scanning the following QR-code and enter your auto-generated 2-factor code from your phone.') }}
|
||||
</p>
|
||||
<div class="flex flex-col items-center md:flex-row md:items-start md:justify-center">
|
||||
<div class="flex gap-x-8 rounded-lg px-4 py-3" style="background-color: color-mix(in srgb, var(--color-text-muted) 5%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<span class="flex items-center">
|
||||
{!! auth()->user()->twoFactorQrCodeSvg() !!}
|
||||
</span>
|
||||
|
||||
<div class="mt-4 flex flex-col items-center md:flex-row md:items-start md:justify-center">
|
||||
<div class="flex gap-x-8 rounded bg-[var(--color-surface)] px-4 py-2">
|
||||
<span class="flex items-center">
|
||||
{!! auth()->user()->twoFactorQrCodeSvg() !!}
|
||||
</span>
|
||||
<div>
|
||||
<strong class="text-sm" style="color: var(--color-text);">
|
||||
{{ __('Recovery codes:') }}
|
||||
</strong>
|
||||
|
||||
<div>
|
||||
<strong>
|
||||
{{ __('Recovery codes:') }}
|
||||
</strong>
|
||||
<ul class="mt-2 space-y-1">
|
||||
@foreach (auth()->user()->recoveryCodes() as $code)
|
||||
<li class="text-sm" style="color: var(--color-text-muted);">{{ $code }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
@foreach (auth()->user()->recoveryCodes() as $code)
|
||||
<li>{{ $code }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs italic" style="color: var(--color-text-muted);">
|
||||
{{ __('Please save your recovery codes somewhere safe! If you lose access to your 2FA codes, those recovery codes will be needed to regain access your account.') }}
|
||||
</div>
|
||||
|
||||
<div class="mt-2 flex justify-center text-xs italic text-[var(--color-text-muted)]">
|
||||
<div class="w-full lg:w-[480px]">
|
||||
{{ __('Please save your recovery codes somewhere safe! If you lose access to your 2FA codes, those recovery codes will be needed to regain access your account.') }}
|
||||
</div>
|
||||
</div>
|
||||
<form action="{{ route('two-factor.verify') }}" method="POST" class="flex flex-col gap-y-4">
|
||||
@csrf
|
||||
|
||||
<form action="{{ route('two-factor.verify') }}" method="POST" class="mt-8">
|
||||
@csrf
|
||||
<div class="flex flex-col gap-y-1">
|
||||
<label class="block text-sm font-semibold" style="color: var(--color-text);" for="code">
|
||||
{{ __('Code') }}
|
||||
</label>
|
||||
<p class="text-xs mb-1" style="color: var(--color-text-muted);">
|
||||
{{ __('Please scan the QR-code above with your phone to retrieve your two-factor authentication code.') }}
|
||||
</p>
|
||||
<input name="code" placeholder="{{ __('Code') }}" class="w-full rounded-lg px-3 py-2 text-sm border-2 focus:ring-0" style="background-color: var(--color-background); color: var(--color-text); border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);" />
|
||||
</div>
|
||||
|
||||
<x-form.label for="code">
|
||||
{{ __('Code') }}
|
||||
@if (setting('google_recaptcha_enabled'))
|
||||
<div class="g-recaptcha" data-sitekey="{{ config('habbo.site.recaptcha_site_key') }}"></div>
|
||||
@endif
|
||||
|
||||
<x-slot:info>
|
||||
{{ __('Please scan the QR-code above with your phone to retrieve your two-factor authentication code.') }}
|
||||
</x-slot:info>
|
||||
</x-form.label>
|
||||
@if (setting('cloudflare_turnstile_enabled'))
|
||||
<x-turnstile />
|
||||
@endif
|
||||
|
||||
<x-form.input classes="mb-3" name="code" placeholder="{{ __('Code') }}" />
|
||||
<div class="flex w-full justify-start md:justify-end">
|
||||
<button type="submit" class="rounded-lg px-4 py-2 font-semibold transition-all duration-200 hover:opacity-90" style="background-color: var(--color-primary); color: var(--button-text-color);">
|
||||
{{ __('Verify 2FA') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@else
|
||||
<div class="flex flex-col">
|
||||
<div class="flex w-full flex-col gap-y-3 text-sm" style="color: var(--color-text);">
|
||||
<p>
|
||||
{{ __('Here at :hotel we take security very serious and therefore we offer you as a user a way to secure your beloved account even further, by allowing you to enable Googles 2-factor authentication!', ['hotel' => setting('hotel_name')]) }}
|
||||
</p>
|
||||
|
||||
@if (setting('google_recaptcha_enabled'))
|
||||
<div class="g-recaptcha" data-sitekey="{{ config('habbo.site.recaptcha_site_key') }}"></div>
|
||||
@endif
|
||||
<p>
|
||||
{{ __('2-factor authentication adds an extra layer of security to your account, making it physical impossible to access it without having access to your mobile phone as only your phone will contain the 2-factor authentication code which will be re-generated every 30 seconds automatically') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@if (setting('cloudflare_turnstile_enabled'))
|
||||
<x-turnstile />
|
||||
@endif
|
||||
|
||||
<x-form.secondary-button classes="mt-4">
|
||||
{{ __('Verify 2FA') }}
|
||||
</x-form.secondary-button>
|
||||
</form>
|
||||
@else
|
||||
<div class="flex flex-col items-end">
|
||||
<div class="flex w-full flex-col gap-y-3 text-[var(--color-text)]">
|
||||
<p>
|
||||
{{ __('Here at :hotel we take security very serious and therefore we offer you as a user a way to secure your beloved account even further, by allowing you to enable Googles 2-factor authentication!', ['hotel' => setting('hotel_name')]) }}
|
||||
</p>
|
||||
|
||||
<p>
|
||||
{{ __('2-factor authentication adds an extra layer of security to your account, making it physical impossible to access it without having access to your mobile phone as only your phone will contain the 2-factor authentication code which will be re-generated every 30 seconds automatically') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form action="{{ route('user.two-factor.enable') }}" method="post" class="mt-8">
|
||||
@csrf
|
||||
<x-form.secondary-button>
|
||||
{{ __('Activate 2FA') }}
|
||||
</x-form.secondary-button>
|
||||
</form>
|
||||
</div>
|
||||
@endif
|
||||
</x-content.content-card>
|
||||
<div class="flex w-full justify-start md:justify-end mt-6">
|
||||
<form action="{{ route('user.two-factor.enable') }}" method="post">
|
||||
@csrf
|
||||
<button type="submit" class="rounded-lg px-4 py-2 font-semibold transition-all duration-200 hover:opacity-90" style="background-color: var(--color-primary); color: var(--button-text-color);">
|
||||
{{ __('Activate 2FA') }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
Reference in New Issue
Block a user