From dc7540f4a1f26e91698a65adc13503787cc87710 Mon Sep 17 00:00:00 2001
From: Sergei Birukov <suxscribe@gmail.com>
Date: Fri, 22 Mar 2024 23:52:46 +0300
Subject: [PATCH] Move modals into separate components

---
 .gitignore                                 |  32 ++++
 webui/src/App.vue                          | 193 +++------------------
 webui/src/components/ModalCreateClient.vue |  79 +++++++++
 webui/src/components/ModalDeleteClient.vue |  66 +++++++
 webui/src/components/ModalQRCode.vue       |  23 +++
 5 files changed, 222 insertions(+), 171 deletions(-)
 create mode 100644 webui/src/components/ModalCreateClient.vue
 create mode 100644 webui/src/components/ModalDeleteClient.vue
 create mode 100644 webui/src/components/ModalQRCode.vue

diff --git a/.gitignore b/.gitignore
index e6fce2a6..26b25268 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,3 +4,35 @@
 /src/node_modules
 .DS_Store
 *.swp
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+*.vscode-workspace
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
diff --git a/webui/src/App.vue b/webui/src/App.vue
index a676dde0..62d01f88 100644
--- a/webui/src/App.vue
+++ b/webui/src/App.vue
@@ -26,185 +26,37 @@
             <div v-for="client in clients" :key="client.id">
               <Client :client="client" />
             </div>
-            <div v-if="clients && clients.length === 0">
-              <p class="text-center m-10 text-gray-400 dark:text-neutral-400 text-sm">
-                There are no clients yet.<br /><br />
-                <button
-                  class="bg-red-800 hover:bg-red-700 text-white border-2 border-none py-2 px-4 rounded inline-flex items-center transition"
-                  @click="
-                    clientCreateShowModal = true;
-                    clientCreateName = '';
-                  "
-                >
-                  <IconNew class="w-4 mr-2" />
-                  <span class="text-sm">New Client</span>
-                </button>
-              </p>
-            </div>
-            <div v-if="clients === null" class="text-gray-200 dark:text-red-300 p-5">
-              <LoadingSpinner />
-            </div>
           </div>
-        </div>
-
-        <!-- QR Code-->
-        <div v-if="qrcode">
-          <div class="bg-black bg-opacity-50 fixed top-0 right-0 left-0 bottom-0 flex items-center justify-center z-20">
-            <div class="bg-white rounded-md shadow-lg relative p-8">
+          <div v-if="clients && clients.length === 0">
+            <p class="text-center m-10 text-gray-400 dark:text-neutral-400 text-sm">
+              There are no clients yet.<br /><br />
               <button
-                class="absolute right-4 top-4 text-gray-600 dark:text-neutral-500 hover:text-gray-800 dark:hover:text-neutral-700"
-                @click="qrcode = null"
+                class="bg-red-800 hover:bg-red-700 text-white border-2 border-none py-2 px-4 rounded inline-flex items-center transition"
+                @click="handleNewClient()"
               >
-                <IconClose />
+                <IconNew class="w-4 mr-2" />
+                <span class="text-sm">New Client</span>
               </button>
-              <img :src="qrcode" />
-            </div>
+            </p>
+          </div>
+          <div v-if="clients === null" class="text-gray-200 dark:text-red-300 p-5">
+            <LoadingSpinner />
           </div>
         </div>
 
+        <!-- QR Code-->
+        <div v-if="qrcode">
+          <ModalQRCode />
+        </div>
+
         <!-- Create Dialog -->
         <div v-if="clientCreateShowModal" class="fixed z-10 inset-0 overflow-y-auto">
