Merge branch 'rolling' into feat-inform-user-when-no-engines-are-selected

public/static/cookies.js

@@ -16,8 +16,9 @@ document.addEventListener(
       let cookie = decodeURIComponent(document.cookie)
       // Set the value of the input field to the decoded cookie value if it is not empty
       // Otherwise, display a message indicating that no cookies have been saved on the user's system
-      document.querySelector('.cookies input').value =
-        cookie !== '' ? cookie : 'No cookies have been saved on your system'
+      document.querySelector('.cookies input').value = cookie.length
+        ? cookie
+        : 'No cookies have been saved on your system'
     } catch (error) {
       // If there is an error decoding the cookie, log the error to the console
       // and display an error message in the input field
@@ -25,5 +26,5 @@ document.addEventListener(
       document.querySelector('.cookies input').value = 'Error decoding cookie'
     }
   },
-  false
+  false,
 )

public/static/index.js

@@ -2,16 +2,25 @@
  * Selects the input element for the search box
  * @type {HTMLInputElement}
  */
-const searchBox = document.querySelector('input');
+const searchBox = document.querySelector('input')
 
 /**
  * Redirects the user to the search results page with the query parameter
  */
 function searchWeb() {
-  const query = searchBox.value.trim();
-  if (query) {
-    window.location.href = `search?q=${encodeURIComponent(query)}`;
-  }
+    const query = searchBox.value.trim()
+    try {
+        let safeSearchLevel = document.querySelector('.search_options select').value
+        if (query) {
+            window.location.href = `search?q=${encodeURIComponent(
+                query,
+            )}&safesearch=${encodeURIComponent(safeSearchLevel)}`
+        }
+    } catch (error) {
+        if (query) {
+            window.location.href = `search?q=${encodeURIComponent(query)}`
+        }
+    }
 }
 
 /**
@@ -19,7 +28,7 @@ function searchWeb() {
  * @param {KeyboardEvent} e - The keyboard event object
  */
 searchBox.addEventListener('keyup', (e) => {
-  if (e.key === 'Enter') {
-    searchWeb();
-  }
-});
+    if (e.key === 'Enter') {
+        searchWeb()
+    }
+})

public/static/pagination.js

