From 8183b9e70f515b65eea2525fc0a949932e9d7db9 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Mon, 9 Sep 2024 08:28:03 -0700
Subject: [PATCH] fix: cleans up login page (#3263)

---
 assets/components.d.ts |  2 ++
 assets/pages/login.vue | 46 +++++++++++++++++++-----------------------
 2 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/assets/components.d.ts b/assets/components.d.ts
index 302d6d74..44f0617b 100644
--- a/assets/components.d.ts
+++ b/assets/components.d.ts
@@ -53,6 +53,7 @@ declare module 'vue' {
     LogMessageActions: typeof import('./components/LogViewer/LogMessageActions.vue')['default']
     LogStd: typeof import('./components/LogViewer/LogStd.vue')['default']
     LogViewer: typeof import('./components/LogViewer/LogViewer.vue')['default']
+    'Mdi:account': typeof import('~icons/mdi/account')['default']
     'Mdi:announcement': typeof import('~icons/mdi/announcement')['default']
     'Mdi:arrowUp': typeof import('~icons/mdi/arrow-up')['default']
     'Mdi:check': typeof import('~icons/mdi/check')['default']
@@ -65,6 +66,7 @@ declare module 'vue' {
     'Mdi:docker': typeof import('~icons/mdi/docker')['default']
     'Mdi:hamburgerMenu': typeof import('~icons/mdi/hamburger-menu')['default']
     'Mdi:hexagonMultiple': typeof import('~icons/mdi/hexagon-multiple')['default']
+    'Mdi:key': typeof import('~icons/mdi/key')['default']
     'Mdi:keyboardEsc': typeof import('~icons/mdi/keyboard-esc')['default']
     'Mdi:magnify': typeof import('~icons/mdi/magnify')['default']
     'Mdi:satelliteVariant': typeof import('~icons/mdi/satellite-variant')['default']
diff --git a/assets/pages/login.vue b/assets/pages/login.vue
index b2eb3624..6d644ab0 100644
--- a/assets/pages/login.vue
+++ b/assets/pages/login.vue
@@ -1,38 +1,36 @@
 <template>
   <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">
-        <div class="form-control">
-          <label class="label">
-            <span class="label-text"> {{ $t("label.username") }} </span>
-          </label>
+      <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
-            class="input input-bordered"
             type="text"
+            class="grow"
+            :placeholder="$t('label.username')"
             name="username"
             autocomplete="username"
-            v-model="username"
             autofocus
+            required
           />
-        </div>
-        <div class="form-control">
-          <label class="label">
-            <span class="label-text">{{ $t("label.password") }}</span>
-          </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
-            class="input input-bordered"
             type="password"
+            class="grow"
+            :placeholder="$t('label.password')"
             name="password"
             autocomplete="current-password"
-            v-model="password"
+            autofocus
+            required
           />
-        </div>
+        </label>
         <label class="label text-red" v-if="error">
           {{ $t("error.invalid-auth") }}
         </label>
-        <div class="form-control mt-6">
-          <button class="btn btn-primary" type="submit">{{ $t("button.login") }}</button>
-        </div>
+
+        <button class="btn btn-primary uppercase" type="submit">{{ $t("button.login") }}</button>
       </form>
     </div>
   </div>
@@ -43,27 +41,25 @@ const { t } = useI18n();
 
 setTitle(t("title.login"));
 
-let error = $ref(false);
-let username = $ref("");
-let password = $ref("");
-let form: HTMLFormElement | undefined = $ref();
+const error = ref(false);
+const form = ref<HTMLFormElement>();
 const params = new URLSearchParams(window.location.search);
 
 async function onLogin() {
   const response = await fetch(withBase("/api/token"), {
-    body: new FormData(form),
+    body: new FormData(form.value),
     method: "POST",
   });
 
   if (response.status == 200) {
-    error = false;
+    error.value = false;
     if (params.has("redirectUrl")) {
       window.location.href = withBase(params.get("redirectUrl")!);
     } else {
       window.location.href = withBase("/");
     }
   } else {
-    error = true;
+    error.value = true;
   }
 }
 </script>