whattheduck: Fix error handling on signup and login forms

ducksmanager · Nov 19, 2024 · efdc3a8 · efdc3a8
1 parent 618fc98
commit efdc3a8
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 34 deletions.
diff --git a/apps/whattheduck/src/composables/useFormErrorHandling.ts b/apps/whattheduck/src/composables/useFormErrorHandling.ts
@@ -1,15 +1,6 @@
-import type { ScopedError } from '~socket.io-services';
+import type { Errorable, ScopedError } from '~socket.io-services';
 
-export default (
-  fields: string[],
-): {
-  validInputs: ComputedRef<string[]>;
-  invalidInputs: ComputedRef<string[]>;
-  touchedInputs: Ref<string[]>;
-  errorTexts: Ref<Record<string, string>>;
-  showError: (scopedError: ScopedError) => void;
-  clearErrors: () => void;
-} => {
+export default (fields: string[]) => {
   const errorTexts = ref<Record<string, string>>({});
   const validInputs = computed(() => fields.filter((field) => !invalidInputs.value.includes(field)));
   const invalidInputs = computed(() => Object.keys(errorTexts.value));
@@ -21,5 +12,31 @@ export default (
     errorTexts.value[scopedError.selector] = scopedError.message;
   };
 
-  return { validInputs, invalidInputs, touchedInputs, errorTexts, showError, clearErrors };
+  const handleErrorIfExists = (response: Errorable<string, string>) => {
+    if (typeof response === 'object' && 'error' in response) {
+      if ('selector' in response && response.selector) {
+        errorTexts.value[response.selector!.replace('#', '')] = response.message;
+      } else {
+        debugger;
+        errorTexts.value[fields[0]] = response.errorDetails || response.error;
+        console.error(response);
+      }
+      return true;
+    } else {
+      return false;
+    }
+  };
+
+  const call = async (fn: () => Promise<Errorable<string, string>>, onSuccess: (response: string) => void) =>
+    fn()
+      .then((response) => {
+        if (!handleErrorIfExists(response)) {
+          onSuccess(response as string);
+        }
+      })
+      .catch((e) => {
+        handleErrorIfExists(e);
+      });
+
+  return { validInputs, invalidInputs, touchedInputs, errorTexts, showError, clearErrors, call };
 };
diff --git a/apps/whattheduck/src/views/Login.vue b/apps/whattheduck/src/views/Login.vue
@@ -17,6 +17,7 @@
             }"
             :aria-label="t('Nom d\'utilisateur DucksManager')"
             :placeholder="t('Nom d\'utilisateur DucksManager')"
+            :error-text="errorTexts.username"
             @ion-blur="touchedInputs.push('username')"
           />
         </ion-col>
@@ -96,7 +97,7 @@ const password = ref('');
 
 const showPassword = ref(false);
 
-const { validInputs, invalidInputs, touchedInputs, errorTexts } = useFormErrorHandling(['username', 'password']);
+const { validInputs, invalidInputs, touchedInputs, errorTexts, call } = useFormErrorHandling(['username', 'password']);
 
 const forgotPassword = () => {
   router.push('/forgot');
@@ -106,15 +107,16 @@ const signup = () => {
 };
 
 const submitLogin = async () => {
-  const response = await socket.value?.auth.services.login({
-    username: username.value,
-    password: password.value,
-  });
-  if (typeof response !== 'string' && response && 'error' in response) {
-    errorTexts.value['password'] = response.error;
-  } else {
-    token.value = response;
-  }
+  await call(
+    () =>
+      socket.value!.auth.services.login({
+        username: username.value,
+        password: password.value,
+      }),
+    (response) => {
+      token.value = response;
+    },
+  );
 };
 
 if (!token.value) {

diff --git a/apps/whattheduck/src/views/Signup.vue b/apps/whattheduck/src/views/Signup.vue
@@ -94,7 +94,7 @@ const { t } = useI18n();
 
 const router = useRouter();
 
-const { validInputs, invalidInputs, touchedInputs, errorTexts, clearErrors } = useFormErrorHandling([
+const { validInputs, invalidInputs, touchedInputs, errorTexts, clearErrors, call } = useFormErrorHandling([
   'username',
   'email',
   'password',
@@ -119,17 +119,18 @@ const submitSignup = async () => {
     return;
   }
   clearErrors();
-  const response = await socket.value?.auth.services.signup({
-    username: username.value,
-    password: password.value,
-    email: email.value,
-  });
 
-  if (typeof response !== 'string' && response && 'error' in response) {
-    errorTexts.value[response.selector!.replace('#', '')] = response.message!;
-  } else {
-    token.value = response;
-  }
+  await call(
+    () =>
+      socket.value!.auth.services.signup({
+        username: username.value,
+        password: password.value,
+        email: email.value,
+      }),
+    (response) => {
+      token.value = response;
+    },
+  );
 };
 
 watch(

diff --git a/apps/whattheduck/translations/en.json b/apps/whattheduck/translations/en.json
@@ -131,7 +131,7 @@
   "Numéros possédés de ": "Possessed issues for ",
   "Numéros sans dates d'achat": "Issues without purchase date",
   "Numéros": "Collection size",
-  "OK": "Save",
+  "OK": "OK",
   "Par sélection de numéro": "By issue selection",
   "Par titre d'histoire": "By story title",
   "Paramètres": "Settings",