split theme into color scheme and theme applier

background.js

@@ -6,13 +6,14 @@
 /*   By: fbes <[email protected]>                 +#+                     */
 /*                                                   +#+                      */
 /*   Created: 2021/11/27 23:25:07 by fbes          #+#    #+#                 */
-/*   Updated: 2021/12/01 16:53:14 by fbes          ########   odam.nl         */
+/*   Updated: 2021/12/01 19:26:35 by fbes          ########   odam.nl         */
 /*                                                                            */
 /* ************************************************************************** */
 
 var defaultSettings = {
 	"clustermap": "true",
 	"codam-monit": "true",
+	"colors": "default",
 	"hide-broadcasts": "false",
 	"show-custom-profiles": "false",
 	"sync": "true",

css/theme-apply.css

@@ -6,7 +6,7 @@
 /*   By: fbes <[email protected]>                 +#+                     */
 /*                                                   +#+                      */
 /*   Created: 2021/11/13 00:38:03 by fbes          #+#    #+#                 */
-/*   Updated: 2021/12/01 16:43:56 by fbes          ########   odam.nl         */
+/*   Updated: 2021/12/01 20:36:30 by fbes          ########   odam.nl         */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -38,7 +38,26 @@ h5:not(.profile-name),
 	color: #343a40 !important
 }
 
-.main-navbar,
+.main-navbar {
+	background: var(--top-navbar-background-color) !important;
+}
+
+.main-left-navbar {
+	background: var(--left-navbar-background-color) !important;
+}
+
+.main-left-navbar li a {
+	color: var(--left-navbar-icon-color) !important;
+}
+
+.main-left-navbar li a:hover:not(.active) {
+	color: var(--left-navbar-icon-color-hover) !important;
+}
+
+.main-left-navbar li a.active {
+	color: var(--left-navbar-icon-color-active) !important;
+}
+
 .modal-backdrop {
 	background: var(--body-background-color) !important;
 }

css/colors-dark.css → css/theme-dark.css

@@ -1,12 +1,12 @@
 /* ************************************************************************** */
 /*                                                                            */
 /*                                                        ::::::::            */
-/*   colors-dark.css                                    :+:    :+:            */
+/*   theme-dark.css                                     :+:    :+:            */
 /*                                                     +:+                    */
 /*   By: fbes <[email protected]>                 +#+                     */
 /*                                                   +#+                      */
 /*   Created: 2021/11/29 17:39:48 by fbes          #+#    #+#                 */
-/*   Updated: 2021/11/29 21:55:17 by fbes          ########   odam.nl         */
+/*   Updated: 2021/12/01 20:40:35 by fbes          ########   odam.nl         */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -63,6 +63,13 @@
 	--choice-box-shadow: 0 0 2px black inset, 0 1px 0 rgb(0 0 0 / 5%);
 	--search-user-video-box-shadow: 1px 1px 5px rgb(255 255 255 / 10%);
 
+	/* navbar styling */
+	--top-navbar-background-color: #202124;
+	--left-navbar-background-color: #292D39;
+	--left-navbar-icon-color: #666e80;
+	--left-navbar-icon-color-hover: #ffffff;
+	--left-navbar-icon-color-active: #ffffff;
+
 	/* button styling */
 	--success-button-background: rgba(92, 184, 92, 0.2);
 	--success-button-background-active: rgba(92, 184, 92, 0.3);

css/colors-light.css → css/theme-light.css

@@ -1,12 +1,12 @@
 /* ************************************************************************** */
 /*                                                                            */
 /*                                                        ::::::::            */
-/*   colors-light.css                                   :+:    :+:            */
+/*   theme-light.css                                    :+:    :+:            */
 /*                                                     +:+                    */
 /*   By: fbes <[email protected]>                 +#+                     */
 /*                                                   +#+                      */
 /*   Created: 2021/11/29 20:36:29 by fbes          #+#    #+#                 */
-/*   Updated: 2021/11/29 22:06:21 by fbes          ########   odam.nl         */
+/*   Updated: 2021/12/01 20:39:53 by fbes          ########   odam.nl         */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -63,6 +63,13 @@
 	--choice-box-shadow: 0 0 2px white inset, 0 1px 0 rgb(0 0 0 / 5%);
 	--search-user-video-box-shadow: 1px 1px 5px rgb(0 0 0 / 10%);
 
+	/* navbar styling */
+	--top-navbar-background-color: #ffffff;
+	--left-navbar-background-color: #292D39;
+	--left-navbar-icon-color: #666e80;
+	--left-navbar-icon-color-hover: #ffffff;
+	--left-navbar-icon-color-active: #ffffff;
+
 	/* button styling */
 	--success-button-background: rgba(92, 184, 92, 0.1);
 	--success-button-background-active: rgba(92, 184, 92, 0.1);

js/theme.js

@@ -6,49 +6,71 @@
 /*   By: fbes <[email protected]>                 +#+                     */
 /*                                                   +#+                      */
 /*   Created: 2021/11/28 01:49:05 by fbes          #+#    #+#                 */
