closes #5197

package.json

@@ -31,7 +31,6 @@
     "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",
@@ -63,8 +62,8 @@
     "nodebb-plugin-spam-be-gone": "0.4.10",
     "nodebb-rewards-essentials": "0.0.9",
     "nodebb-theme-lavender": "3.0.15",
-    "nodebb-theme-persona": "4.1.85",
+    "nodebb-theme-persona": "4.1.86",
-    "nodebb-theme-vanilla": "5.1.55",
+    "nodebb-theme-vanilla": "5.1.56",
     "nodebb-widget-essentials": "2.0.13",
     "nodemailer": "2.6.4",
     "nodemailer-sendmail-transport": "1.0.0",

public/src/app.js

@@ -627,31 +627,21 @@ app.cacheBuster = null;
 		} else if (window.location.pathname.startsWith(config.relative_path + '/admin')) {
 			// No need to show cookie consent warning in ACP
 			return;
+		} else if (window.localStorage.getItem('cookieconsent') === '1') {
+			return;
 		}
 
-		var consentConfig = {
+		templates.parse('partials/cookie-consent', config.cookies, function(html) {
-			"palette": {
+			$(document.body).append(html);
-				"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) {
+			var warningEl = $('.cookie-consent');
-			consentConfig.content.message = config.cookies.message;
+			var dismissEl = warningEl.find('button');
-		}
+			dismissEl.on('click', function() {
-
+				// Save consent cookie and remove warning element
-		window.cookieconsent.initialise(consentConfig);
+				var now = new Date();
+				window.localStorage.setItem('cookieconsent', '1');
+				warningEl.remove();
+			});
+		});
 	};
 }());

src/controllers/api.js

@@ -65,17 +65,9 @@ apiController.getConfig = function (req, res, next) {
 
 	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]]',
+		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([

src/meta/css.js

@@ -68,7 +68,6 @@ 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,8 +38,7 @@ 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/settings/cookies.tpl

@@ -37,49 +37,6 @@
 	</div>
 </div>
 
-<div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">Display</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">