From 98d7f38a5693a658fcdee27c6c839f632eb543a0 Mon Sep 17 00:00:00 2001
From: mutoe <imutoe@gmail.com>
Date: Thu, 1 Dec 2022 23:03:32 +0800
Subject: [PATCH] fix: login and register error message issue

---
 cypress/e2e/auth.cy.ts     |  2 +-
 cypress/e2e/favorite.cy.ts |  4 ++++
 package.json               |  1 +
 src/pages/Login.vue        | 12 +++++++-----
 src/pages/Register.vue     | 12 +++++++-----
 src/services/index.ts      |  5 +++++
 src/utils/use-async.ts     | 19 ++++++++++++++++---
 7 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/cypress/e2e/auth.cy.ts b/cypress/e2e/auth.cy.ts
index 58d9823..9adc2e3 100644
--- a/cypress/e2e/auth.cy.ts
+++ b/cypress/e2e/auth.cy.ts
@@ -22,7 +22,7 @@ describe('Auth', () => {
 
     it('should display error when submit an invalid form (password not match)', () => {
       cy.intercept('POST', /users\/login/, {
-        statusCode: 422,
+        statusCode: 403,
         body: { errors: { 'email or password': ['is invalid'] } },
       })
       cy.visit(ROUTES.LOGIN)
diff --git a/cypress/e2e/favorite.cy.ts b/cypress/e2e/favorite.cy.ts
index 0d1cc14..f53c120 100644
--- a/cypress/e2e/favorite.cy.ts
+++ b/cypress/e2e/favorite.cy.ts
@@ -10,6 +10,10 @@ describe('Favorite', () => {
     cy.intercept('POST', /articles\/\S+\/favorite$/, { statusCode: 401, body: {} }).as('favoriteArticle')
     cy.visit(ROUTES.HOME)
 
+    Cypress.on('uncaught:exception', (err) => {
+      expect(err.message).to.contain('Need to login')
+      return false
+    })
     cy.get('i.ion-heart:first').click()
 
     cy.url().should('contain', 'login')
diff --git a/package.json b/package.json
index 58cd48c..32aef4e 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "test:unit": "cypress open --component",
     "test:unit:ci": "cypress run --component --quiet --reporter spec",
     "test:e2e": "npm run build && concurrently -rk -s first \"npm run serve\" \"cypress open --e2e -c baseUrl=http://localhost:4137\"",
+    "test:e2e:local": "cypress open --e2e -c baseUrl=http://localhost:5173",
     "test:e2e:ci": "npm run build && concurrently -rk -s first \"npm run serve\" \"cypress run --e2e -c baseUrl=http://localhost:4137\"",
     "test:e2e:prod": "cypress run --e2e -c baseUrl=https://vue3-realworld-example-app-mutoe.vercel.app",
     "test": "npm run test:unit:ci && npm run test:e2e:ci",
diff --git a/src/pages/Login.vue b/src/pages/Login.vue
index 49566ec..87e1a02 100644
--- a/src/pages/Login.vue
+++ b/src/pages/Login.vue
@@ -62,7 +62,7 @@
 
 <script setup lang="ts">
 import { routerPush } from 'src/router'
-import { api } from 'src/services'
+import { api, isFetchError } from 'src/services'
 import type { LoginUser } from 'src/services/api'
 import { useUserStore } from 'src/store/user'
 import { reactive, ref } from 'vue'
@@ -82,12 +82,14 @@ const login = async () => {
 
   if (!formRef.value?.checkValidity()) return
 
-  const result = await api.users.login({ user: form })
-  if (result.ok) {
+  try {
+    const result = await api.users.login({ user: form })
     updateUser(result.data.user)
     await routerPush('global-feed')
-  } else {
-    errors.value = await result.error
+  } catch (e) {
+    if (isFetchError(e)) {
+      errors.value = e.error?.errors
+    }
   }
 }
 
diff --git a/src/pages/Register.vue b/src/pages/Register.vue
index 3fe92ed..63fd8d0 100644
--- a/src/pages/Register.vue
+++ b/src/pages/Register.vue
@@ -69,7 +69,7 @@
 
 <script setup lang="ts">
 import { routerPush } from 'src/router'
-import { api } from 'src/services'
+import { api, isFetchError } from 'src/services'
 import type { NewUser } from 'src/services/api'
 import { useUserStore } from 'src/store/user'
 import { reactive, ref } from 'vue'
@@ -90,12 +90,14 @@ const register = async () => {
 
   if (!formRef.value?.checkValidity()) return
 
-  const result = await api.users.createUser({ user: form })
-  if (result.ok) {
+  try {
+    const result = await api.users.createUser({ user: form })
     updateUser(result.data.user)
     await routerPush('global-feed')
-  } else {
-    errors.value = await result.error
+  } catch (e) {
+    if (isFetchError(e)) {
+      errors.value = e.error?.errors
+    }
   }
 }
 </script>
diff --git a/src/services/index.ts b/src/services/index.ts
index cfb128f..aae23e6 100644
--- a/src/services/index.ts
+++ b/src/services/index.ts
@@ -1,3 +1,4 @@
+import type { GenericErrorModel, HttpResponse } from 'src/services/api'
 import { Api } from 'src/services/api'
 import { CONFIG } from 'src/config'
 
@@ -12,3 +13,7 @@ export function pageToOffset (page: number = 1, localLimit = limit): {limit: num
   const offset = (page - 1) * localLimit
   return { limit: localLimit, offset }
 }
+
+export function isFetchError<E = GenericErrorModel> (e: unknown): e is HttpResponse<unknown, E> {
+  return e instanceof Object && 'error' in e
+}
diff --git a/src/utils/use-async.ts b/src/utils/use-async.ts
index 455a5d5..44fa1ce 100644
--- a/src/utils/use-async.ts
+++ b/src/utils/use-async.ts
@@ -1,3 +1,5 @@
+import { routerPush } from 'src/router'
+import { isFetchError } from 'src/services'
 import type { Ref } from 'vue'
 import { ref } from 'vue'
 
@@ -11,9 +13,20 @@ export default function useAsync<T extends (...args: unknown[]) => unknown> (fn:
 
   const run: UseAsync<T>['run'] = async (...args) => {
     active.value = true
-    const result = await fn(...args)
-    active.value = false
-    return result as ReturnType<T>
+    try {
+      const result = await fn(...args)
+      return result as ReturnType<T>
+    } catch (e) {
+      if (isFetchError(e)) {
+        if (e.status === 401) {
+          await routerPush('login')
+          throw new Error('Need to login first')
+        }
+      }
+      throw e
+    } finally {
+      active.value = false
+    }
   }
 
   return { active, run }