[PLA-1740] bad request 400 error handling (#102)

enjin · Apr 26, 2024 · efa4f31 · efa4f31
1 parent 2caac24
commit efa4f31
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 50 deletions.
diff --git a/resources/js/api/index.ts b/resources/js/api/index.ts
@@ -1,7 +1,7 @@
-import { useAppStore } from '~/store';
 import { HttpMethods } from '~/types/types.enums';
 import mutations from '~/api/mutations';
 import snackbar from '~/util/snackbar';
+import { useAppStore } from '~/store';
 
 export class ApiService {
     static async reloadCsrf() {
@@ -68,7 +68,9 @@ export class ApiService {
             }
         }
 
-        if (resp.status === 204) return null;
+        if (resp.status === 204) {
+            return null;
+        }
 
         if (resp.status === 401) {
             useAppStore().clearLogin();
@@ -77,7 +79,7 @@ export class ApiService {
         }
 
         if (resp.status >= 400 && resp.status < 600) {
-            throw resp as unknown as Error;
+            throw resp;
         }
 
         return resp.json();
@@ -95,29 +97,37 @@ export class ApiService {
                 url: `${appStore.config.url}graphql${schema}`,
                 data,
                 credentials: appStore.isMultiTenant ? 'include' : 'omit',
-            }).then((res: any) => {
-                if (res.errors) {
-                    const message = res.errors[0].message;
-                    if (message === 'validation') {
-                        const error = res.errors[0].extensions?.validation;
-                        const errors = Object.keys(error).map((key) => {
-                            return {
-                                field: key,
-                                message: error[key][0],
-                            };
+            })
+                .then((res) => {
+                    resolve(res);
+                })
+                .catch((error) => {
+                    if (error instanceof Response) {
+                        error.json().then((res) => {
+                            if (res.errors) {
+                                const message = res.errors[0].message;
+                                if (message === 'validation') {
+                                    const error = res.errors[0].extensions?.validation;
+                                    const errors = Object.keys(error).map((key) => {
+                                        return {
+                                            field: key,
+                                            message: error[key][0],
+                                        };
+                                    });
+                                    reject(errors);
+                                } else {
+                                    reject({ field: 'Error', message });
+                                }
+                            }
+
+                            if (res.field == 'Error') {
+                                reject(res);
+                            }
                         });
-                        reject(errors);
                     } else {
-                        reject({ field: 'Error', message });
+                        reject({ field: 'Error', message: 'Unknown error' });
                     }
-                }
-
-                if (res.field == 'Error') {
-                    reject(res);
-                }
-
-                resolve(res);
-            });
+                });
         });
     }
 

diff --git a/resources/js/components/batch/BatchMint.vue b/resources/js/components/batch/BatchMint.vue
@@ -73,7 +73,9 @@
                         >
                             Cancel
                         </RouterLink>
-                        <Btn dusk="submitBtn" :loading="isLoading" :disabled="isLoading" primary is-submit>Batch Mint</Btn>
+                        <Btn dusk="submitBtn" :loading="isLoading" :disabled="isLoading" primary is-submit
+                            >Batch Mint</Btn
+                        >
                     </div>
                 </div>
             </Form>

diff --git a/resources/js/components/pages/Collections.vue b/resources/js/components/pages/Collections.vue
@@ -25,7 +25,11 @@
                     class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"
                     :is-loading="isLoading"
                 >
-                    <table id="collectionsTable" class="min-w-full divide-y divide-gray-300" v-if="collections.items?.length">
+                    <table
+                        id="collectionsTable"
+                        class="min-w-full divide-y divide-gray-300"
+                        v-if="collections.items?.length"
+                    >
                         <thead>
                             <tr>
                                 <th

diff --git a/resources/js/components/pages/Settings.vue b/resources/js/components/pages/Settings.vue
@@ -13,7 +13,12 @@
                 </div>
                 <div class="flex flex-col space-y-8">
                     <div v-if="appStore.isMultiTenant" class="flex flex-col space-y-4">
-                        <CollapseCard dusk-id="apiTokensTab" title="Api tokens" :actions="false" :isOpen="!appStore.hasValidConfig">
+                        <CollapseCard
+                            dusk-id="apiTokensTab"
+                            title="Api tokens"
+                            :actions="false"
+                            :isOpen="!appStore.hasValidConfig"
+                        >
                             <div>
                                 <SettingsApiTokens />
                             </div>
@@ -56,7 +61,9 @@
                         readmore="Advanced mode"
                     />
                     <div class="flex space-x-4">
