Add confirmation 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",
@@ -62,14 +62,18 @@ export class User extends Model implements UserData {
     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", {
+    await Model.create("token/login", {
       email: this.email,
       password: this.password,
     });
   }
 
   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/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

@@ -1,6 +1,7 @@
 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);
 
@@ -11,13 +12,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,7 +1,15 @@
 <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">
+        <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 />
       </div>
     </div>
@@ -11,7 +19,17 @@
 <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 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>