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
@@ -1,28 +1,26 @@
|
||||
<x-app-layout>
|
||||
@push('title', auth()->user()->username)
|
||||
|
||||
<div class="col-span-12 space-y-4 lg:col-span-9">
|
||||
<div class="col-span-12 lg:col-span-9 space-y-4">
|
||||
<x-user.me-backdrop :user="$user" />
|
||||
|
||||
<div class="rounded-xl border-2 shadow-sm lg:flex lg:items-center lg:justify-between overflow-hidden"
|
||||
style="background-color: var(--color-surface); border-color: var(--border-color);">
|
||||
<div class="flex items-center gap-3 p-3" style="background-color: var(--color-primary);">
|
||||
<img src="{{ asset('/assets/images/icons/online-friends.png') }}" alt="{{ __('Online Friends') }}"
|
||||
class="w-6 h-6">
|
||||
<span class="text-sm font-semibold" style="color: var(--button-text-color)">{{ __('Online Friends') }}</span>
|
||||
<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%);">
|
||||
<img src="{{ asset('/assets/images/icons/online-friends.png') }}" alt="{{ __('Online Friends') }}" class="w-6 h-6">
|
||||
<span class="text-sm font-semibold text-white">{{ __('Online Friends') }}</span>
|
||||
</div>
|
||||
|
||||
<div class="relative flex flex-wrap items-center justify-center gap-3 p-3">
|
||||
@foreach ($onlineFriends as $friend)
|
||||
@forelse ($onlineFriends as $friend)
|
||||
<div data-popover-target="friend-{{ $friend->username }}"
|
||||
class="inline-block h-12 w-12 rounded-full border-2 bg-center bg-no-repeat hover:border-[var(--border-color)] hover:scale-110 transition-all duration-300 cursor-pointer"
|
||||
style="image-rendering: pixelated; border-color: var(--color-text-muted); background-image: url({{ setting('avatar_imager') }}{{ $friend->look }}&direction=3&head_direction=3&gesture=sml&action=wlk,wav&size=l&img_format=gif);">
|
||||
class="inline-block h-12 w-12 rounded-full border-2 bg-center bg-no-repeat hover:scale-110 transition-all duration-300 cursor-pointer"
|
||||
style="image-rendering: pixelated; border-color: color-mix(in srgb, var(--color-text-muted) 30%, transparent); background-image: url({{ setting('avatar_imager') }}{{ $friend->look }}&direction=3&head_direction=3&gesture=sml&action=wlk,wav&size=l&img_format=gif);">
|
||||
</div>
|
||||
|
||||
<div data-popover id="friend-{{ $friend->username }}" role="tooltip"
|
||||
class="invisible absolute z-10 inline-block w-64 rounded-lg border shadow-xl opacity-0 transition-opacity duration-300"
|
||||
style="background-color: var(--color-surface); border-color: var(--color-text-muted); color: var(--color-text);">
|
||||
<div class="rounded-t-lg border-b px-4 py-3" style="border-color: var(--color-text-muted); background-color: var(--color-surface);">
|
||||
class="invisible absolute z-10 inline-block w-64 rounded-lg border shadow-xl opacity-0 transition-opacity duration-300"
|
||||
style="background-color: var(--color-surface); border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent); color: var(--color-text);">
|
||||
<div class="rounded-t-lg border-b px-4 py-3" style="border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent); background-color: var(--color-surface);">
|
||||
<div class="flex items-center justify-between font-semibold" style="color: var(--color-text)">
|
||||
{{ $friend->username }}
|
||||
<span class="w-2 h-2 rounded-full bg-green-500"></span>
|
||||
@@ -38,74 +36,86 @@
|
||||
<span class="ml-1" style="color: var(--color-text)">{{ date(config('habbo.site.date_format'), $friend->last_online) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div data-popper-arrow class="absolute h-2 w-2 rotate-45 border-l border-b" style="border-color: var(--color-text-muted); background-color: var(--color-surface);"></div>
|
||||
<div data-popper-arrow class="absolute h-2 w-2 rotate-45 border-l border-b" style="border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent); background-color: var(--color-surface);"></div>
|
||||
</div>
|
||||
@endforeach
|
||||
@empty
|
||||
<p class="text-sm" style="color: var(--color-text-muted)">{{ __('No friends online right now.') }}</p>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-content.content-card icon="friends-icon" classes="border-2 dark:border-gray-900" style="border-color: var(--border-color);">
|
||||
<x-slot:title>
|
||||
{{ sprintf(__('User Referrals (%s/%s)'), auth()->user()->referrals->referrals_total ?? 0, setting('referrals_needed')) }}
|
||||
</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%);">
|
||||
<span class="text-white font-bold text-lg">{{ sprintf(__('User Referrals (%s/%s)'), auth()->user()->referrals->referrals_total ?? 0, setting('referrals_needed')) }}</span>
|
||||
</div>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Referral new users and be rewarded by in-game goods') }}
|
||||
</x-slot:under-title>
|
||||
|
||||
<div class="px-2 text-sm text-[var(--color-text)] space-y-4">
|
||||
<div class="p-4 space-y-4 text-sm" style="color: var(--color-text);">
|
||||
<p>
|
||||
{{ __('Here at :hotel we have added a referral system, allowing you to obtain a bonus for every :needed users that registers through your referral link will allow you to claim a reward of :amount diamonds!', ['hotel' => setting('hotel_name'), 'needed' => setting('referrals_needed'), 'amount' => setting('referral_reward_amount')]) }}
|
||||
</p>
|
||||
|
||||
<div class="bg-yellow-500/10 border border-yellow-500/30 rounded-lg p-3">
|
||||
<p class="text-yellow-400/80 text-xs">
|
||||
⚠️ {{ __('Boosting referrals by making own accounts will lead to removal of all progress, currency, inventory and a potential ban') }}
|
||||
<div class="p-3 rounded-lg" style="background-color: color-mix(in srgb, #eab308 10%, transparent); border: 1px solid color-mix(in srgb, #eab308 30%, transparent);">
|
||||
<p class="text-xs" style="color: color-mix(in srgb, #ca8a04 80%, transparent);">
|
||||
‍⚠️ {{ __('Boosting referrals by making own accounts will lead to removal of all progress, currency, inventory and a potential ban') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-12 gap-2">
|
||||
<x-form.input classes="col-span-12 md:col-span-10 text-sm" name="referral"
|
||||
value="{{ sprintf('%s/register/%s', config('habbo.site.site_url'), auth()->user()->referral_code) }}"
|
||||
:autofocus="false" :readonly="true" />
|
||||
<div class="col-span-12 md:col-span-10">
|
||||
<input type="text" id="referral" readonly
|
||||
value="{{ sprintf('%s/register/%s', config('habbo.site.site_url'), auth()->user()->referral_code) }}"
|
||||
class="w-full 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);">
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 flex md:col-span-2" onclick="copyCode()">
|
||||
<x-form.secondary-button>
|
||||
<div class="col-span-12 md:col-span-2">
|
||||
<button onclick="copyCode()"
|
||||
class="w-full rounded-lg px-4 py-2 text-sm font-semibold transition-all duration-200 hover:opacity-90"
|
||||
style="background-color: var(--color-primary); color: var(--button-text-color);">
|
||||
{{ __('Copy code') }}
|
||||
</x-form.secondary-button>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if ((auth()->user()->referrals->referrals_total ?? 0) >= (int) setting('referrals_needed'))
|
||||
<a href="{{ route('claim.referral-reward') }}" class="text-decoration-none">
|
||||
<x-form.secondary-button classes="mt-2">
|
||||
<a href="{{ route('claim.referral-reward') }}" class="block text-center">
|
||||
<button class="w-full rounded-lg px-4 py-3 text-sm font-semibold transition-all duration-200 hover:opacity-90"
|
||||
style="background-color: var(--color-primary); color: var(--button-text-color);">
|
||||
{{ __('Claim your referrals reward!') }}
|
||||
</x-form.secondary-button>
|
||||
</button>
|
||||
</a>
|
||||
@else
|
||||
<button disabled class="mt-2 w-full rounded bg-[var(--color-text-muted)] p-3 text-[var(--color-text)] cursor-not-allowed opacity-60">
|
||||
<button disabled class="mt-2 w-full rounded-lg p-3 text-sm cursor-not-allowed opacity-60"
|
||||
style="background-color: color-mix(in srgb, var(--color-text-muted) 20%, transparent); color: var(--color-text);">
|
||||
{{ sprintf(__('You need to refer :needed more users, before being able to claim your reward', ['needed' => max(0, (int) setting('referrals_needed') - (auth()->user()->referrals->referrals_total ?? 0))]), auth()->user()->referrals->referrals_total ?? 0) }}
|
||||
</button>
|
||||
@endif
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 space-y-4 lg:col-span-3">
|
||||
<div class="relative w-full" style="height: 213px">
|
||||
<div class="relative swiper articles-slider">
|
||||
<div class="swiper-wrapper">
|
||||
@forelse ($articles as $article)
|
||||
<x-article-card :for-slider="true" :article="$article" />
|
||||
@empty
|
||||
<x-filler-article-card />
|
||||
@endforelse
|
||||
<div class="col-span-12 lg:col-span-3 space-y-4">
|
||||
<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%);">
|
||||
<span class="text-white font-bold text-lg">{{ __('Latest News') }}</span>
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<div class="relative w-full swiper articles-slider" style="height: 215px;">
|
||||
<div class="swiper-wrapper">
|
||||
@forelse ($articles as $article)
|
||||
<x-article-card :for-slider="true" :article="$article" />
|
||||
@empty
|
||||
<div class="swiper-slide flex items-center justify-center" style="color: var(--color-text-muted)">
|
||||
{{ __('No articles yet.') }}
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
<div class="swiper-pagination" style="bottom: 0px !important; z-index: 0;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-pagination" style="bottom: 0px !important; z-index: 0;"></div>
|
||||
</div>
|
||||
|
||||
<div class="!mt-3">
|
||||
<div>
|
||||
<x-user.discord-widget />
|
||||
</div>
|
||||
</div>
|
||||
@@ -136,4 +146,4 @@
|
||||
}
|
||||
</script>
|
||||
@endpush
|
||||
</x-app-layout>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -1,240 +1,251 @@
|
||||
<x-app-layout>
|
||||
@push('title', $user->username)
|
||||
@push('title', $user->username)
|
||||
|
||||
<div class="col-span-12">
|
||||
<div class="grid grid-cols-1! gap-y-14">
|
||||
<div class="grid grid-cols-3! gap-x-8">
|
||||
<div
|
||||
class="col-span-3 md:col-span-1! h-[150px] lg:h-[220px] profile-bg rounded-lg relative flex gap-x-2 items-center overflow-hidden"
|
||||
style="color: var(--color-text)">
|
||||
<img class="mt-14 lg:mt-0" style="image-rendering: pixelated;"
|
||||
src="{{ setting('avatar_imager') }}{{ $user->look }}&direction=2&head_direction=3&gesture=sml&action=wav&size=l"
|
||||
alt="">
|
||||
<div class="col-span-12">
|
||||
<div class="flex flex-col gap-y-6">
|
||||
{{-- Profile Header --}}
|
||||
<div class="rounded-lg relative overflow-hidden" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 60%, #000) 100%);">
|
||||
<div class="absolute inset-0 bg-black/30 z-10"></div>
|
||||
|
||||
<div class="flex flex-col">
|
||||
<h3 class="text-xl font-semibold" style="color: var(--color-text-muted)">{{ __('My name is,') }}</h3>
|
||||
<h2 class="text-4xl">
|
||||
{{ $user->username }}
|
||||
</h2>
|
||||
<div class="relative z-20 flex items-center gap-x-4 p-4 md:p-6">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="rounded-full overflow-hidden border-4" style="width: 100px; height: 100px; border-color: color-mix(in srgb, var(--color-primary) 50%, #fff); background-color: var(--color-surface);">
|
||||
<img style="image-rendering: pixelated; width: 100%; height: 100%; object-fit: cover; object-position: center -10px;"
|
||||
src="{{ setting('avatar_imager') }}{{ $user->look }}&direction=2&head_direction=3&gesture=sml&action=wav&size=l"
|
||||
alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="text-lg font-semibold italic" style="color: var(--color-text-muted)">{{ $user->motto }}</h4>
|
||||
@if(isset($showOnline) && $showOnline)
|
||||
<small class="text-xs mt-1 opacity-70">{{ __('Last online:') }} {{ $lastLogin ?? 'Unknown' }}</small>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col text-white">
|
||||
<h3 class="text-lg font-semibold opacity-80">{{ __('My name is,') }}</h3>
|
||||
<h2 class="text-3xl font-bold text-shadow">
|
||||
{{ $user->username }}
|
||||
</h2>
|
||||
<h4 class="text-base font-semibold italic opacity-80">{{ $user->motto }}</h4>
|
||||
@if(isset($showOnline) && $showOnline)
|
||||
<small class="text-xs mt-1 opacity-60">{{ __('Last online:') }} {{ $lastLogin ?? 'Unknown' }}</small>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if(isset($showStats) && $showStats)
|
||||
<div class="mt-4 flex flex-wrap gap-4 p-3 rounded-lg" style="background: var(--color-surface)">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4" style="color: var(--color-primary)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
<span class="text-sm" style="color: var(--color-text-muted)">{{ __('Account:') }}</span>
|
||||
<span class="font-semibold" style="color: var(--color-primary)">{{ $accountAge ?? 'Unknown' }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
</svg>
|
||||
<span class="text-sm" style="color: var(--color-text-muted)">{{ __('Friends:') }}</span>
|
||||
<span class="font-semibold text-blue-400">{{ $totalFriends ?? 0 }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
|
||||
</svg>
|
||||
<span class="text-sm" style="color: var(--color-text-muted)">{{ __('Guilds:') }}</span>
|
||||
<span class="font-semibold text-purple-400">{{ $totalGuilds ?? 0 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
{{-- Stats Bar --}}
|
||||
@if(isset($showStats) && $showStats)
|
||||
<div class="flex flex-wrap gap-4 p-3 rounded-lg" 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-2">
|
||||
<svg class="w-4 h-4" style="color: var(--color-primary)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
<span class="text-sm" style="color: var(--color-text-muted)">{{ __('Account:') }}</span>
|
||||
<span class="font-semibold" style="color: var(--color-primary)">{{ $accountAge ?? 'Unknown' }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
</svg>
|
||||
<span class="text-sm" style="color: var(--color-text-muted)">{{ __('Friends:') }}</span>
|
||||
<span class="font-semibold text-blue-400">{{ $totalFriends ?? 0 }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
|
||||
</svg>
|
||||
<span class="text-sm" style="color: var(--color-text-muted)">{{ __('Guilds:') }}</span>
|
||||
<span class="font-semibold text-purple-400">{{ $totalGuilds ?? 0 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div
|
||||
class="col-span-3! mt-4 grid w-full grid-cols-1 space-y-3 md:space-y-0 md:col-span-2! md:mt-0 md:grid-cols-3">
|
||||
<div
|
||||
class="rounded-lg md:rounded-none md:rounded-l-lg bg-[#f8ef2b] flex flex-col gap-y-2 items-center justify-center py-3 md:py-0">
|
||||
<img src="{{ asset('/assets/images/profile/credits.png') }}" alt="">
|
||||
{{-- Currency Boxes --}}
|
||||
<div class="grid w-full grid-cols-1 gap-3 md:grid-cols-3">
|
||||
<div class="rounded-lg flex flex-col gap-y-2 items-center justify-center py-4" style="background: linear-gradient(135deg, #f8ef2b 0%, #f8ef2b 100%);">
|
||||
<img src="{{ asset('/assets/images/profile/credits.png') }}" alt="">
|
||||
<h4 class="font-semibold text-2xl" style="color: #b16d18;">
|
||||
{{ $user->credits }}
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<h4 class="text-[#b16d18] font-semibold text-2xl">
|
||||
{{ $user->credits }}
|
||||
</h4>
|
||||
</div>
|
||||
<div class="rounded-lg flex flex-col gap-y-2 items-center justify-center py-4" style="background: linear-gradient(135deg, #e99bdc 0%, #e99bdc 100%);">
|
||||
<img src="{{ asset('/assets/images/profile/duckets.png') }}" alt="">
|
||||
<h4 class="font-semibold text-2xl" style="color: #812378;">
|
||||
{{ $user->currency('duckets') }}
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="rounded-lg md:rounded-none bg-[#e99bdc] flex flex-col gap-y-2 items-center justify-center py-3 md:py-0">
|
||||
<img src="{{ asset('/assets/images/profile/duckets.png') }}" alt="">
|
||||
<div class="rounded-lg flex flex-col gap-y-2 items-center justify-center py-4" style="background: linear-gradient(135deg, #82d6db 0%, #82d6db 100%);">
|
||||
<img src="{{ asset('/assets/images/profile/diamonds.png') }}" alt="">
|
||||
<h4 class="font-semibold text-2xl" style="color: #146867;">
|
||||
{{ $user->currency('diamonds') }}
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="text-[#812378] font-semibold text-2xl">
|
||||
{{ $user->currency('duckets') }}
|
||||
</h4>
|
||||
</div>
|
||||
{{-- Badges + Groups --}}
|
||||
<div class="grid gap-4 grid-cols-1 md:grid-cols-2">
|
||||
<x-user.profile-info-card col-span="1">
|
||||
<x-slot:image>
|
||||
<img class="h-[100px] w-full object-cover object-left rounded-t-lg" src="{{ asset('/assets/images/profile/badges.png') }}" alt="">
|
||||
</x-slot:image>
|
||||
|
||||
<div
|
||||
class="rounded-lg md:rounded-none md:rounded-r-lg! bg-[#82d6db] flex flex-col gap-y-2 items-center justify-center py-3 md:py-0">
|
||||
<img src="{{ asset('/assets/images/profile/diamonds.png') }}" alt="">
|
||||
<x-slot:title>
|
||||
{{ __('Badges') }}
|
||||
</x-slot:title>
|
||||
|
||||
<h4 class="text-[#146867] font-semibold text-2xl">
|
||||
{{ $user->currency('diamonds') }}
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 justify-between">
|
||||
@forelse($badges as $badge)
|
||||
<div data-tippy-content="{{ $badge->badge_code }}"
|
||||
class="user-badge h-[70px] w-[70px] rounded-full flex items-center justify-center cursor-pointer"
|
||||
style="border: 2px solid color-mix(in srgb, var(--color-text-muted) 30%, transparent);">
|
||||
<img src="{{ setting('badges_path') }}/{{ $badge->badge_code }}.gif"
|
||||
class="max-h-[55px] max-w-[55px]" alt="">
|
||||
</div>
|
||||
@empty
|
||||
<div class="w-full text-center py-4" style="color: var(--color-text-muted)">
|
||||
{{ __('It seems like :user has no badges.', ['user' => $user->username]) }}
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</x-user.profile-info-card>
|
||||
|
||||
<div class="grid gap-14 grid-cols-1 md:grid-cols-2">
|
||||
<div class="col-span-1">
|
||||
<x-user.profile-info-card col-span="1">
|
||||
<x-slot:image>
|
||||
<img class="h-[140px] object-cover object-left" src="{{ asset('/assets/images/profile/badges.png') }}" alt="">
|
||||
</x-slot:image>
|
||||
<x-user.profile-info-card col-span="1">
|
||||
<x-slot:image>
|
||||
<img class="h-[100px] w-full object-cover object-left rounded-t-lg" src="{{ asset('/assets/images/profile/groups.png') }}" alt="">
|
||||
</x-slot:image>
|
||||
|
||||
<x-slot:title>
|
||||
{{ __('Badges') }}
|
||||
</x-slot:title>
|
||||
<x-slot:title>
|
||||
{{ __('Groups') }}
|
||||
</x-slot:title>
|
||||
|
||||
<div class="flex flex-wrap gap-2 justify-between">
|
||||
@forelse($badges as $badge)
|
||||
<div data-tippy-content="{{ $badge->badge_code }}"
|
||||
class="user-badge h-[70px] w-[70px] border-2 dark:border-gray-700 rounded-full flex items-center justify-center cursor-pointer">
|
||||
<img src="{{ setting('badges_path') }}/{{ $badge->badge_code }}.gif"
|
||||
class="max-h-[55px] max-w-[55px]" alt="">
|
||||
</div>
|
||||
@empty
|
||||
<div class="col-span-4">
|
||||
{{ __('It seems like :user has no badges.', ['user' => $user->username]) }}
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</x-user.profile-info-card>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-4 justify-between">
|
||||
@forelse($groups as $group)
|
||||
<div class="h-[70px] w-[70px] rounded-full overflow-hidden flex items-center justify-center p-1 cursor-pointer group-badge"
|
||||
data-tippy-content="{{ $group->guild?->name ?? 'Unknown' }}"
|
||||
style="border: 2px solid color-mix(in srgb, var(--color-text-muted) 30%, transparent);">
|
||||
<img src="{{ setting('group_badge_path') }}/{{ $group->guild?->badge }}.png"
|
||||
alt="">
|
||||
</div>
|
||||
@empty
|
||||
<div class="w-full text-center py-4" style="color: var(--color-text-muted)">
|
||||
{{ __('It seems like :user is not a member of any groups.', ['user' => $user->username]) }}
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</x-user.profile-info-card>
|
||||
</div>
|
||||
|
||||
<div class="col-span-1">
|
||||
<x-user.profile-info-card col-span="1">
|
||||
<x-slot:image>
|
||||
<img class="h-[140px] object-cover object-left" src="{{ asset('/assets/images/profile/groups.png') }}" alt="">
|
||||
</x-slot:image>
|
||||
{{-- Rooms + Friends --}}
|
||||
<div class="grid gap-4 grid-cols-1 md:grid-cols-2">
|
||||
<x-user.profile-info-card col-span="1">
|
||||
<x-slot:image>
|
||||
<img class="h-[100px] w-full object-cover object-left rounded-t-lg" src="{{ asset('/assets/images/profile/rooms.png') }}" alt="">
|
||||
</x-slot:image>
|
||||
|
||||
<x-slot:title>
|
||||
{{ __('Groups') }}
|
||||
</x-slot:title>
|
||||
<x-slot:title>
|
||||
{{ __('Rooms') }}
|
||||
</x-slot:title>
|
||||
|
||||
<div class="flex flex-wrap gap-4 justify-between">
|
||||
@forelse($groups as $group)
|
||||
<div class="h-[70px] w-[70px] rounded-full border-2 dark:border-gray-700 overflow-hidden flex items-center justify-center p-1 rounded-md cursor-pointer friend"
|
||||
data-tippy-content="{{ $group->name ?? 'Unknown' }}">
|
||||
<img src="{{ setting('group_badge_path') }}/{{ $group->badge }}.png"
|
||||
alt="">
|
||||
</div>
|
||||
@empty
|
||||
<div class="w-full">
|
||||
{{ __('It seems like :user is not a member of any groups.', ['user' => $user->username]) }}
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
@forelse($user->rooms as $room)
|
||||
<div class="flex flex-col gap-y-1 rounded-md overflow-hidden" style="background-color: color-mix(in srgb, var(--color-text-muted) 8%, transparent);">
|
||||
<div class="relative">
|
||||
<img
|
||||
class="w-full h-[80px] object-cover"
|
||||
src="{{ setting('room_thumbnail_path') }}/{{ $room->id }}.png"
|
||||
alt="{{ $room->name }}"
|
||||
onerror="this.onerror=null;this.src='{{ asset('/assets/images/profile/room_placeholder.png') }}';"
|
||||
>
|
||||
<div class="absolute bottom-1 left-1/2 transform -translate-x-1/2">
|
||||
<div class="{{ $room->users > 0 ? 'bg-[#00800B]' : '' }} px-1 py-[1px] font-semibold rounded flex gap-x-[3px] items-center text-xs" style="color: var(--color-text); {{ $room->users > 0 ? '' : 'background-color: var(--color-text-muted);' }}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-[12px]" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
{{ $room->users }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between px-1 py-1">
|
||||
<p class="truncate text-sm" style="color: var(--color-text)">{{ Str::limit($room->name, 10) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="col-span-3 text-center py-4" style="color: var(--color-text-muted)">
|
||||
{{ __('It seems like :user got no rooms.', ['user' => $user->username]) }}
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</x-user.profile-info-card>
|
||||
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</x-user.profile-info-card>
|
||||
</div>
|
||||
</div>
|
||||
<x-user.profile-info-card col-span="1">
|
||||
<x-slot:image>
|
||||
<img class="h-[100px] w-full object-cover object-left rounded-t-lg" src="{{ asset('/assets/images/profile/friends.png') }}" alt="">
|
||||
</x-slot:image>
|
||||
|
||||
<div class="grid gap-14 grid-cols-1 md:grid-cols-2">
|
||||
<div class="col-span-1">
|
||||
<x-user.profile-info-card col-span="1">
|
||||
<x-slot:image>
|
||||
<img class="h-[140px] object-cover object-left" src="{{ asset('/assets/images/profile/rooms.png') }}" alt="">
|
||||
</x-slot:image>
|
||||
<x-slot:title>
|
||||
{{ __('Friends') }}
|
||||
</x-slot:title>
|
||||
|
||||
<x-slot:title>
|
||||
{{ __('Rooms') }}
|
||||
</x-slot:title>
|
||||
<div class="grid grid-cols-3 gap-2 sm:grid-cols-4 md:grid-cols-3 lg:grid-cols-4">
|
||||
@forelse($friends as $friend)
|
||||
<a href="{{ route('profile.show', $friend->user->username ?? 'SystemAccount') }}"
|
||||
class="rounded-full overflow-hidden flex items-center justify-center p-1 cursor-pointer friend"
|
||||
data-tippy-content="{{ $friend->user->username ?? 'Unknown' }}"
|
||||
style="border: 2px solid color-mix(in srgb, var(--color-text-muted) 30%, transparent); width: 70px; height: 70px;">
|
||||
<img class="transition duration-200 ease-in-out hover:scale-110"
|
||||
style="image-rendering: pixelated; margin-top: 15px;"
|
||||
src="{{ setting('avatar_imager') }}{{ $friend->user?->look }}&headonly=1"
|
||||
alt="">
|
||||
</a>
|
||||
@empty
|
||||
<div class="col-span-4 text-center py-4" style="color: var(--color-text-muted)">
|
||||
{{ __('It seems like :user has no friends.', ['user' => $user->username]) }}
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</x-user.profile-info-card>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 space-x-1">
|
||||
@forelse($user->rooms as $room)
|
||||
<div
|
||||
class="flex flex-col gap-y-1 rounded-md bg-[var(--color-surface)] p-1 overflow-hidden">
|
||||
<div class="h-full inline-block">
|
||||
<div class="h-full relative border border-gray-500 dark:border-gray-700 rounded flex items-center justify-center flex-col">
|
||||
<img
|
||||
class="rounded mt-1 mb-1"
|
||||
src="{{ setting('room_thumbnail_path') }}/{{ $room->id }}.png"
|
||||
alt="{{ $room->name }}"
|
||||
onerror="this.onerror=null;this.src='{{ asset('/assets/images/profile/room_placeholder.png') }}';"
|
||||
>
|
||||
{{-- Guestbook Section --}}
|
||||
@if(isset($guestbook) && $guestbook->count() > 0)
|
||||
<x-user.profile-info-card col-span="1">
|
||||
<x-slot:image>
|
||||
<div class="h-[60px] w-full rounded-t-lg flex items-center px-4" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 60%, #000) 100%);">
|
||||
<span class="text-white font-bold text-lg">{{ __('Guestbook') }}</span>
|
||||
</div>
|
||||
</x-slot:image>
|
||||
|
||||
<div class="absolute bottom-1 left-1/2 transform -translate-x-1/2">
|
||||
<div class="{{ $room->users > 0 ? 'bg-[#00800B]' : 'bg-[var(--color-text-muted)]' }} px-1 py-[1px] font-semibold rounded flex gap-x-[3px] text-[var(--color-text)] items-center text-xs">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-[12px]" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<x-slot:title>
|
||||
{{ __('Recent Messages') }}
|
||||
</x-slot:title>
|
||||
|
||||
{{ $room->users }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3">
|
||||
@foreach($guestbook as $entry)
|
||||
<div class="flex gap-3 p-2 rounded-lg" style="background-color: color-mix(in srgb, var(--color-text-muted) 8%, transparent);">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="w-10 h-10 rounded-full overflow-hidden" style="border: 2px solid color-mix(in srgb, var(--color-text-muted) 30%, transparent);">
|
||||
<img src="{{ setting('avatar_imager') }}{{ $entry->user?->look }}&headonly=1"
|
||||
alt="" class="w-full h-full object-cover">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-semibold text-sm" style="color: var(--color-primary)">{{ $entry->user?->username ?? 'Unknown' }}</span>
|
||||
<span class="text-xs" style="color: var(--color-text-muted)">{{ $entry->created_at?->diffForHumans() ?? '' }}</span>
|
||||
</div>
|
||||
<p class="text-sm mt-1" style="color: var(--color-text)">{{ $entry->message }}</p>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</x-user.profile-info-card>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between px-1">
|
||||
<p class="truncate">{{ Str::limit($room->name, 6) }}</p>
|
||||
|
||||
<a href="#">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5 text-cyan-300 hover:text-cyan-400"
|
||||
viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd"
|
||||
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="col-span-4">
|
||||
{{ __('It seems like :user got no rooms.', ['user' => $user->username]) }}
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</x-user.profile-info-card>
|
||||
</div>
|
||||
|
||||
<div class="col-span-1">
|
||||
<x-user.profile-info-card col-span="1">
|
||||
<x-slot:image>
|
||||
<img class="h-[140px] object-cover object-left" src="{{ asset('/assets/images/profile/friends.png') }}" alt="">
|
||||
</x-slot:image>
|
||||
|
||||
<x-slot:title>
|
||||
{{ __('Friends') }}
|
||||
</x-slot:title>
|
||||
|
||||
<div class="grid grid-cols-4 gap-2 xl:grid-cols-6 xl:pl-3">
|
||||
@forelse($friends as $friend)
|
||||
<a href="{{ route('profile.show', $friend->user->username ?? 'SystemAccount') }}"
|
||||
class="h-[70px] w-[70px] rounded-full border-2 dark:border-gray-700 overflow-hidden flex items-center p-1 rounded-md cursor-pointer friend"
|
||||
data-tippy-content="{{ $friend->user->username ?? 'Unknown' }}">
|
||||
<img class="mt-6 transition duration-200 ease-in-out hover:scale-110 min-w-[64px] h-[110px] -ml-1"
|
||||
src="{{ setting('avatar_imager') }}{{ $friend->user?->look }}"
|
||||
alt="">
|
||||
</a>
|
||||
@empty
|
||||
<div class="col-span-6">
|
||||
{{ __('It seems like :user has no friends.', ['user' => $user->username]) }}
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</x-user.profile-info-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@push('javascript')
|
||||
<script type="module">
|
||||
tippy('.user-badge');
|
||||
tippy('.friend');
|
||||
tippy('.group');
|
||||
</script>
|
||||
@endpush
|
||||
@push('javascript')
|
||||
<script type="module">
|
||||
tippy('.user-badge');
|
||||
tippy('.friend');
|
||||
tippy('.group-badge');
|
||||
</script>
|
||||
@endpush
|
||||
</x-app-layout>
|
||||
|
||||
@@ -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