-          <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-            <div class="fixed inset-0 transition-opacity" aria-hidden="true">
-              <div class="absolute inset-0 bg-gray-500 dark:bg-black opacity-75 dark:opacity-50"></div>
-            </div>
-
-            <!-- This element is to trick the browser into centering the modal contents. -->
-            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
-
-            <div
-              class="inline-block align-bottom bg-white dark:bg-neutral-700 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg w-full"
-              role="dialog"
-              aria-modal="true"
-              aria-labelledby="modal-headline"
-            >
-              <div class="bg-white dark:bg-neutral-700 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-                <div class="sm:flex sm:items-start">
-                  <div
-                    class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-800 sm:mx-0 sm:h-10 sm:w-10"
-                  >
-                    <IconNew class="h-6 w-6 text-white" />
-                  </div>
-                  <div class="flex-grow mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                    <h3 id="modal-headline" class="text-lg leading-6 font-medium text-gray-900 dark:text-neutral-200">
-                      New Client
-                    </h3>
-                    <div class="mt-2">
-                      <p class="text-sm text-gray-500">
-                        <input
-                          v-model.trim="clientCreateName"
-                          class="rounded p-2 border-2 dark:bg-neutral-700 dark:text-neutral-200 border-gray-100 dark:border-neutral-600 focus:border-gray-200 focus:dark:border-neutral-500 dark:placeholder:text-neutral-400 outline-none w-full"
-                          type="text"
-                          placeholder="Name"
-                        />
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="bg-gray-50 dark:bg-neutral-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
-                <button
-                  v-if="clientCreateName.length"
-                  type="button"
-                  class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-800 text-base font-medium text-white hover:bg-red-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm"
-                  @click="createClient()"
-                >
-                  Create
-                </button>
-                <button
-                  v-else
-                  type="button"
-                  class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-200 dark:bg-neutral-400 text-base font-medium text-white dark:text-neutral-300 sm:ml-3 sm:w-auto sm:text-sm cursor-not-allowed"
-                >
-                  Create
-                </button>
-                <button
-                  type="button"
-                  class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-neutral-500 shadow-sm px-4 py-2 bg-white dark:bg-neutral-500 text-base font-medium text-gray-700 dark:text-neutral-50 hover:bg-gray-50 dark:hover:bg-neutral-600 dark:hover:border-neutral-600 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
-                  @click="clientCreateShowModal = null"
-                >
-                  Cancel
-                </button>
-              </div>
-            </div>
-          </div>
+          <ModalCreateClient />
         </div>
 
         <!-- Delete Dialog -->
         <div v-if="clientToDelete" class="fixed z-10 inset-0 overflow-y-auto">
-          <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-            <!--
-  Background overlay, show/hide based on modal state.
-
-  Entering: "ease-out duration-300"
-  From: "opacity-0"
-  To: "opacity-100"
-  Leaving: "ease-in duration-200"
-  From: "opacity-100"
-  To: "opacity-0"
--->
-            <div class="fixed inset-0 transition-opacity" aria-hidden="true">
-              <div class="absolute inset-0 bg-gray-500 dark:bg-black opacity-75 dark:opacity-50"></div>
-            </div>
-
-            <!-- This element is to trick the browser into centering the modal contents. -->
-            <!-- TODO: Check if still relevant? -->
-            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
-            <!--
-  Modal panel, show/hide based on modal state.
-
-  Entering: "ease-out duration-300"
-  From: "opacity-0 tranneutral-y-4 sm:tranneutral-y-0 sm:scale-95"
-  To: "opacity-100 tranneutral-y-0 sm:scale-100"
-  Leaving: "ease-in duration-200"
-  From: "opacity-100 tranneutral-y-0 sm:scale-100"
-  To: "opacity-0 tranneutral-y-4 sm:tranneutral-y-0 sm:scale-95"
--->
-            <div
-              class="inline-block align-bottom bg-white dark:bg-neutral-700 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg w-full"
-              role="dialog"
-              aria-modal="true"
-              aria-labelledby="modal-headline"
-            >
-              <div class="bg-white dark:bg-neutral-700 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-                <div class="sm:flex sm:items-start">
-                  <div
-                    class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10"
-                  >
-                    <!-- Heroicon name: outline/exclamation -->
-                    <IconWarning />
-                  </div>
-                  <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                    <h3 id="modal-headline" class="text-lg leading-6 font-medium text-gray-900 dark:text-neutral-200">
-                      Delete Client
-                    </h3>
-                    <div class="mt-2">
-                      <p class="text-sm text-gray-500 dark:text-neutral-300">
-                        Are you sure you want to delete <strong>{{ clientToDelete.name }}</strong
-                        >? This action cannot be undone.
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="bg-gray-50 dark:bg-neutral-600 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
-                <button
-                  type="button"
-                  class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 dark:bg-red-600 text-base font-medium text-white dark:text-white hover:bg-red-700 dark:hover:bg-red-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm"
-                  @click="deleteClient(clientToDelete)"
-                >
-                  Delete
-                </button>
-                <button
-                  type="button"
-                  class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-neutral-500 shadow-sm px-4 py-2 bg-white dark:bg-neutral-500 text-base font-medium text-gray-700 dark:text-neutral-50 hover:bg-gray-50 dark:hover:bg-neutral-600 dark:hover:border-neutral-600 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
-                  @click="clientToDelete = null"
-                >
-                  Cancel
-                </button>
-              </div>
-            </div>
-          </div>
+          <ModalDeleteClient />
         </div>
       </div>
 
