closes #5167

package.json

@@ -31,6 +31,7 @@
     "connect-multiparty": "^2.0.0",
     "connect-redis": "~3.1.0",
     "cookie-parser": "^1.3.3",
+    "cookieconsent": "^3.0.1",
     "cron": "^1.0.5",
     "csurf": "^1.6.1",
     "daemon": "~1.1.0",

public/language/en_GB/global.json

@@ -125,5 +125,9 @@
 
 	"unsaved-changes": "You have unsaved changes. Are you sure you wish to navigate away?",
 	"reconnecting-message": "Looks like your connection to %1 was lost, please wait while we try to reconnect.",
-	"play": "Play"
+	"play": "Play",
+
+	"cookies.message": "This website uses cookies to ensure you get the best experience on our website.",
+	"cookies.accept": "Got it!",
+	"cookies.learn_more": "Learn More"
 }

public/src/admin/settings/cookies.js

@@ -0,0 +1,15 @@
+'use strict';
+
+/* globals define */
+
+define('admin/settings/cookies', [
+	'admin/modules/colorpicker'
+], function (colorpicker) {
+	var Module = {};
+
+	Module.init = function () {
+		colorpicker.enable($('[data-colorpicker="1"]'));
+	};
+
+	return Module;
+});

public/src/app.js

@@ -55,6 +55,7 @@ app.cacheBuster = null;
 		overrides.overrideTimeago();
 		createHeaderTooltips();
 		app.showEmailConfirmWarning();
+		app.showCookieWarning();
 
 		socket.removeAllListeners('event:nodebb.ready');
 		socket.on('event:nodebb.ready', function (data) {
@@ -622,4 +623,39 @@ app.cacheBuster = null;
 
 		document.head.appendChild(linkEl);
 	};
+
+	app.showCookieWarning = function () {
+		if (!config.cookies.enabled) {
+			// Only show warning if enabled (obviously)
+			return;
+		} else if (window.location.pathname.startsWith(config.relative_path + '/admin')) {
+			// No need to show cookie consent warning in ACP
+			return;
+		}
+
+		var consentConfig = {
+			"palette": {
+				"popup": {
+					"background": config.cookies.palette.background,
+					"text": config.cookies.palette.text
+				},
+				"button": {
+					"background": config.cookies.palette.button,
+					"text": config.cookies.palette.buttonText
+				}
+			},
+			"theme": config.cookies.style,
+			"position": config.cookies.position,
+			"content": {
+				"dismiss": config.cookies.dismiss,
+				"link": config.cookies.link
+			}
+		};
+
+		if (config.cookies.message) {
+			consentConfig.content.message = config.cookies.message;
+		}
+
+		window.cookieconsent.initialise(consentConfig);
+	};
 }());

src/controllers/api.js

