Add admin user customization kill switch

Signed-off-by: John Molakvoæ <[email protected]>

apps/theming/css/default.css

@@ -1,6 +1,5 @@
 :root {
   --color-main-background: #ffffff;
-  --color-main-background-not-plain: #0082c9;
   --color-main-background-rgb: 255,255,255;
   --color-main-background-translucent: rgba(var(--color-main-background-rgb), .97);
   --color-main-background-blur: rgba(var(--color-main-background-rgb), .8);

apps/theming/css/settings-admin.scss

@@ -31,6 +31,8 @@
     }
     form.uploadButton {
         width: 411px;
+        display: flex;
+        align-items: center;
     }
     form .theme-undo,
     .theme-remove-bg {
@@ -46,7 +48,14 @@
         visibility: visible;
         height: 32px;
         width: 32px;
+        // right align
+        margin-left: auto;
     }
+    form .theme-undo:not([style*="display:"]) ~ .theme-remove-bg {
+        // Only align the undo button if both are shown
+        margin-left: 0;
+    }
+
     input[type='text']:hover + .theme-undo,
     input[type='text'] + .theme-undo:hover,
     input[type='text']:focus + .theme-undo,
@@ -61,6 +70,8 @@
     label span {
         display: inline-block;
         min-width: 175px;
+        max-width: 175px;
+        white-space: wrap;
         padding: 8px 0px;
         vertical-align: top;
     }
@@ -137,6 +148,15 @@
 	#theming-preview-favicon {
         background-image: var(--image-favicon);
     }
+
+    #user-theming {
+        margin-top: 44px;
+        display: flex;
+       & > div {
+            max-width: 400px;
+            margin-bottom: 44px;
+        }
+    }
 }
 
 /* transition effects for theming value changes */

apps/theming/js/settings-admin.js

@@ -173,6 +173,11 @@ window.addEventListener('DOMContentLoaded', function () {
 		var el = $(this);
 	});
 
