Merge branch '1354-terms-of-service' into 'master'

MErging into master to test tos on ptr

See merge request Isleward/isleward!444

src/client/js/config.js

@@ -1,7 +1,7 @@
 define([
-
+	'js/system/browserStorage'
 ], function (
-
+	browserStorage
 ) {
 	const config = {
 		showNames: true,
@@ -30,13 +30,13 @@ define([
 	};
 
 	const getKeyName = key => {
-		return `iwd_opt_${key.toLowerCase()}`;
+		return `opt_${key}`;
 	};
 
 	config.set = (key, value) => {
 		config[key] = value;
 
-		window.localStorage.setItem(getKeyName(key), config[key]);
+		browserStorage.set(getKeyName(key), config[key]);
 	};
 
 	config.toggle = key => {
@@ -45,12 +45,11 @@ define([
 		else
 			config[key] = !config[key];
 
-		window.localStorage.setItem(getKeyName(key), config[key]);
+		browserStorage.set(getKeyName(key), config[key]);
 	};
 
 	const loadValue = key => {
-		const keyName = getKeyName(key);
-		const { [keyName]: currentValue = '{unset}' } = localStorage;
+		const currentValue = browserStorage.get(getKeyName(key));
 
 		if (currentValue === '{unset}')
 			return;

src/client/js/misc/tosAcceptanceValid.js

@@ -0,0 +1,14 @@
+define([
+	'js/system/browserStorage',
+	'js/system/globals'
+], function (
+	browserStorage,
+	globals
+) {
+	return () => {
+		const acceptedVersion = browserStorage.get('tos_accepted_version');
+		const currentVersion = globals.clientConfig.tos.version;
+
+		return (acceptedVersion === currentVersion);
+	};
+});

src/client/js/system/browserStorage.js

@@ -0,0 +1,25 @@
+define([
+	'js/system/browserStorage'
+], function (
+	browserStorage
+) {
+	const getEntryName = key => {
+		return `iwd_${key}`;
+	};
+
+	return {
+		get: key => {
+			const keyName = getEntryName(key);
+
+			const { [keyName]: value = '{unset}' } = localStorage;
+
+			return value;
+		},
+
+		set: (key, value) => {
+			const keyName = getEntryName(key);
+
+			localStorage.setItem(keyName, value);
+		}
+	};
+});

src/client/ui/factory.js

@@ -1,9 +1,13 @@
 define([
 	'ui/uiBase',
-	'js/system/events'
+	'js/system/events',
+	'js/system/globals',
+	'js/misc/tosAcceptanceValid'
 ], function (
 	uiBase,
-	events
+	events,
+	globals,
+	tosAcceptanceValid
 ) {
 	const startupUis = [
 		'inventory',
@@ -162,7 +166,13 @@ define([
 		},
 
 		afterPreload: function () {
-			this.build('characters', {});
+			if (!globals.clientConfig.tos.required || tosAcceptanceValid()) {
+				this.build('characters');
+
+				return;
+			}
+
+			this.build('terms');
 		},
 
 		update: function () {

src/client/ui/templates/terms/styles.less

@@ -0,0 +1,74 @@
+@import "../../../css/colors.less";
+
+.uiTerms {
+	display: none;
+	width: 562px;
+	height: 700px;
+	margin-top: -80px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+
+	> * {
+		flex-shrink: 0;
+	}
+
+	.logo {
+		width: 562px;
+		height: 200px;
+		margin-bottom: 24px;
+		filter: drop-shadow(0px -4px 0px @blackD) 
+		drop-shadow(0px 4px 0px @blackD)
+		drop-shadow(4px 0px 0px @blackD) 
+		drop-shadow(-4px 0px 0px @blackD);
+	}
+
+	.heading {
+		color: @orangeA;
+		filter: drop-shadow(0px -4px 0px @blackD) 
+		drop-shadow(0px 4px 0px @blackD)
+		drop-shadow(4px 0px 0px @blackD) 
+		drop-shadow(-4px 0px 0px @blackD);
+		margin-bottom: 24px;
+	}
+
+	.content {
+		flex: 1;
+		width: 100%;
+		overflow-y: auto;
+		background-color: @blackC;
+		border: 5px solid @blackB;
+		padding: 10px;
+		color: @white;
+		text-align: justify;
+	}
+
+	.buttons {
+		width: 100%;
+		background-color: @blackC;
+		display: flex;
+		justify-content: space-between;
+		border-style: solid;
+		border-color: @blackB;
+		border-width: 0px 5px 5px 5px;
+		padding: 5px;
+
+		.btn {
+			background-color: @blueC;
+			color: @white;
+			height: 35px;
+			padding-left: 10px;
+			padding-right: 10px;
+
+			&:hover {
+				background-color: @blueB;
+			}
+		}
+	}
+
+}
+
+.mobile .uiTerms {
+	height: 80%;
+	margin-top: 0px;
+}

src/client/ui/templates/terms/template.html

@@ -0,0 +1,9 @@
+<div class="uiTerms">
+    <img class="logo" src="images/logo_0.png" alt="">
+    <div class="heading">Terms of Service</div>
+	<div class="content"></div>
+	<div class="buttons">
+		<div class="el btn btnDecline">Decline</div>
+		<div class="el btn btnAccept" title="Please scroll to the bottom to accept">Accept</div>
+	</div>
+</div>

src/client/ui/templates/terms/terms.js

@@ -0,0 +1,42 @@
+define([
+	'ui/factory',
+	'html!ui/templates/terms/template',
+	'css!ui/templates/terms/styles',
+	'js/system/globals',
+	'js/system/browserStorage'
+], function (
+	uiFactory,
+	template,
+	styles,
+	globals,
+	browserStorage
+) {
+	return {
+		tpl: template,
+		centered: true,
+
+		postRender: function () {
+			const { clientConfig: { tos: { content, version } } } = globals;
+			const morphedContent = content.split('\n').join('<br />');
+
+			const elHeading = this.find('.heading');
+			elHeading.html(`${elHeading.html()} (v${version})`);
+
+			this.find('.content').html(morphedContent);
+
+			this.find('.btnDecline').on('click', this.onDeclineClick.bind(this));
+			this.find('.btnAccept').on('click', this.onAcceptClick.bind(this, version));
+		},
+
+		onDeclineClick: function () {
+			window.location = window.location;
+		},
+
+		onAcceptClick: function (version) {
+			browserStorage.set('tos_accepted_version', version);
+			this.destroy();
+
+			uiFactory.build('characters');
+		}
+	};
+});

src/server/config/clientConfig.js

@@ -1,4 +1,5 @@
-let events = require('../misc/events');
+const events = require('../misc/events');
+const tos = require('./tos');
 
 const config = {
 	resourceList: [],
@@ -6,7 +7,8 @@ const config = {
 	contextMenuActions: {
 		player: [],
 		npc: []
-	}
+	},
+	tos
 };
 
 module.exports = {
@@ -14,6 +16,7 @@ module.exports = {
 		events.emit('onBeforeGetResourceList', config.resourceList);
 		events.emit('onBeforeGetUiList', config.uiList);
 		events.emit('onBeforeGetContextMenuActions', config.contextMenuActions);
+		events.emit('onBeforeGetTermsOfService', config.tos);
 	},
 
 	getClientConfig: function (msg) {

src/server/config/serverConfig.js

@@ -8,7 +8,7 @@ module.exports = {
 	// sqlite
 	// rethink
 	//eslint-disable-next-line no-process-env
-	db: process.env.IWD_DB || 'rethink',
+	db: process.env.IWD_DB || 'sqlite',
 	//eslint-disable-next-line no-process-env
 	dbHost: process.env.IWD_DB_HOST || 'localhost',
 	//eslint-disable-next-line no-process-env

src/server/config/tos.js

@@ -0,0 +1,18 @@
+const version = '0.0.1';
+
+const content = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus venenatis risus enim, a bibendum est suscipit vel. Donec consectetur justo nec sodales varius. Ut dignissim condimentum lacus, at euismod arcu scelerisque in. Vestibulum et orci quis nulla laoreet placerat. Fusce tempus, tortor eu commodo suscipit, massa urna rhoncus nisi, eget malesuada lorem mauris nec lorem. Vestibulum eu turpis rutrum, auctor nulla eget, placerat mi. Praesent porta, tortor pulvinar euismod ornare, quam sem porta nulla, rhoncus egestas odio nulla sit amet massa. Phasellus non lacus eu massa commodo feugiat. Proin cursus augue nibh, at egestas nibh facilisis at. Nam tempus dictum mollis. In ante ex, commodo ut tortor in, fermentum posuere felis. Donec vel ipsum maximus nisi lacinia finibus non a enim. Maecenas elementum, diam id placerat gravida, mi ex tristique eros, id rhoncus ex diam eget nibh.
+
+Vestibulum non viverra elit. Cras nec turpis nibh. Ut eu diam nisl. Pellentesque scelerisque augue imperdiet, bibendum ante non, imperdiet est. Praesent eu lacus porttitor, maximus sem vel, fringilla arcu. Nunc aliquet dictum justo, eu blandit dolor finibus eget. Vestibulum massa risus, convallis sit amet venenatis ac, viverra interdum diam. Aenean at condimentum enim, ut blandit odio. Proin congue nulla nisi, at consequat ipsum imperdiet ut. Morbi nec varius risus. Mauris dui erat, semper ut massa quis, ornare congue nisl. Duis sed dolor iaculis, egestas ligula nec, pretium libero. Nulla leo elit, lacinia imperdiet nisl et, viverra aliquet ex. Sed quis fringilla felis.
+
+Donec eget ligula tristique, consequat nunc in, porttitor elit. Nulla faucibus eleifend elit eget vestibulum. Nam imperdiet dui nec felis egestas, at dapibus turpis volutpat. Sed faucibus ultrices porta. Aliquam tempus est libero, sed pulvinar erat luctus et. Integer convallis maximus justo, non pulvinar nisl viverra vitae. In hac habitasse platea dictumst. Etiam ut nibh vel odio accumsan fermentum vitae consectetur metus.
+
+Mauris eget erat ipsum. Suspendisse efficitur dictum metus, ac vulputate risus euismod id. Quisque suscipit quis sem ac luctus. Integer tincidunt sit amet massa feugiat auctor. Ut faucibus cursus augue eu ornare. Morbi arcu elit, tincidunt eu elit non, rhoncus egestas justo. Fusce viverra fermentum purus sed finibus. Nunc consectetur, massa vehicula laoreet mattis, sapien neque facilisis quam, vel ultrices mi lacus nec odio. Sed eros sapien, cursus vel euismod a, ornare eu magna. Vestibulum pharetra in sapien vehicula commodo. Aliquam erat volutpat. Duis eget risus augue. Maecenas at lobortis urna. Morbi ultrices porttitor lorem consequat volutpat. Phasellus ac tristique purus, eu vestibulum quam.
+
+In vehicula mauris neque, nec hendrerit enim accumsan quis. Nunc sed sapien ac odio venenatis blandit. Vestibulum et ipsum arcu. Ut lectus dolor, venenatis et massa quis, auctor mollis tellus. Nulla mauris velit, lacinia id ligula id, molestie ullamcorper risus. Sed tincidunt feugiat metus, a mattis eros aliquet non. Sed gravida risus at vestibulum aliquet. Maecenas pellentesque libero eu elit cursus, a blandit massa ultricies. Donec urna eros, facilisis ac lacus eu, vulputate volutpat nibh. Nam feugiat molestie ligula, vitae lacinia nibh interdum in. In pellentesque est et lorem euismod, eu vehicula justo placerat. Mauris quis ligula nec enim consectetur congue. Vestibulum et maximus ex.
+`;
+
+module.exports = {
+	version,
+	required: true,
+	content
+};