143 lines
3.3 KiB
Vue
143 lines
3.3 KiB
Vue
<template>
|
|
<section>
|
|
<h1>Register new user</h1>
|
|
|
|
<div class="form">
|
|
<seasoned-input
|
|
placeholder="username"
|
|
icon="Email"
|
|
type="email"
|
|
:value.sync="username"
|
|
@enter="submit"
|
|
/>
|
|
|
|
<seasoned-input
|
|
placeholder="password"
|
|
icon="Keyhole"
|
|
type="password"
|
|
:value.sync="password"
|
|
@enter="submit"
|
|
/>
|
|
<seasoned-input
|
|
placeholder="repeat password"
|
|
icon="Keyhole"
|
|
type="password"
|
|
:value.sync="passwordRepeat"
|
|
@enter="submit"
|
|
/>
|
|
|
|
<seasoned-button @click="submit">Register</seasoned-button>
|
|
</div>
|
|
|
|
<router-link class="link" to="/signin"
|
|
>Have a user? Sign in here</router-link
|
|
>
|
|
|
|
<seasoned-messages :messages.sync="messages"></seasoned-messages>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapActions } from "vuex";
|
|
import { register } from "@/api";
|
|
import SeasonedButton from "@/components/ui/SeasonedButton";
|
|
import SeasonedInput from "@/components/ui/SeasonedInput";
|
|
import SeasonedMessages from "@/components/ui/SeasonedMessages";
|
|
|
|
export default {
|
|
components: { SeasonedButton, SeasonedInput, SeasonedMessages },
|
|
data() {
|
|
return {
|
|
messages: [],
|
|
username: null,
|
|
password: null,
|
|
passwordRepeat: null
|
|
};
|
|
},
|
|
methods: {
|
|
...mapActions("user", ["login"]),
|
|
submit() {
|
|
this.messages = [];
|
|
let { username, password, passwordRepeat } = this;
|
|
|
|
if (username == null || username.length == 0) {
|
|
this.messages.push({ type: "error", title: "Missing username" });
|
|
return;
|
|
} else if (password == null || password.length == 0) {
|
|
this.messages.push({ type: "error", title: "Missing password" });
|
|
return;
|
|
} else if (passwordRepeat == null || passwordRepeat.length == 0) {
|
|
this.messages.push({ type: "error", title: "Missing repeat password" });
|
|
return;
|
|
} else if (passwordRepeat != password) {
|
|
this.messages.push({ type: "error", title: "Passwords do not match" });
|
|
return;
|
|
}
|
|
|
|
this.registerUser(username, password);
|
|
},
|
|
registerUser(username, password) {
|
|
register(username, password)
|
|
.then(data => {
|
|
if (data.success && this.login()) {
|
|
eventHub.$emit("setUserStatus");
|
|
this.$router.push({ name: "profile" });
|
|
}
|
|
})
|
|
.catch(error => {
|
|
if (error.status === 401) {
|
|
this.messages.push({
|
|
type: "error",
|
|
title: "Access denied",
|
|
message: "Incorrect username or password"
|
|
});
|
|
} else {
|
|
this.messages.push({
|
|
type: "error",
|
|
title: "Unexpected error",
|
|
message: error.message
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "src/scss/variables";
|
|
|
|
section {
|
|
padding: 1.3rem;
|
|
|
|
@include tablet-min {
|
|
padding: 4rem;
|
|
}
|
|
|
|
.form > div,
|
|
input,
|
|
button {
|
|
margin-bottom: 1rem;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0px;
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
margin: 0;
|
|
line-height: 16px;
|
|
color: $text-color;
|
|
font-weight: 300;
|
|
margin-bottom: 20px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.link {
|
|
display: block;
|
|
width: max-content;
|
|
margin-top: 1rem;
|
|
}
|
|
}
|
|
</style>
|