@@ -3,8 +3,8 @@
  * @returns {void}
  */
 function navigate_forward() {
-    const url = new URL(window.location);
-    const searchParams = url.searchParams;
+    let url = new URL(window.location);
+    let searchParams = url.searchParams;
 
     let q = searchParams.get('q');
     let page = parseInt(searchParams.get('page'));
@@ -23,8 +23,8 @@ function navigate_forward() {
  * @returns {void}
  */
 function navigate_backward() {
-    const url = new URL(window.location);
-    const searchParams = url.searchParams;
+    let url = new URL(window.location);
+    let searchParams = url.searchParams;
 
     let q = searchParams.get('q');
     let page = parseInt(searchParams.get('page'));

public/static/search_area_options.js

@@ -0,0 +1,18 @@
+document.addEventListener(
+    'DOMContentLoaded',
+    () => {
+        let url = new URL(window.location)
+        let searchParams = url.searchParams
+
+        let safeSearchLevel = searchParams.get('safesearch')
+
+        if (
+            safeSearchLevel >= 0 &&
+            safeSearchLevel <= 2 &&
+            safeSearchLevel !== null
+        ) {
+            document.querySelector('.search_options select').value = safeSearchLevel
+        }
+    },
+    false,
+)

public/static/settings.js

@@ -1,5 +1,5 @@
 /**
- * This function handles the toggling of selections of all upstream search engines 
+ * This function handles the toggling of selections of all upstream search engines
  * options in the settings page under the tab engines.
  */
 function toggleAllSelection() {
@@ -8,12 +8,12 @@ function toggleAllSelection() {
     .forEach(
       (engine_checkbox) =>
         (engine_checkbox.checked =
-          document.querySelector('.select_all').checked)
+          document.querySelector('.select_all').checked),
     )
 }
 
 /**
- * This function adds the functionality to sidebar buttons to only show settings 
+ * This function adds the functionality to sidebar buttons to only show settings
  * related to that tab.
  * @param {HTMLElement} current_tab - The current tab that was clicked.
  */
@@ -43,20 +43,28 @@ function setClientSettings() {
 
   // Loop through all select tags and add their values to the cookie dictionary
   document.querySelectorAll('select').forEach((select_tag) => {
-    if (select_tag.name === 'themes') {
-      cookie_dictionary['theme'] = select_tag.value
-    } else if (select_tag.name === 'colorschemes') {
-      cookie_dictionary['colorscheme'] = select_tag.value
+    switch (select_tag.name) {
+      case 'themes':
+        cookie_dictionary['theme'] = select_tag.value
+        break
+      case 'colorschemes':
+        cookie_dictionary['colorscheme'] = select_tag.value
+        break
+      case 'safe_search_levels':
+        cookie_dictionary['safe_search_level'] = Number(select_tag.value)
+        break
     }
   })
 
   // Loop through all engine checkboxes and add their values to the cookie dictionary
   let engines = []
+
   document.querySelectorAll('.engine').forEach((engine_checkbox) => {
-    if (engine_checkbox.checked === true) {
+    if (engine_checkbox.checked) {
       engines.push(engine_checkbox.parentNode.parentNode.innerText.trim())
     }
   })
+
   cookie_dictionary['engines'] = engines
 
   // Set the expiration date for the cookie to 1 year from the current date
@@ -65,7 +73,7 @@ function setClientSettings() {
 
   // Save the cookie to the user's machine
   document.cookie = `appCookie=${JSON.stringify(
-    cookie_dictionary
+    cookie_dictionary,
   )}; expires=${expiration_date.toUTCString()}`
 
   // Display a success message to the user
@@ -79,9 +87,9 @@ function setClientSettings() {
 }
 
 /**
- * This functions gets the saved cookies if it is present on the user's machine If it 
- * is available then it is parsed and converted to an object which is then used to 
- * retrieve the preferences that the user had selected previously and is then loaded in the 
+ * This functions gets the saved cookies if it is present on the user's machine If it
+ * is available then it is parsed and converted to an object which is then used to
+ * retrieve the preferences that the user had selected previously and is then loaded in the
  * website otherwise the function does nothing and the default server side settings are loaded.
  */
 function getClientSettings() {
@@ -89,21 +97,19 @@ function getClientSettings() {
   let cookie = decodeURIComponent(document.cookie)
 
   // If the cookie is not empty, parse it and use it to set the user's preferences
-  if (cookie !== '') {
-    let cookie_value = decodeURIComponent(document.cookie)
+  if (cookie.length) {
+    let cookie_value = cookie
       .split(';')
       .map((item) => item.split('='))
       .reduce((acc, [_, v]) => (acc = JSON.parse(v)) && acc, {})
 
     // Loop through all link tags and update their href values to match the user's preferences
-    let links = Array.from(document.querySelectorAll('link')).forEach(
-      (item) => {
-        if (item.href.includes('static/themes')) {
-          item.href = `static/themes/${cookie_value['theme']}.css`
-        } else if (item.href.includes('static/colorschemes')) {
-          item.href = `static/colorschemes/${cookie_value['colorscheme']}.css`
-        }
+    Array.from(document.querySelectorAll('link')).forEach((item) => {
+      if (item.href.includes('static/themes')) {
+        item.href = `static/themes/${cookie_value['theme']}.css`
+      } else if (item.href.includes('static/colorschemes')) {
+        item.href = `static/colorschemes/${cookie_value['colorscheme']}.css`
       }
-    )
+    })
   }
 }

public/static/themes/simple.css

@@ -70,6 +70,28 @@ body {
   filter: brightness(1.2);
 }
 
+.search_area .search_options {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.search_area .search_options select {
+  margin: 0.7rem 0;
+  width: 20rem;
+  background-color: var(--color-one);
+  color: var(--foreground-color);
+  padding: 1rem 2rem;
+  border-radius: 0.5rem;
+  outline: none;
+  border: none;
+  text-transform: capitalize;
+}
+
+.search_area .search_options option:hover {
+  background-color: var(--color-one);
+}
+
 .result_not_found {
   display: flex;
   flex-direction: column;
@@ -503,7 +525,8 @@ footer {
   color: var(--foreground-color);
 }
 
-.settings_container .user_interface select {
+.settings_container .user_interface select,
+.settings_container .general select {
   margin: 0.7rem 0;
   width: 20rem;
   background-color: var(--background-color);
@@ -515,7 +538,8 @@ footer {
   text-transform: capitalize;
 }
 
-.settings_container .user_interface option:hover {
+.settings_container .user_interface option:hover,
+.settings_container .general option:hover {
   background-color: var(--color-one);
 }