From 8b70374de69fa06eb2dab2bebc140235021f3915 Mon Sep 17 00:00:00 2001
From: Robert <rw@roko.li>
Date: Thu, 15 Apr 2021 09:31:03 +0200
Subject: [PATCH] Add confirmation view

---
 src/api.ts                | 10 +++++++---
 src/components/Navbar.vue |  2 +-
 src/router/index.ts       | 11 ++++-------
 src/views/About.vue       |  5 -----
 src/views/Home.vue        | 22 ++++++++++++++++++++--
 5 files changed, 32 insertions(+), 18 deletions(-)
 delete mode 100644 src/views/About.vue

diff --git a/src/api.ts b/src/api.ts
index 9d349fd..51c6a17 100644
--- a/src/api.ts
+++ b/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 });
   }
 }
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 840640f..2c82afb 100644
--- a/src/components/Navbar.vue
+++ b/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>
diff --git a/src/router/index.ts b/src/router/index.ts
index 88c2365..fc078e3 100644
--- a/src/router/index.ts
+++ b/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",
-    name: "About",
-    // 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"),
+    path: "/confirm/:uid/:token",
+    name: "Confirm",
+    component: Home,
   },
 ];
 
diff --git a/src/views/About.vue b/src/views/About.vue
deleted file mode 100644
index 3fa2807..0000000
--- a/src/views/About.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index a547742..f235929 100644
--- a/src/views/Home.vue
+++ b/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>