add language to ajax and typeahead

lib/Froxlor/Ajax/Ajax.php

@@ -7,6 +7,7 @@ use Froxlor\Http\HttpClient;
 use Froxlor\PhpHelper;
 use Froxlor\Settings;
 use Froxlor\UI\Panel\UI;
+use Froxlor\UI\Request;
 
 /**
  * This file is part of the Froxlor project.
@@ -28,6 +29,7 @@ class Ajax
 	protected string $session;
 	protected string $action;
 	protected string $theme;
+	protected array $lng;
 
 	/**
 	 * @throws Exception
@@ -37,6 +39,57 @@ class Ajax
 		$this->session = $_GET['s'] ?? $_POST['s'] ?? null;
 		$this->action = $_GET['action'] ?? $_POST['action'] ?? null;
 		$this->theme = $_GET['theme'] ?? 'Froxlor';
+
+		$this->initLang();
+	}
+
+	/**
+	 * initialize global $lng variable to have
+	 * localized strings available for the ApiCommands
+	 */
+	private function initLang()
+	{
+		global $lng;
+
+		// query the whole table
+		$result_stmt = \Froxlor\Database\Database::query("SELECT * FROM `" . TABLE_PANEL_LANGUAGE . "`");
+
+		$langs = array();
+		// presort languages
+		while ($row = $result_stmt->fetch(\PDO::FETCH_ASSOC)) {
+			$langs[$row['language']][] = $row;
+		}
+
+		// set default language before anything else to
+		// ensure that we can display messages
+		$language = \Froxlor\Settings::Get('panel.standardlanguage');
+
+		if (isset($this->user_data['language']) && isset($langs[$this->user_data['language']])) {
+			// default: use language from session, #277
+			$language = $this->user_data['language'];
+		} elseif (isset($this->user_data['def_language'])) {
+			$language = $this->user_data['def_language'];
+		}
+
+		// include every english language file we can get
+		foreach ($langs['English'] as $value) {
+			include_once \Froxlor\FileDir::makeSecurePath(\Froxlor\Froxlor::getInstallDir() . '/' . $value['file']);
+		}
+
+		// now include the selected language if its not english
+		if ($language != 'English') {
+			if (isset($langs[$language])) {
+				foreach ($langs[$language] as $value) {
+					include_once \Froxlor\FileDir::makeSecurePath(\Froxlor\Froxlor::getInstallDir() . '/' . $value['file']);
+				}
+			}
+		}
+
+		// last but not least include language references file
+		include_once \Froxlor\FileDir::makeSecurePath(\Froxlor\Froxlor::getInstallDir() . '/lng/lng_references.php');
+
+		// set array
+		$this->lng = $lng;
 	}
 
 	/**
@@ -186,10 +239,10 @@ class Ajax
 
 	private function searchSetting()
 	{
-		$searchtext = isset($_POST['searchtext']) ? $_POST['searchtext'] : "";
+		$searchtext = Request::get('searchtext');
 
 		$result = [];
-		if (strlen($searchtext) > 2) {
+		if ($searchtext && strlen($searchtext) > 2) {
 			$settings_data = PhpHelper::loadConfigArrayDir(\Froxlor\Froxlor::getInstallDir() . '/actions/admin/settings/');
 			$results = array();
 			PhpHelper::recursive_array_search($searchtext, $settings_data, $results);
@@ -202,13 +255,14 @@ class Ajax
 						$processed_setting[$settingkey] = true;
 						$sresult = $settings_data[$pk[0]][$pk[1]][$pk[2]][$pk[3]];
 						$result[] = [
-							'href' => 'admin_settings.php?page=overview&part=' . $pk[1] . '&em=' . $pk[3],
+							'title' => (is_array($sresult['label']) ? $sresult['label']['title'] : $sresult['label']),
-							'title' => (is_array($sresult['label']) ? $sresult['label']['title'] : $sresult['label'])
+							'href' => 'admin_settings.php?page=overview&part=' . $pk[1] . '&em=' . $pk[3] . '&s=' . $this->session,
 						];
 					}
 				}
 			}
 		}
-		echo json_encode($result);
+		header("Content-type: application/json");
+		echo json_encode(['settings' => $result]);
 	}
 }

lib/Froxlor/UI/Panel/UI.php

@@ -70,7 +70,7 @@ class UI
 		// Inline-JS is no longer allowed and used
 		// See: http://people.mozilla.org/~bsterne/content-security-policy/index.html
 		// New stuff see: https://www.owasp.org/index.php/List_of_useful_HTTP_headers and https://www.owasp.org/index.php/Content_Security_Policy
-		$csp_content = "default-src 'self'; script-src 'self' 'unsafe-inline'; connect-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline';";
+		$csp_content = "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; connect-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline';";
 		header("Content-Security-Policy: " . $csp_content);
 		header("X-Content-Security-Policy: " . $csp_content);
 		header("X-WebKit-CSP: " . $csp_content);

package-lock.json

@@ -11,6 +11,7 @@
         "jquery": "^3.6.0"
       },
       "devDependencies": {
+        "jquery-typeahead": "^2.11.1",
         "laravel-mix": "^6.0.42",
         "resolve-url-loader": "^5.0.0",
         "sass": "^1.49.7",
@@ -1652,6 +1653,119 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/register": {
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@babel/register/-/register-7.17.0.tgz",
+      "integrity": "sha512-UNZsMAZ7uKoGHo1HlEXfteEOYssf64n/PNLHGqOKq/bgYcu/4LrQWAHJwSCb3BRZK8Hi5gkJdRcwrGTO2wtRCg==",
+      "dev": true,
+      "dependencies": {
+        "clone-deep": "^4.0.1",
+        "find-cache-dir": "^2.0.0",
+        "make-dir": "^2.1.0",
+        "pirates": "^4.0.5",
+        "source-map-support": "^0.5.16"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/register/node_modules/find-cache-dir": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-2.1.0.tgz",
+      "integrity": "sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==",
+      "dev": true,
+      "dependencies": {
+        "commondir": "^1.0.1",
+        "make-dir": "^2.0.0",
+        "pkg-dir": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@babel/register/node_modules/find-up": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+      "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+      "dev": true,
+      "dependencies": {
+        "locate-path": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@babel/register/node_modules/locate-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+      "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+      "dev": true,
+      "dependencies": {
+        "p-locate": "^3.0.0",
+        "path-exists": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@babel/register/node_modules/make-dir": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
+      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+      "dev": true,
+      "dependencies": {
+        "pify": "^4.0.1",
+        "semver": "^5.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@babel/register/node_modules/p-locate": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+      "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+      "dev": true,
+      "dependencies": {
+        "p-limit": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@babel/register/node_modules/path-exists": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+      "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/register/node_modules/pkg-dir": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz",
+      "integrity": "sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==",
+      "dev": true,
+      "dependencies": {
+        "find-up": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@babel/register/node_modules/semver": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
     "node_modules/@babel/runtime": {
       "version": "7.17.2",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.2.tgz",
@@ -5646,6 +5760,17 @@
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
       "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
     },
+    "node_modules/jquery-typeahead": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/jquery-typeahead/-/jquery-typeahead-2.11.1.tgz",
+      "integrity": "sha512-iuNRruN5bWtck+VPxdCTijD6BD9bVuBj3NCD25vITOdMb7P3fYlkBWcmnLEazD8O+VAtbcJ9aLxRi+qrpopNZA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/register": "^7.6.2",
+        "jquery": ">=1.7.2",
+        "lz-string": "^1.4.4"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -5918,6 +6043,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/lz-string": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
+      "integrity": "sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=",
+      "dev": true,
+      "bin": {
+        "lz-string": "bin/bin.js"
+      }
+    },
     "node_modules/make-dir": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@@ -6734,6 +6868,24 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pify": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
+      "integrity": "sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/pkg-dir": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -10542,6 +10694,91 @@
         "esutils": "^2.0.2"
       }
     },
+    "@babel/register": {
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@babel/register/-/register-7.17.0.tgz",
+      "integrity": "sha512-UNZsMAZ7uKoGHo1HlEXfteEOYssf64n/PNLHGqOKq/bgYcu/4LrQWAHJwSCb3BRZK8Hi5gkJdRcwrGTO2wtRCg==",
+      "dev": true,
+      "requires": {
+        "clone-deep": "^4.0.1",
+        "find-cache-dir": "^2.0.0",
+        "make-dir": "^2.1.0",
+        "pirates": "^4.0.5",
+        "source-map-support": "^0.5.16"
+      },
+      "dependencies": {
+        "find-cache-dir": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-2.1.0.tgz",
+          "integrity": "sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==",
+          "dev": true,
+          "requires": {
+            "commondir": "^1.0.1",
+            "make-dir": "^2.0.0",
+            "pkg-dir": "^3.0.0"
+          }
+        },
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "make-dir": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
+          "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+          "dev": true,
+          "requires": {
+            "pify": "^4.0.1",
+            "semver": "^5.6.0"
+          }
+        },
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^2.0.0"
+          }
+        },
+        "path-exists": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+          "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
+          "dev": true
+        },
+        "pkg-dir": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz",
+          "integrity": "sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==",
+          "dev": true,
+          "requires": {
+            "find-up": "^3.0.0"
+          }
+        },
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true
+        }
+      }
+    },
     "@babel/runtime": {
       "version": "7.17.2",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.2.tgz",
@@ -13700,6 +13937,17 @@
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
       "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
     },
+    "jquery-typeahead": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/jquery-typeahead/-/jquery-typeahead-2.11.1.tgz",
+      "integrity": "sha512-iuNRruN5bWtck+VPxdCTijD6BD9bVuBj3NCD25vITOdMb7P3fYlkBWcmnLEazD8O+VAtbcJ9aLxRi+qrpopNZA==",
+      "dev": true,
+      "requires": {
+        "@babel/register": "^7.6.2",
+        "jquery": ">=1.7.2",
+        "lz-string": "^1.4.4"
+      }
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -13916,6 +14164,12 @@
         "yallist": "^4.0.0"
       }
     },
+    "lz-string": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
+      "integrity": "sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=",
+      "dev": true
+    },
     "make-dir": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@@ -14541,6 +14795,18 @@
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true
     },
+    "pify": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+      "dev": true
+    },
+    "pirates": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
+      "integrity": "sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==",
+      "dev": true
+    },
     "pkg-dir": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",

package.json

@@ -10,6 +10,7 @@
     "production": "mix --production"
   },
   "devDependencies": {
+    "jquery-typeahead": "^2.11.1",
     "laravel-mix": "^6.0.42",
     "resolve-url-loader": "^5.0.0",
     "sass": "^1.49.7",

templates/Froxlor/src/js/components/search.js

@@ -0,0 +1,30 @@
+$(document).ready(function () {
+	console.log('included search');
+
+	$.typeahead({
+		input: '.js-typeahead-search_v1',
+		order: "desc",
+		dynamic: true,
+		display: ['data.title'],
+		href: "{{url}}",
+		emptyTemplate: "No results for {{query}}",
+		debug: true,
+		source: {
+			settings: {
+				ajax: {
+					method: "post",
+					url: "lib/ajax.php?action=searchsetting&theme=" + window.$theme + "&s=" + window.$session,
+					path: "title",
+					data: {
+						searchtext: '{{query}}'
+					},
+				}
+			},
+		},
+		callback: {
+			onInit: function (node) {
+				console.log('Typeahead Initiated');
+			}
+		}
+	});
+});

templates/Froxlor/src/js/main.js

@@ -1,8 +1,10 @@
 // load bootstrap
 import 'bootstrap';
+import 'jquery-typeahead/src/jquery.typeahead.css'
 
 // load jquery
-window.$ = window.jQuery = require('jquery');
+global.$ = require('jquery');
+require('jquery-typeahead');
 
 $(document).ready(function () {
 	window.$theme = 'Froxlor';
@@ -10,5 +12,6 @@ $(document).ready(function () {
 });
 
 // Load components
+require('./components/search')
 require('./components/newsfeed')
 require('./components/updatecheck')

templates/Froxlor/userarea.html.twig

@@ -30,6 +30,20 @@
 					<span class="navbar-toggler-icon"></span>
 				</button>
 			</div>
+			<form id="form-search_v1" name="form-search_v1">
+				<div class="typeahead__container">
+					<div class="typeahead__field">
+						<div class="typeahead__query">
+							<input class="js-typeahead-search_v1" name="search_v1[query]" placeholder="Search" autocomplete="off">
+						</div>
+						<div class="typeahead__button">
+							<button type="submit">
+								<i class="typeahead__search-icon"></i>
+							</button>
+						</div>
+					</div>
+				</div>
+			</form>
 			<div class="collapse navbar-collapse justify-content-end px-3" id="navbar">
 				<ul class="navbar-nav align-items-center">
 					{% if userinfo.adminsession == 1 %}