Add login view

This commit is contained in:
aldrin 2021-04-15 10:05:54 +02:00
parent 8b70374de6
commit 3376253792
4 changed files with 24 additions and 11 deletions

View File

@ -45,8 +45,10 @@ class Model {
init.headers.set("Accept", "application/json");
init.headers.set("Content-Type", "application/json");
const response = await fetch(`/api/${endpoint}/`, init);
const dataOrErrors: Array<any> = await response.json();
if (response.status !== 201) {
const dataOrErrors = await response.json();
if (response.status === 200) {
return dataOrErrors;
} else {
throw new APIError(response.statusText, dataOrErrors);
}
}
@ -58,6 +60,9 @@ interface UserData {
}
export class User extends Model implements UserData {
public isAuthenticated = false;
private token = "";
constructor(public email: string, public password: string) {
super();
}
@ -67,10 +72,12 @@ export class User extends Model implements UserData {
}
async login(): Promise<void> {
await Model.create("token/login", {
const response = await Model.create("token/login", {
email: this.email,
password: this.password,
});
this.token = response.auth_token;
this.isAuthenticated = true;
}
async signup(): Promise<void> {

View File

@ -1,5 +1,5 @@
<template>
<form class="box" @submit.prevent="doSignup">
<form class="box" @submit.prevent="doAction">
<b-field label="E-Mail-Adresse">
<b-input type="email" v-model="user.email" />
</b-field>
@ -17,22 +17,28 @@
type="is-primary"
style="margin-left: auto; margin-right: 0; order: 10"
>
Konto anlegen
{{ mode === "login" ? "Anmelden" : "Konto anlegen" }}
</b-button>
</div>
</form>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Component, Prop, Vue } from "vue-property-decorator";
import { User } from "@/api";
@Component
export default class LoginForm extends Vue {
private user = new User("", "");
@Prop() private user!: User;
private async doSignup() {
await this.user.signup();
private mode: "login" | "signup" = "login";
private async doAction() {
if (this.mode === "login") {
await this.user.login();
} else {
await this.user.signup();
}
// TODO: error handling, show confirmation page
}
}

View File

@ -1,7 +1,6 @@
import Vue from "vue";
import VueRouter, { RouteConfig } from "vue-router";
import Home from "../views/Home.vue";
import Confirm from "@/views/Confirm.vue";
Vue.use(VueRouter);

View File

@ -10,7 +10,7 @@
Deine E-Mail-Adresse wurde erfolgreich bestätigt. Du kannst dich nun
anmelden.
</b-notification>
<LoginForm />
<LoginForm v-if="!user.isAuthenticated" :user="user" />
</div>
</div>
</section>
@ -24,6 +24,7 @@ import { User } from "@/api";
@Component({ components: { LoginForm } })
export default class Home extends Vue {
private isConfirmation = false;
private user = new User("", "");
private async created() {
if (this.$route.name === "Confirm") this.isConfirmation = true;