Coder Social home page Coder Social logo

pzingg / phx_cookie_consent Goto Github PK

View Code? Open in Web Editor NEW
4.0 2.0 1.0 169 KB

GDPR-ish cookie consent UI with Phoenix and AlpineJS

License: Other

Elixir 83.85% CSS 0.77% JavaScript 3.30% HTML 10.66% Dockerfile 1.29% Shell 0.08% Batchfile 0.05%
alpinejs cookie-consent elixir elixir-phoenix google-tag-manager liveview gdpr gdpr-consent

phx_cookie_consent's Introduction

Consent

Simple cookie consent modal dialogs built with Phoenix Components and AlpineJS.

Cookie consent preferences

Simple preference setting schema defined in Consent.Account.ConsentSettings includes the date of consent, when the consent expires, and which categories ("groups") of cookies are consented to. It also includes a terms string, representing the version of a "terms and conditions" that has been aggreed to.

The settings are stored in a persistent cookie and in the Phoenix session cookie. When a user is logged in, the settings are attached to the user's account in the Ecto repository. "Cookie logic" in the ConsentWeb.UserAuth module manages the state of the settings through log-ins and log-outs, updating the cookies and the Ecto repository appropriately.

If there is no consent found or if the consent has expired, a :show_cookie_modal boolean assign is set to true, and can be used to present the cookie consent modal (see below).

For non-LiveViews, the ConsentWeb.UserAuth.fetch_cookie_consent/2 function plug places the consent settings (with the key :cookie_consent) and the :show_cookie_modal boolean in the session and in the connection's assigns.

For LiveViews, the ConsentWeb.UserAuth.on_mount/4 mount function sets assigns for the consent settings (with the key :cookie_consent) and the :show_cookie_modal boolean in the live socket.

Updating of the consent settings is done by the routes in the non-LiveView ConsentController, which also exposes a route that is used to delete the cookies in any group disallowed by the user.

The example app also shows how the consent settings are used to nullify <script> elements that would set Javascript cookies for groups that the user has disallowed.

Cookie consent components

  • ConsentComponent.summary/1 - presents a summary modal dialog with "Accept None" and "Accept All" choices. This can be conditionally shown by placing the component in the app.html.heex and live.html.heex layouts.
  • ConsentComponent.details/1 - presents a detailed modal dialog with customizable categories ("groups") to organize cookies. Non-required groups can be allowed or rejected.
  • CookieScriptComponent.gtag_js/1 - an example component included in the root.html.heex layout, that shows how a non-required cookie script can be conditionally enabled or disabled, using ideas from the iubenda Cookie Solution.

Build and run

To start your Phoenix server:

  • Install dependencies with mix deps.get
  • Create and migrate your database with mix ecto.setup
  • Start Phoenix endpoint with mix phx.server or inside IEx with iex -S mix phx.server

Now you can visit localhost:4000 from your browser.

Ready to run in production? Please check our deployment guides.

Deploy on Fly.io

Successfully deployed on Fly.io, by adding the Alpine.js module to assets/vendor. The Dockerfile, fly.toml, and rel/overlays/bin/migrate script created by Fly.io are included in the repository. config/runtime.exs is configured to work with the Fly.io command line interface (the platform variable in that script is set to :fly).

Deploy on Gigalixir

Was not successful in deploying on Gigalixir. The "502 Bad Request" result may have had something to do with Gigalixir's server rather than the application. You may try to change the platform variable in config/runtime.exs to :gigalixir and see if you can get it to work.

Learn more

phx_cookie_consent's People

Contributors

pzingg avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

beam-campus

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.