Lenaisten/advent22
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

LoginModal: autofocus and some fixes

Browse source
This commit is contained in:
Jörn-Michael Miehe 2023-09-07 02:33:45 +00:00
parent 9cd2e51eb8
commit 0dd96f5949
1 changed files with 25 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
ui/src/components/LoginModal.vue
View file

@ -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() {