Merge pull request #11533 from nextcloud/accessibility-cache-fixes

Added cache override to ensure an always up-to-date accessibility css

apps/accessibility/lib/AppInfo/Application.php

@@ -54,8 +54,10 @@ class Application extends App {
 		$loggedUser = $this->userSession->getUser();
 		if (!is_null($loggedUser)) {
 			$userValues = $this->config->getUserKeys($loggedUser->getUID(), $this->appName);
+			// we want to check if any theme or font is enabled.
 			if (count($userValues) > 0) {
-				$linkToCSS = $this->urlGenerator->linkToRoute($this->appName . '.accessibility.getCss', ['md5' => md5(implode('-', $userValues))]);
+				$hash = $this->config->getUserValue($loggedUser->getUID(), $this->appName, 'icons-css', md5(implode('-', $userValues)));
+				$linkToCSS = $this->urlGenerator->linkToRoute($this->appName . '.accessibility.getCss', ['md5' => $hash]);
 				\OCP\Util::addHeader('link', ['rel' => 'stylesheet', 'href' => $linkToCSS]);
 			}
 		}

apps/accessibility/lib/Controller/AccessibilityController.php

@@ -182,6 +182,9 @@ class AccessibilityController extends Controller {
 		$response->addHeader('Expires', $expires->format(\DateTime::RFC1123));
 		$response->addHeader('Pragma', 'cache');
 
+		// store current cache hash
+		$this->config->setUserValue($this->userSession->getUser()->getUID(), $this->appName, 'icons-css', md5($css));
+
 		return $response;
 	}
 

apps/accessibility/lib/Controller/ConfigController.php

@@ -36,6 +36,9 @@ class ConfigController extends OCSController {
 	/** @var string */
 	protected $appName;
 
+	/** @var string */
+	protected $userId;
+
 	/** @var string */
 	protected $serverRoot;
 
@@ -67,6 +70,7 @@ class ConfigController extends OCSController {
 		$this->config                = $config;
 		$this->userSession           = $userSession;
 		$this->accessibilityProvider = $accessibilityProvider;
+		$this->userId				 = $userSession->getUser()->getUID();
 	}
 
 	/**
@@ -79,8 +83,8 @@ class ConfigController extends OCSController {
 	 */
 	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)
+			'theme' => $this->config->getUserValue($this->userId, $this->appName, 'theme', false),
+			'font' => $this->config->getUserValue($this->userId, $this->appName, 'font', false)
 		]);
 	}
 
@@ -95,20 +99,28 @@ class ConfigController extends OCSController {
 	 */
 	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);
+				$this->config->deleteUserValue($this->userId, $this->appName, $key);
+				$userValues = $this->config->getUserKeys($this->userId, $this->appName);
+
+				// remove hash if no settings selected
+				if (count($userValues) === 1 && $userValues[0] === 'icons-css') {
+					$this->config->deleteUserValue($this->userId, $this->appName, 'icons-css');
+				}
+
 				return new DataResponse();
 			}
 
+			$themes = $this->accessibilityProvider->getThemes();
+			$fonts  = $this->accessibilityProvider->getFonts();
+
 			$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);
+				$this->config->setUserValue($this->userId, $this->appName, $key, $value);
 				return new DataResponse();
 			}
 

apps/accessibility/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "accessibility",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

apps/accessibility/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "accessibility",
 	"description": "Provides multiple accessibilities options to ease your use of nextcloud",
-	"version": "1.0.1",
+	"version": "1.0.2",
 	"author": "John Molakvoæ <skjnldsv@protonmail.com>",
 	"license": "agpl",
 	"private": true,

apps/accessibility/src/App.vue

@@ -24,7 +24,7 @@ import preview from './components/itemPreview';
 import axios from 'axios';
 
 export default {
-	name: 'app',
+	name: 'Accessibility',
 	components: { preview },
 	beforeMount() {
 		// importing server data into the app
@@ -54,7 +54,7 @@ export default {
 			};
 		},
 		tokenHeaders() {
-			return { headers: { requesttoken: OC.requestToken } }
+			return { headers: { requesttoken: OC.requestToken } };
 		}
 	},
 	methods: {
@@ -73,8 +73,11 @@ export default {
 		 * @param {string} id the data of the change
 		 */
 		selectItem(type, id) {
-			axios
-				.post(OC.linkToOCS('apps/accessibility/api/v1/config', 2) + type, {value: id}, this.tokenHeaders)
+			axios.post(
+					OC.linkToOCS('apps/accessibility/api/v1/config', 2) + type,
+					{ value: id },
+					this.tokenHeaders
+				)
 				.then(response => {
 					this.serverData[type] = id;
 
@@ -84,11 +87,23 @@ export default {
 						// insert new css
 						let link = document.createElement('link');
 						link.rel = 'stylesheet';
-						link.href = OC.generateUrl('/apps/accessibility/css/user-style.css');
-						document.head.appendChild(link)
+						link.href = OC.generateUrl('/apps/accessibility/css/user-style.css') + '?v=' + new Date().getTime();
+						document.head.appendChild(link);
+					} else {
+						// compare arrays
+						if (
+							JSON.stringify(Object.values(this.selected)) ===
+							JSON.stringify([false, false])
+						) {
+							// if nothing is selected, blindly remove the css
+							link.remove();
 						} else {
 							// force update
-						link.href = link.href.split('?')[0] + '?v=' + new Date().getTime();
+							link.href =
+								link.href.split('?')[0] +
+								'?v=' +
+								new Date().getTime();
+						}
 					}
 				})
 				.catch(err => {