refactor: Refactor frontend views and components

src/views/Login.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="column is-3-widescreen is-4-desktop is-5-tablet">
+    <form class="box" @submit.prevent="doAction">
+      <div v-if="errorMessage" class="notification is-danger">
+        {{ errorMessage }}
+      </div>
+
+      <b-field label="Benutzername">
+        <b-input type="text" v-model="user.username" />
+      </b-field>
+      <b-field label="Kennwort">
+        <b-input type="password" v-model="user.password" />
+      </b-field>
+      <b-field v-if="mode === 'signup'" label="Kennwort wiederholen">
+        <b-input type="password" v-model="password2" />
+      </b-field>
+
+      <div class="buttons">
+        <b-button native-type="submit" type="is-primary">
+          {{ mode === "login" ? "Anmelden" : "Konto anlegen" }}
+        </b-button>
+        <router-link v-if="mode === 'login'" to="/signup"
+          >Konto anlegen</router-link
+        >
+        <router-link v-else to="/login">Anmelden</router-link>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Watch } from "vue-property-decorator";
+import { user } from "@/api";
+import { NotifyMixin } from "@/mixins";
+import { mixins } from "vue-class-component";
+import { Route } from "vue-router";
+
+@Component
+export default class Login extends mixins(NotifyMixin) {
+  user = user;
+  private mode: "login" | "signup" = "login";
+  private password2 = "";
+  private errorMessage = "";
+
+  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() {
+    try {
+      if (this.mode === "login") {
+        await this.user.login();
+        if (this.$route.name !== "home") this.$router.push({ name: "home" });
+      } else {
+        await this.user.signup();
+        this.$router.push({ name: "login" });
+        this.showSuccess("Du kannst dich nun anmelden.");
+      }
+    } catch {
+      this.errorMessage = "Fehler";
+    }
+  }
+}
+</script>

src/views/MainPage.vue

@@ -1,35 +0,0 @@
-<template>
-  <section class="container">
-    <div class="columns is-centered">
-      <div
-        v-if="user.isAuthenticated"
-        class="column is-5-fullhd is-6-widescreen is-7-desktop is-7-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 } from "vue-property-decorator";
-import LoginForm from "@/components/LoginForm.vue";
-import { mixins } from "vue-class-component";
-import { User } from "@/api";
-import UserTable from "@/components/UserTable.vue";
-import { NotifyMixin } from "@/mixins";
-
-@Component({ components: { UserTable, LoginForm } })
-export default class Home extends mixins(NotifyMixin) {
-  private user = new User();
-
-  public async created(): Promise<void> {
-    if (!this.user.isAuthenticated && this.$route.name !== "login") {
-      this.$router.push({ name: "login" });
-    }
-  }
-}
-</script>

src/views/User.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="column is-5-fullhd is-6-widescreen is-7-desktop is-7-tablet">
+    <b-notification type="is-info" aria-close-label="Close notification">
+      Dein Konto ist noch nicht aktiv.
+      <a v-if="user.isTrusted" @click="activate()">Jetzt aktivieren</a>
+    </b-notification>
+    <table class="table is-fullwidth">
+      <tbody>
+        <tr>
+          <td>Kontostatus</td>
+          <td>nicht aktiviert</td>
+        </tr>
+        <tr>
+          <td>Benutzername</td>
+          <td>{{ user.username }}</td>
+        </tr>
+        <tr>
+          <td>Vertrauensperson</td>
+          <td></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+import { user } from "@/api";
+
+@Component
+export default class Home extends Vue {
+  user = user;
+
+  async activate(): Promise<void> {
+    await this.user.activate();
+  }
+}
+</script>