thelounge/client/components/Windows/SignIn.vue

<template>
	<div id="sign-in" class="window" role="tabpanel" aria-label="Sign-in">
		<form class="container" method="post" action="" @submit="onSubmit">
			<img
				src="img/logo-vertical-transparent-bg.svg"
				class="logo"
				alt="The Lounge"
				width="256"
				height="170"
			/>
			<img
				src="img/logo-vertical-transparent-bg-inverted.svg"
				class="logo-inverted"
				alt="The Lounge"
				width="256"
				height="170"
			/>

			<label for="signin-username">Username</label>
			<input
				id="signin-username"
				ref="username"
				class="input"
				type="text"
				name="username"
				autocapitalize="none"
				autocorrect="off"
				autocomplete="username"
				:value="getStoredUser()"
				required
				autofocus
			/>

			<div class="password-container">
				<label for="signin-password">Password</label>
				<RevealPassword v-slot:default="slotProps">
					<input
						id="signin-password"
						ref="password"
						:type="slotProps.isVisible ? 'text' : 'password'"
						name="password"
						class="input"
						autocapitalize="none"
						autocorrect="off"
						autocomplete="current-password"
						required
					/>
				</RevealPassword>
			</div>

			<div v-if="errorShown" class="error">Authentication failed.</div>

			<styled-button :disabled="inFlight">Sign in</styled-button>
		</form>
	</div>
</template>

<style scoped>
.container {
	flex: 1 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

label {
	display: block;
	margin-top: 10px;
	width: 100%;
}

.btn {
	margin-top: 25px;
}

.error {
	color: #e74c3c;
	margin-top: 1em;
	width: 100%;
}

.password-container {
	width: 100%;
}

.password-container .reveal-password {
	top: 31px;
}

@media (max-width: 479px) {
	#sign-in .btn {
		width: 100%;
	}
}
</style>

<script>
import storage from "../../js/localStorage";
import socket from "../../js/socket";
import RevealPassword from "../RevealPassword.vue";
import StyledButton from "../StyledButton.vue";

export default {
	name: "SignIn",
	components: {
		RevealPassword,
		StyledButton,
	},
	data() {
		return {
			inFlight: false,
			errorShown: false,
		};
	},
	mounted() {
		socket.on("auth:failed", this.onAuthFailed);
	},
	beforeDestroy() {
		socket.off("auth:failed", this.onAuthFailed);
	},
	methods: {
		onAuthFailed() {
			this.inFlight = false;
			this.errorShown = true;
		},
		onSubmit(event) {
			event.preventDefault();

			this.inFlight = true;
			this.errorShown = false;

			const values = {
				user: this.$refs.username.value,
				password: this.$refs.password.value,
			};

			storage.set("user", values.user);

			socket.emit("auth:perform", values);
		},
		getStoredUser() {
			return storage.get("user");
		},
	},
};
</script>