Merge pull request #110 from neon-mmd/improve-and-fix-settings-page

Improve the code associated with the settings page

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "websurfx"
-version = "0.12.3"
+version = "0.13.0"
 edition = "2021"
 description = "An open-source alternative to Searx that provides clean, ad-free, and organic results with incredible speed while keeping privacy and security in mind."
 repository = "https://github.com/neon-mmd/websurfx"

public/static/cookies.js

@@ -0,0 +1,18 @@
+// This function is executed when any page on the website finsihes loading and
+// this function retrieves the cookies if it is present on the user's machine.
+// If it is available then the saved cookies is display in the cookies tab
+// otherwise an appropriate message is displayed if it is not available.
+document.addEventListener(
+  'DOMContentLoaded',
+  () => {
+    try {
+      let cookie = decodeURIComponent(document.cookie)
+      document.querySelector('.cookies input').value =
+        cookie !== '' ? cookie : 'No cookies have been saved on your system'
+    } catch (error) {
+      console.error('Error decoding cookie:', error)
+      document.querySelector('.cookies input').value = 'Error decoding cookie'
+    }
+  },
+  false
+)

public/static/settings.js

@@ -0,0 +1,83 @@
+// This function handles the toggling of selections of all upstream search engines 
+// options in the settings page under the tab engines.
+function toggleAllSelection() {
+  document
+    .querySelectorAll('.engine')
+    .forEach(
+      (engine_checkbox) =>
+        (engine_checkbox.checked =
+          document.querySelector('.select_all').checked)
+    )
+}
+
+// This function adds the functionality to sidebar buttons to only show settings 
+// related to that tab.
+function setActiveTab(current_tab) {
+  document
+    .querySelectorAll('.tab')
+    .forEach((tab) => tab.classList.remove('active'))
+  document
+    .querySelectorAll('.btn')
+    .forEach((tab) => tab.classList.remove('active'))
+  current_tab.classList.add('active')
+  document
+    .querySelector(`.${current_tab.innerText.toLowerCase().replace(' ', '_')}`)
+    .classList.add('active')
+}
+
+// This function adds the functionality to save all the user selected preferences
+// to be saved in a cookie on the users machine.
+function setClientSettings() {
+  let cookie_dictionary = new Object()
+  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
+    }
+  })
+  let engines = []
+  document.querySelectorAll('.engine').forEach((engine_checkbox) => {
+    if (engine_checkbox.checked === true) {
+      engines.push(engine_checkbox.parentNode.parentNode.innerText.trim())
+    }
+  })
+  cookie_dictionary['engines'] = engines
+  let expiration_date = new Date()
+  expiration_date.setFullYear(expiration_date.getFullYear() + 1)
+  document.cookie = `appCookie=${JSON.stringify(
+    cookie_dictionary
+  )}; expires=${expiration_date.toUTCString()}`
+
+  document.querySelector('.message').innerText =
+    '✅ The settings have been saved sucessfully!!'
+
+  setTimeout(() => {
+    document.querySelector('.message').innerText = ''
+  }, 10000)
+}
+
+// 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() {
+  let cookie = decodeURIComponent(document.cookie)
+
+  if (cookie !== '') {
+    let cookie_value = decodeURIComponent(document.cookie)
+      .split(';')
+      .map((item) => item.split('='))
+      .reduce((acc, [_, v]) => (acc = JSON.parse(v)) && acc, {})
+
+    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`
+        }
+      }
+    )
+  }
+}