fix: small layout issue on the settings page

chore: add demo mode chore: add demo link to readme page
ellite · Sep 23, 2024 · 0623ceb · 0623ceb
1 parent b9c9b4c
commit 0623ceb
Show file tree

Hide file tree

Showing 9 changed files with 91 additions and 38 deletions.
diff --git a/README.md b/README.md
@@ -10,6 +10,7 @@ Wallos: Open-Source Personal Subscription Tracker
 
 - [Introduction](#introduction)
 - [Features](#features)
+- [Demo](#demo)
 - [Getting Started](#getting-started)
   - [Prerequisites](#prerequisites)
     - [Baremetal](#baremetal)
@@ -46,6 +47,17 @@ Wallos is a powerful, open-source, and self-hostable web application designed to
 - Notifications:  Wallos supports multiple notification methods (email, discord, pushover, telegram, gotify and webhooks). Get notified about your upcoming payments.
 - Multi Language support.
 
+## Demo
+
+If you want to try Wallos, a demo is available at [https://demo.wallosapp.com](https://demo.wallosapp.com).  
+The database is reset every 2 hours.  
+To access the demo use the following credentials:
+
+```python
+Username: demo  
+Password: demo
+```
+
 ## Getting Started
 
 See instructions to run Wallos below.

diff --git a/about.php b/about.php
@@ -10,7 +10,7 @@
         </header>
         <div class="credits-list">
             <h3><?= translate('about', $i18n) ?></h3>
-            <p>Wallos <?= $version ?></p>
+            <p>Wallos <?= $version ?> <?= $demoMode ? "Demo" : "" ?></p>
             <p><?= translate('license', $i18n) ?>:
                 <span>
                     GPLv3

diff --git a/endpoints/user/save_user.php b/endpoints/user/save_user.php
@@ -90,6 +90,8 @@ function update_exchange_rate($db, $userId)
     }
 }
 
+$demoMode = getenv('DEMO_MODE');
+
 $query = "SELECT main_currency FROM user WHERE id = :userId";
 $stmt = $db->prepare($query);
 $stmt->bindParam(':userId', $userId, SQLITE3_INTEGER);
@@ -244,7 +246,7 @@ function resizeAndUploadAvatar($uploadedFile, $uploadDir, $name)
         $avatar = resizeAndUploadAvatar($_FILES['profile_pic'], '../../images/uploads/logos/avatars/', $name);
     }
 
-    if (isset($_POST['password']) && $_POST['password'] != "") {
+    if (isset($_POST['password']) && $_POST['password'] != "" && !$demoMode) {
         $password = $_POST['password'];
         if (isset($_POST['confirm_password'])) {
             $confirm = $_POST['confirm_password'];
@@ -266,7 +268,7 @@ function resizeAndUploadAvatar($uploadedFile, $uploadDir, $name)
         }
     }
 
-    if (isset($_POST['password']) && $_POST['password'] != "") {
+    if (isset($_POST['password']) && $_POST['password'] != "" && !$demoMode) {
         $sql = "UPDATE user SET avatar = :avatar, email = :email, password = :password, main_currency = :main_currency, language = :language WHERE id = :userId";
     } else {
         $sql = "UPDATE user SET avatar = :avatar, email = :email, main_currency = :main_currency, language = :language WHERE id = :userId";
@@ -279,7 +281,7 @@ function resizeAndUploadAvatar($uploadedFile, $uploadDir, $name)
     $stmt->bindParam(':language', $language, SQLITE3_TEXT);
     $stmt->bindParam(':userId', $userId, SQLITE3_INTEGER);
 
-    if (isset($_POST['password']) && $_POST['password'] != "") {
+    if (isset($_POST['password']) && $_POST['password'] != "" && !$demoMode) {
         $hashedPassword = password_hash($password, PASSWORD_DEFAULT);
         $stmt->bindParam(':password', $hashedPassword, SQLITE3_TEXT);
     }

diff --git a/includes/header.php b/includes/header.php
@@ -18,6 +18,8 @@
     exit();
   }
 
+  $demoMode = getenv('DEMO_MODE');
+
   $theme = "automatic";
   if (isset($settings['theme'])) {
     $theme = $settings['theme'];

diff --git a/includes/version.php b/includes/version.php
@@ -1,3 +1,3 @@
 <?php
-$version = "v2.24.0";
+$version = "v2.24.1";
 ?>
diff --git a/index.php b/index.php
@@ -143,6 +143,15 @@
       }
     }
   }
+
+  if ($demoMode) {
+    ?>
+    <div class="demo-banner">
+      Running in <b>Demo Mode</b>, certain actions and settings are disabled.<br>
+      The database will be reset every 120 minutes.
+    </div>
+    <?php
+  }
   ?>
 
   <header class="<?= $headerClass ?>" id="main-actions">

diff --git a/login.php b/login.php
@@ -20,6 +20,8 @@
     exit();
 }
 
+$demoMode = getenv('DEMO_MODE');
+
 $cookieExpire = time() + (30 * 24 * 60 * 60);
 
 // Check if login is disabled
@@ -258,10 +260,16 @@
                     <label for="password"><?= translate('password', $i18n) ?>:</label>
                     <input type="password" id="password" name="password" required>
                 </div>
-                <div class="form-group-inline">
-                    <input type="checkbox" id="remember" name="remember">
-                    <label for="remember"><?= translate('stay_logged_in', $i18n) ?></label>
-                </div>
+                <?php
+                if (!$demoMode) {
+                    ?>
+                    <div class="form-group-inline">
+                        <input type="checkbox" id="remember" name="remember">
+                        <label for="remember"><?= translate('stay_logged_in', $i18n) ?></label>
+                    </div>
+                    <?php
+                }
+                ?>
                 <div class="form-group">
                     <input type="submit" value="<?= translate('login', $i18n) ?>">
                 </div>

diff --git a/settings.php b/settings.php
@@ -59,20 +59,19 @@ class="avatar-option" data-src="images/uploads/logos/avatars/<?= $image ?>">
                     <div class="grow">
                         <div class="form-group">
                             <label for="username"><?= translate('username', $i18n) ?>:</label>
-                            <input type="text" id="username" name="username" value="<?= $userData['username'] ?>"
-                                disabled>
+                            <input type="text" id="username" name="username" value="<?= $userData['username'] ?>" disabled>
                         </div>
                         <div class="form-group">
                             <label for="email"><?= translate('email', $i18n) ?>:</label>
                             <input type="email" id="email" name="email" value="<?= $userData['email'] ?>" required>
                         </div>
                         <div class="form-group">
                             <label for="password"><?= translate('password', $i18n) ?>:</label>
-                            <input type="password" id="password" name="password">
+                            <input type="password" id="password" name="password" <?= $demoMode ? 'disabled title="Not available on Demo Mode"' : '' ?>>
                         </div>
                         <div class="form-group">
                             <label for="confirm_password"><?= translate('confirm_password', $i18n) ?>:</label>
-                            <input type="password" id="confirm_password" name="confirm_password">
+                            <input type="password" id="confirm_password" name="confirm_password" <?= $demoMode ? 'disabled title="Not available on Demo Mode"' : '' ?>>
                         </div>
                         <?php
                         $currencies = array();
@@ -483,7 +482,7 @@ class="one-third" value="<?= $notificationsEmail['smtp_port'] ?>" />
                             placeholder="<?= translate('from_email', $i18n) ?>"
                             value="<?= $notificationsEmail['from_email'] ?>" />
                     </div>
-                    <label for="otheremails" ><?= translate('send_to_other_emails', $i18n) ?></label>
+                    <label for="otheremails"><?= translate('send_to_other_emails', $i18n) ?></label>
                     <div class="form-group-inline">
                         <input type="text" name="otheremails" id="otheremails"
                             placeholder="<?= translate('other_emails_placeholder', $i18n) ?>"
@@ -942,7 +941,8 @@ class="capitalize"><?= translate('request_method', $i18n) ?>:</label>
         <div class="account-fixer">
             <div class="form-group">
                 <input type="text" name="fixer-key" id="fixerKey" value="<?= $apiKey ?>"
-                    placeholder="<?= translate('api_key', $i18n) ?>">
+                    placeholder="<?= translate('api_key', $i18n) ?>"
+                    <?= $demoMode ? 'disabled title="Not available on Demo Mode"' : '' ?>>
             </div>
             <div class="form-group">
                 <label for="fixerProvider"><?= translate('provider', $i18n) ?>:</label>
@@ -1193,19 +1193,25 @@ class="color-picker fa-solid fa-eye-dropper">
                         onClick="saveCustomColors()" class="buton thin mobile-grow" id="save-colors">
                 </div>
             </div>
-            <div>
-                <h3><?= translate('custom_css', $i18n) ?></h3>
-                <div class="form-group">
-                    <div class="form-group-inline">
-                        <textarea name="customCss" id="customCss" placeholder="<?= translate('custom_css', $i18n) ?>"
-                            class="thin"><?= $settings['customCss'] ?? "" ?></textarea>
-                    </div>
-                    <div class="form-group-inline">
-                        <input type="button" value="<?= translate('save_custom_css', $i18n) ?>"
-                            onClick="saveCustomCss()" class="buton thin mobile-grow" id="save-css">
+            <?php
+            if (!$demoMode) {
+                ?>
+                <div>
+                    <h3><?= translate('custom_css', $i18n) ?></h3>
+                    <div class="form-group">
+                        <div class="form-group-inline">
+                            <textarea name="customCss" id="customCss" placeholder="<?= translate('custom_css', $i18n) ?>"
+                                class="thin"><?= $settings['customCss'] ?? "" ?></textarea>
+                        </div>
+                        <div class="form-group-inline">
+                            <input type="button" value="<?= translate('save_custom_css', $i18n) ?>"
+                                onClick="saveCustomCss()" class="buton thin mobile-grow" id="save-css">
+                        </div>
                     </div>
                 </div>
-            </div>
+                <?php
+            }
+            ?>
     </section>
 
     <section class="account-section">
@@ -1235,17 +1241,20 @@ class="thin"><?= $settings['customCss'] ?? "" ?></textarea>
             </div>
             <div>
                 <div class="form-group-inline">
-                    <input type="checkbox" id="showoriginalprice" name="showoriginalprice" onChange="setShowOriginalPrice()" <?php if ($settings['show_original_price'])
-                        echo 'checked'; ?>>
+                    <input type="checkbox" id="showoriginalprice" name="showoriginalprice"
+                        onChange="setShowOriginalPrice()" <?php if ($settings['show_original_price'])
+                            echo 'checked'; ?>>
                     <label for="showoriginalprice"><?= translate('show_original_price', $i18n) ?></label>
                 </div>
             </div>
             <h3><?= translate('disabled_subscriptions', $i18n) ?></h3>
             <div>
                 <div class="form-group-inline">
-                    <input type="checkbox" id="disabledtobottom" name="disabledtobottom" onChange="setDisabledToBottom()" <?php if ($settings['disabled_to_bottom'])
-                        echo 'checked'; ?>>
-                    <label for="disabledtobottom"><?= translate('show_disabled_subscriptions_at_the_bottom', $i18n) ?></label>
+                    <input type="checkbox" id="disabledtobottom" name="disabledtobottom"
+                        onChange="setDisabledToBottom()" <?php if ($settings['disabled_to_bottom'])
+                            echo 'checked'; ?>>
+                    <label
+                        for="disabledtobottom"><?= translate('show_disabled_subscriptions_at_the_bottom', $i18n) ?></label>
                 </div>
             </div>
             <div>
@@ -1287,22 +1296,22 @@ class="thin"><?= $settings['customCss'] ?? "" ?></textarea>
         <div class="account-list">
             <div>
                 <h3><?= translate('export_subscriptions', $i18n) ?></h3>
-                <div class="form-group-inline">
+                <div class="form-group-inline wrap">
                     <input type="button" value="<?= translate('export_as_json', $i18n) ?>" onClick="exportAsJson()"
-                        class="secondary-button thin mobile-grow" id="export-json">
+                        class="secondary-button thin mobile-grow" id="export-json" <?= $demoMode ? 'disabled title="Not available on Demo Mode"' : '' ?>>
                     <input type="button" value="<?= translate('export_as_csv', $i18n) ?>" onClick="exportAsCsv()"
-                        class="secondary-button thin mobile-grow" id="export-csv">
+                        class="secondary-button thin mobile-grow" id="export-csv" <?= $demoMode ? 'disabled title="Not available on Demo Mode"' : '' ?>>
                 </div>
             </div>
         </div>
         <div>
             <?php
-            if ($userId != 1) {
+            if ($userId != 1 && !$demoMode) {
                 ?>
                 <h3><?= translate('danger_zone', $i18n) ?></h3>
                 <div class="form-group-inline">
-                    <input type="button" value="<?= translate('delete_account', $i18n) ?>" onClick="deleteAccount(<?= $userId ?>)"
-                        class="warning-button thin mobile-grow" id="delete-account">
+                    <input type="button" value="<?= translate('delete_account', $i18n) ?>"
+                        onClick="deleteAccount(<?= $userId ?>)" class="warning-button thin mobile-grow" id="delete-account">
                 </div>
                 <div class="settings-notes">
                     <p>

diff --git a/styles/styles.css b/styles/styles.css
@@ -1262,7 +1262,9 @@ button.disabled {
   cursor: not-allowed;
 }
 
-input[type="text"]:disabled {
+input[type="text"]:disabled,
+input[type="password"]:disabled,
+input[type="email"]:disabled {
   background-color: #f5f5f5;
   border-color: #f5f5f5;
   cursor: not-allowed;
@@ -2471,4 +2473,13 @@ input[type="radio"]:checked+label::after {
 
 .update-banner > span {
   font-weight: 500;
+}
+
+.demo-banner {
+  padding: 15px 20px;
+  background-color: rgba(var(--error-color-rgb), 0.2);
+  border: 1px solid #f45a40;
+  border-radius: 12px;
+  margin-bottom: 20px;
+  text-align: center;
 }