@@ -231,14 +83,15 @@ import ClientNewButton from '@/components/ClientNewButton.vue';
 import IconLogout from '@/components/icons/IconLogout.vue';
 import IconNew from '@/components/icons/IconNew.vue';
 import LoadingSpinner from '@/components/LoadingSpinner.vue';
-import IconClose from '@/components/icons/IconClose.vue';
-import IconWarning from '@/components/icons/IconWarning.vue';
 import Footer from '@/components/Footer.vue';
+import ModalQRCode from '@/components/ModalQRCode.vue';
+import ModalCreateClient from '@/components/ModalCreateClient.vue';
+import ModalDeleteClient from '@/components/ModalDeleteClient.vue';
 
 import API from '@/services/api';
 import Client from '@/components/Client.vue';
 
-import { useStore } from './store/store';
+import { useStore } from '@/store/store';
 import { storeToRefs } from 'pinia';
 
 const store = useStore();
@@ -247,8 +100,6 @@ const { authenticated, requiresPassword } = storeToRefs(store);
 const { clients, clientsPersist, clientCreateShowModal, clientToDelete, clientCreateName, qrcode } = storeToRefs(store);
 
 const logout = store.logout;
-const createClient = store.createClient;
-const deleteClient = store.deleteClient;
 
 const currentRelease = ref(null);
 const latestRelease = ref(null);