+	$('#userThemingDisabled').change(function(e) {
+		var checked = e.target.checked
+		setThemingValue('disable-user-theming', checked ? 'yes' : 'no')
+	});
+
 	function onChange(e) {
 		var el = $(this);
 		var setting = el.parent().find('div[data-setting]').data('setting');

apps/theming/lib/Command/UpdateConfig.php

@@ -33,7 +33,7 @@
 
 class UpdateConfig extends Command {
 	public const SUPPORTED_KEYS = [
-		'name', 'url', 'imprintUrl', 'privacyUrl', 'slogan', 'color'
+		'name', 'url', 'imprintUrl', 'privacyUrl', 'slogan', 'color', 'disable-user-theming'
 	];
 
 	public const SUPPORTED_IMAGE_KEYS = [

apps/theming/lib/Controller/ThemingController.php

@@ -151,6 +151,11 @@ public function updateStylesheet($setting, $value) {
 					$error = $this->l10n->t('The given color is invalid');
 				}
 				break;
+			case 'disable-user-theming':
+				if ($value !== "yes" && $value !== "no") {
+					$error = $this->l10n->t('Disable-user-theming should be true or false');
+				}
+				break;
 		}
 		if ($error !== null) {
 			return new DataResponse([

apps/theming/lib/Settings/Admin.php

@@ -82,6 +82,7 @@ public function getForm(): TemplateResponse {
 			'images' => $this->imageManager->getCustomImages(),
 			'imprintUrl' => $this->themingDefaults->getImprintUrl(),
 			'privacyUrl' => $this->themingDefaults->getPrivacyUrl(),
+			'userThemingDisabled' => $this->themingDefaults->isUserThemingDisabled(),
 		];
 
 		return new TemplateResponse($this->appName, 'settings-admin', $parameters, '');

apps/theming/lib/Settings/Personal.php

@@ -27,6 +27,7 @@
 
 use OCA\Theming\ITheme;
 use OCA\Theming\Service\ThemesService;
+use OCA\Theming\ThemingDefaults;
 use OCP\AppFramework\Http\TemplateResponse;
 use OCP\AppFramework\Services\IInitialState;
 use OCP\IConfig;
@@ -39,15 +40,18 @@ class Personal implements ISettings {
 	private IConfig $config;
 	private ThemesService $themesService;
 	private IInitialState $initialStateService;
+	private ThemingDefaults $themingDefaults;
 
 	public function __construct(string $appName,
 								IConfig $config,
 								ThemesService $themesService,
-								IInitialState $initialStateService) {
+								IInitialState $initialStateService,
+								ThemingDefaults $themingDefaults) {
 		$this->appName = $appName;
 		$this->config = $config;
 		$this->themesService = $themesService;
 		$this->initialStateService = $initialStateService;
+		$this->themingDefaults = $themingDefaults;
 	}
 
 	public function getForm(): TemplateResponse {
@@ -72,6 +76,7 @@ public function getForm(): TemplateResponse {
 
 		$this->initialStateService->provideInitialState('themes', array_values($themes));
 		$this->initialStateService->provideInitialState('enforceTheme', $enforcedTheme);
+		$this->initialStateService->provideInitialState('isUserThemingDisabled', $this->themingDefaults->isUserThemingDisabled());
 		Util::addScript($this->appName, 'theming-settings');
 
 		return new TemplateResponse($this->appName, 'settings-personal');

apps/theming/lib/Themes/DefaultTheme.php

@@ -109,11 +109,9 @@ public function getCSSVariables(): array {
 		$colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow));
 
 		$hasCustomLogoHeader = $this->imageManager->hasImage('logo') || $this->imageManager->hasImage('logoheader');
-		$hasCustomPrimaryColour = !empty($this->config->getAppValue(Application::APP_ID, 'color'));
 
 		$variables = [
 			'--color-main-background' => $colorMainBackground,
-			'--color-main-background-not-plain' => $this->themingDefaults->getColorPrimary(),
 			'--color-main-background-rgb' => $colorMainBackgroundRGB,
 			'--color-main-background-translucent' => 'rgba(var(--color-main-background-rgb), .97)',
 			'--color-main-background-blur' => 'rgba(var(--color-main-background-rgb), .8)',
@@ -202,7 +200,9 @@ public function getCSSVariables(): array {
 			'--background-invert-if-dark' => 'no',
 			'--background-invert-if-bright' => 'invert(100%)',
 
+			// Default last fallback values
 			'--image-main-background' => "url('" . $this->urlGenerator->imagePath('core', 'app-background.jpg') . "')",
+			'--color-main-background-plain' => $this->defaultPrimaryColor,
 		];
 
 		// Primary variables
@@ -211,8 +211,9 @@ public function getCSSVariables(): array {
 		$backgroundDeleted = $this->config->getAppValue(Application::APP_ID, 'backgroundMime', '') === 'backgroundColor';
 		// If primary as background has been request or if we have a custom primary colour
 		// let's not define the background image
-		if ($backgroundDeleted || $hasCustomPrimaryColour) {
-			$variables["--image-background-plain"] = 'true';
+		if ($backgroundDeleted && $this->themingDefaults->isUserThemingDisabled()) {
+			$variables['--image-background-plain'] = 'true';
+			$variables['--color-main-background-plain'] = $this->themingDefaults->getColorPrimary();
 		}
 
 		// Register image variables only if custom-defined
@@ -237,10 +238,11 @@ public function getCSSVariables(): array {
 
 		$appManager = Server::get(IAppManager::class);
 		$user = $this->userSession->getUser();
-		if ($appManager->isEnabledForUser(Application::APP_ID) && $user !== null) {
+		if (!$this->themingDefaults->isUserThemingDisabled() && $appManager->isEnabledForUser(Application::APP_ID) && $user !== null) {
 			$themingBackground = $this->config->getUserValue($user->getUID(), Application::APP_ID, 'background', 'default');
 			$currentVersion = (int)$this->config->getUserValue($user->getUID(), Application::APP_ID, 'userCacheBuster', '0');
 
+
 			if ($themingBackground === 'custom') {
 				$cacheBuster = substr(sha1($user->getUID() . '_' . $currentVersion), 0, 8);
 				$variables['--image-main-background'] = "url('" . $this->urlGenerator->linkToRouteAbsolute('theming.userTheme.getBackground') . "?v=$cacheBuster')";

apps/theming/lib/ThemingDefaults.php

@@ -220,6 +220,10 @@ public function getColorPrimary(): string {
 
 		// admin-defined primary color
 		$defaultColor = $this->getDefaultColorPrimary();
+
+		if ($this->isUserThemingDisabled()) {
+			return $defaultColor;
+		}
 
 		// user-defined primary color
 		$themingBackground = '';
@@ -494,4 +498,11 @@ public function undo($setting) {
 	public function getTextColorPrimary() {
 		return $this->util->invertTextColor($this->getColorPrimary()) ? '#000000' : '#ffffff';
 	}
+
+	/**
+	 * Has the admin disabled user customization
+	 */
+	public function isUserThemingDisabled(): bool {
+		return $this->config->getAppValue('theming', 'disable-user-theming', 'no') === 'yes';
+	}
 }

apps/theming/src/UserThemes.vue

@@ -64,11 +64,16 @@
 
 		<NcSettingsSection :title="t('theming', 'Background')"
 			class="background">
-			<p>{{ t('theming', 'Set a custom background') }}</p>
-			<BackgroundSettings class="background__grid"
-				:background="background"
-				:theming-default-background="themingDefaultBackground"
-				@update:background="updateBackground" />
+			<template v-if="isUserThemingDisabled">
+				<p>{{ t('theming', 'Customization has been disabled by your administrator') }}</p>
+			</template>
+			<template v-else>
+				<p>{{ t('theming', 'Set a custom background') }}</p>
+				<BackgroundSettings class="background__grid"
+					:background="background"
+					:theming-default-background="themingDefaultBackground"
+					@update:background="updateBackground" />
+			</template>
 		</NcSettingsSection>
 	</section>
 </template>
@@ -90,6 +95,7 @@ const shortcutsDisabled = loadState('theming', 'shortcutsDisabled', false)
 const background = loadState('theming', 'background')
 const themingDefaultBackground = loadState('theming', 'themingDefaultBackground')
 const shippedBackgroundList = loadState('theming', 'shippedBackgrounds')
+const isUserThemingDisabled = loadState('theming', 'isUserThemingDisabled')
 
 console.debug('Available themes', availableThemes)
 
@@ -109,6 +115,7 @@ export default {
 			shortcutsDisabled,
 			background,
 			themingDefaultBackground,
+			isUserThemingDisabled,
 		}
 	},
 

apps/theming/templates/settings-admin.php

@@ -81,7 +81,7 @@
 		<form class="uploadButton" method="post" action="<?php p($_['uploadLogoRoute']) ?>" data-image-key="background">
 			<input type="hidden" id="theming-backgroundMime" value="<?php p($_['images']['background']['mime']); ?>" />
 			<input type="hidden" name="key" value="background" />
-			<label for="upload-login-background"><span><?php p($l->t('Login image')) ?></span></label>
+			<label for="upload-login-background"><span><?php p($l->t('Background and login image')) ?></span></label>
 			<input id="upload-login-background" class="fileupload" name="image" type="file">
 			<label for="upload-login-background" class="button icon-upload svg" id="upload-login-background" title="<?php p($l->t("Upload new login background")) ?>"></label>
 			<div data-setting="backgroundMime" data-toggle="tooltip" data-original-title="<?php p($l->t('Reset to default')); ?>" class="theme-undo icon icon-history"></div>
@@ -93,7 +93,6 @@
 	</div>
 
 	<h3 class="inlineblock"><?php p($l->t('Advanced options')); ?></h3>
-
 	<div class="advanced-options">
 		<div>
 			<label>
@@ -131,6 +130,16 @@
 				<div data-setting="faviconMime" data-toggle="tooltip" data-original-title="<?php p($l->t('Reset to default')); ?>" class="theme-undo icon icon-history"></div>
 			</form>
 		</div>
+		<div class="advanced-options" id="user-theming">
+			<label><span><?php p($l->t('User settings')); ?></span></label>
+			<div>
+				<p class="info">
+					<?php p($l->t('Although you can select and customize your instance, users can change their background and colors. If you want to enforce your customization, you can check this box.')); ?>
+				</p>
+				<input id="userThemingDisabled" class="checkbox" type="checkbox" <?php p($_['userThemingDisabled'] ? 'checked="checked"' : ''); ?> />
+				<label for="userThemingDisabled"><?php p($l->t('Disable user theming')) ?></label>
+			</div>
+		</div>
 	</div>
 
 	<div class="theming-hints">

core/css/apps.scss

@@ -47,7 +47,7 @@ html {
 
 body {
 	background-color: var(--color-main-background-plain, var(--color-main-background));
-	background-image: var(--image-main-background);
+	background-image: var(--image-background-plain, var(--image-main-background));
 	background-size: cover;
 	background-position: center;
 	position: fixed;