From 6e4c2ddabd5867900a6f5ca1c1bca35b758ca6d3 Mon Sep 17 00:00:00 2001
From: Robert <rw@roko.li>
Date: Fri, 16 Apr 2021 10:36:52 +0200
Subject: [PATCH] Fix navbar and login view

---
 src/api.ts                           |  6 +++---
 src/components/LoginForm.vue         | 16 +++++++++++++++-
 src/components/Navbar.vue            | 10 +++++++---
 src/router/index.ts                  | 20 +++++++++++++++-----
 src/views/{Home.vue => MainPage.vue} | 13 +++++++++----
 5 files changed, 49 insertions(+), 16 deletions(-)
 rename src/views/{Home.vue => MainPage.vue} (72%)

diff --git a/src/api.ts b/src/api.ts
index d046fb0..81845cd 100644
--- a/src/api.ts
+++ b/src/api.ts
@@ -39,11 +39,11 @@ async function request(
 }
 
 export class User {
-  private email: string | undefined;
-  private password: string | undefined;
+  email: string | undefined;
+  password: string | undefined;
   private username: string | null = null;
   private confidantEmail: string | null = null;
-  private isAuthenticated = false;
+  isAuthenticated = false;
   private token = "";
 
   static async confirm(uid: string, token: string): Promise<void> {
diff --git a/src/components/LoginForm.vue b/src/components/LoginForm.vue
index 11844f0..a47d8f1 100644
--- a/src/components/LoginForm.vue
+++ b/src/components/LoginForm.vue
@@ -24,8 +24,9 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
 import { User } from "@/api";
+import { Route } from "vue-router";
 
 @Component
 export default class LoginForm extends Vue {
@@ -33,6 +34,19 @@ 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();
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 2c82afb..75c4a8f 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -9,21 +9,25 @@
       </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">
-          <a class="button is-primary">
+          <router-link :to="{ name: 'signup' }" class="button is-primary">
             <strong>Konto anlegen</strong>
-          </a>
-          <a class="button is-light">Anmelden</a>
+          </router-link>
+          <router-link :to="{ name: 'login' }" class="button is-light"
+            >Anmelden</router-link
+          >
         </div>
       </b-navbar-item>
     </template>
diff --git a/src/router/index.ts b/src/router/index.ts
index 74998c6..5d8f855 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,19 +1,29 @@
 import Vue from "vue";
 import VueRouter, { RouteConfig } from "vue-router";
-import Home from "../views/Home.vue";
+import MainPage from "../views/MainPage.vue";
 
 Vue.use(VueRouter);
 
 const routes: Array<RouteConfig> = [
   {
     path: "/",
-    name: "Home",
-    component: Home,
+    name: "home",
+    component: MainPage,
+  },
+  {
+    path: "/login",
+    name: "login",
+    component: MainPage,
+  },
+  {
+    path: "/signup",
+    name: "signup",
+    component: MainPage,
   },
   {
     path: "/confirm/:uid/:token",
-    name: "Confirm",
-    component: Home,
+    name: "confirm",
+    component: MainPage,
   },
 ];
 
diff --git a/src/views/Home.vue b/src/views/MainPage.vue
similarity index 72%
rename from src/views/Home.vue
rename to src/views/MainPage.vue
index 862ec6d..f8b3329 100644
--- a/src/views/Home.vue
+++ b/src/views/MainPage.vue
@@ -1,7 +1,13 @@
 <template>
   <section class="container">
     <div class="columns is-centered">
-      <div class="column is-5-widescreen is-4-desktop is-5-tablet">
+      <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">
         <b-notification
           v-if="isConfirmation"
           type="is-success"
@@ -10,7 +16,6 @@
           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>
@@ -28,8 +33,8 @@ export default class Home extends Vue {
   private isConfirmation = false;
   private user = new User();
 
-  private async created() {
-    if (this.$route.name === "Confirm") this.isConfirmation = true;
+  public async created(): Promise<void> {
+    if (this.$route.name === "confirm") this.isConfirmation = true;
     if (this.isConfirmation) {
       await User.confirm(this.$route.params.uid, this.$route.params.token);
     }