Merge pull request #556 from molgenis/bug/focus-field-submit-form

Bug/focus field submit form
molgenis · Nov 23, 2023 · 4ad5b8d · 4ad5b8d
2 parents 822366f + f72beb2
commit 4ad5b8d
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 8 deletions.
diff --git a/ui/src/types/api.d.ts b/ui/src/types/api.d.ts
@@ -20,7 +20,7 @@ export type Principal = {
   authorities: [
     {
       authority: string;
-    }
+    },
   ];
   details: Object | null;
   authenticated: boolean;

diff --git a/ui/src/views/Login.vue b/ui/src/views/Login.vue
@@ -33,14 +33,15 @@
                   :errorMessage="errorMessage"
                 ></FeedbackMessage>
                 <p class="fw-bold">Login using local account:</p>
-                <form>
+                <form @submit.prevent="login">
                   <div class="input-group mb-3">
                     <span class="input-group-text" id="basic-user-addon">
                       <i class="bi bi-person-fill"></i>
                     </span>
                     <input
                       v-model="username"
                       type="text"
+                      ref="username"
                       class="form-control"
                       placeholder="Username"
                       aria-label="Username"
@@ -62,7 +63,7 @@
                   </div>
                   <div class="d-grid gap-2">
                     <button
-                      type="button"
+                      type="submit"
                       class="btn btn-primary mb-4"
                       @click="login"
                     >
@@ -101,6 +102,11 @@ export default defineComponent({
   methods: {
     toggleShowLogin() {
       this.showLogin = !this.showLogin;
+      if (this.showLogin) {
+        this.$nextTick(() => {
+          this.$refs.username.focus();
+        });
+      }
     },
     redirect(url: string) {
       window.location.href = url;

diff --git a/ui/src/views/Profiles.vue b/ui/src/views/Profiles.vue
@@ -40,13 +40,20 @@
       </template>
       <template #objectType="objectProps">
         <div
-          v-if="objectProps.data && statusMapping[objectProps.data.status as keyof typeof statusMapping]"
+          v-if="
+            objectProps.data &&
+            statusMapping[objectProps.data.status as keyof typeof statusMapping]
+          "
           class="row"
         >
           <div class="col-6">
             <span
               class="badge"
-              :class="`bg-${statusMapping[objectProps.data.status as keyof typeof statusMapping].color}`"
+              :class="`bg-${
+                statusMapping[
+                  objectProps.data.status as keyof typeof statusMapping
+                ].color
+              }`"
             >
               {{
                 statusMapping[
@@ -60,7 +67,9 @@
               :disabled="true"
               v-if="objectProps.row.name === loadingProfile"
               :text="
-                statusMapping[objectProps.data.status as keyof typeof statusMapping].status === 'OFFLINE'
+                statusMapping[
+                  objectProps.data.status as keyof typeof statusMapping
+                ].status === 'OFFLINE'
                   ? 'Starting'
                   : 'Stopping'
               "
@@ -69,15 +78,23 @@
             <ProfileStatus
               v-else
               :disabled="loading"
-              :text="statusMapping[objectProps.data.status as keyof typeof statusMapping].text"
+              :text="
+                statusMapping[
+                  objectProps.data.status as keyof typeof statusMapping
+                ].text
+              "
               @click.prevent="
                 statusMapping[
                   objectProps.data.status as keyof typeof statusMapping
                 ].status === 'ONLINE'
                   ? stopProfile(objectProps.row.name)
                   : startProfile(objectProps.row.name)
               "
-              :icon="statusMapping[objectProps.data.status as keyof typeof statusMapping].icon"
+              :icon="
+                statusMapping[
+                  objectProps.data.status as keyof typeof statusMapping
+                ].icon
+              "
             ></ProfileStatus>
           </div>
         </div>