-                        <Btn dusk="deleteBtn" v-if="appStore.isMultiTenant" @click="confirmModal = true">Delete account</Btn>
+                        <Btn dusk="deleteBtn" v-if="appStore.isMultiTenant" @click="confirmModal = true"
+                            >Delete account</Btn
+                        >
                         <Btn dusk="logoutBtn" v-if="appStore.isMultiTenant" class="mr-auto" @click="logout">Logout</Btn>
                         <Btn dusk="resetBtn" v-else class="mr-auto" error @click="resetSettings">Reset Settings</Btn>
                     </div>

diff --git a/resources/js/components/pages/SettingsResetPassword.vue b/resources/js/components/pages/SettingsResetPassword.vue
@@ -1,7 +1,13 @@
 <template>
     <div>
         <div v-if="enableReset" class="flex flex-col space-y-4">
-            <Form id="passwordResetForm" ref="formRef" class="space-y-6" :validation-schema="validation" @submit="resetPassword">
+            <Form
+                id="passwordResetForm"
+                ref="formRef"
+                class="space-y-6"
+                :validation-schema="validation"
+                @submit="resetPassword"
+            >
                 <FormInput
                     v-model="oldPassword"
                     label="Old Password"

diff --git a/resources/js/components/pages/auth/RequestResetPassword.vue b/resources/js/components/pages/auth/RequestResetPassword.vue
@@ -127,14 +127,20 @@ const requestReset = async (recaptcha?: string) => {
     isLoading.value = true;
     try {
         await AuthApi.requestPasswordReset(email.value, recaptcha);
-    } catch {
-        // do nothing
+        snackbar.success({
+            title: "If an account with this email exists, you'll receive an email shortly with information on resetting your password.",
+            save: false,
+        });
+    } catch (e: any) {
+        if (e.message.includes('Too many requests')) {
+            snackbar.error({
+                title: 'Error',
+                text: e.message,
+            });
+        }
+    } finally {
+        isLoading.value = false;
     }
-    snackbar.success({
-        title: "If an account with this email exists, you'll receive an email shortly with information on resetting your password.",
-        save: false,
-    });
-    isLoading.value = false;
 };
 
 (async () => {

diff --git a/resources/js/components/pages/auth/ResetPassword.vue b/resources/js/components/pages/auth/ResetPassword.vue
@@ -104,15 +104,10 @@ const resetPassword = async () => {
             snackbar.error({ title: 'Invalid user', text: 'Please check the email provided' });
         }
     } catch (e: any) {
-        if (snackbarErrors(e)) return;
-        if (e.message.includes('Too many requests')) {
-            snackbar.error({
-                title: 'Too many requests',
-                text: e.message,
-            });
-        } else {
-            snackbar.error({ title: 'Error resetting password.' });
+        if (snackbarErrors(e)) {
+            return;
         }
+        snackbar.error({ title: 'Error resetting password.' });
     } finally {
         isLoading.value = false;
     }

diff --git a/resources/js/graphql/mutation/auth/RequestPasswordReset.ts b/resources/js/graphql/mutation/auth/RequestPasswordReset.ts
@@ -1,3 +1,3 @@
-export default `mutation RequestPasswordReset($email: String!, $recaptcha: String!) {
-    RequestPasswordReset(email: $email, recaptchaResponse: $recaptcha)
+export default `mutation RequestPasswordReset($email: String!) {
+    RequestPasswordReset(email: $email)
   }`;
diff --git a/resources/js/store/index.ts b/resources/js/store/index.ts
@@ -1,10 +1,10 @@
-import { defineStore } from 'pinia';
-import { AppState } from '~/types/types.interface';
-import appConfig from '~/config.json';
 import { ApiService } from '~/api';
-import snackbar from '~/util/snackbar';
+import { AppState } from '~/types/types.interface';
 import { AuthApi } from '~/api/auth';
 import { CollectionApi } from '~/api/collection';
+import appConfig from '~/config.json';
+import { defineStore } from 'pinia';
+import snackbar from '~/util/snackbar';
 import { useConnectionStore } from './connection';
 
 const parseConfigURL = (url: string): URL => {
@@ -56,7 +56,7 @@ export const useAppStore = defineStore('app', {
                 }
 
                 const urlConfig = await this.checkURL(this.config.url);
-                this.config.network = urlConfig.network;
+                this.config.network = urlConfig?.network;
                 this.config.packages = Object.entries(urlConfig.packages).map(([key, value]: any[]) => {
                     let link =
                         urlConfig.url +