This repository has been archived on 2022-05-05. You can view files and clone it, but cannot push or open issues or pull requests.
userausfall/src/components/LoginForm.vue

67 lines
1.7 KiB
Vue
Raw Normal View History

2021-04-13 11:01:50 +02:00
<template>
2021-04-15 10:05:54 +02:00
<form class="box" @submit.prevent="doAction">
2021-04-13 11:01:50 +02:00
<b-field label="E-Mail-Adresse">
<b-input type="email" v-model="user.email" />
2021-04-13 11:01:50 +02:00
</b-field>
<b-field label="Kennwort">
<b-input type="password" v-model="user.password" />
2021-04-13 11:01:50 +02:00
</b-field>
<div v-if="false" class="notification is-danger">
Email or password was wrong.
</div>
<div class="buttons">
<b-button
native-type="submit"
type="is-primary"
style="margin-left: auto; margin-right: 0; order: 10"
>
2021-04-15 10:05:54 +02:00
{{ mode === "login" ? "Anmelden" : "Konto anlegen" }}
2021-04-13 11:01:50 +02:00
</b-button>
</div>
</form>
</template>
<script lang="ts">
2021-04-16 10:36:52 +02:00
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { User } from "@/api";
2021-04-16 10:36:52 +02:00
import { Route } from "vue-router";
2021-04-13 11:01:50 +02:00
@Component
export default class LoginForm extends Vue {
2021-04-15 10:05:54 +02:00
@Prop() private user!: User;
2021-04-15 10:05:54 +02:00
private mode: "login" | "signup" = "login";
2021-04-16 10:36:52 +02:00
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";
}
}
2021-04-15 10:05:54 +02:00
private async doAction() {
if (this.mode === "login") {
await this.user.login();
2021-04-16 11:31:11 +02:00
if (this.$route.name !== "home") this.$router.push({ name: "home" });
2021-04-15 10:05:54 +02:00
} else {
await this.user.signup();
this.$router.push({ name: "login" });
this.$buefy.toast.open({
message:
"Eine E-Mail zur Bestätigung deiner E-Mail-Adresse wurde versendet.",
type: "is-success",
});
2021-04-15 10:05:54 +02:00
}
2021-04-14 11:21:39 +02:00
// TODO: error handling, show confirmation page
}
}
2021-04-13 11:01:50 +02:00
</script>