Focus username field on load

This commit is contained in:
Oliver Traber 2023-10-29 22:36:07 +01:00
parent 627cfe6462
commit 410a09aec6
Signed by: Bluemedia
GPG key ID: C0674B105057136C
2 changed files with 16 additions and 4 deletions

View file

@ -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>

View file

@ -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 }),