supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Sign in: use v-model

Browse Source 
There's no need to mess with DOM elements, we can use the normal
v-model approach for both username and password
This commit is contained in:
Reto Brunner 2023-06-18 15:12:41 +02:00
parent 355c5d6fa4
commit c5326e8795
1 changed files with 6 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
client/components/Windows/SignIn.vue
View File

@ -19,14 +19,13 @@
<label for="signin-username">Username</label> <label for="signin-username">Username</label>
<input <input
id="signin-username" id="signin-username"
ref="username" v-model="username"
class="input" class="input"
type="text" type="text"
name="username" name="username"
autocapitalize="none" autocapitalize="none"
autocorrect="off" autocorrect="off"
autocomplete="username" autocomplete="username"
:value="getStoredUser()"
required required
autofocus autofocus
/> />
@ -36,9 +35,8 @@
<RevealPassword v-slot:default="slotProps"> <RevealPassword v-slot:default="slotProps">
<input <input
id="signin-password" id="signin-password"
ref="password" v-model="password"
:type="slotProps.isVisible ? 'text' : 'password'" :type="slotProps.isVisible ? 'text' : 'password'"
name="password"
class="input" class="input"
autocapitalize="none" autocapitalize="none"
autocorrect="off" autocorrect="off"
@ -70,8 +68,8 @@ export default defineComponent({
const inFlight = ref(false); const inFlight = ref(false);
const errorShown = ref(false); const errorShown = ref(false);
const username = ref<HTMLInputElement | null>(null); const username = ref(storage.get("user") || "");
const password = ref<HTMLInputElement | null>(null); const password = ref("");
const onAuthFailed = () => { const onAuthFailed = () => {
inFlight.value = false; inFlight.value = false;
@ -89,8 +87,8 @@ export default defineComponent({
errorShown.value = false; errorShown.value = false;
const values = { const values = {
user: username.value?.value, user: username.value,
password: password.value?.value, password: password.value,
}; };
storage.set("user", values.user); storage.set("user", values.user);
@ -98,10 +96,6 @@ export default defineComponent({
socket.emit("auth:perform", values); socket.emit("auth:perform", values);
}; };
const getStoredUser = () => {
return storage.get("user");
};
onMounted(() => { onMounted(() => {
socket.on("auth:failed", onAuthFailed); socket.on("auth:failed", onAuthFailed);
}); });
@ -116,7 +110,6 @@ export default defineComponent({
username, username,
password, password,
onSubmit, onSubmit,
getStoredUser,
}; };
}, },
}); });