-/*   Updated: 2021/12/01 16:36:41 by fbes          ########   odam.nl         */
+/*   Updated: 2021/12/01 19:20:27 by fbes          ########   odam.nl         */
 /*                                                                            */
 /* ************************************************************************** */
 
 var themeColorsLink = null;
+var themeLink = null;
 
-function disableTheme() {
-	if (themeColorsLink) {
+/**
+ * Disable a theme, set theme or colors to false to not disable those colors
+ */
+function disableTheme(theme, colors) {
+	if (theme !== false && themeLink) {
+		themeLink.remove();
+		themeLink = null;
+	}
+	if (colors !== false && themeColorsLink) {
 		themeColorsLink.remove();
 		themeColorsLink = null;
 	}
 }
 
-function enableTheme(theme) {
-	console.log("Enabling dark mode...");
-	if (!themeColorsLink) {
-		themeColorsLink = document.createElement("link");
-		themeColorsLink.setAttribute("type", "text/css");
-		themeColorsLink.setAttribute("rel", "stylesheet");
-		document.getElementsByTagName("head")[0].appendChild(themeColorsLink);
+/**
+ * Enable a theme, leave colors as null or undefined to use default color scheme
+ */
+function enableTheme(theme, colors) {
+	console.log("%c[Improved Intra]%c Enabling theme '" + theme + "'" + (colors ? " in '" + colors + "' mode..." : ""), "color: #00babc;", "");
+	if (!themeLink) {
+		themeLink = document.createElement("link");
+		themeLink.setAttribute("type", "text/css");
+		themeLink.setAttribute("rel", "stylesheet");
+		document.getElementsByTagName("head")[0].appendChild(themeLink);
+	}
+	themeLink.setAttribute("href", chrome.runtime.getURL("css/theme-"+theme+".css"));
+
+	if (colors && colors !== "default")
+	{
+		if (!themeColorsLink) {
+			themeColorsLink = document.createElement("link");
+			themeColorsLink.setAttribute("type", "text/css");
+			themeColorsLink.setAttribute("rel", "stylesheet");
+			document.getElementsByTagName("head")[0].appendChild(themeColorsLink);
+		}
+		themeColorsLink.setAttribute("href", chrome.runtime.getURL("css/colors-"+colors+".css"));
+	}
+	else {
+		disableTheme(false, true);
 	}
-	themeColorsLink.setAttribute("href", chrome.runtime.getURL("css/colors-"+theme+".css"));
 }
 
 function checkThemeSetting() {
-	chrome.storage.local.get("theme", function(data) {
+	chrome.storage.local.get(["theme", "colors"], function(data) {
 		if (data["theme"] == "system") {
 			if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-				enableTheme("dark");
-				console.log("%c[Improved Intra]%c Enabled dark mode to follow the system setting", "color: #00babc;", "");
+				enableTheme("dark", data["colors"]);
 			}
 			else {
-				console.log("%c[Improved Intra]%c Following system settings for dark mode, but system is set to light mode", "color: #00babc;", "");
-				enableTheme("light");
+				enableTheme("light", data["colors"]);
 			}
 		}
-		else if (data["theme"] == "dark") {
-			enableTheme("dark");
-			console.log("%c[Improved Intra]%c Enabled dark mode because of extension settings", "color: #00babc;", "");
+		else if (data["theme"]) {
+			enableTheme(data["theme"], data["colors"]);
 		}
 		else {
-			enableTheme("light");
-			console.log("%c[Improved Intra]%c Disabled theme because of extension settings", "color: #00babc;", "");
+			// fallback to default
+			enableTheme("system", null);
 		}
 	});
 }

manifest-ff.json

@@ -33,8 +33,9 @@
 	],
 	"web_accessible_resources": [
 		"options/options.html",
-		"css/colors-light.css",
-		"css/colors-dark.css",
+		"css/theme-apply.css",
+		"css/theme-light.css",
+		"css/theme-dark.css",
 		"campus_specifics/codam/inject.js"
 	],
 	"content_scripts": [

manifest.json

@@ -26,8 +26,8 @@
 			"resources": [
 				"campus_specifics/codam/inject.js",
 				"css/theme-apply.css",
-				"css/colors-light.css",
-				"css/colors-dark.css"
+				"css/theme-light.css",
+				"css/theme-dark.css"
 			],
 			"matches": [ "*://*.intra.42.fr/*" ]
 		},

options/addoption.txt

@@ -0,0 +1,7 @@
+A reminder for developers on how to add options, to not forget any steps
+
+1. Add option to options/options.html and set default value
+2. Add option to server/update.php as an expected value
+3. Add default value to option in server/update.php
+4. Add default value to background.js
+5. If a theme or color scheme, add CSS file to web_accessible_resources in both manifests

options/options.html

@@ -39,6 +39,13 @@ <h2>Appearance</h2>
 							<option value="light">Light Mode</option>
 						</select>
 					</fieldset>
+					<fieldset>
+						<label for="colors"><span>Color scheme</span></label>
+						<select id="colors" name="colors">
+							<option value="default" selected>Intra (default)</option>
+							<option disabled value="null">More coming soon!</option>
+						</select>
+					</fieldset>
 					<fieldset>
 						<label for="show-custom-profiles"><span>Allow customized profiles</span><span>Show customized profiles, such as animated headers</span></label>
 						<input type="checkbox" value="true" id="show-custom-profiles" name="show-custom-profiles" />

options/options.js

@@ -6,7 +6,7 @@
 /*   By: fbes <[email protected]>                 +#+                     */
 /*                                                   +#+                      */
 /*   Created: 2021/11/28 02:23:39 by fbes          #+#    #+#                 */
-/*   Updated: 2021/12/01 16:54:14 by fbes          ########   odam.nl         */
+/*   Updated: 2021/12/01 20:32:41 by fbes          ########   odam.nl         */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -18,6 +18,29 @@ function hideLoading() {
 	document.getElementById("loading").className = "hidden";
 }
 
+function checkIfKeyStillWorks(access_token) {
+	return new Promise(function(it_works, it_does_not_work) {
+		var req = new XMLHttpRequest();
+		req.open("POST", "https://darkintra.freekb.es/testkey.php?nc="+encodeURIComponent(Math.random()));
+		req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
+		req.addEventListener("load", function(event) {
+			try {
+				var res = JSON.parse(this.responseText);
+				if (res["type"] == "error") {
+					it_does_not_work(res);
+				}
+				else {
+					it_works();
+				}
+			}
+			catch (err) {
+				it_does_not_work(null);
+			}
+		});
+		req.send("access_token="+access_token);
+	});
+}
+
 var syncPort = chrome.runtime.connect({ name: "sync_port" });
 syncPort.onDisconnect.addListener(function() {
 	console.log("%c[Improved Intra]%c Disconnected from service worker", "color: #00babc;", "");
@@ -77,11 +100,17 @@ function syncSettings(event) {
 				formData.append("refresh_token", data["auth"]["refresh_token"]);
 				var req = new XMLHttpRequest();
 				req.open("POST", "https://darkintra.freekb.es/update.php?v=1");
+				req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
 				req.addEventListener("load", function(event) {
 					syncBtn.className = "";
 					try {
 						var res = JSON.parse(this.responseText);
-						console.log("Settings sync result", res);
+						if (res["type"] == "error") {
+							console.error("Settings sync result", res);
+						}
+						else {
+							console.log("Settings sync result", res);
+						}
 					}
 					catch (err) {
 						console.error("Could not parse settings sync result!", err);
@@ -200,16 +229,27 @@ window.onload = function() {
 	document.getElementById("sync-button").addEventListener("click", syncSettings);
 
 	chrome.storage.local.get(["username", "auth", "user"], function(data) {
-		if (data["username"] === undefined || data["auth"] === undefined || data["user"] == undefined || data["user"]["login"] != data["username"]) {
+		console.log(data);
+		if (data["username"] === undefined || data["auth"] === undefined
+			|| data["user"] == undefined || data["user"]["login"] != data["username"]) {
 			// authorize user on Intra, link below redirects to the correct auth page
 			window.location.href = "https://darkintra.freekb.es/connect.php";
 		}
 		else {
-			retrieveSettings()
-				.then(loadSettingsIntoForm)
-				.catch(function(err) {
-					console.error("Could not load settings from local storage.", err);
-					alert("Failed to load settings");
+			checkIfKeyStillWorks(data["auth"]["access_token"])
+				.then(function() {
+					console.log("Access token still works.");
+					retrieveSettings()
+						.then(loadSettingsIntoForm)
+						.catch(function(err) {
+							console.error("Could not load settings from local storage.", err);
+							alert("Failed to load settings");
+						});
+				})
+				.catch(function(res) {
+					console.log("Access token no longer works!", res);
+					// authorize user again on Intra, link below redirects to the correct auth page
+					window.location.href = "https://darkintra.freekb.es/connect.php";
 				});
 		}
 	});

server/auth.php

@@ -37,6 +37,9 @@ function get_user_info($accessToken) {
 		if ($response !== false ) {
 			try {
 				$userInfo = json_decode($response, true);
+				if (isset($userInfo["error"])) {
+					return (null);
+				}
 				$userInfo = reduce_user_info($userInfo);
 				$_SESSION["user"] = $userInfo;
 				$_SESSION["user_from_access_token"] = $accessToken;
@@ -107,4 +110,4 @@ function getAuthPageURL() {
 
 		return ("https://api.intra.42.fr/oauth/authorize?client_id=".$clientID."&redirect_uri=".urlencode($redirectURL)."&response_type=code&scope=".implode("%20", $scopes)."&state=".$_SESSION["state"]);
 	}
-?>
+?>