From 56e0a38b2ca246e8beeaef3c6c4b9c0ce7d0f09b Mon Sep 17 00:00:00 2001
From: vnugent <public@vaughnnugent.com>
Date: Tue, 9 Apr 2024 17:35:13 -0400
Subject: chore(app): Update deps, login spinner, curl msg, view prep

---
 front-end/src/components/Login/AdminReg.vue | 16 ++++++++++--
 front-end/src/components/Login/PkiLogin.vue | 39 ++++++++++++++++++-----------
 front-end/src/components/Login/UserPass.vue | 13 +++++++++-
 3 files changed, 50 insertions(+), 18 deletions(-)

(limited to 'front-end/src/components/Login')

diff --git a/front-end/src/components/Login/AdminReg.vue b/front-end/src/components/Login/AdminReg.vue
index 8546512..f9bbbb8 100644
--- a/front-end/src/components/Login/AdminReg.vue
+++ b/front-end/src/components/Login/AdminReg.vue
@@ -74,10 +74,22 @@ const onSubmit = async () => {
             <input type="password" name="repeat-password" id="repeat-password" class="input" placeholder="••••••••" required
                 v-model="v$.repeat.$model">
         </fieldset>
-        <button form="admin-registation" type="submit" class="btn">Register</button>
+        <button type="submit" for="admin-registation" class="flex justify-center btn">
+            <span v-if="waiting" class="mx-auto animate-spin">
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 15 15">
+                    <path fill="currentColor" fill-rule="evenodd"
+                        d="M8 .5V5H7V.5h1ZM5.146 5.854l-3-3l.708-.708l3 3l-.708.708Zm4-.708l3-3l.708.708l-3 3l-.708-.708Zm.855 1.849L14.5 7l-.002 1l-4.5-.006l.002-1Zm-9.501 0H5v1H.5v-1Zm5.354 2.859l-3 3l-.708-.708l3-3l.708.708Zm6.292 3l-3-3l.708-.708l3 3l-.708.708ZM8 10v4.5H7V10h1Z"
+                        clip-rule="evenodd" />
+                </svg>
+            </span>
+            <span v-else>
+                Register
+            </span>
+        </button>
     </form>
     <p class="py-4 text-sm text-red-500">
-        This tab is only visible when the server is in setup mode. You can create as many admin accounts as you like now. 
+        This tab is only visible when the server is in setup mode. You can create as many admin accounts as you like
+        now.
     </p>
 </template>
 
diff --git a/front-end/src/components/Login/PkiLogin.vue b/front-end/src/components/Login/PkiLogin.vue
index 4515062..d3a635e 100644
--- a/front-end/src/components/Login/PkiLogin.vue
+++ b/front-end/src/components/Login/PkiLogin.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { isEmpty } from 'lodash-es';
-import { apiCall, debugLog, useMessage } from '@vnuge/vnlib.browser';
+import { apiCall, debugLog, useMessage, useWait } from '@vnuge/vnlib.browser';
 import { ref } from 'vue'
 import { decodeJwt } from 'jose'
 import { useStore } from '../../store';
 
 const { setMessage } = useMessage()
 const { pkiAuth } = useStore()
+const { waiting } = useWait()
 
 const otp = ref('')
 
@@ -32,19 +33,27 @@ const onSubmit = () => {
 </script>
 
 <template>
-    <form id="pki-login-form" class="max-w-sm mx-auto" @submit.prevent="onSubmit">
-      <label for="message" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
-        Paste your one time password (OTP)
-      </label>
-      <textarea 
-        id="message" rows="5"
-        v-model="otp"
-        class="block p-2.5 w-full text-sm text-gray-900 bg-transparent rounded border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" 
-        placeholder="Enter your OTP"
-    >
+  <form id="pki-login-form" class="max-w-sm mx-auto" @submit.prevent="onSubmit">
+    <label for="message" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+      Paste your one time password (OTP)
+    </label>
+    <textarea id="message" rows="5" v-model="otp"
+      class="block p-2.5 w-full text-sm text-gray-900 bg-transparent rounded border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      placeholder="Enter your OTP">
     </textarea>
-    
-      <button type="submit" for="pki-login-form" class="mt-4 btn">Submit</button>
-    
-    </form>
+
+    <button type="submit" for="pki-login-form" class="flex justify-center mt-4 btn">
+      <span v-if="waiting" class="mx-auto animate-spin">
+        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 15 15">
+          <path fill="currentColor" fill-rule="evenodd"
+            d="M8 .5V5H7V.5h1ZM5.146 5.854l-3-3l.708-.708l3 3l-.708.708Zm4-.708l3-3l.708.708l-3 3l-.708-.708Zm.855 1.849L14.5 7l-.002 1l-4.5-.006l.002-1Zm-9.501 0H5v1H.5v-1Zm5.354 2.859l-3 3l-.708-.708l3-3l.708.708Zm6.292 3l-3-3l.708-.708l3 3l-.708.708ZM8 10v4.5H7V10h1Z"
+            clip-rule="evenodd" />
+        </svg>
+      </span>
+      <span v-else>
+        Submit
+      </span>
+  </button>
+
+  </form>
 </template>
\ No newline at end of file
diff --git a/front-end/src/components/Login/UserPass.vue b/front-end/src/components/Login/UserPass.vue
index c47e594..9fd64f4 100644
--- a/front-end/src/components/Login/UserPass.vue
+++ b/front-end/src/components/Login/UserPass.vue
@@ -110,7 +110,18 @@ const onSubmit = async () => {
                     v-model="v$.password.$model"
             >
         </fieldset>
-        <button type="submit" class="btn">Sign in</button>
+        <button type="submit" class="flex justify-center btn">
+            <span v-if="waiting" class="mx-auto animate-spin">
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 15 15">
+                    <path fill="currentColor" fill-rule="evenodd"
+                        d="M8 .5V5H7V.5h1ZM5.146 5.854l-3-3l.708-.708l3 3l-.708.708Zm4-.708l3-3l.708.708l-3 3l-.708-.708Zm.855 1.849L14.5 7l-.002 1l-4.5-.006l.002-1Zm-9.501 0H5v1H.5v-1Zm5.354 2.859l-3 3l-.708-.708l3-3l.708.708Zm6.292 3l-3-3l.708-.708l3 3l-.708.708ZM8 10v4.5H7V10h1Z"
+                        clip-rule="evenodd" />
+                </svg>
+            </span>
+            <span v-else>
+                Sign in
+            </span>
+        </button>
     </form>
 </template>
 
-- 
cgit