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> <template>
<div class="modal is-active" v-if="active"> <div v-show="active" class="modal is-active">
<div class="modal-background" /> <div class="modal-background" />
<div class="modal-card"> <div class="modal-card">
<form @submit.prevent="submit"> <form @submit.prevent="submit">
<header class="modal-card-head"> <header class="modal-card-head">
<p class="modal-card-title">Login</p> <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> </header>
<section class="modal-card-body"> <section class="modal-card-body">
<div class="field"> <div class="field">
<label class="label">Username</label> <label class="label">Username</label>
<div class="control"> <div class="control">
<input class="input" type="text" v-model="username" /> <input
ref="username_input"
class="input"
type="text"
v-model="username"
/>
</div> </div>
</div> </div>
@ -26,9 +35,7 @@
</section> </section>
<footer class="modal-card-foot"> <footer class="modal-card-foot">
<button class="button is-success" @click.left="submit()"> <button class="button is-success" @click.left="submit">Login</button>
Login
</button>
<button class="button is-danger" @click.left="set_active(false)"> <button class="button is-danger" @click.left="set_active(false)">
Cancel Cancel
</button> </button>
@ -46,6 +53,10 @@ export default class extends Vue {
public username = ""; public username = "";
public password = ""; public password = "";
declare $refs: {
username_input: HTMLInputElement | null | undefined;
};
public created() { public created() {
window.addEventListener("keydown", (e) => { window.addEventListener("keydown", (e) => {
if (e.key == "Escape") this.set_active(false); if (e.key == "Escape") this.set_active(false);
@ -57,6 +68,14 @@ export default class extends Vue {
this.username = ""; this.username = "";
this.password = ""; this.password = "";
if (this.active) {
this.$nextTick(() => {
if (this.$refs.username_input instanceof HTMLInputElement) {
this.$refs.username_input?.focus();
}
});
}
} }
public submit() { public submit() {