feat: Re-enable signup and login

src/api.ts

@@ -8,7 +8,7 @@ export class APIError extends Error {
   }
 }
 
-async function request(
+async function api_request(
   method: HTTPMethod,
   endpoint: string,
   successStatus: number,
@@ -29,7 +29,7 @@ async function request(
   }
   init.headers.set("Accept", "application/json");
   init.headers.set("Content-Type", "application/json");
-  const response = await fetch(`/${endpoint}/`, init);
+  const response = await fetch(`/api/${endpoint}/`, init);
   if (response.status !== 204) {
     if (response.status === successStatus) {
       return await response.json();
@@ -39,16 +39,6 @@ async function request(
   }
 }
 
-async function api_request(
-  method: HTTPMethod,
-  endpoint: string,
-  successStatus: number,
-  data: any,
-  authToken?: string
-) {
-  return request(method, `api/${endpoint}`, successStatus, data, authToken);
-}
-
 export class User {
   email: string | undefined;
   password: string | undefined;
@@ -62,7 +52,7 @@ export class User {
   }
 
   async login(): Promise<void> {
-    if (!this.email || !this.password) throw new APIError("", "");
+    if (!this.username || !this.password) throw new APIError("", "");
 
     // logout any existing sessions
     //await logout()
@@ -73,7 +63,7 @@ export class User {
 
     // authenticate us
     const body = new window.FormData();
-    body.append("username", this.email);
+    body.append("username", this.username);
     body.append("password", this.password);
     const csrf_token = Cookies.get("csrftoken");
     if (csrf_token) body.append("csrfmiddlewaretoken", csrf_token);
@@ -102,7 +92,7 @@ export class User {
 
   async signup(): Promise<void> {
     await api_request("POST", "users", 201, {
-      email: this.email,
+      username: this.username,
       password: this.password,
     });
   }

src/components/LoginForm.vue

@@ -1,38 +1,45 @@
 <template>
   <form class="box" @submit.prevent="doAction">
-    <b-field label="E-Mail-Adresse">
-      <b-input type="email" v-model="user.email" />
+    <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>
-
-    <div v-if="false" class="notification is-danger">
-      Email or password was wrong.
-    </div>
+    <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"
-        style="margin-left: auto; margin-right: 0; order: 10"
-      >
+      <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>
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import { Component, Prop, Watch } from "vue-property-decorator";
+import { mixins } from "vue-class-component";
 import { User } from "@/api";
 import { Route } from "vue-router";
+import { NotifyMixin } from "@/mixins";
 
 @Component
-export default class LoginForm extends Vue {
+export default class LoginForm extends mixins(NotifyMixin) {
   @Prop() private user!: User;
 
   private mode: "login" | "signup" = "login";
+  private password2 = "";
+  private errorMessage = "";
 
   public created(): void {
     if (this.$route.name === "signup") this.mode = "signup";
@@ -48,19 +55,20 @@ export default class LoginForm extends Vue {
   }
 
   private async doAction() {
-    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.$buefy.toast.open({
-        message:
-          "Eine E-Mail zur Bestätigung deiner E-Mail-Adresse wurde versendet.",
-        type: "is-success",
-      });
+    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";
     }
-    // TODO: error handling, show confirmation page
   }
 }
 </script>
+
+<style lang="scss"></style>

src/components/Navbar.vue

@@ -2,35 +2,12 @@
   <b-navbar>
     <template #brand>
       <b-navbar-item tag="router-link" :to="{ path: '/' }">
-        <img
-          src="/img/logo_text.png"
-          alt="Lightweight UI components for Vue.js based on Bulma"
-        />
+        <img src="/img/logo_text.png" alt="userausfall" />
       </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 #start> </template>
 
-    <template #end>
-      <b-navbar-item tag="div">
-        <div class="buttons">
-          <router-link :to="{ name: 'signup' }" class="button is-primary">
-            <strong>Konto anlegen</strong>
-          </router-link>
-          <router-link :to="{ name: 'login' }" class="button is-light"
-            >Anmelden</router-link
-          >
-        </div>
-      </b-navbar-item>
-    </template>
+    <template #end> </template>
   </b-navbar>
 </template>
 

src/mixins.ts

@@ -3,17 +3,22 @@ import Vue from "vue";
 
 @Component
 export class NotifyMixin extends Vue {
-  showError(): void {
-    this.$buefy.toast.open({
-      message: "Es ist leider ein Fehler aufgetreten.",
-      type: "is-danger",
-    });
+  public showError(): void {
+    this.showMessage("Es ist leider ein Fehler aufgetreten.", "is-danger");
   }
 
   showSuccess(message: string): void {
-    this.$buefy.toast.open({
-      message,
-      type: "is-success",
-    });
+    this.showMessage(message, "is-success");
+  }
+
+  showWarning(message: string): void {
+    this.showMessage(message, "is-warning");
+  }
+
+  private showMessage(
+    message: string,
+    type: "is-success" | "is-danger" | "is-warning"
+  ): void {
+    this.$buefy.toast.open({ message, type });
   }
 }

src/views/MainPage.vue

@@ -29,7 +29,7 @@ export default class Home extends mixins(NotifyMixin) {
   public async created(): Promise<void> {
     if (this.$route.name === "confirm") {
       await this.doConfirm();
-    } else if (!this.user.isAuthenticated) {
+    } else if (!this.user.isAuthenticated && this.$route.name !== "login") {
       this.$router.push({ name: "login" });
     }
   }