Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Cookie consent livewire component
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class CookieConsent extends Component
{
public bool $askForConsent;
public bool $openConsentModal;
public bool $openCookieModal = false;
public function mount(\App\Services\CookieConsentService $service)
{
$this->askForConsent = !$service->cookieExists();
$this->openConsentModal = true;
}
public function toggleCookieModal()
{
$this->openCookieModal = !$this->openCookieModal;
$this->openConsentModal = !$this->openConsentModal;
}
public function giveConsent(\App\Services\CookieConsent $service)
{
$service->giveConsent();
$this->openConsentModal = false;
$this->askForConsent = false;
}
public function refuseConsent(\App\Services\CookieConsent $service)
{
$service->refuseConsent();
$this->openConsentModal = false;
$this->askForConsent = false;
}
public function render()
{
return view('livewire.cookie-consent.cookie-consent');
}
}
<?php
namespace App\Services;
use Illuminate\Support\Facades\Cookie;
class CookieConsent
{
public function cookieExists(): bool
{
return !is_null($this->getCookie());
}
public function consentHasBeenGiven(): bool
{
if ($this->getCookie() === $this->getConsentValue()) {
return true;
}
return false;
}
public function giveConsent(): void
{
Cookie::queue(
config('cookie-consent.cookie_name'),
config('cookie-consent.consent_value'),
config('cookie-consent.consent_cookie_lifetime')
);
}
public function refuseConsent(): void
{
Cookie::queue(
config('cookie-consent.cookie_name'),
config('cookie-consent.refuse_value'),
config('cookie-consent.refuse_cookie_lifetime')
);
}
/**
* @return array|string|null
*/
private function getCookie()
{
return request()->cookie(config('cookie-consent.cookie_name'));
}
private function getConsentValue(): string
{
return config('cookie-consent.consent_value');
}
}
<div x-data="{ open: @entangle('openCookieModal') }" x-show="open"
class="fixed z-10 w-full h-full top-0 left-0 flex items-center justify-center">
<div class="absolute w-full h-full bg-gray-900 opacity-50 sm:bg-yellow-500"></div>
<div class="bg-white w-auto mx-3 sm:mx-0 rounded shadow-lg z-50 overflow-y-auto">
<div class="py-4 text-left px-6">
<!--Title-->
<div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-gray-900">
<svg class="h-8 w-8 text-white" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
</svg>
</div>
<!--Body-->
<div class="mt-5 text-center text-gray-500 space-y-2 leading-snug">
<h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-headline">
Cookie Statement
</h3>
<p>Cookies are used to store your personal votes for posts.</p>
</div>
<!--Footer-->
<div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-1 sm:gap-3 sm:grid-flow-row-dense">
<button wire:click="toggleCookieModal"
class="mb-2 w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-900 text-base font-medium text-white hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400">
Close
</button>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment