From 0dd96f59494c35bc2aaed0a7e43813a45222477c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Thu, 7 Sep 2023 02:33:45 +0000
Subject: [PATCH] LoginModal: autofocus and some fixes

---
 ui/src/components/LoginModal.vue | 31 +++++++++++++++++++++++++------
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/ui/src/components/LoginModal.vue b/ui/src/components/LoginModal.vue
index 954eae7..304a208 100644
--- a/ui/src/components/LoginModal.vue
+++ b/ui/src/components/LoginModal.vue
@@ -1,19 +1,28 @@
 <template>
-  <div class="modal is-active" v-if="active">
+  <div v-show="active" class="modal is-active">
     <div class="modal-background" />
 
     <div class="modal-card">
       <form @submit.prevent="submit">
         <header class="modal-card-head">
           <p class="modal-card-title">Login</p>
-          <button class="delete" aria-label="close"></button>
+          <button
+            class="delete"
+            aria-label="close"
+            @click.left="set_active(false)"
+          />
         </header>
 
         <section class="modal-card-body">
           <div class="field">
             <label class="label">Username</label>
             <div class="control">
-              <input class="input" type="text" v-model="username" />
+              <input
+                ref="username_input"
+                class="input"
+                type="text"
+                v-model="username"
+              />
             </div>
           </div>
 
@@ -26,9 +35,7 @@
         </section>
 
         <footer class="modal-card-foot">
-          <button class="button is-success" @click.left="submit()">
-            Login
-          </button>
+          <button class="button is-success" @click.left="submit">Login</button>
           <button class="button is-danger" @click.left="set_active(false)">
             Cancel
           </button>
@@ -46,6 +53,10 @@ export default class extends Vue {
   public username = "";
   public password = "";
 
+  declare $refs: {
+    username_input: HTMLInputElement | null | undefined;
+  };
+
   public created() {
     window.addEventListener("keydown", (e) => {
       if (e.key == "Escape") this.set_active(false);
@@ -57,6 +68,14 @@ export default class extends Vue {
 
     this.username = "";
     this.password = "";
+
+    if (this.active) {
+      this.$nextTick(() => {
+        if (this.$refs.username_input instanceof HTMLInputElement) {
+          this.$refs.username_input?.focus();
+        }
+      });
+    }
   }
 
   public submit() {