Merge pull request #2816 from oixel/master

Add optional password protection to pop-up.

_locales/en/messages.json

@@ -1,4 +1,8 @@
 {   
+    "requirePassword": { "message": "Require password to change ImprovedTube settings" },
+    "passwordOptions": { "message": "Password options"},
+      "enterPassword": { "message": "Please enter your 4-digit code."},
+
     "qualityWhenRunningOnBattery":{
         "message": "Quality, when running on battery"
     },

menu/index.js

@@ -7,27 +7,70 @@
 --------------------------------------------------------------*/
 satus.storage.import(function (items) {
 	var language = items.language;
-	if (!language || language === 'default') { language = false;}
+	if (!language || language === 'default') { language = false; }
 	satus.locale.import(language, function () {
-		satus.render(extension.skeleton);
-
-		extension.exportSettings();
-		extension.importSettings();
-
-		satus.parentify(extension.skeleton, [
-			'attr',
-			'baseProvider',
-			'layersProvider',
-			'rendered',
-			'storage',
-			'parentObject',
-			'parentSkeleton',
-			'childrenContainer',
-			'value'
-		]);
-
-		extension.attributes();
-		satus.events.on('storage-set', extension.attributes);
+		// Place normal skeleton into seperate function to only render if password is disabled or not required
+		const renderSkeleton = () => {
+			satus.render(extension.skeleton);
+
+			extension.exportSettings();
+			extension.importSettings();
+
+			satus.parentify(extension.skeleton, [
+				'attr',
+				'baseProvider',
+				'layersProvider',
+				'rendered',
+				'storage',
+				'parentObject',
+				'parentSkeleton',
+				'childrenContainer',
+				'value'
+			]);
+
+			extension.attributes();
+			satus.events.on('storage-set', extension.attributes);
+		}
+
+		// Shows login page if password exists and is required
+		if (satus.storage.get("require_password") === true && satus.storage.get("password")) {
+			satus.render({
+				component: 'modal',
+				textField: {
+					component: "text-field",
+					id: "login-input",
+					placeholder: "Enter password",
+					lineNumbers: false,
+					rows: 1,
+
+					// Focuses text box when extension is opened
+					function() {
+						document.getElementById('login-input').focus();
+					},
+
+					on: {
+						input: function () {
+							// Grabs password from storage for comparison
+							const password = satus.storage.get("password");
+
+							// If correct password is inputted, render regular menu
+							if (this.value == password) {
+								var modal = this.skeleton.parentSkeleton;
+								modal.rendered.close();
+								renderSkeleton();
+							}
+						},
+
+						// Refocuses on password input box if clicked away
+						blur: function () {
+							const loginInput = document.getElementById('login-input');
+							if (loginInput) loginInput.focus();
+						}
+					}
+				}
+			}, extension.skeleton.rendered);
+		}
+		else renderSkeleton(); // Render regular menu if password is not required
 	}, '_locales/');
 });
 

menu/skeleton-parts/settings.js

@@ -769,3 +769,95 @@ extension.skeleton.header.sectionEnd.menu.on.click.settings.on.click.secondSecti
 		}
 	}
 };
+
+/*--------------------------------------------------------------
+# PASSWORD OPTIONS
+--------------------------------------------------------------*/
+
+function togglePasswordInput() {
+	// Sets the visibility of the password input field depending on the state of the requirement switch
+	let requirePassword = satus.storage.get("require_password");
+	const display = satus.storage.get("require_password") ? "" : "none";
+	document.getElementById('password-input-card').style.display = display;
+
+	// Avoids changing input field if input is not visible
+	if (!requirePassword) return;
+
+	// Sets input field to display current password
+	const passwordInput = document.getElementById('password-input');
+	passwordInput.placeholder = "Enter password";
+
+	// If no password exists (undefined), set input value to empty string instead
+	passwordInput.value = satus.storage.get("password") || '';
+}
+
+extension.skeleton.header.sectionEnd.menu.on.click.settings.on.click.secondSection.usePassword = {
+	component: 'button',
+	text: 'passwordOptions',
+	before: {
+		svg: {
+			component: 'svg',
+			attr: {
+				'viewBox': '0 0 24 24',
+				'fill': 'currentColor',
+			},
+			path: {
+				component: 'path',
+				attr: {
+					'd': 'M 7 5 C 3.1545455 5 0 8.1545455 0 12 C 0 15.845455 3.1545455 19 7 19 C 9.7749912 19 12.089412 17.314701 13.271484 15 L 16 15 L 16 18 L 22 18 L 22 15 L 24 15 L 24 9 L 23 9 L 13.287109 9 C 12.172597 6.6755615 9.8391582 5 7 5 z M 7 7 C 9.2802469 7 11.092512 8.4210017 11.755859 10.328125 L 11.988281 11 L 22 11 L 22 13 L 20 13 L 20 16 L 18 16 L 18 13 L 12.017578 13 L 11.769531 13.634766 C 11.010114 15.575499 9.1641026 17 7 17 C 4.2454545 17 2 14.754545 2 12 C 2 9.2454545 4.2454545 7 7 7 z M 7 9 C 5.3549904 9 4 10.35499 4 12 C 4 13.64501 5.3549904 15 7 15 C 8.6450096 15 10 13.64501 10 12 C 10 10.35499 8.6450096 9 7 9 z M 7 11 C 7.5641294 11 8 11.435871 8 12 C 8 12.564129 7.5641294 13 7 13 C 6.4358706 13 6 12.564129 6 12 C 6 11.435871 6.4358706 11 7 11 z'
+				}
+			}
+		}
+	},
+	on: {
+		click: {
+			component: 'section',
+			variant: 'card',
+
+			require_password: {
+				component: 'switch',
+				text: 'requirePassword',
+				value: false,
+
+				on: {
+					click: function (event) {
+						// Prevents clicking the toggle switch does not load another section
+						event.preventDefault();
+
+						// Toggle the visibility of password input field
+						togglePasswordInput();
+					}
+				}
+			},
+
+			password_input: {
+				component: 'section',
+				variant: 'card',
+				id: "password-input-card",
+				style: {
+					"padding": "0"
+				},
+				children: {
+					component: 'input',
+					id: "password-input",
+					type: 'text',
+					style: {
+						"padding": "0 10px 0 10px"
+					},
+
+					// Sets password field's visibility when modal menu is rendered
+					function() {
+						togglePasswordInput();
+					},
+
+					// Updates the stored password value on keyboard input
+					on: {
+						input: function (event) {
+							satus.storage.set("password", event.target.value);
+						}
+					}
+				}
+			}
+		}
+	}
+};