src/api.ts

@@ -30,21 +30,20 @@ async function request(
   init.headers.set("Accept", "application/json");
   init.headers.set("Content-Type", "application/json");
   const response = await fetch(`/api/${endpoint}/`, init);
-  if (response.status !== 204) {
+  const dataOrErrors = await response.json();
-    if (response.status === successStatus) {
+  if (response.status === successStatus) {
-      return await response.json();
+    return dataOrErrors;
-    } else {
+  } else {
-      throw new APIError(response.statusText, await response.json());
+    throw new APIError(response.statusText, dataOrErrors);
-    }
   }
 }
 
 export class User {
-  email: string | undefined;
+  private email: string | undefined;
-  password: string | undefined;
+  private password: string | undefined;
   private username: string | null = null;
   private confidantEmail: string | null = null;
-  isAuthenticated = false;
+  private isAuthenticated = false;
   private token = "";
 
   static async confirm(uid: string, token: string): Promise<void> {

src/components/LoginForm.vue

@@ -24,9 +24,8 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import { Component, Prop, Vue } from "vue-property-decorator";
 import { User } from "@/api";
-import { Route } from "vue-router";
 
 @Component
 export default class LoginForm extends Vue {
@@ -34,30 +33,11 @@ export default class LoginForm extends Vue {
 
   private mode: "login" | "signup" = "login";
 
-  public created(): void {
-    if (this.$route.name === "signup") this.mode = "signup";
-  }
-
-  @Watch("$route")
-  public routeChanged(to: Route): void {
-    if (to.name === "signup") {
-      this.mode = "signup";
-    } else {
-      this.mode = "login";
-    }
-  }
-
   private async doAction() {
     if (this.mode === "login") {
       await this.user.login();
     } 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",
-      });
     }
     // TODO: error handling, show confirmation page
   }

src/components/Navbar.vue

@@ -9,25 +9,21 @@
       </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 #end>
       <b-navbar-item tag="div">
         <div class="buttons">
-          <router-link :to="{ name: 'signup' }" class="button is-primary">
+          <a class="button is-primary">
             <strong>Konto anlegen</strong>
-          </router-link>
+          </a>
-          <router-link :to="{ name: 'login' }" class="button is-light"
+          <a class="button is-light">Anmelden</a>
-            >Anmelden</router-link
-          >
         </div>
       </b-navbar-item>
     </template>

src/router/index.ts

@@ -1,29 +1,19 @@
 import Vue from "vue";
 import VueRouter, { RouteConfig } from "vue-router";
-import MainPage from "../views/MainPage.vue";
+import Home from "../views/Home.vue";
 
 Vue.use(VueRouter);
 
 const routes: Array<RouteConfig> = [
   {
     path: "/",
-    name: "home",
+    name: "Home",
-    component: MainPage,
+    component: Home,
-  },
-  {
-    path: "/login",
-    name: "login",
-    component: MainPage,
-  },
-  {
-    path: "/signup",
-    name: "signup",
-    component: MainPage,
   },
   {
     path: "/confirm/:uid/:token",
-    name: "confirm",
+    name: "Confirm",
-    component: MainPage,
+    component: Home,
   },
 ];
 

src/views/Home.vue

@@ -0,0 +1,38 @@
+<template>
+  <section class="container">
+    <div class="columns is-centered">
+      <div class="column is-5-widescreen is-4-desktop is-5-tablet">
+        <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>
+        <UserTable v-if="user.isAuthenticated" :user="user" />
+        <LoginForm v-else :user="user" />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+import LoginForm from "@/components/LoginForm.vue";
+import { User } from "@/api";
+import UserTable from "@/components/UserTable.vue";
+
+@Component({ components: { UserTable, 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;
+    if (this.isConfirmation) {
+      await User.confirm(this.$route.params.uid, this.$route.params.token);
+    }
+  }
+}
+</script>

src/views/MainPage.vue

@@ -1,39 +0,0 @@
-<template>
-  <section class="container">
-    <div class="columns is-centered">
-      <div
-        v-if="user.isAuthenticated"
-        class="column is-3-widescreen is-4-desktop is-5-tablet"
-      >
-        <UserTable :user="user" />
-      </div>
-      <div v-else class="column is-3-widescreen is-4-desktop is-5-tablet">
-        <LoginForm :user="user" />
-      </div>
-    </div>
-  </section>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-import LoginForm from "@/components/LoginForm.vue";
-import { User } from "@/api";
-import UserTable from "@/components/UserTable.vue";
-
-@Component({ components: { UserTable, LoginForm } })
-export default class Home extends Vue {
-  private user = new User();
-
-  public async created(): Promise<void> {
-    if (this.$route.name === "confirm") {
-      await User.confirm(this.$route.params.uid, this.$route.params.token);
-      this.$router.push({ name: "login" });
-      this.$buefy.toast.open({
-        message:
-          "Deine E-Mail-Adresse wurde bestätigt. Du kannst dich nun anmelden.",
-        type: "is-success",
-      });
-    }
-  }
-}
-</script>