From 834aef400bcca62c171c3e6b6006fcad3599963f Mon Sep 17 00:00:00 2001
From: Melissa Autumn <melissa@thunderbird.net>
Date: Tue, 17 Dec 2024 10:03:51 -0800
Subject: [PATCH] Fix up error message for generic error types on login.

---
 frontend/src/composables/i18n.ts | 1 +
 frontend/src/keys.ts             | 2 +-
 frontend/src/utils.ts            | 8 +++++---
 frontend/src/views/LoginView.vue | 7 ++++++-
 4 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/frontend/src/composables/i18n.ts b/frontend/src/composables/i18n.ts
index 98119b002..ada80af27 100644
--- a/frontend/src/composables/i18n.ts
+++ b/frontend/src/composables/i18n.ts
@@ -20,3 +20,4 @@ const instance = createI18n({
 
 export default instance;
 export const i18n = instance.global;
+export type i18nType = typeof i18n.t;
diff --git a/frontend/src/keys.ts b/frontend/src/keys.ts
index e1617b95d..7303c0c41 100644
--- a/frontend/src/keys.ts
+++ b/frontend/src/keys.ts
@@ -32,7 +32,7 @@ export const fxaEditProfileUrlKey = Symbol('fxaEditProfileUrl') as InjectionKey<
 // Provide configured fetch call to our backend API
 export const callKey = Symbol('call') as InjectionKey<Fetch>;
 
-// Provide a freresh data function
+// Provide a refresh data function
 export const refreshKey = Symbol('refresh') as InjectionKey<Refresh>;
 
 // Provide functionality to paint background of event objects
diff --git a/frontend/src/utils.ts b/frontend/src/utils.ts
index 3b67cd043..fc4574fe0 100644
--- a/frontend/src/utils.ts
+++ b/frontend/src/utils.ts
@@ -1,6 +1,7 @@
 // get the first key of given object that points to given value
 import { ColorSchemes } from '@/definitions';
 import { Ref } from 'vue';
+import { i18nType } from '@/composables/i18n';
 import {
   CustomEventData, Coloring, EventPopup, HTMLElementEvent, CalendarEvent, PydanticException,
 } from './models';
@@ -166,9 +167,10 @@ export const getAccessibleColor = (hexcolor: string): string => {
  * @param formRef
  * @param errObj
  */
-export const handleFormError = (i18n: any, formRef: Ref, errObj: PydanticException) => {
+export const handleFormError = (i18n: i18nType, formRef: Ref, errObj: PydanticException) => {
+  const unknownError = i18n('error.somethingWentWrong');
   if (!errObj) {
-    return i18n('error.somethingWentWrong');
+    return unknownError;
   }
 
   const fields = formRef.value.elements;
@@ -186,7 +188,7 @@ export const handleFormError = (i18n: any, formRef: Ref, errObj: PydanticExcepti
   } else if (typeof detail === 'string') { // HttpException errors are just strings
     return detail;
   } else {
-    return detail.message;
+    return detail?.message ?? unknownError;
   }
 
   // Finally report it!
diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue
index 07cf4b167..3cd9b97a5 100644
--- a/frontend/src/views/LoginView.vue
+++ b/frontend/src/views/LoginView.vue
@@ -161,7 +161,12 @@ const login = async () => {
 
   const { error }: Error = await user.login(call, email.value, password.value);
   if (error) {
-    handleFormError(error as PydanticException);
+    let errObj = error as PydanticException;
+    if (typeof error === 'string') {
+      errObj = { detail: error };
+    }
+
+    loginError.value = handleFormError(t, formRef, errObj);
     isLoading.value = false;
     return;
   }