Angular Consent

Easily show consent messages that keep appearing until the user clicks them away.

Useful if you need to show legal disclaimers (e.g. to conform to the EU Cookie Consent law).

• very lightweight (~1KB)
• use your own markup and CSS to make the messages fit perfectly in your application
• supports multiple consent messages on the same page

Try online demo.

Requirements:

• ngCookies

Quick example

<!-- add consent attribute to any element --><!-- to expose $consent controller to children -->
<section consent>
<!-- then use your own custom markup to create the message -->
<sectionng-if="$consent.hasNotAgreedYet()">
<p>This web application uses cookies to store private data.</p>
<buttonng-click="$consent.agree();">Agree</button>
</section>
</section>

Usage

First install the module using bower:

$ bower install angular-cookies
$ bower install angular-consent

and add the library to your application:

<scriptsrc="angular-cookies.min.js"></script>
<scriptsrc="angular-consent.min.js"></script>

Then add the ngCookies and angularConsent modules to the dependencies of your AngularJS application module:

angular.module('yourApp',['ngCookies','angularConsent']);

Now you can use the consent directive anywhere in your markup:

<!-- add consent attribute to any element --><!-- to expose $consent controller to children -->
<section consent>
<!-- then use your own custom markup to create the message -->
<sectionng-if="$consent.hasNotAgreedYet()">
<p>This web application uses cookies to store private data.</p>
<buttonng-click="$consent.agree();">Agree</button>
</section>
</section>

To create multiple consents in a single application, pass a unique key to the consent attribute:

<!-- consent for cookie disclaimer -->
<sectionconsent="cookie-disclaimer">
<sectionng-if="$consent.hasNotAgreedYet()">
<p>This website uses cookies.</p>
<buttonng-click="$consent.agree();">Ok, I understand</button>
</section>
</section>
<!-- consent for privacy disclaimer -->
<sectionconsent="privacy-disclaimer">
<sectionng-if="$consent.hasNotAgreedYet()">
<p>This website stores private data.</p>
<buttonng-click="$consent.agree();">Ok, I understand</button>
</section>
</section>

You can also re-use a consent across your page or application:

<!-- display consent message in header -->
<headerconsent="cookie-disclaimer">
<sectionng-if="$consent.hasNotAgreedYet()">
<p>This website uses cookies.</p>
</section>
</header>
<!-- and show the button in the footer -->
<footerconsent="cookie-disclaimer">
<buttonng-click="$consent.agree();">Ok, I understand</button>
</footer>

By default cookies are stored for 360 days, but you can customize cookie options on a consent level:

<!-- expirationDate should be string string of form 'Wdy, DD Mon YYYY HH:MM:SS GMT' -->
<headerconsent="cookie-disclaimer"consent-cookie-options="{ expires: expirationDate }">
<sectionng-if="$consent.hasNotAgreedYet()">
<p>This website uses cookies. The cookie will be stored until expiration date.</p>
</section>
</header>

The $consent API

The following methods are available on the $consent object:

$consent.hasAlreadyAgreed()

Whether or not the user has already agreed.

Arguments

None.

Returns

Boolean.

$consent.hasNotAgreedYet()

Whether or not the user still has to agree.

Arguments

None.

Returns

Boolean.

$consent.agree()

Marks the consent as agreed.

Arguments

None.

Returns

Void.

$consent.reset()

Resets a previous agreement.

Arguments

None.

Returns

Void.

Example with all available methods

<section consent>
<sectionng-if="$consent.hasNotAgreedYet()">
<p>This message will keep appearing until you agree</p>
<buttonng-click="$consent.agree()">Agree</p>
</section>
<sectionng-if="$consent.hasAlreadyAgreed()">
<p>This message will appear when user has already agreed</p>
<buttonng-click="$consent.reset()">Try again</p>
</section>
</section>

Contribute

To update the build in the dist directory:

$ gulp

To run the unit tests using the src files:

$ gulp test-src

To run the unit tests using the unminified library:

$ gulp test-dist-concatenated

To run the unit tests using the minified library:

$ gulp test-dist-minified

Change log

v2.1.1

• Added check to make sure expires is always set correctly to fix #4

v2.1.0

• Added support for AngularJS versions older than AngularJS 1.4

v2.0.0

• Cookies are now stored for 360 days by default (instead of session)
• Added support for cookie options via consent-cookie-options attribute

v1.0.0

• Added support for multiple consent messages simultaneously
• Updated documentation
• Added demo

v0.1.0

• Added consent directive
• Added unit tests
• Added initial documentation