added simple sortation feature

src/www/index.html

@@ -23,7 +23,7 @@
 
     <div v-cloak class="container mx-auto max-w-3xl">
 
-      <div v-if="authenticated === true">
+      <div v-if="authenticated !== true">
         <span v-if="requiresPassword"
           class="text-sm text-gray-400 mb-10 mr-2 mt-3 cursor-pointer hover:underline float-right" @click="logout">
           Logout
@@ -59,7 +59,7 @@
             <div class="flex-grow">
               <p class="text-2xl font-medium">Clients</p>
             </div>
-            <div class="flex-shrink-0">
+            <div class="flex justify-center">
               <button @click="clientCreate = true; clientCreateName = '';"
                 class="hover:bg-red-800 hover:border-red-800 hover:text-white text-gray-700 border-2 border-gray-100 py-2 px-4 rounded inline-flex items-center transition">
                 <svg class="w-4 mr-2" inline xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
@@ -70,6 +70,14 @@
                 <span class="text-sm">New</span>
               </button>
             </div>
+            <div class="flex-shrink-0">
+              <div>
+                <select @change="onSortationChange()" v-model="sortation" class="form-select appearance-none block w-full hover:bg-red-800 hover:border-red-800 hover:text-white text-gray-700 text-sm border-2 border-gray-100 px-4 py-2 bg-white bg-clip-padding bg-no-repeat rounded transition ease-in-out focus:text-gray-700 focus:bg-white focus:border-red-800 focus:outline-none">
+                  <option selected value="name">Sort by name</option>
+                  <option value="address">Sort by IP</option>
+                </select>
+              </div>
+            </div>
           </div>
 
           <div>

src/www/js/app.js

@@ -110,6 +110,7 @@ new Vue({
         },
       },
     },
+    sortation: 'name',
   },
   methods: {
     dateTime: value => {
@@ -169,6 +170,7 @@ new Vue({
 
         return client;
       });
+      this.onSortationChange();
     },
     login(e) {
       e.preventDefault();
@@ -239,6 +241,21 @@ new Vue({
         .catch(err => alert(err.message || err.toString()))
         .finally(() => this.refresh().catch(console.error));
     },
+    onSortationChange() {
+      this.clients.sort((a, b) => {
+        const nameA = a[this.sortation].toUpperCase(); // ignore upper and lowercase
+        const nameB = b[this.sortation].toUpperCase(); // ignore upper and lowercase
+        if (nameA < nameB) {
+          return -1;
+        }
+        if (nameA > nameB) {
+          return 1;
+        }
+
+        // names must be equal
+        return 0;
+      });
+    },
   },
   filters: {
     bytes,