diff --git a/webui/src/components/ModalCreateClient.vue b/webui/src/components/ModalCreateClient.vue
new file mode 100644
index 00000000..669ce8fb
--- /dev/null
+++ b/webui/src/components/ModalCreateClient.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+    <div class="fixed inset-0 transition-opacity" aria-hidden="true">
+      <div class="absolute inset-0 bg-gray-500 dark:bg-black opacity-75 dark:opacity-50"></div>
+    </div>
+
+    <!-- This element is to trick the browser into centering the modal contents. -->
+    <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+
+    <div
+      class="inline-block align-bottom bg-white dark:bg-neutral-700 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg w-full"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="modal-headline"
+    >
+      <div class="bg-white dark:bg-neutral-700 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="sm:flex sm:items-start">
+          <div
+            class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-800 sm:mx-0 sm:h-10 sm:w-10"
+          >
+            <IconNew class="h-6 w-6 text-white" />
+          </div>
+          <div class="flex-grow mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <h3 id="modal-headline" class="text-lg leading-6 font-medium text-gray-900 dark:text-neutral-200">
+              New Client
+            </h3>
+            <div class="mt-2">
+              <p class="text-sm text-gray-500">
+                <input
+                  v-model.trim="clientCreateName"
+                  class="rounded p-2 border-2 dark:bg-neutral-700 dark:text-neutral-200 border-gray-100 dark:border-neutral-600 focus:border-gray-200 focus:dark:border-neutral-500 dark:placeholder:text-neutral-400 outline-none w-full"
+                  type="text"
+                  placeholder="Name"
+                />
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="bg-gray-50 dark:bg-neutral-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <button
+          v-if="clientCreateName.length"
+          type="button"
+          class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-800 text-base font-medium text-white hover:bg-red-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm"
+          @click="createClient()"
+        >
+          Create
+        </button>
+        <button
+          v-else
+          type="button"
+          class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-200 dark:bg-neutral-400 text-base font-medium text-white dark:text-neutral-300 sm:ml-3 sm:w-auto sm:text-sm cursor-not-allowed"
+        >
+          Create
+        </button>
+        <button
+          type="button"
+          class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-neutral-500 shadow-sm px-4 py-2 bg-white dark:bg-neutral-500 text-base font-medium text-gray-700 dark:text-neutral-50 hover:bg-gray-50 dark:hover:bg-neutral-600 dark:hover:border-neutral-600 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+          @click="clientCreateShowModal = null"
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import IconNew from '@/components/icons/IconNew.vue';
+import { useStore } from '@/store/store';
+import { storeToRefs } from 'pinia';
+
+const store = useStore();
+const { clientCreateShowModal, clientCreateName } = storeToRefs(store);
+
+const createClient = store.createClient;
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/webui/src/components/ModalDeleteClient.vue b/webui/src/components/ModalDeleteClient.vue
new file mode 100644
index 00000000..ab43a318
--- /dev/null
+++ b/webui/src/components/ModalDeleteClient.vue
@@ -0,0 +1,66 @@
+<template>
+  <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+    <div class="fixed inset-0 transition-opacity" aria-hidden="true">
+      <div class="absolute inset-0 bg-gray-500 dark:bg-black opacity-75 dark:opacity-50"></div>
+    </div>
+
+    <!-- This element is to trick the browser into centering the modal contents. -->
+    <!-- TODO: Check if still relevant? -->
+    <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+    <div
+      class="inline-block align-bottom bg-white dark:bg-neutral-700 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg w-full"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="modal-headline"
+    >
+      <div class="bg-white dark:bg-neutral-700 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="sm:flex sm:items-start">
+          <div
+            class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10"
+          >
+            <!-- Heroicon name: outline/exclamation -->
+            <IconWarning />
+          </div>
+          <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <h3 id="modal-headline" class="text-lg leading-6 font-medium text-gray-900 dark:text-neutral-200">
+              Delete Client
+            </h3>
+            <div class="mt-2">
+              <p class="text-sm text-gray-500 dark:text-neutral-300">
+                Are you sure you want to delete <strong>{{ clientToDelete.name }}</strong
+                >? This action cannot be undone.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="bg-gray-50 dark:bg-neutral-600 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <button
+          type="button"
+          class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 dark:bg-red-600 text-base font-medium text-white dark:text-white hover:bg-red-700 dark:hover:bg-red-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm"
+          @click="deleteClient(clientToDelete)"
+        >
+          Delete
+        </button>
+        <button
+          type="button"
+          class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-neutral-500 shadow-sm px-4 py-2 bg-white dark:bg-neutral-500 text-base font-medium text-gray-700 dark:text-neutral-50 hover:bg-gray-50 dark:hover:bg-neutral-600 dark:hover:border-neutral-600 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+          @click="clientToDelete = null"
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useStore } from '@/store/store';
+import { storeToRefs } from 'pinia';
+import IconWarning from '@/components/icons/IconWarning.vue';
+
+const store = useStore();
+const { clientToDelete } = storeToRefs(store);
+
+const deleteClient = store.deleteClient;
+</script>
diff --git a/webui/src/components/ModalQRCode.vue b/webui/src/components/ModalQRCode.vue
new file mode 100644
index 00000000..cb42780d
--- /dev/null
+++ b/webui/src/components/ModalQRCode.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="bg-black bg-opacity-50 fixed top-0 right-0 left-0 bottom-0 flex items-center justify-center z-20">
+    <div class="bg-white rounded-md shadow-lg relative p-8">
+      <button
+        class="absolute right-4 top-4 text-gray-600 dark:text-neutral-500 hover:text-gray-800 dark:hover:text-neutral-700"
+        @click="qrcode = null"
+      >
+        <IconClose />
+      </button>
+      <img :src="qrcode" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useStore } from '@/store/store';
+import { storeToRefs } from 'pinia';
+
+import IconClose from '@/components/icons/IconClose.vue';
+
+const store = useStore();
+const { qrcode } = storeToRefs(store);
+</script>