Show toast for other errors in Login

frontend/src/api/utils.ts

@@ -42,7 +42,11 @@ export async function fetchURL(
   }
 
   if (res.status < 200 || res.status > 299) {
-    const error = new StatusError(await res.text(), res.status);
+    const body = await res.text();
+    const error = new StatusError(
+      body || `${res.status} ${res.statusText}`,
+      res.status
+    );
 
     if (auth && res.status == 401) {
       logout();

frontend/src/utils/auth.ts

@@ -48,7 +48,10 @@ export async function login(
   if (res.status === 200) {
     parseToken(body);
   } else {
-    throw new StatusError(body, res.status);
+    throw new StatusError(
+      body || `${res.status} ${res.statusText}`,
+      res.status
+    );
   }
 }
 
@@ -65,7 +68,10 @@ export async function renew(jwt: string) {
   if (res.status === 200) {
     parseToken(body);
   } else {
-    throw new StatusError(body, res.status);
+    throw new StatusError(
+      body || `${res.status} ${res.statusText}`,
+      res.status
+    );
   }
 }
 
@@ -81,7 +87,7 @@ export async function signup(username: string, password: string) {
   });
 
   if (res.status !== 200) {
-    throw new StatusError(res.statusText, res.status);
+    throw new StatusError(`${res.status} ${res.statusText}`, res.status);
   }
 }
 

frontend/src/views/Login.vue

@@ -42,6 +42,7 @@
 </template>
 
 <script setup lang="ts">
+import { StatusError } from "@/api/utils";
 import * as auth from "@/utils/auth";
 import {
   name,
@@ -50,7 +51,7 @@ import {
   recaptchaKey,
   signup,
 } from "@/utils/constants";
-import { onMounted, ref } from "vue";
+import { inject, onMounted, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRoute, useRouter } from "vue-router";
 
@@ -67,6 +68,8 @@ const { t } = useI18n({});
 // Define functions
 const toggleMode = () => (createMode.value = !createMode.value);
 
+const $showError = inject<IToastError>("$showError")!;
+
 const submit = async (event: Event) => {
   event.preventDefault();
   event.stopPropagation();
@@ -98,11 +101,15 @@ const submit = async (event: Event) => {
     await auth.login(username.value, password.value, captcha);
     router.push({ path: redirect });
   } catch (e: any) {
-    console.error(e);
-    if (e.message == 409) {
-      error.value = t("login.usernameTaken");
-    } else {
-      error.value = t("login.wrongCredentials");
+    // console.error(e);
+    if (e instanceof StatusError) {
+      if (e.status === 409) {
+        error.value = t("login.usernameTaken");
+      } else if (e.status === 403) {
+        error.value = t("login.wrongCredentials");
+      } else {
+        $showError(e);
+      }
     }
   }
 };