feat: bring back noskin option

if forum sets a default skin there was no way for the user to go back to the no skin version

public/language/en-GB/user.json

@@ -155,6 +155,8 @@
 	"no-group-title": "No group title",
 
 	"select-skin": "Select a Skin",
+	"default": "Default (%1)",
+	"no-skin": "No Skin",
 
 	"select-homepage": "Select a Homepage",
 	"homepage": "Homepage",

public/openapi/read/config.yaml

@@ -108,6 +108,8 @@ get:
                 type: boolean
               bootswatchSkin:
                 type: string
+              defaultBootswatchSkin:
+                type: string
               composer:showHelpTab:
                 type: boolean
               enablePostHistory:

public/src/client/account/settings.js

@@ -5,15 +5,19 @@ define('forum/account/settings', [
 	'forum/account/header', 'components', 'api', 'alerts', 'hooks',
 ], function (header, components, api, alerts, hooks) {
 	const AccountSettings = {};
-
+	let savedSkin = '';
 	// If page skin is changed but not saved, switch the skin back
 	$(window).on('action:ajaxify.start', function () {
-		if (ajaxify.data.template.name === 'account/settings' && $('#bootswatchSkin').length && $('#bootswatchSkin').val() !== config.bootswatchSkin) {
-			reskin(config.bootswatchSkin);
+		const skinEl = $('#bootswatchSkin');
+		if (
+			ajaxify.data.template.name === 'account/settings' &&
+			skinEl.length && skinEl.val() !== savedSkin) {
+			reskin(savedSkin);
 		}
 	});
 
 	AccountSettings.init = function () {
+		savedSkin = $('#bootswatchSkin').length && $('#bootswatchSkin').val();
 		header.init();
 
 		$('#submitBtn').on('click', function () {
@@ -76,7 +80,10 @@ define('forum/account/settings', [
 					if (key === 'userLang' && config.userLang !== newSettings.userLang) {
 						languageChanged = true;
 					}
-					if (config.hasOwnProperty(key)) {
+					if (key === 'bootswatchSkin') {
+						savedSkin = newSettings.bootswatchSkin;
+						config.bootswatchSkin = savedSkin === 'noskin' ? '' : savedSkin;
+					} else if (config.hasOwnProperty(key)) {
 						config[key] = newSettings[key];
 					}
 				}
@@ -105,6 +112,12 @@ define('forum/account/settings', [
 			return;
 		}
 
+		if (skinName === '') {
+			skinName = config.defaultBootswatchSkin || '';
+		} else if (skinName === 'noskin') {
+			skinName = '';
+		}
+
 		const currentSkinClassName = $('body').attr('class').split(/\s+/).filter(function (className) {
 			return className.startsWith('skin-');
 		});
@@ -143,7 +156,8 @@ define('forum/account/settings', [
 		if (app.user.uid) {
 			await api.put(`/users/${app.user.uid}/settings`, { settings: { bootswatchSkin: skin } });
 		}
-		config.bootswatchSkin = skin;
+		config.bootswatchSkin = skin === 'noskin' ? '' : skin;
+		savedSkin = skin;
 		reskin(skin);
 	};
 

src/controllers/accounts/settings.js

@@ -56,16 +56,8 @@ settingsController.get = async function (req, res, next) {
 		{ value: 'biweek', name: '[[user:digest_biweekly]]', selected: userData.settings.dailyDigestFreq === 'biweek' },
 		{ value: 'month', name: '[[user:digest_monthly]]', selected: userData.settings.dailyDigestFreq === 'month' },
 	];
-	userData.bootswatchSkinOptions = [
-		{ name: 'Default', value: '' },
-	];
-	userData.bootswatchSkinOptions.push(
-		...meta.css.supportedSkins.map(skin => ({ name: _.capitalize(skin), value: skin }))
-	);
 
-	userData.bootswatchSkinOptions.forEach((skin) => {
-		skin.selected = skin.value === userData.settings.bootswatchSkin;
-	});
+	getSkinOptions(userData);
 
 	userData.languages.forEach((language) => {
 		language.selected = language.code === userData.settings.userLang;
@@ -227,3 +219,18 @@ async function getHomePageRoutes(userData) {
 
 	return routes;
 }
+
+function getSkinOptions(userData) {
+	const defaultSkin = _.capitalize(meta.config.bootswatchSkin) || '[[user:no-skin]]';
+	userData.bootswatchSkinOptions = [
+		{ name: '[[user:no-skin]]', value: 'noskin' },
+		{ name: `[[user:default, ${defaultSkin}]]`, value: '' },
+	];
+	userData.bootswatchSkinOptions.push(
+		...meta.css.supportedSkins.map(skin => ({ name: _.capitalize(skin), value: skin }))
+	);
+
+	userData.bootswatchSkinOptions.forEach((skin) => {
+		skin.selected = skin.value === userData.settings.bootswatchSkin;
+	});
+}

src/controllers/api.js

@@ -98,7 +98,7 @@ apiController.loadConfig = async function (req) {
 	}
 
 	// Handle old skin configs
-	const oldSkins = ['noskin', 'default'];
+	const oldSkins = ['default'];
 	settings.bootswatchSkin = oldSkins.includes(settings.bootswatchSkin) ? '' : settings.bootswatchSkin;
 
 	config.usePagination = settings.usePagination;
@@ -113,7 +113,14 @@ apiController.loadConfig = async function (req) {
 	config.categoryTopicSort = settings.categoryTopicSort || config.categoryTopicSort;
 	config.topicSearchEnabled = settings.topicSearchEnabled || false;
 	config.disableCustomUserSkins = meta.config.disableCustomUserSkins === 1;
-	config.bootswatchSkin = (meta.config.disableCustomUserSkins !== 1 && settings.bootswatchSkin && settings.bootswatchSkin !== '') ? settings.bootswatchSkin : '';
+	config.defaultBootswatchSkin = config.bootswatchSkin;
+	if (!config.disableCustomUserSkins && settings.bootswatchSkin) {
+		if (settings.bootswatchSkin === 'noskin') {
+			config.bootswatchSkin = '';
+		} else if (settings.bootswatchSkin !== '') {
+			config.bootswatchSkin = settings.bootswatchSkin;
+		}
+	}
 
 	// Overrides based on privilege
 	config.disableChatMessageEditing = isAdminOrGlobalMod ? false : config.disableChatMessageEditing;

src/meta/css.js

@@ -179,13 +179,13 @@ async function getBundleMetadata(target) {
 
 	let themeData = null;
 	if (target === 'client') {
-		themeData = await db.getObjectFields('config', ['theme:type', 'theme:id', 'bootswatchSkin']);
+		themeData = await db.getObjectFields('config', ['theme:type', 'theme:id']);
 		const themeId = (themeData['theme:id'] || 'nodebb-theme-harmony');
 		const baseThemePath = path.join(nconf.get('themes_path'), (themeData['theme:type'] && themeData['theme:type'] === 'local' ? themeId : 'nodebb-theme-harmony'));
 		paths.unshift(baseThemePath);
 		paths.unshift(`${baseThemePath}/node_modules`);
 
-		themeData.bootswatchSkin = skin || themeData.bootswatchSkin;
+		themeData.bootswatchSkin = skin;
 	}
 
 	const [scssImports, cssImports, acpScssImports] = await Promise.all([

src/middleware/render.js

@@ -197,7 +197,7 @@ module.exports = function (middleware) {
 		results.user['email:confirmed'] = results.user['email:confirmed'] === 1;
 		results.user.isEmailConfirmSent = !!results.isEmailConfirmSent;
 
-		templateValues.bootswatchSkin = (parseInt(meta.config.disableCustomUserSkins, 10) !== 1 ? res.locals.config.bootswatchSkin : '') || meta.config.bootswatchSkin || '';
+		templateValues.bootswatchSkin = res.locals.config.bootswatchSkin || '';
 		templateValues.browserTitle = results.browserTitle;
 		({
 			navigation: templateValues.navigation,