mirror of
https://github.com/thelounge/thelounge.git
synced 2024-05-26 10:22:19 +02:00
148 lines
2.7 KiB
Vue
148 lines
2.7 KiB
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>
|