From ac8358af248b9b34e1a8906b47b053a3da87ee58 Mon Sep 17 00:00:00 2001
From: Clemens Tolboom <c.g.w.m.tolboom@umcg.nl>
Date: Wed, 22 Nov 2023 08:28:14 +0100
Subject: [PATCH 1/2] Focus login field and allow submit by enter.

---
 ui/src/views/Login.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/ui/src/views/Login.vue b/ui/src/views/Login.vue
index bf33a96e8..e05dcc2bb 100644
--- a/ui/src/views/Login.vue
+++ b/ui/src/views/Login.vue
@@ -33,7 +33,7 @@
                   :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>
@@ -41,6 +41,7 @@
                     <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;

From f72beb21e2ec22178162507e37ebeae27da2b139 Mon Sep 17 00:00:00 2001
From: Clemens Tolboom <c.g.w.m.tolboom@umcg.nl>
Date: Wed, 22 Nov 2023 08:28:57 +0100
Subject: [PATCH 2/2] Add auto formattings.

---
 ui/src/types/api.d.ts     |  2 +-
 ui/src/views/Profiles.vue | 27 ++++++++++++++++++++++-----
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/ui/src/types/api.d.ts b/ui/src/types/api.d.ts
index 235da14ae..c534f17b5 100644
--- 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/Profiles.vue b/ui/src/views/Profiles.vue
index c5941db0d..180b2cc73 100644
--- 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,7 +78,11 @@
             <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
@@ -77,7 +90,11 @@
                   ? 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>