Config set and drone

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

.drone.yml

@@ -35,6 +35,13 @@ pipeline:
     when:
       matrix:
         TESTS: vue-build-oauth2
+  vue-build-accessibility:
+    image: node
+    commands:
+     - ./build/vue-builds.sh ./apps/accessibility/js/accessibility.js
+    when:
+      matrix:
+        TESTS: vue-build-accessibility
   checkers:
     image: nextcloudci/php7.0:php7.0-19
     commands:
@@ -693,6 +700,7 @@ matrix:
     - TESTS: vue-build-settings
     - TESTS: vue-build-updatenotification
     - TESTS: vue-build-oauth2
+    - TESTS: vue-build-accessibility
     - TESTS: nodb-codecov
       ENABLE_REDIS: true
     - TESTS: db-codecov

apps/accessibility/appinfo/routes.php

@@ -25,4 +25,16 @@ return [
     'routes' => [
         ['name' => 'accessibility#getCss', 'url' => '/css/user-{md5}.css', 'verb' => 'GET'],
     ],
+    'ocs' => [
+		[
+			'name' => 'Config#getConfig',
+			'url'  => '/api/v1/config',
+			'verb' => 'GET',
+        ],
+		[
+			'name' => 'Config#setConfig',
+			'url'  => '/api/v1/config/{key}',
+			'verb' => 'POST',
+		],
+    ]
 ];

apps/accessibility/css/style.scss

@@ -33,21 +33,26 @@
 		background-size: cover;
 		background-repeat: no-repeat;
 	}
+	h3 {
+		display: flex;
+		justify-content: space-between;
+		line-height: 1em;
+		align-items: center;
+	}
 	p {
 		text-align: justify;
 	}
-	.icon-checkmark {
-		position: absolute;
-		width: 50px;
-		height: 50px;
-		background-size: contain;
-		right: -10px;
-		top: -15px;
-		opacity: 0;
+	.icon-checkmark-color {
 		transition: all 100ms ease-in-out;
+		border-radius: 1em;
+		padding: 4px 5px 4px 20px;
+		background-position: 4px center;
+		opacity: 0;
+		visibility: hidden;
 	}
-	&.selected .icon-checkmark {
+	&.selected .icon-checkmark-color {
 		opacity: 1;
-		filter: drop-shadow(0 1px 1px var(--color-box-shadow));
+		visibility: visible;
+		box-shadow: 0 0 0 1px var(--color-success);
 	}
 }

apps/accessibility/lib/Controller/ConfigController.php

@@ -0,0 +1,121 @@
+<?php
+declare (strict_types = 1);
+/**
+ * @copyright Copyright (c) 2018 John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+namespace OCA\Accessibility\Controller;
+
+use OCA\Accessibility\AccessibilityProvider;
+use OCP\AppFramework\Http;
+use OCP\AppFramework\Http\DataResponse;
+use OCP\AppFramework\OCSController;
+use OCP\AppFramework\OCS\OCSBadRequestException;
+use OCP\IConfig;
+use OCP\IRequest;
+use OCP\IUserSession;
+
+class ConfigController extends OCSController {
+
+	/** @var string */
+	protected $appName;
+
+	/** @var string */
+	protected $serverRoot;
+
+	/** @var IConfig */
+	private $config;
+
+	/** @var IUserSession */
+	private $userSession;
+
+	/** @var AccessibilityProvider */
+	private $accessibilityProvider;
+
+	/**
+	 * Config constructor.
+	 *
+	 * @param string $appName
+	 * @param IRequest $request
+	 * @param IConfig $config
+	 * @param IUserSession $userSession
+	 * @param AccessibilityProvider $accessibilityProvider
+	 */
+	public function __construct(string $appName,
+								IRequest $request,
+								IConfig $config,
+								IUserSession $userSession,
+								AccessibilityProvider $accessibilityProvider) {
+		parent::__construct($appName, $request);
+		$this->appName               = $appName;
+		$this->config                = $config;
+		$this->userSession           = $userSession;
+		$this->accessibilityProvider = $accessibilityProvider;
+	}
+
+	/**
+	 * @NoAdminRequired
+	 *
+	 * Get user accessibility config
+	 *
+	 * @param string $key theme or font
+	 * @return DataResponse
+	 */
+	public function getConfig(): DataResponse {
+		return new DataResponse([
+			'theme' => $this->config->getUserValue($this->userSession->getUser()->getUID(), $this->appName, 'theme', false),
+			'font' => $this->config->getUserValue($this->userSession->getUser()->getUID(), $this->appName, 'font', false)
+		]);
+	}
+
+	/**
+	 * @NoAdminRequired
+	 *
+	 * Set theme or font config
+	 *
+	 * @param string $key theme or font
+	 * @return DataResponse
+	 * @throws Exception
+	 */
+	public function setConfig(string $key, $value): DataResponse {
+		if ($key === 'theme' || $key === 'font') {
+			$themes = $this->accessibilityProvider->getThemes();
+			$fonts  = $this->accessibilityProvider->getFonts();
+
+			if ($value === false) {
+				$this->config->deleteUserValue($this->userSession->getUser()->getUID(), $this->appName, $key);
+				return new DataResponse();
+			}
+
+			$availableOptions = array_map(function($option) {
+				return $option['id'];
+			}, array_merge($themes, $fonts));
+
+			if (in_array($value, $availableOptions)) {
+				$this->config->setUserValue($this->userSession->getUser()->getUID(), $this->appName, $key, $value);
+				return new DataResponse();
+			}
+
+			throw new OCSBadRequestException('Invalid value: ' . $value);
+		}
+
+		throw new OCSBadRequestException('Invalid key: ' . $key);
+	}
+
+}

