Add login view

src/api.ts

@@ -32,7 +32,7 @@ class Model {
     }
   }
 
-  protected async create(endpoint: string, data: any) {
+  static async create(endpoint: string, data: any) {
     const init = {
       headers: new Headers(),
       method: "post",
@@ -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();
+    const dataOrErrors = await response.json();
-    if (response.status !== 201) {
+    if (response.status === 200) {
+      return dataOrErrors;
+    } else {
       throw new APIError(response.statusText, dataOrErrors);
     }
   }
@@ -58,18 +60,27 @@ interface UserData {
 }
 
 export class User extends Model implements UserData {
+  public isAuthenticated = false;
+  private token = "";
+
   constructor(public email: string, public password: string) {
     super();
   }
 
+  static async confirm(uid: string, token: string): Promise<void> {
+    await super.create("users/activation", { uid, token });
+  }
+
   async login(): Promise<void> {
-    await super.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> {
-    await super.create("users", { email: this.email, password: this.password });
+    await Model.create("users", { email: this.email, password: this.password });
   }
 }

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/components/Navbar.vue

@@ -3,7 +3,7 @@
     <template #brand>
       <b-navbar-item tag="router-link" :to="{ path: '/' }">
         <img
-          src="img/logo_text.png"
+          src="/img/logo_text.png"
           alt="Lightweight UI components for Vue.js based on Bulma"
         />
       </b-navbar-item>

src/router/index.ts

@@ -11,13 +11,9 @@ const routes: Array<RouteConfig> = [
     component: Home,
   },
   {
-    path: "/about",
+    path: "/confirm/:uid/:token",
-    name: "About",
+    name: "Confirm",
-    // route level code-splitting
+    component: Home,
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () =>
-      import(/* webpackChunkName: "about" */ "../views/About.vue"),
   },
 ];
 

src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/Home.vue

@@ -1,8 +1,16 @@
 <template>
   <section class="container">
     <div class="columns is-centered">
-      <div class="column is-3-widescreen is-4-desktop is-3-tablet">
+      <div class="column is-3-widescreen is-4-desktop is-5-tablet">
-        <LoginForm />
+        <b-notification
+          v-if="isConfirmation"
+          type="is-success"
+          aria-close-label="Close notification"
+        >
+          Deine E-Mail-Adresse wurde erfolgreich bestätigt. Du kannst dich nun
+          anmelden.
+        </b-notification>
+        <LoginForm v-if="!user.isAuthenticated" :user="user" />
       </div>
     </div>
   </section>
@@ -11,7 +19,18 @@
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import LoginForm from "@/components/LoginForm.vue";
+import { User } from "@/api";
 
 @Component({ components: { LoginForm } })
-export default class Home extends Vue {}
+export default class Home extends Vue {
+  private isConfirmation = false;
+  private user = new User("", "");
+
+  private async created() {
+    if (this.$route.name === "Confirm") this.isConfirmation = true;
+    if (this.isConfirmation) {
+      await User.confirm(this.$route.params.uid, this.$route.params.token);
+    }
+  }
+}
 </script>