src/api.ts

@@ -32,7 +32,7 @@ class Model {
     }
   }
 
-  static async create(endpoint: string, data: any) {
+  protected async create(endpoint: string, data: any) {
     const init = {
       headers: new Headers(),
       method: "post",
@@ -45,10 +45,8 @@ class Model {
     init.headers.set("Accept", "application/json");
     init.headers.set("Content-Type", "application/json");
     const response = await fetch(`/api/${endpoint}/`, init);
-    const dataOrErrors = await response.json();
+    const dataOrErrors: Array<any> = await response.json();
-    if (response.status === 200) {
+    if (response.status !== 201) {
-      return dataOrErrors;
-    } else {
       throw new APIError(response.statusText, dataOrErrors);
     }
   }
@@ -60,27 +58,18 @@ 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> {
-    const response = await Model.create("token/login", {
+    await super.create("token/login", {
       email: this.email,
       password: this.password,
     });
-    this.token = response.auth_token;
-    this.isAuthenticated = true;
   }
 
   async signup(): Promise<void> {
-    await Model.create("users", { email: this.email, password: this.password });
+    await super.create("users", { email: this.email, password: this.password });
   }
 }

src/components/LoginForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <form class="box" @submit.prevent="doAction">
+  <form class="box" @submit.prevent="doSignup">
     <b-field label="E-Mail-Adresse">
       <b-input type="email" v-model="user.email" />
     </b-field>
@@ -17,28 +17,22 @@
         type="is-primary"
         style="margin-left: auto; margin-right: 0; order: 10"
       >
-        {{ mode === "login" ? "Anmelden" : "Konto anlegen" }}
+        Konto anlegen
       </b-button>
     </div>
   </form>
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { Component, Vue } from "vue-property-decorator";
 import { User } from "@/api";
 
 @Component
 export default class LoginForm extends Vue {
-  @Prop() private user!: User;
+  private user = new User("", "");
 
-  private mode: "login" | "signup" = "login";
+  private async doSignup() {
-
+    await this.user.signup();
-  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,9 +11,13 @@ const routes: Array<RouteConfig> = [
     component: Home,
   },
   {
-    path: "/confirm/:uid/:token",
+    path: "/about",
-    name: "Confirm",
+    name: "About",
-    component: Home,
+    // route level code-splitting
+    // 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

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

src/views/Home.vue

@@ -1,16 +1,8 @@
 <template>
   <section class="container">
     <div class="columns is-centered">
-      <div class="column is-3-widescreen is-4-desktop is-5-tablet">
+      <div class="column is-3-widescreen is-4-desktop is-3-tablet">
-        <b-notification
+        <LoginForm />
-          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>
@@ -19,18 +11,7 @@
 <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>