Focus username field on load

src/views/login/index.vue

@@ -29,6 +29,7 @@
         <input
           name="username"
           type="text"
+          ref="focus"
           :placeholder="
             context.realm.loginWithEmailAllowed
               ? 'jane.doe@example.com'
@@ -80,7 +81,7 @@
   </layout>
 </template>
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, ref, onMounted, nextTick } from "vue";
 import Layout from "~/components/Layout.vue";
 import ErrorBox from "~/components/ErrorBox.vue";
 import type { KcContextBase } from "~/types/context";
@@ -96,6 +97,19 @@ export default defineComponent({
       context: (window as any).kcContext as KcContextBase.Login,
     };
   },
+  setup() {
+    const focus = ref(null);
+
+    onMounted(() => {
+      nextTick(() => {
+        focus.value.focus();
+      });
+    });
+
+    return {
+      focus,
+    };
+  },
 });
 </script>
 <style>

src/views/webauthn-authenticate/index.vue

@@ -115,9 +115,7 @@ export default defineComponent({
         this.authenticate([]);
       }
     },
-    async authenticate(
-      allowedAuthenticators: PublicKeyCredentialDescriptor[]
-    ) {
+    async authenticate(allowedAuthenticators: PublicKeyCredentialDescriptor[]) {
       const publicKey: PublicKeyCredentialRequestOptions = {
         rpId: this.context.rpId,
         challenge: base64url.parse(this.context.challenge, { loose: true }),