From 85a304b2e829a3acef21501772379dc64fb3aa6c Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Fri, 13 Dec 2024 16:20:48 -0800
Subject: [PATCH 1/3] feat: adds small loader while logging in

---
 assets/pages/login.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/assets/pages/login.vue b/assets/pages/login.vue
index 6d644ab0257b..2fd3ef8f168e 100644
--- a/assets/pages/login.vue
+++ b/assets/pages/login.vue
@@ -12,6 +12,7 @@
             autocomplete="username"
             autofocus
             required
+            :disabled="loading"
           />
         </label>
         <label class="input input-bordered flex items-center gap-2 border-2 has-[:focus]:input-primary">
@@ -24,13 +25,17 @@
             autocomplete="current-password"
             autofocus
             required
+            :disabled="loading"
           />
         </label>
         <label class="label text-red" v-if="error">
           {{ $t("error.invalid-auth") }}
         </label>
 
-        <button class="btn btn-primary uppercase" type="submit">{{ $t("button.login") }}</button>
+        <button class="btn btn-primary uppercase" type="submit">
+          <span class="loading loading-spinner" v-if="loading"></span>
+          {{ $t("button.login") }}
+        </button>
       </form>
     </div>
   </div>
@@ -42,10 +47,12 @@ const { t } = useI18n();
 setTitle(t("title.login"));
 
 const error = ref(false);
+const loading = ref(false);
 const form = ref<HTMLFormElement>();
 const params = new URLSearchParams(window.location.search);
 
 async function onLogin() {
+  loading.value = true;
   const response = await fetch(withBase("/api/token"), {
     body: new FormData(form.value),
     method: "POST",
@@ -61,6 +68,7 @@ async function onLogin() {
   } else {
     error.value = true;
   }
+  loading.value = false;
 }
 </script>
 <route lang="yaml">

From 92c60b29bd352686e557fe931edcf7cbde3b4160 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Fri, 13 Dec 2024 17:20:05 -0800
Subject: [PATCH 2/3] makes error better

---
 assets/pages/login.vue | 62 ++++++++++++++++++++++++------------------
 1 file changed, 35 insertions(+), 27 deletions(-)

diff --git a/assets/pages/login.vue b/assets/pages/login.vue
index 2fd3ef8f168e..9403a86eec8e 100644
--- a/assets/pages/login.vue
+++ b/assets/pages/login.vue
@@ -2,34 +2,42 @@
   <div class="card w-96 flex-shrink-0 bg-base-lighter shadow-2xl">
     <div class="card-body">
       <form action="" method="post" @submit.prevent="onLogin" ref="form" class="flex flex-col gap-8">
-        <label class="input input-bordered flex items-center gap-2 border-2 has-[:focus]:input-primary">
-          <mdi:account class="has-[+:focus]:text-primary" />
-          <input
-            type="text"
-            class="grow"
-            :placeholder="$t('label.username')"
-            name="username"
-            autocomplete="username"
-            autofocus
-            required
-            :disabled="loading"
-          />
+        <label class="form-control w-full">
+          <label
+            class="input input-bordered flex items-center gap-2 border-2 has-[:focus]:input-primary"
+            :class="{ 'input-error': error }"
+          >
+            <mdi:account class="has-[+:focus]:text-primary" :class="{ 'text-error': error }" />
+            <input
+              type="text"
+              class="grow"
+              :class="{ 'text-error': error }"
+              :placeholder="$t('label.username')"
+              name="username"
+              autocomplete="username"
+              autofocus
+              required
+              :disabled="loading"
+            />
+          </label>
+          <label class="label text-error" v-if="error">
+            {{ $t("error.invalid-auth") }}
+          </label>
         </label>
-        <label class="input input-bordered flex items-center gap-2 border-2 has-[:focus]:input-primary">
-          <mdi:key class="has-[+:focus]:text-primary" />
-          <input
-            type="password"
-            class="grow"
-            :placeholder="$t('label.password')"
-            name="password"
-            autocomplete="current-password"
-            autofocus
-            required
-            :disabled="loading"
-          />
-        </label>
-        <label class="label text-red" v-if="error">
-          {{ $t("error.invalid-auth") }}
+        <label class="form-control w-full">
+          <label class="input input-bordered flex items-center gap-2 border-2 has-[:focus]:input-primary">
+            <mdi:key class="has-[+:focus]:text-primary" />
+            <input
+              type="password"
+              class="grow"
+              :placeholder="$t('label.password')"
+              name="password"
+              autocomplete="current-password"
+              autofocus
+              required
+              :disabled="loading"
+            />
+          </label>
         </label>
 
         <button class="btn btn-primary uppercase" type="submit">

From 2f382ba34e30cb3cf0d12b5cb106dbeabc2d939c Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Fri, 13 Dec 2024 18:31:02 -0800
Subject: [PATCH 3/3] makes button disabled

---
 assets/pages/login.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/assets/pages/login.vue b/assets/pages/login.vue
index 9403a86eec8e..edff9d2b8acc 100644
--- a/assets/pages/login.vue
+++ b/assets/pages/login.vue
@@ -20,8 +20,10 @@
               :disabled="loading"
             />
           </label>
-          <label class="label text-error" v-if="error">
-            {{ $t("error.invalid-auth") }}
+          <label class="label" v-if="error">
+            <span class="label-text-alt text-error">
+              {{ $t("error.invalid-auth") }}
+            </span>
           </label>
         </label>
         <label class="form-control w-full">
@@ -40,7 +42,7 @@
           </label>
         </label>
 
-        <button class="btn btn-primary uppercase" type="submit">
+        <button class="btn btn-primary uppercase" type="submit" :disabled="loading">
           <span class="loading loading-spinner" v-if="loading"></span>
           {{ $t("button.login") }}
         </button>