75 lines
2 KiB
Vue
75 lines
2 KiB
Vue
<template>
|
|
<form class="box" @submit.prevent="doAction">
|
|
<div v-if="errorMessage" class="notification is-danger">
|
|
{{ errorMessage }}
|
|
</div>
|
|
|
|
<b-field label="Benutzername">
|
|
<b-input type="text" v-model="user.username" />
|
|
</b-field>
|
|
<b-field label="Kennwort">
|
|
<b-input type="password" v-model="user.password" />
|
|
</b-field>
|
|
<b-field v-if="mode === 'signup'" label="Kennwort wiederholen">
|
|
<b-input type="password" v-model="password2" />
|
|
</b-field>
|
|
|
|
<div class="buttons">
|
|
<b-button native-type="submit" type="is-primary">
|
|
{{ mode === "login" ? "Anmelden" : "Konto anlegen" }}
|
|
</b-button>
|
|
<router-link v-if="mode === 'login'" to="/signup"
|
|
>Konto anlegen</router-link
|
|
>
|
|
<router-link v-else to="/login">Anmelden</router-link>
|
|
</div>
|
|
</form>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Prop, Watch } from "vue-property-decorator";
|
|
import { mixins } from "vue-class-component";
|
|
import { User } from "@/api";
|
|
import { Route } from "vue-router";
|
|
import { NotifyMixin } from "@/mixins";
|
|
|
|
@Component
|
|
export default class LoginForm extends mixins(NotifyMixin) {
|
|
@Prop() private user!: User;
|
|
|
|
private mode: "login" | "signup" = "login";
|
|
private password2 = "";
|
|
private errorMessage = "";
|
|
|
|
public created(): void {
|
|
if (this.$route.name === "signup") this.mode = "signup";
|
|
}
|
|
|
|
@Watch("$route")
|
|
public routeChanged(to: Route): void {
|
|
if (to.name === "signup") {
|
|
this.mode = "signup";
|
|
} else {
|
|
this.mode = "login";
|
|
}
|
|
}
|
|
|
|
private async doAction() {
|
|
try {
|
|
if (this.mode === "login") {
|
|
await this.user.login();
|
|
if (this.$route.name !== "home") this.$router.push({ name: "home" });
|
|
} else {
|
|
await this.user.signup();
|
|
this.$router.push({ name: "login" });
|
|
this.showSuccess("Du kannst dich nun anmelden.");
|
|
}
|
|
} catch {
|
|
this.errorMessage = "Fehler";
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss"></style>
|