apps/accessibility/package.json

@@ -11,8 +11,7 @@
 		"build": "webpack --progress --hide-modules --config webpack.prod.js"
 	},
 	"dependencies": {
-		"@babel/core": "^7.0.0-beta.51",
-		"@babel/preset-env": "^7.0.0-beta.51",
+		"axios": "^0.18.0",
 		"vue": "^2.5.16"
 	},
 	"browserslist": [
@@ -21,7 +20,7 @@
 	],
 	"devDependencies": {
 		"babel-core": "^6.26.3",
-		"babel-loader": "^8.0.0-beta.3",
+		"babel-loader": "^7.1.4",
 		"babel-preset-env": "^1.7.0",
 		"css-loader": "^0.28.11",
 		"file-loader": "^1.1.11",

apps/accessibility/src/App.vue

@@ -21,6 +21,7 @@
 
 <script>
 import preview from './components/itemPreview';
+import axios from 'axios';
 
 export default {
 	name: 'app',
@@ -51,6 +52,9 @@ export default {
 				theme: this.serverData.theme,
 				font: this.serverData.font
 			};
+		},
+		tokenHeaders() {
+			return { headers: { requesttoken: OC.requestToken } }
 		}
 	},
 	methods: {
@@ -69,12 +73,28 @@ export default {
 		 * @param {string} id the data of the change
 		 */
 		selectItem(type, id) {
-			this.serverData[type] = id;
-			let cssLink = document.querySelector(
-				'link[rel=stylesheet][href*=accessibility][href*=user-]'
-			);
-			cssLink.href =
-				cssLink.href.split('?')[0] + '?v=' + new Date().getTime();
+			axios
+				.post(OC.linkToOCS('apps/accessibility/api/v1/config', 2) + type, {value: id}, this.tokenHeaders)
+				.then(response => {
+					this.serverData[type] = id;
+
+					// Remove old link
+					let oldLink = document.querySelector('link[rel=stylesheet][href*=accessibility][href*=user-]');
+					if (oldLink) {
+						oldLink.remove();
+					}
+					
+					// Insert new css
+					let link = document.createElement('link');
+					link.rel = 'stylesheet';
+					link.href = OC.generateUrl('/apps/accessibility/css/user-style.css');
+					link.href = link.href.split('?')[0] + '?v=' + new Date().getTime();
+					document.head.appendChild(link)
+				})
+				.catch(err => {
+					console.log(err, err.response);
+					OC.Notification.showTemporary(t('accessibility', err.response.data.ocs.meta.message + '. Unable to apply the setting.'));
+				});
 		}
 	}
 };

apps/accessibility/src/components/itemPreview.vue

@@ -1,9 +1,11 @@
 <template>
 	<div :class="{preview: true, selected: preview.id === selected}"
 		 @click="selectItem">
-		<div class="icon-checkmark"></div>
 		<div class="preview-image" :style="{backgroundImage: 'url(' + preview.img + ')'}"></div>
-		<h3>{{preview.title}}</h3>
+		<h3>
+			<span>{{preview.title}}</span>
+			<div class="icon-checkmark-color">{{t('accessibility', 'enabled')}}</div>
+		</h3>
 		<p>{{preview.text}}</p>
 	</div>
 </template>

apps/accessibility/src/main.js

@@ -3,6 +3,7 @@ import App from './App.vue';
 
 /* global t */
 // bind to window
+Vue.prototype.OC = OC;
 Vue.prototype.t = t;
 
 new Vue({