72 lines
2.6 KiB
Elixir
72 lines
2.6 KiB
Elixir
defmodule ToweropsWeb.Components.CookieConsent do
|
|
@moduledoc """
|
|
Cookie consent banner component for GDPR compliance.
|
|
|
|
Only displays to users from EU/EEA countries and for users who haven't
|
|
yet accepted the cookie policy.
|
|
|
|
Since we only use essential cookies (session, CSRF), the banner is
|
|
informational and provides an "Acknowledge" button.
|
|
"""
|
|
use Phoenix.Component
|
|
|
|
import ToweropsWeb.CoreComponents, only: [icon: 1]
|
|
|
|
@doc """
|
|
Renders a cookie consent banner at the bottom of the page.
|
|
|
|
## Attributes
|
|
* `requires_consent` - boolean, whether to show the banner (EU/EEA users)
|
|
|
|
Note: The banner is always rendered if requires_consent is true.
|
|
JavaScript will hide it immediately if the consent cookie exists.
|
|
"""
|
|
attr :requires_consent, :boolean, required: true
|
|
|
|
def banner(assigns) do
|
|
~H"""
|
|
<%= if @requires_consent do %>
|
|
<div
|
|
id="cookie-consent-banner"
|
|
class="fixed bottom-0 left-0 right-0 z-50 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 shadow-lg"
|
|
role="dialog"
|
|
aria-live="polite"
|
|
aria-label="Cookie consent"
|
|
>
|
|
<div class="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8">
|
|
<div class="flex flex-col sm:flex-row items-start sm:items-center gap-4">
|
|
<div class="flex-1 flex items-start gap-3">
|
|
<.icon
|
|
name="hero-information-circle"
|
|
class="h-6 w-6 text-blue-600 dark:text-blue-400 flex-shrink-0"
|
|
/>
|
|
<div class="text-sm text-gray-700 dark:text-gray-300">
|
|
<p class="font-medium mb-1">We respect your privacy</p>
|
|
<p>
|
|
We use essential cookies to maintain your session and ensure the security of our service. We do not use tracking or advertising cookies.
|
|
<a
|
|
href="/privacy"
|
|
class="underline hover:text-gray-900 dark:hover:text-gray-100 font-medium"
|
|
>
|
|
Learn more
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-2 w-full sm:w-auto">
|
|
<button
|
|
type="button"
|
|
data-cookie-consent="accept"
|
|
class="flex-1 sm:flex-none px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900"
|
|
>
|
|
Accept
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
"""
|
|
end
|
|
end
|