Add login view

src/api.ts

@@ -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> {

src/components/LoginForm.vue

@@ -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() {
+  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
   }
 }

src/router/index.ts

@@ -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);
 

src/views/Home.vue

@@ -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;