refactor(lib server): add sort clients by name use config

README.md

@@ -99,7 +99,7 @@ Are you enjoying this project? [Buy Emile a beer!](https://github.com/sponsors/W
 These options can be configured by setting environment variables using `-e KEY="VALUE"` in the `docker run` command.
 
 | Env | Default | Example                        | Description                                                                                                                                                                                                            |
-| - | - | - |------------------------------------------------------------------------------------------------------------------------------------------------------|
+| - | - |--------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | `PORT` | `51821` | `6789`                         | TCP port for Web UI.                                                                                                                                                                                                   |
 | `WEBUI_HOST` | `0.0.0.0` | `localhost`                    | IP address web UI binds to.                                                                                                                                                                                            |
 | `PASSWORD_HASH` | - | `$2y$05$Ci...`                 | When set, requires a password when logging in to the Web UI. See [How to generate an bcrypt hash.md]("https://github.com/wg-easy/wg-easy/blob/master/How_to_generate_an_bcrypt_hash.md") for know how generate the hash. |
@@ -120,6 +120,7 @@ These options can be configured by setting environment variables using `-e KEY="
 | `LANG` | `en` | `de`                           | Web UI language (Supports: en, ua, ru, tr, no, pl, fr, de, ca, es, ko, vi, nl, is, pt, chs, cht, it, th, hi).                                                                                                          |
 | `UI_TRAFFIC_STATS` | `false` | `true`                         | Enable detailed RX / TX client stats in Web UI                                                                                                                                                                         |
 | `UI_CHART_TYPE` | `0` | `1`                            | UI_CHART_TYPE=0 # Charts disabled, UI_CHART_TYPE=1 # Line chart, UI_CHART_TYPE=2 # Area chart, UI_CHART_TYPE=3 # Bar chart                                                                                             |
+| `UI_ENABLE_SORT_CLIENTS` | `false` | `true`                         | Enable UI sort clients by name                                                                                                                                                                         |
 
 > If you change `WG_PORT`, make sure to also change the exposed port.
 

docker-compose.yml

@@ -28,6 +28,7 @@ services:
       # - WG_POST_DOWN=echo "Post Down" > /etc/wireguard/post-down.txt
       # - UI_TRAFFIC_STATS=true
       # - UI_CHART_TYPE=0 # (0 Charts disabled, 1 # Line chart, 2 # Area chart, 3 # Bar chart)
+      # - UI_SORT_CLIENTS=true
 
     image: ghcr.io/wg-easy/wg-easy
     container_name: wg-easy

src/config.js

@@ -37,3 +37,5 @@ iptables -D FORWARD -o wg0 -j ACCEPT;
 module.exports.LANG = process.env.LANG || 'en';
 module.exports.UI_TRAFFIC_STATS = process.env.UI_TRAFFIC_STATS || 'false';
 module.exports.UI_CHART_TYPE = process.env.UI_CHART_TYPE || 0;
+
+module.exports.UI_ENABLE_SORT_CLIENTS = process.env.UI_ENABLE_SORT_CLIENTS === 'true';

src/lib/Server.js

@@ -32,6 +32,7 @@ const {
   LANG,
   UI_TRAFFIC_STATS,
   UI_CHART_TYPE,
+  UI_ENABLE_SORT_CLIENTS,
 } = require('../config');
 
 const requiresPassword = !!PASSWORD_HASH;
@@ -92,6 +93,11 @@ module.exports = class Server {
         return `"${UI_CHART_TYPE}"`;
       }))
 
+      .get('/api/ui-sort-clients', defineEventHandler((event) => {
+        setHeader(event, 'Content-Type', 'application/json');
+        return UI_ENABLE_SORT_CLIENTS;
+      }))
+
       // Authentication
       .get('/api/session', defineEventHandler((event) => {
         const authenticated = requiresPassword

src/www/index.html

@@ -112,11 +112,14 @@
                 <span class="max-md:hidden text-sm">{{$t("backup")}}</span>
               </a>
               <!-- Sort client -->
+              <div v-if="enableSortClient === true">
                   <button @click="sortClient = !sortClient;"
                           class="hover:bg-red-800 hover:border-red-800 hover:text-white text-gray-700 dark:text-neutral-200 max-md:border-l-0 border-2 border-gray-100 dark:border-neutral-600 py-2 px-4 rounded-r-full md:rounded inline-flex items-center transition">
                       <span v-if="sortClient === false" class="max-md:hidden text-sm">{{$t("sort")}} ↑</span>
                       <span v-if="sortClient === true" class="max-md:hidden text-sm">{{$t("sort")}} ↓</span>
                   </button>
+              </div>
+
               <!-- New client -->
               <button @click="clientCreate = true; clientCreateName = '';"
                 class="hover:bg-red-800 hover:border-red-800 hover:text-white text-gray-700 dark:text-neutral-200 max-md:border-l-0 border-2 border-gray-100 dark:border-neutral-600 py-2 px-4 rounded-r-full md:rounded inline-flex items-center transition">

src/www/js/api.js

@@ -146,4 +146,11 @@ class API {
     });
   }
 
+  async getUiSortClients() {
+    return this.call({
+      method: 'get',
+      path: '/ui-sort-clients',
+    });
+  }
+
 }

src/www/js/app.js

@@ -172,6 +172,7 @@ new Vue({
       },
     },
 
+    enableSortClient: true,
     sortClient: true, // Sort clients by name, true = asc, false = desc
   },
   methods: {
@@ -247,7 +248,10 @@ new Vue({
 
         return client;
       });
+
+      if (enableSortClient) {
         this.clients = sortByProperty(this.clients, 'name', this.sortClient);
+      }
     },
     login(e) {
       e.preventDefault();
@@ -410,6 +414,8 @@ new Vue({
         i18n.locale = lang;
       }
 
+      this.enableSortClient = await this.api.getUiSortClients();
+
       const currentRelease = await this.api.getRelease();
       const latestRelease = await fetch('https://wg-easy.github.io/wg-easy/changelog.json')
         .then((res) => res.json())