Add login page

This commit is contained in:
Jan Bader 2022-01-22 16:11:42 +00:00
parent 18d11358b2
commit b0ba63118e

62
web/src/pages/Login.vue Normal file
View File

@ -0,0 +1,62 @@
<script>
export default {
computed: {
dashboard () {
console.log(this.$store.state);
return this.$store.state;
}
},
data() {
return {
error: false,
login: {
user: "",
password: ""
}
}
},
mounted () {
this.$store.commit("setTitle", "Login");
},
methods: {
formSubmit (e) {
e.preventDefault();
console.log("uiae");
fetch("/api/v1/user/login", {method: "POST", body: JSON.stringify(this.$data.login)})
.then(x => x.json())
.then(x => {
this.$data.error = ""
this.$store.commit("setToken", x.token);
})
.catch(x => this.$data.error = "Error");
// TODO display invalidCredentials
// TODO redirect to dashboard on success
}
}
}
</script>
<template>
<form id="loginForm" @submit="formSubmit" class="center-block">
<div class="form-group">
<label for="username">User</label>
<input type="text" class="form-control" placeholder="User" v-model="login.user" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" placeholder="Password" v-model="login.password" />
<p v-if="error">
The entered credentials are invalid
</p>
</div>
<input type="submit" value="Login" class="btn btn-default" on/>
<p>
New user? <a href="/register">Register</a> instead!
</p>
</form>
</template>