feat: persist display and experimental settings on the db

feat: small styles changed

endpoints/settings/convert_currency.php

@@ -0,0 +1,33 @@
+<?php
+require_once '../../includes/connect_endpoint.php';
+session_start();
+if (!isset($_SESSION['loggedin']) || $_SESSION['loggedin'] !== true) {
+    die(json_encode([
+        "success" => false,
+        "message" => translate('session_expired', $i18n)
+    ]));
+}
+
+if ($_SERVER["REQUEST_METHOD"] === "POST") {
+    $postData = file_get_contents("php://input");
+    $data = json_decode($postData, true);
+    
+    $convert_currency = $data['value'];
+
+    $stmt = $db->prepare('UPDATE settings SET convert_currency = :convert_currency');
+    $stmt->bindParam(':convert_currency', $convert_currency, SQLITE3_INTEGER);
+
+    if ($stmt->execute()) {
+        die(json_encode([
+            "success" => true,
+            "message" => translate("success", $i18n)
+        ]));
+    } else {
+        die(json_encode([
+            "success" => false,
+            "message" => translate("error", $i18n)
+        ]));
+    }
+}
+
+?>

endpoints/settings/monthly_price.php

@@ -0,0 +1,33 @@
+<?php
+require_once '../../includes/connect_endpoint.php';
+session_start();
+if (!isset($_SESSION['loggedin']) || $_SESSION['loggedin'] !== true) {
+    die(json_encode([
+        "success" => false,
+        "message" => translate('session_expired', $i18n)
+    ]));
+}
+
+if ($_SERVER["REQUEST_METHOD"] === "POST") {
+    $postData = file_get_contents("php://input");
+    $data = json_decode($postData, true);
+    
+    $monthly_price = $data['value'];
+
+    $stmt = $db->prepare('UPDATE settings SET monthly_price = :monthly_price');
+    $stmt->bindParam(':monthly_price', $monthly_price, SQLITE3_INTEGER);
+
+    if ($stmt->execute()) {
+        die(json_encode([
+            "success" => true,
+            "message" => translate("success", $i18n)
+        ]));
+    } else {
+        die(json_encode([
+            "success" => false,
+            "message" => translate("error", $i18n)
+        ]));
+    }
+}
+
+?>

endpoints/settings/remove_background.php

@@ -0,0 +1,33 @@
+<?php
+require_once '../../includes/connect_endpoint.php';
+session_start();
+if (!isset($_SESSION['loggedin']) || $_SESSION['loggedin'] !== true) {
+    die(json_encode([
+        "success" => false,
+        "message" => translate('session_expired', $i18n)
+    ]));
+}
+
+if ($_SERVER["REQUEST_METHOD"] === "POST") {
+    $postData = file_get_contents("php://input");
+    $data = json_decode($postData, true);
+    
+    $remove_background = $data['value'];
+
+    $stmt = $db->prepare('UPDATE settings SET remove_background = :remove_background');
+    $stmt->bindParam(':remove_background', $remove_background, SQLITE3_INTEGER);
+
+    if ($stmt->execute()) {
+        die(json_encode([
+            "success" => true,
+            "message" => translate("success", $i18n)
+        ]));
+    } else {
+        die(json_encode([
+            "success" => false,
+            "message" => translate("error", $i18n)
+        ]));
+    }
+}
+
+?>

endpoints/settings/theme.php

@@ -0,0 +1,33 @@
+<?php
+require_once '../../includes/connect_endpoint.php';
+session_start();
+if (!isset($_SESSION['loggedin']) || $_SESSION['loggedin'] !== true) {
+    die(json_encode([
+        "success" => false,
+        "message" => translate('session_expired', $i18n)
+    ]));
+}
+
+if ($_SERVER["REQUEST_METHOD"] === "POST") {
+    $postData = file_get_contents("php://input");
+    $data = json_decode($postData, true);
+    
+    $theme = $data['theme'];
+
+    $stmt = $db->prepare('UPDATE settings SET dark_theme = :theme');
+    $stmt->bindParam(':theme', $theme, SQLITE3_INTEGER);
+
+    if ($stmt->execute()) {
+        die(json_encode([
+            "success" => true,
+            "message" => translate("success", $i18n)
+        ]));
+    } else {
+        die(json_encode([
+            "success" => false,
+            "message" => translate("error", $i18n)
+        ]));
+    }
+}
+
+?>

endpoints/subscription/add.php

@@ -2,6 +2,7 @@
     error_reporting(E_ERROR | E_PARSE);
     require_once '../../includes/connect_endpoint.php';
     require_once '../../includes/inputvalidation.php';
+    require_once '../../includes/getsettings.php';
     
     session_start();
 
