systemausfall.org/userausfall
Archived
4
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

feat: Re-enable signup and login

Browse source
This commit is contained in:
aldrin 2021-08-02 10:14:38 +02:00
parent 3ad75c2f0d
commit 74afc805dc
12 changed files with 168 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

58
src/components/LoginForm.vue
View file

@ -1,38 +1,45 @@
<template>
<form class="box" @submit.prevent="doAction">
<b-field label="E-Mail-Adresse">
<b-input type="email" v-model="user.email" />
<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>
<div v-if="false" class="notification is-danger">
Email or password was wrong.
</div>
<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"
style="margin-left: auto; margin-right: 0; order: 10"
>
<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, Vue, Watch } from "vue-property-decorator";
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 Vue {
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";
@ -48,19 +55,20 @@ export default class LoginForm extends Vue {
}
private async doAction() {
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.$buefy.toast.open({
message:
"Eine E-Mail zur Bestätigung deiner E-Mail-Adresse wurde versendet.",
type: "is-success",
});
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";
}
// TODO: error handling, show confirmation page
}
}
</script>
<style lang="scss"></style>

29
src/components/Navbar.vue
View file

@ -2,35 +2,12 @@
<b-navbar>
<template #brand>
<b-navbar-item tag="router-link" :to="{ path: '/' }">
<img
src="/img/logo_text.png"
alt="Lightweight UI components for Vue.js based on Bulma"
/>
<img src="/img/logo_text.png" alt="userausfall" />
</b-navbar-item>
</template>
<template #start>
<!--
<b-navbar-item href="#"> Home </b-navbar-item>
<b-navbar-item href="#"> Documentation </b-navbar-item>
<b-navbar-dropdown label="Info">
<b-navbar-item href="#"> About </b-navbar-item>
<b-navbar-item href="#"> Contact </b-navbar-item>
</b-navbar-dropdown>
-->
</template>
<template #start> </template>
<template #end>
<b-navbar-item tag="div">
<div class="buttons">
<router-link :to="{ name: 'signup' }" class="button is-primary">
<strong>Konto anlegen</strong>
</router-link>
<router-link :to="{ name: 'login' }" class="button is-light"
>Anmelden</router-link
>
</div>
</b-navbar-item>
</template>
<template #end> </template>
</b-navbar>
</template>