@@ -63,6 +63,21 @@ apiController.getConfig = function (req, res, next) {
 	config.searchEnabled = plugins.hasListeners('filter:search.query');
 	config.bootswatchSkin = 'default';
 
+	config.cookies = {
+		enabled: parseInt(meta.config.cookieConsentEnabled, 10) === 1,
+		position: meta.config.cookieConsentPosition || 'bottom',
+		style: meta.config.cookieConsentStyle || 'edgeless',
+		message: meta.config.cookieConsentMessage || '[[global:cookies.message]]',
+		dismiss: meta.config.cookieConsentDismiss || '[[global:cookies.accept]]',
+		link: meta.config.cookieConsentLink || '[[global:cookies.learn_more]]',
+		palette: {
+			background: meta.config.cookieConsentPaletteBackground || '#edeff5',
+			text: meta.config.cookieConsentPaletteText || '#838391',
+			button: meta.config.cookieConsentPaletteButton || '#59b3d0',
+			buttonText: meta.config.cookieConsentPaletteButtonText || '#ffffff',
+		}
+	};
+
 	async.waterfall([
 		function (next) {
 			if (!req.user) {

src/meta/css.js

@@ -48,11 +48,11 @@ module.exports = function (Meta) {
 
 			async.waterfall([
 				function (next) {
-					getStyleSource(plugins.lessFiles, '\n@import ".', '.less', next);
+					getStyleSource(plugins.cssFiles, '\n@import (inline) ".', '.css', next);
 				},
 				function (src, next) {
 					source += src;
-					getStyleSource(plugins.cssFiles, '\n@import (inline) ".', '.css', next);
+					getStyleSource(plugins.lessFiles, '\n@import ".', '.less', next);
 				},
 				function (src, next) {
 					source += src;
@@ -67,6 +67,7 @@ module.exports = function (Meta) {
 
 				source += '\n@import (inline) "..' + path.sep + '..' + path.sep + 'public/vendor/jquery/css/smoothness/jquery-ui.css";';
 				source += '\n@import (inline) "..' + path.sep + '..' + path.sep + 'public/vendor/jquery/bootstrap-tagsinput/bootstrap-tagsinput.css";';
+				source += '\n@import (inline) "..' + path.sep + '..' + path.sep + 'node_modules/cookieconsent/build/cookieconsent.min.css";';
 				source += '\n@import (inline) "..' + path.sep + 'public/vendor/colorpicker/colorpicker.css";';
 				source += '\n@import "..' + path.sep + '..' + path.sep + 'public/less/flags.less";';
 				source += '\n@import "..' + path.sep + '..' + path.sep + 'public/less/blacklist.less";';

src/meta/js.js

@@ -38,7 +38,8 @@ module.exports = function (Meta) {
 				'public/src/ajaxify.js',
 				'public/src/overrides.js',
 				'public/src/widgets.js',
-				"./node_modules/promise-polyfill/promise.js"
+				"./node_modules/promise-polyfill/promise.js",
+				"./node_modules/cookieconsent/build/cookieconsent.min.js"
 			],
 
 			// files listed below are only available client-side, or are bundled in to reduce # of network requests on cold load

src/views/admin/partials/menu.tpl

@@ -39,6 +39,7 @@
 			<li><a href="{relative_path}/admin/settings/pagination">Pagination</a></li>
 			<li><a href="{relative_path}/admin/settings/tags">Tags</a></li>
 			<li><a href="{relative_path}/admin/settings/notifications">Notifications</a></li>
+			<li><a href="{relative_path}/admin/settings/cookies">Cookies</a></li>
 			<li><a href="{relative_path}/admin/settings/web-crawler">Web Crawler</a></li>
 			<li><a href="{relative_path}/admin/settings/sockets">Sockets</a></li>
 			<li><a href="{relative_path}/admin/settings/advanced">Advanced</a></li>
@@ -189,6 +190,7 @@
 					<li><a href="{relative_path}/admin/settings/pagination">Pagination</a></li>
 					<li><a href="{relative_path}/admin/settings/tags">Tags</a></li>
 					<li><a href="{relative_path}/admin/settings/notifications">Notifications</a></li>
+					<li><a href="{relative_path}/admin/settings/cookies">Cookies</a></li>
 					<li><a href="{relative_path}/admin/settings/web-crawler">Web Crawler</a></li>
 					<li><a href="{relative_path}/admin/settings/sockets">Sockets</a></li>
 					<li><a href="{relative_path}/admin/settings/advanced">Advanced</a></li>

src/views/admin/settings/advanced.tpl

@@ -53,21 +53,6 @@
 	</div>
 </div>
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">Cookies</div>
-	<div class="col-sm-10 col-xs-12">
-		<form>
-			<div class="form-group">
-				<label for="cookieDomain">Set domain for session cookie</label>
-				<input class="form-control" id="cookieDomain" type="text" placeholder=".domain.tld" data-field="cookieDomain" /><br />
-				<p class="help-block">
-					Leave blank for default
-				</p>
-			</div>
-		</form>
-	</div>
-</div>
-
 <div class="row">
 	<div class="col-sm-2 col-xs-12 settings-header">Traffic Management</div>
 	<div class="col-sm-10 col-xs-12">

src/views/admin/settings/cookies.tpl

@@ -0,0 +1,98 @@
+<!-- IMPORT admin/settings/header.tpl -->
+
+<div class="row">
+	<div class="col-sm-2 col-xs-12 settings-header">EU Consent</div>
+	<div class="col-sm-10 col-xs-12">
+		<form>
+			<div class="form-group">
+				<div class="checkbox">
+					<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+						<input type="checkbox" class="mdl-switch__input" id="cookieConsentEnabled" data-field="cookieConsentEnabled">
+						<span class="mdl-switch__label"><strong>Enabled</strong></span>
+					</label>
+				</div>
+			</div>
+			<div class="form-group">
+				<label for="cookieConsentMessage">Notification message</label>
+				<input class="form-control" id="cookieConsentMessage" type="text" data-field="cookieConsentMessage" />
+				<p class="help-block">
+					Leave blank to use NodeBB localised defaults
+				</p>
+			</div>
+			<div class="form-group">
+				<label for="cookieConsentDismiss">Notification message</label>
+				<input class="form-control" id="cookieConsentDismiss" type="text" data-field="cookieConsentDismiss" />
+				<p class="help-block">
+					Leave blank to use NodeBB localised defaults
+				</p>
+			</div>
+			<div class="form-group">
+				<label for="cookieConsentLink">Policy Link Text</label>
+				<input class="form-control" id="cookieConsentLink" type="text" data-field="cookieConsentLink" />
+				<p class="help-block">
+					Leave blank to use NodeBB localised defaults
+				</p>
+			</div>
+		</form>
+	</div>
+</div>
+
+<div class="row">
+	<div class="col-sm-2 col-xs-12 settings-header">EU Consent</div>
+	<div class="col-sm-10 col-xs-12">
+		<form>
+			<div class="form-group">
+				<label for="cookieConsentStyle">Notification style</label>
+				<select class="form-control" id="cookieConsentStyle" data-field="cookieConsentStyle">
+					<option value="block">Block</option>
+					<option value="edgeless" selected>Edgeless</option>
+					<option value="classic">Classic</option>
+				</select>
+			</div>
+			<div class="form-group">
+				<label for="cookieConsentPosition">Position</label>
+				<select class="form-control" id="cookieConsentPosition" data-field="cookieConsentPosition">
+					<option value="top">Top</option>
+					<option value="bottom" selected>Bottom</option>
+					<option value="top-left">Top Left</option>
+					<option value="top-right">Top Right</option>
+					<option value="bottom-left" selected>Bottom Left</option>
+					<option value="bottom-right">Bottom Right</option>
+				</select>
+			</div>
+			<div class="form-group">
+				<label for="cookieConsentPaletteBackground">Background Color</label>
+				<input class="form-control" id="cookieConsentPaletteBackground" type="text" placeholder="#edeff5" data-field="cookieConsentPaletteBackground" data-colorpicker="1" />
+			</div>
+			<div class="form-group">
+				<label for="cookieConsentPaletteText">Text Color</label>
+				<input class="form-control" id="cookieConsentPaletteText" type="text" placeholder="#838391" data-field="cookieConsentPaletteText" data-colorpicker="1" />
+			</div>
+			<div class="form-group">
+				<label for="cookieConsentPaletteButton">Button Background Color</label>
+				<input class="form-control" id="cookieConsentPaletteButton" type="text" placeholder="#59b3d0" data-field="cookieConsentPaletteButton" data-colorpicker="1" />
+			</div>
+			<div class="form-group">
+				<label for="cookieConsentPaletteButtonText">Button Text Color</label>
+				<input class="form-control" id="cookieConsentPaletteButtonText" type="text" placeholder="#ffffff" data-field="cookieConsentPaletteButtonText" data-colorpicker="1" />
+			</div>
+		</form>
+	</div>
+</div>
+
+<div class="row">
+	<div class="col-sm-2 col-xs-12 settings-header">Settings</div>
+	<div class="col-sm-10 col-xs-12">
+		<form>
+			<div class="form-group">
+				<label for="cookieDomain">Session cookie domain</label>
+				<input class="form-control" id="cookieDomain" type="text" placeholder=".domain.tld" data-field="cookieDomain" /><br />
+				<p class="help-block">
+					Leave blank for default
+				</p>
+			</div>
+		</form>
+	</div>
+</div>
+
+<!-- IMPORT admin/settings/footer.tpl -->