@@ -40,7 +41,7 @@
 
     function saveLogo($imageData, $uploadFile, $name) {
         $image = imagecreatefromstring($imageData);
-        $removeBackground = isset($_COOKIE['removeBackground']) && $_COOKIE['removeBackground'] === 'true';
+        $removeBackground = isset($settings['removeBackground']) && $settings['removeBackground'] === 'true';
         if ($image !== false) {
             $tempFile = tempnam(sys_get_temp_dir(), 'logo');
             imagepng($image, $tempFile);

endpoints/subscriptions/get.php

@@ -7,9 +7,11 @@
 
     include_once '../../includes/list_subscriptions.php';
 
+    require_once '../../includes/getsettings.php';
+
     $theme = "light";
-    if (isset($_COOKIE['theme'])) {
-      $theme = $_COOKIE['theme'];
+    if (isset($settings['theme'])) {
+      $theme = $settings['theme'];
     }
 
     if (isset($_SESSION['loggedin']) && $_SESSION['loggedin'] === true) {
@@ -57,11 +59,11 @@
           $print[$id]['url'] = $subscription['url'];
           $print[$id]['notes'] = $subscription['notes'];
 
-          if (isset($_COOKIE['convertCurrency']) && $_COOKIE['convertCurrency'] === 'true' && $currencyId != $mainCurrencyId) {
+          if (isset($settings['convertCurrency']) && $settings['convertCurrency'] === 'true' && $currencyId != $mainCurrencyId) {
             $print[$id]['price'] = getPriceConverted($print[$id]['price'], $currencyId, $db);
             $print[$id]['currency_code'] = $currencies[$mainCurrencyId]['code'];
           }
-          if (isset($_COOKIE['showMonthlyPrice']) && $_COOKIE['showMonthlyPrice'] === 'true') {
+          if (isset($settings['showMonthlyPrice']) && $settings['showMonthlyPrice'] === 'true') {
             $print[$id]['price'] = getPricePerMonth($cycle, $frequency, $print[$id]['price']);
           }
         }

includes/getsettings.php

@@ -0,0 +1,15 @@
+<?php
+
+$query = "SELECT * FROM settings";
+$result = $db->query($query);
+$settings = $result->fetchArray(SQLITE3_ASSOC);
+if ($settings) {
+    $cookieExpire = time() + (30 * 24 * 60 * 60);
+    setcookie('theme', $settings['dark_theme'] ? 'dark': 'light', $cookieExpire);
+    $settings['theme'] = $settings['dark_theme'] ? 'dark': 'light';
+    $settings['showMonthlyPrice'] = $settings['monthly_price'] ? 'true': 'false';
+    $settings['convertCurrency'] = $settings['convert_currency'] ? 'true': 'false';
+    $settings['removeBackground'] = $settings['remove_background'] ? 'true': 'false';
+}
+
+?>

includes/header.php

@@ -8,6 +8,8 @@
   require_once 'i18n/getlang.php';
   require_once 'i18n/' . $lang . '.php';
 
+  require_once 'getsettings.php';
+
   require_once 'version.php';
 
   if ($userCount == 0) {
@@ -17,8 +19,8 @@
   }
 
   $theme = "light";
-  if (isset($_COOKIE['theme'])) {
-    $theme = $_COOKIE['theme'];
+  if (isset($settings['theme'])) {
+    $theme = $settings['theme'];
   }
 
 ?>
@@ -47,7 +49,7 @@
   <header>
     <div class="contain">
       <div class="logo">
-          <a href=".">
+          <a href=".">
               <div class="logo-image"></div>
           </a>
       </div>
@@ -58,7 +60,7 @@
             <span id="user"><?= $username ?></span>
           </button>
           <div class="dropdown-content">
-            <a href="."><i class="fa-solid fa-list"></i><?= translate('subscriptions', $i18n) ?></a>
+            <a href="."><i class="fa-solid fa-list"></i><?= translate('subscriptions', $i18n) ?></a>
             <a href="stats.php"><i class="fa-solid fa-chart-simple"></i><?= translate('stats', $i18n) ?></a>
             <a href="settings.php"><i class="fa-solid fa-gear"></i><?= translate('settings', $i18n) ?></a>
             <a href="about.php"><i class="fa-solid fa-info-circle"></i><?= translate('about', $i18n) ?></a>

includes/version.php

@@ -1,3 +1,3 @@
 <?php
-    $version = "v1.3.0";
+    $version = "v1.4.0";
 ?>

index.php

@@ -90,11 +90,11 @@
             $print[$id]['url'] = $subscription['url'];
             $print[$id]['notes'] = $subscription['notes'];
 
-            if (isset($_COOKIE['convertCurrency']) && $_COOKIE['convertCurrency'] === 'true' && $currencyId != $mainCurrencyId) {
+            if (isset($settings['convertCurrency']) && $settings['convertCurrency'] === 'true' && $currencyId != $mainCurrencyId) {
               $print[$id]['price'] = getPriceConverted($print[$id]['price'], $currencyId, $db);
               $print[$id]['currency_code'] = $currencies[$mainCurrencyId]['code'];
             }
-            if (isset($_COOKIE['showMonthlyPrice']) && $_COOKIE['showMonthlyPrice'] === 'true') {
+            if (isset($settings['showMonthlyPrice']) && $settings['showMonthlyPrice'] === 'true') {
               $print[$id]['price'] = getPricePerMonth($cycle, $frequency, $print[$id]['price']);
             }
           }

login.php

@@ -16,7 +16,7 @@ if ($userCount == 0) {
 session_start();
 if (isset($_SESSION['loggedin']) && $_SESSION['loggedin'] === true) {
     $db->close();
-    header("Location: .");
+    header("Location: .");
     exit();
 } 
 
@@ -47,7 +47,7 @@ if (isset($_POST['username']) && isset($_POST['password'])) {
             $_SESSION['loggedin'] = true;
             $_SESSION['main_currency'] = $main_currency;
             $cookieExpire = time() + (30 * 24 * 60 * 60);
-            setcookie('language', $language, $cookieExpire);
+            setcookie('language', $language, $cookieExpire);
             if ($rememberMe) {
                 $token = bin2hex(random_bytes(32));
                 $addLoginTokens = "INSERT INTO login_tokens (user_id, token) VALUES (?, ?)";
@@ -57,10 +57,10 @@ if (isset($_POST['username']) && isset($_POST['password'])) {
                 $addLoginTokensStmt->execute();
                 $_SESSION['token'] = $token;
                 $cookieValue = $username . "|" . $token . "|" . $main_currency;
-                setcookie('wallos_login', $cookieValue, $cookieExpire);
+                setcookie('wallos_login', $cookieValue, $cookieExpire);
             }
             $db->close();
-            header("Location: .");
+            header("Location: .");
             exit();
         } else {
             $loginFailed = true;

migrations/000007.php

@@ -0,0 +1,15 @@
+<?php
+// This migration adds a new table to store the display and experimental settings
+// This settings will now be persisted across sessions and devices
+
+/** @noinspection PhpUndefinedVariableInspection */
+$db->exec('CREATE TABLE IF NOT EXISTS settings (
+    dark_theme BOOLEAN DEFAULT 0,
+    monthly_price BOOLEAN DEFAULT 0,
+    convert_currency BOOLEAN DEFAULT 0,
+    remove_background BOOLEAN DEFAULT 0
+)');
+
+
+$db->exec('INSERT INTO settings (dark_theme, monthly_price, convert_currency, remove_background) VALUES (0, 0, 0, 0)');
+

scripts/settings.js

@@ -593,24 +593,67 @@ function switchTheme() {
 
   const themeChoice = darkThemeCss.disabled ? 'light' : 'dark';
   document.cookie = `theme=${themeChoice}; expires=Fri, 31 Dec 9999 23:59:59 GMT`;
+
+  const button = document.getElementById("switchTheme");
+  button.disabled = true;
+
+  fetch('endpoints/settings/theme.php', {
+    method: 'POST',
+    headers: {
+        'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({theme: themeChoice === 'dark'})
+  })
+  .then(response => response.json())
+  .then(data => {
+      if (data.success) {
+          showSuccessMessage(data.message);
+      } else {
+          showErrorMessage(data.errorMessage);
+      }
+      button.disabled = false;
+  }).catch(error => {
+      button.disabled = false;
+  });
 }
 
-function setShowMonthlyPriceCookie() {
+function storeSettingsOnDB(endpoint, value) {
+  fetch('endpoints/settings/' + endpoint + '.php', {
+    method: 'POST',
+    headers: {
+        'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({"value": value})
+  })
+  .then(response => response.json())
+  .then(data => {
+      if (data.success) {
+          showSuccessMessage(data.message);
+      } else {
+          showErrorMessage(data.errorMessage);
+      }
+  });
+}
+
+function setShowMonthlyPrice() {
   const showMonthlyPriceCheckbox = document.querySelector("#monthlyprice");
   const value = showMonthlyPriceCheckbox.checked;
-  document.cookie = `showMonthlyPrice=${value}; expires=Fri, 31 Dec 9999 23:59:59 GMT`;
+
+  storeSettingsOnDB('monthly_price', value);
 }
 
-function setConvertCurrencyCookie() {
+function setConvertCurrency() {
   const convertCurrencyCheckbox = document.querySelector("#convertcurrency");
   const value = convertCurrencyCheckbox.checked;
-  document.cookie = `convertCurrency=${value}; expires=Fri, 31 Dec 9999 23:59:59 GMT`;
+
+  storeSettingsOnDB('convert_currency', value);
 }
 
-function setRemoveBackgroundCookie() {
+function setRemoveBackground() {
   const removeBackgroundCheckbox = document.querySelector("#removebackground");
   const value = removeBackgroundCheckbox.checked;
-  document.cookie = `removeBackground=${value}; expires=Fri, 31 Dec 9999 23:59:59 GMT`;
+
+  storeSettingsOnDB('remove_background', value);
 }
 
 function exportToJson() {

settings.php

@@ -1,6 +1,7 @@
 <?php
     require_once 'includes/header.php';
 ?>
+
 <section class="contain settings">
     <section class="account-section">
         <header>
@@ -465,22 +466,17 @@
         </header>
         <div class="account-settings-list">
             <div>
-                <input type="button" value="<?= translate('switch_theme', $i18n) ?>" onClick="switchTheme()">
+                <input id="switchTheme" type="button" value="<?= translate('switch_theme', $i18n) ?>" onClick="switchTheme()">
             </div>
-            <?php
-                $monthlyprice = isset($_COOKIE['showMonthlyPrice']) && $_COOKIE['showMonthlyPrice'] === 'true';
-                $convertcurrency = isset($_COOKIE['convertCurrency']) && $_COOKIE['convertCurrency'] === 'true';
-                $removebackground = isset($_COOKIE['removeBackground']) && $_COOKIE['removeBackground'] === 'true';
-            ?>
             <div>
                 <div class="form-group-inline">
-                    <input type="checkbox" id="monthlyprice" name="monthlyprice" onChange="setShowMonthlyPriceCookie()" <?php if ($monthlyprice) echo 'checked'; ?>>
+                    <input type="checkbox" id="monthlyprice" name="monthlyprice" onChange="setShowMonthlyPrice()" <?php if ($settings['monthly_price']) echo 'checked'; ?>>
                     <label for="monthlyprice"><?= translate('calculate_monthly_price', $i18n) ?></label>
                 </div>
             </div>
             <div>
                 <div class="form-group-inline">
-                    <input type="checkbox" id="convertcurrency" name="convertcurrency" onChange="setConvertCurrencyCookie()" <?php if ($convertcurrency) echo 'checked'; ?>>
+                    <input type="checkbox" id="convertcurrency" name="convertcurrency" onChange="setConvertCurrency()" <?php if ($settings['convert_currency']) echo 'checked'; ?>>
                     <label for="convertcurrency"><?= translate('convert_prices', $i18n) ?></label>
                 </div>
             </div>
@@ -494,7 +490,7 @@
         <div class="account-settings-list">
             <div>
                 <div class="form-group-inline">
-                    <input type="checkbox" id="removebackground" name="removebackground" onChange="setRemoveBackgroundCookie()" <?php if ($removebackground) echo 'checked'; ?>>
+                    <input type="checkbox" id="removebackground" name="removebackground" onChange="setRemoveBackground()" <?php if ($settings['remove_background']) echo 'checked'; ?>>
                     <label for="removebackground"><?= translate('remove_background', $i18n) ?></label>
                 </div>
             </div>

styles/styles.css

@@ -197,7 +197,7 @@ main > .contain {
   background-color: #FFFFFF;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   padding: 12px 15px;
-  border-radius: 8px;
+  border-radius: 16px;
   cursor: pointer;
 }
 
@@ -369,7 +369,7 @@ main > .contain {
   border: 1px solid #eee;
   padding: 20px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
+  border-radius: 16px;
 }
 
 .account-section header h2 {
@@ -843,7 +843,7 @@ input[type="checkbox"] {
   background-color: #FFFFFF;
   padding: 22px;
   border: 1px solid #EEEEEE;
-  border-radius: 8px;
+  border-radius: 16px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   box-sizing: border-box;
   position: fixed;
@@ -1129,7 +1129,7 @@ input[type="checkbox"] {
 .statistic {
   background-color: #FFFFFF;
   border: 1px solid #EEEEEE;
-  border-radius: 8px;
+  border-radius: 16px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   padding: 20px 24px 30px;
   display: flex;
@@ -1176,7 +1176,7 @@ input[type="checkbox"] {
 .graph {
   background-color: #FFFFFF;
   border: 1px solid #EEEEEE;
-  border-radius: 8px;
+  border-radius: 16px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   flex-basis: 48%;
   align-items: center;