Initial commit

This commit is contained in:
root
2026-05-09 17:28:23 +02:00
commit 9d73f82529
5575 changed files with 281989 additions and 0 deletions
+212
View File
@@ -0,0 +1,212 @@
<x-app-layout>
@push('title', __('Welcome to the best hotel on the web!'))
<div class="col-span-12 md:col-span-8 h-[250px] bg-gray-900/50 rounded-xl flex lg:px-8 py-8 items-center text-white relative overflow-hidden">
<div class="block lg:hidden w-40">
<a href="{{ route('profile.show', $user) }}"
class="absolute bottom-2 -left-4 lg:left-8 drop-shadow transition duration-300 ease-in-out hover:scale-105">
<img style="image-rendering: pixelated;"
src="{{ setting('avatar_imager') }}{{ $user->look }}&direction=2&head_direction=3&gesture=sml&action=wav&size=l"
alt="">
</a>
</div>
<div class="z-10">
<div class="hidden lg:block h-[200px] w-[200px] rounded-full relative overflow-hidden" style="background: url('/assets/images/dusk/me_circle_image.png')">
<div>
<a href="{{ route('profile.show', $user) }}"
class="absolute -bottom-12 left-2 lg:left-8 drop-shadow transition duration-300 ease-in-out hover:scale-105">
<img style="image-rendering: pixelated;"
src="{{ setting('avatar_imager') }}{{ $user->look }}&direction=2&head_direction=3&gesture=sml&action=wav&size=l"
alt="">
</a>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row justify-between self-start w-full px-4">
<div class="flex flex-col gap-1 self-start lg:ml-2 py-2 text-white ">
<h2 class="text-3xl font-semibold">
Hey {{ Auth::user()->username }}!
</h2>
<p class="italic">{{ Auth::user()->motto }}</p>
</div>
<div class="self-start lg:ml-14 w-full lg:w-64">
<a href="{{ route('nitro-client') }}">
<button type="submit" class="cms-button w-full text-white bg-yellow-500 border-2 border-yellow-300 w-full rounded transition duration-300 ease-in-out hover:scale-[102%] py-2 px-4">
{{ __('Go to :hotel', ['hotel' => setting('hotel_name')]) }}
</button>
</a>
</div>
</div>
<div class="absolute w-full bottom-0 left-0 h-20 bg-gray-900 py-4 lg:pl-64 px-4 lg:px-0">
<div class="flex gap-x-6 h-full items-center justify-center lg:justify-start">
<x-currency icon="nav-credit-icon">
<x-slot:currency>
{{ auth()->user()->credits }}
</x-slot:currency>
<span class="hidden lg:block">{{ __('Credits') }}</span>
</x-currency>
<x-currency icon="nav-ducket-icon">
<x-slot:currency>
{{ auth()->user()->currency('duckets') }}
</x-slot:currency>
<span class="hidden lg:block"> {{ __('Duckets') }}</span>
</x-currency>
<x-currency icon="nav-diamond-icon">
<x-slot:currency>
{{ auth()->user()->currency('diamonds') }}
</x-slot:currency>
<span class="hidden lg:block">{{ __('Diamonds') }}</span>
</x-currency>
</div>
</div>
</div>
{{-- Articles --}}
<div class="col-span-12 md:col-span-4 h-[250px]">
<!-- Slider main container -->
<div class="swiper h-[250px] rounded-md">
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- Additional required wrapper -->
<div class="swiper-wrapper" style="z-index: 14;">
@foreach($articles as $article)
<x-article-card :article="$article" />
@endforeach
</div>
</div>
</div>
<div class="col-span-12 md:col-span-8">
<div
class="flex flex-col gap-3 rounded bg-[#2b303c] p-1 shadow-md lg:flex-row lg:items-center lg:justify-between">
<div
class="relative flex items-center justify-center rounded bg-[#e9b124] py-2 px-2 text-sm font-semibold">
<div class="invisible h-6 w-6 -right-1 rotate-45 bg-[#e9b124] lg:visible lg:absolute"></div>
<img src="{{ asset('/assets/images/icons/online-friends.png') }}" alt="{{ __('Online Friends') }}"
class="mr-2 mb-1 inline-flex" style="max-width: 24px; max-height: 24px">
<span class="relative text-white">{{ __('Online Friends') }}</span>
</div>
<div class="relative flex flex-wrap items-center justify-center gap-2 pl-2 sm:justify-start">
@foreach ($onlineFriends as $friend)
<div data-popover-target="friend-{{ $friend->username }}"
style="image-rendering: pixelated; background-image: url({{ setting('avatar_imager') }}{{ $friend->look }}&direction=2&head_direction=3&gesture=sml&action=wav&headonly=1&size=s)"
class="inline-block h-10 w-10 rounded-full border-2 border-gray-300 bg-center bg-no-repeat">
</div>
<div data-popover id="friend-{{ $friend->username }}" role="tooltip"
class="invisible absolute z-10 inline-block w-64 rounded-lg border border-gray-200 bg-white text-sm font-light text-gray-500 opacity-0 shadow-xs transition-opacity duration-300">
<div
class="rounded-t-lg border-b border-gray-200 bg-gray-100 px-3 py-2">
<div
class="flex w-full items-center justify-center font-semibold text-gray-900">
{{ $friend->username }}
</div>
</div>
<div class="overflow-y-auto px-3 py-2" style="max-height: 200px">
<b class="mr-1 font-bold">{{ __('Motto') }}:</b>{{ $friend->motto }}<br>
<b
class="mr-1 font-bold">{{ __('Online Since') }}
:</b>{{ date(config('habbo.site.date_format'), $friend->last_online) }}
</div>
<div data-popper-arrow></div>
</div>
@endforeach
</div>
</div>
</div>
<div class="col-span-12 md:col-span-8">
<x-content.content-card icon="hotel-icon">
<x-slot:title>
{{ sprintf(__('User Referrals (%s/%s)'), auth()->user()->referrals->referrals_total ?? 0, setting('referrals_needed')) }}
</x-slot:title>
<x-slot:under-title>
{{ __('Referral new users and be rewarded by in-game goods') }}
</x-slot:under-title>
<div class="text-sm">
{{ __('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')]) }}
<br>
<small class="text-gray-300">
{{ __('Boosting referrals by making own accounts will lead to removal of all progress, currency, inventory and a potential ban') }}
</small>
<div class="grid grid-cols-12 gap-2 mt-2">
<x-form.input classes="col-span-12 md:col-span-10" 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 flex md:col-span-2" onclick="copyCode()">
<x-form.secondary-button>
{{ __('Copy code') }}
</x-form.secondary-button>
</div>
</div>
@if (auth()->user()->referrals?->referrals_total >= (int) setting('referrals_needed'))
<a href="{{ route('claim.referral-reward') }}" class="text-decoration-none">
<x-form.secondary-button classes="mt-2">
{{ __('Claim your referrals reward!') }}
</x-form.secondary-button>
</a>
@else
<button disabled class="mt-2 w-full rounded bg-[#171a23] p-2 text-white">
{{ sprintf(__('You need to refer :needed more users, before being able to claim your reward', ['needed' =>auth()->user()->referralsNeeded() ?? 0]),auth()->user()->referrals->referrals_total ?? 0) }}
</button>
@endif
</div>
</x-content.content-card>
</div>
@push('javascript')
<script>
var Toast = Swal.mixin({
toast: true,
position: "top-end",
showConfirmButton: false,
timer: 4000,
timerProgressBar: true,
didOpen: (toast) => {
toast.addEventListener("mouseenter", Swal.stopTimer);
toast.addEventListener("mouseleave", Swal.resumeTimer);
}
});
function copyCode() {
let copyText = document.querySelector("#referral");
copyText.select();
document.execCommand("copy");
Toast.fire({
icon: "success",
title: '{{ __('Your referral code has been copied to your clipbord!') }}',
customClass: {
container: 'dark-mode-toast' // Add this class for dark mode
},
});
}
</script>
@endpush
</x-app-layout>
+239
View File
@@ -0,0 +1,239 @@
<x-app-layout>
@push('title', $user->username)
<div class="col-span-12 md:col-span-8 md:max-h-[250px] bg-gray-900/50 rounded-xl text-gray-200">
<div class="flex mt-6">
<div class="ml-6 hidden md:block">
<div class="md:h-[200px] md:w-[200px] rounded-full relative overflow-hidden"
style="background: url('/assets/images/dusk/me_circle_image.png')">
<div>
<a href="{{ route('profile.show', $user) }}"
class="absolute -bottom-12 left-8 lg:left-8 drop-shadow transition duration-300 ease-in-out hover:scale-105">
<img style="image-rendering: pixelated;"
src="{{ setting('avatar_imager') }}{{ $user->look }}&direction=2&head_direction=3&gesture=sml&action=wav&size=l"
alt="">
</a>
</div>
</div>
</div>
<div class="flex flex-col w-full">
<div class="flex flex-col md:flex-row justify-between w-full px-4 pr-6">
<div class="flex flex-col gap-1 self-start lg:ml-2 py-2 text-white">
<h4 class="text-lg font-semibold">
{{ __('My name is,') }}
</h4>
<h2 class="text-3xl font-semibold">
{{ $user->username }}
</h2>
<div class="flex flex-col">
<p class="mt-4 italic">{{ $user->motto }}</p>
@if(isset($showOnline) && $showOnline)
<small class="text-gray-400">{{ __('Last online:') }} {{ $lastLogin ?? date('Y-m-d', $user->last_online) }}</small>
@endif
</div>
</div>
<div class="flex flex-col align-content-end gap-y-4 h-full mt-4">
<x-currency icon="nav-credit-icon">
<x-slot:currency>
{{ auth()->user()->credits }}
</x-slot:currency>
<span>{{ __('Credits') }}</span>
</x-currency>
<x-currency icon="nav-ducket-icon">
<x-slot:currency>
{{ auth()->user()->currency('duckets') }}
</x-slot:currency>
<span> {{ __('Duckets') }}</span>
</x-currency>
<x-currency icon="nav-diamond-icon">
<x-slot:currency>
{{ auth()->user()->currency('diamonds') }}
</x-slot:currency>
<span>{{ __('Diamonds') }}</span>
</x-currency>
</div>
</div>
<div class="flex justify-end md:pr-6">
<div class="flex items-center gap-3 mt-6 text-xs ml-6 md:ml-8">
@foreach($badges as $badge)
<div>
<img src="{{ setting('badges_path') }}/{{ $badge->badge_code }}.gif" alt="">
</div>
@endforeach
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-10">
@foreach($photos as $photo)
<a href="{{ $photo->url }}" data-fancybox="gallery"
class="cursor-pointer relative transition duration-300 ease-in-out hover:scale-[102%]">
<div class="photo-overlay"></div>
<img class="h-[250px] w-full object-cover object-center rounded-md custom-shadow"
src="{{ $photo->url }}" alt="">
<div class="absolute right-2 bottom-2 bg-black/70 p-2 rounded-md text-white flex gap-x-2 z-[5]">
<img class="self-center" src="{{ asset('/assets/images/dusk/author_camera_icon.png') }}" alt="">
<small>
{{ $photo->user->username }}
</small>
</div>
</a>
@endforeach
</div>
</div>
@if(isset($showStats) && $showStats)
<div class="col-span-12 mt-4">
<div class="bg-gray-900/50 rounded-xl p-4 flex flex-wrap gap-6 text-gray-200">
<div class="flex items-center gap-2">
<svg class="w-5 h-5 text-yellow-400" 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">{{ __('Account age:') }}</span>
<span class="font-semibold text-yellow-400">{{ $accountAge ?? 'Unknown' }}</span>
</div>
<div class="flex items-center gap-2">
<svg class="w-5 h-5 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">{{ __('Friends:') }}</span>
<span class="font-semibold text-blue-400">{{ $totalFriends ?? 0 }}</span>
</div>
<div class="flex items-center gap-2">
<svg class="w-5 h-5 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">{{ __('Guilds:') }}</span>
<span class="font-semibold text-purple-400">{{ $totalGuilds ?? 0 }}</span>
</div>
</div>
</div>
@endif
<div class="col-span-12 md:col-span-4">
<x-content.content-card>
<x-slot:title>
{{ __('Rooms') }}
</x-slot:title>
<div class="grid grid-cols-3 sm:grid-cols-6 md:grid-cols-3 lg:grid-cols-4 gap-4 w-full">
@forelse($user->rooms as $room)
<div class="flex flex-col justify-center">
<div class="relative w-[80px] h-[80px]">
<img
class="rounded"
src="{{ asset('/assets/images/profile/room_placeholder.png') }}"
alt="Test"
>
<div class="absolute -bottom-2 left-1/2 transform -translate-x-1/2">
<div
class="{{ 0 > 0 ? 'bg-[#00800B]' : 'bg-gray-400' }} px-1 py-[1px] font-semibold rounded flex gap-x-[3px] text-white 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>
0
</div>
</div>
</div>
<p class="mt-4 ml-2 text-sm truncate w-[80px]">
{{ $room->name }}
</p>
</div>
@empty
<div class="col-span-12 text-center">
<p>{{ __('This user currently does not have any rooms') }}</p>
</div>
@endforelse
</div>
</x-content.content-card>
<div class="mt-4">
<x-content.content-card>
<x-slot:title>
{{ __('Guestbook') }}
</x-slot:title>
<div class="flex flex-col gap-2">
@foreach($guestbook as $post)
<div class="bg-gray-600 p-2 rounded-md text-gray-200 h-[60px] overflow-hidden">
<div class="flex relative">
<img class="-mt-5 drop-shadow"
src="{{ setting('avatar_imager') }}/{{ $post->user?->look }}"
alt="{{ $post->user?->username }}">
<div class="flex flex-col">
<div class="w-full flex items-center">
<a href="{{ route('profile.show', $post->user ?? $user) }}"
class="text-blue-300 hover:underline">
{{ $post->user?->username }}
</a>
@if($post->profile_id === Auth::id() || $user->id === Auth::id() || Auth::user()->rank > (int)setting('min_staff_rank'))
<form action="{{ route('guestbook.destroy', [$user, $post]) }}" method="POST">
@method('DELETE')
@csrf
<button type="submit" class="text-white">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
</svg>
</button>
</form>
@endif
</div>
<span>{{ Str::limit($post->message, 30) }}</span>
</div>
</div>
</div>
@endforeach
<form class="flex flex-col md:flex-row gap-2 mt-2" action="{{ route('guestbook.store', $user) }}"
method="POST">
@csrf
<x-form.input classes="w-full md:w-2/3" name="message"
placeholder="Write something on their guestbook"
:autofocus="false"/>
<div class="w-full md:w-1/3">
<x-form.secondary-button>
{{ __('Post message') }}
</x-form.secondary-button>
</div>
</div>
</div>
</x-content.content-card>
</div>
</div>
@push('javascript')
<script type="module">
tippy('.user-badge');
tippy('.friend');
tippy('.group');
</script>
@endpush
</x-app-layout>
@@ -0,0 +1,70 @@
<x-app-layout>
@push('title', __('Account settings'))
<div class="col-span-12 flex flex-col gap-y-3 md:col-span-3">
<x-user.settings.settings-navigation />
</div>
<div class="col-span-12 flex flex-col gap-y-3 md:col-span-9">
<x-content.content-card icon="hotel-icon">
<x-slot:title>
{{ __('Account settings') }}
</x-slot:title>
<x-slot:under-title>
{{ __('Manage your account settings') }}
</x-slot:under-title>
<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">
<x-form.label for="mail">
{{ __('E-mail') }}
<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>
<x-form.input name="mail" type="email" value="{{ $user->mail }}" :autofocus="true" />
</div>
@if ($user->settings?->allow_name_change)
<div class="flex flex-col gap-y-1">
<x-form.label for="username">
{{ __('Username') }}
<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>
<x-site-captchas />
<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>
</x-app-layout>
@@ -0,0 +1,68 @@
<x-app-layout>
@push('title', __('Password settings'))
<div class="col-span-12 flex flex-col gap-y-3 md:col-span-3">
<x-user.settings.settings-navigation />
</div>
<div class="col-span-12 flex flex-col gap-y-3 md:col-span-9">
<x-content.content-card icon="hotel-icon">
<x-slot:title>
{{ __('Password settings') }}
</x-slot:title>
<x-slot:under-title>
{{ __('Change your password by filling out the fields below') }}
</x-slot:under-title>
<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">
<x-form.label for="current_password">
{{ __('Current password') }}
<x-slot:info>
{{ __('Enter your current password') }}
</x-slot:info>
</x-form.label>
<x-form.input name="current_password" type="password" :autofocus="true" />
</div>
<div class="flex flex-col gap-y-1">
<x-form.label for="password">
{{ __('New password') }}
<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>
<x-site-captchas />
<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>
</x-app-layout>
@@ -0,0 +1,72 @@
<x-app-layout>
@push('title', __('Session logs'))
<div class="col-span-12 flex flex-col gap-y-3 md:col-span-3">
<x-user.settings.settings-navigation />
</div>
<div class="col-span-12 flex flex-col gap-y-3 md:col-span-9">
<x-content.content-card icon="hotel-icon">
<x-slot:title>
{{ __('Session logs') }}
</x-slot:title>
<x-slot:under-title>
{{ __('Keep an eye on all your active sessions') }}
</x-slot:under-title>
<div class="overflow-hidden overflow-x-auto rounded border-2 border-gray-700">
<table class="min-w-full text-sm divide-y divide-gray-700">
<thead class="bg-[#21242e]">
<tr>
<th class="whitespace-nowrap px-4 py-2 text-left font-medium text-gray-200">
{{ __('IP') }}
</th>
<th class="whitespace-nowrap px-4 py-2 text-left font-medium text-gray-200">
{{ __('IP Current Device') }}
</th>
<th class="whitespace-nowrap px-4 py-2 text-left font-medium text-gray-200">
{{ __('Is Desktop') }}
</th>
<th class="whitespace-nowrap px-4 py-2 text-left font-medium text-gray-200">
{{ __('Platform') }}
</th>
<th class="whitespace-nowrap px-4 py-2 text-left font-medium text-gray-200">
{{ __('Browser') }}
</th>
<th class="whitespace-nowrap px-4 py-2 text-left font-medium text-gray-200">
{{ __('Last Activity') }}
</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
@forelse ($logs as $log)
<tr>
<td class="whitespace-nowrap px-4 py-2 font-medium text-gray-200">
{{ $log->ip_address }}
</td>
<td class="px-4 py-2 text-gray-200">
{{ $log->is_current_device ? 'true' : 'false' }}</td>
<td class="px-4 py-2 text-gray-200">
{{ $log->agent['is_desktop'] ? 'true' : 'false' }}</td>
<td class="px-4 py-2 text-gray-200">{{ $log->agent['platform'] }}
</td>
<td class="px-4 py-2 text-gray-200">{{ $log->agent['browser'] }}</td>
<td class="whitespace-nowrap px-4 py-2 text-gray-200">
{{ $log->last_active }}</td>
</tr>
@empty
<tr>
<td class="whitespace-nowrap px-4 py-2 text-center text-gray-200"
colspan="3">
{{ __('No session logs found') }}
</td>
</tr>
@endforelse
</tbody>
</table>
</div>
</x-content.content-card>
</div>
</x-app-layout>
@@ -0,0 +1,107 @@
<x-app-layout>
@push('title', __('Two factor'))
<div class="col-span-12 flex flex-col gap-y-3 md:col-span-3">
<x-user.settings.settings-navigation />
</div>
<div class="col-span-12 flex flex-col gap-y-3 md:col-span-9">
<x-content.content-card icon="hotel-icon">
<x-slot:title>
{{ __('Two factor authentication') }}
</x-slot:title>
<x-slot:under-title>
{{ __('Add an extra layer of security to your account by enabling two-factor authentication') }}
</x-slot:under-title>
<!-- 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')
<x-form.danger-button>
{{ __('Disable 2FA') }}
</x-form.danger-button>
</form>
{{-- 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="mt-4 flex flex-col items-center md:flex-row md:items-start md:justify-center">
<div class="flex gap-x-8 rounded bg-gray-100 px-4 py-2 text-black">
<span class="flex items-center">
{!! auth()->user()->twoFactorQrCodeSvg() !!}
</span>
<div>
<strong>
{{ __('Recovery codes:') }}
</strong>
<ul>
@foreach (auth()->user()->recoveryCodes() as $code)
<li>{{ $code }}</li>
@endforeach
</ul>
</div>
</div>
</div>
<div class="mt-2 flex justify-center text-xs italic text-red-500">
<div class="w-full lg:w-[480px]">
<strong>{{ __('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.') }}</strong>
</div>
</div>
<form action="{{ route('two-factor.verify') }}" method="POST" class="mt-8">
@csrf
<x-form.label for="code">
{{ __('Code') }}
<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>
<x-form.input classes="mb-3" name="code" placeholder="{{ __('Code') }}" />
@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
<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 dark:text-gray-100">
<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>
</x-app-layout>