117 lines
1.6 KiB
Vue
117 lines
1.6 KiB
Vue
<template>
|
|
<form
|
|
class="login"
|
|
@submit.prevent="login"
|
|
>
|
|
<div
|
|
v-if="error"
|
|
class="feedback error"
|
|
>{{ error }}</div>
|
|
|
|
<div
|
|
v-if="success"
|
|
class="feedback success"
|
|
>Login successful, redirecting</div>
|
|
|
|
<template v-else>
|
|
<input
|
|
v-model="username"
|
|
placeholder="Username or e-mail"
|
|
type="text"
|
|
class="input"
|
|
required
|
|
>
|
|
|
|
<input
|
|
v-model="password"
|
|
placeholder="Password"
|
|
type="password"
|
|
class="input"
|
|
required
|
|
>
|
|
|
|
<button
|
|
type="submit"
|
|
class="button button-primary"
|
|
>Log in</button>
|
|
|
|
<router-link
|
|
to="/signup"
|
|
class="link link-external signup"
|
|
>Sign up</router-link>
|
|
</template>
|
|
</form>
|
|
</template>
|
|
|
|
<script>
|
|
async function login() {
|
|
this.error = null;
|
|
this.success = false;
|
|
|
|
try {
|
|
const user = await this.$store.dispatch('login', {
|
|
username: this.username,
|
|
password: this.password,
|
|
});
|
|
|
|
this.success = true;
|
|
|
|
setTimeout(() => {
|
|
this.$router.replace(this.$route.query.ref || { name: 'user', params: { username: user.username } });
|
|
}, 1000);
|
|
} catch (error) {
|
|
this.error = error.message;
|
|
}
|
|
}
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
username: null,
|
|
password: null,
|
|
success: false,
|
|
error: null,
|
|
};
|
|
},
|
|
methods: {
|
|
login,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.login {
|
|
width: 20rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: auto;
|
|
}
|
|
|
|
.input {
|
|
margin: 0 0 .5rem 0;
|
|
}
|
|
|
|
.feedback {
|
|
padding: 1rem;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.error {
|
|
color: var(--error);
|
|
}
|
|
|
|
.success {
|
|
color: var(--shadow-strong);
|
|
}
|
|
|
|
.button {
|
|
margin: 0 0 .25rem 0;
|
|
}
|
|
|
|
.signup {
|
|
padding: .5rem;
|
|
text-align: center;
|
|
}
|
|
</style>
|