From 0daad7eaaccf0e63418f063992aed42a1a783733 Mon Sep 17 00:00:00 2001
From: Hironsan <hiroki.nakayama.py@gmail.com>
Date: Mon, 12 Dec 2022 16:42:40 +0900
Subject: [PATCH] Add error handling to social login

---
 frontend/components/auth/SocialLogin.vue      | 34 +++++++++++--------
 frontend/pages/auth.vue                       |  5 ++-
 frontend/plugins/services.ts                  | 32 ++++++++---------
 .../repositories/auth/apiAuthRepository.ts    |  2 +-
 4 files changed, 38 insertions(+), 35 deletions(-)

diff --git a/frontend/components/auth/SocialLogin.vue b/frontend/components/auth/SocialLogin.vue
index 36189512..d236fbaa 100644
--- a/frontend/components/auth/SocialLogin.vue
+++ b/frontend/components/auth/SocialLogin.vue
@@ -15,32 +15,36 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
+import Vue, { PropType } from 'vue'
 
 export default Vue.extend({
   props: {
     fetchSocialLink: {
-      type: Function,
-      default: () => Promise
+      type: Function as PropType<() => Promise<any>>,
+      required: true
     }
   },
   data() {
     return {
-      social: {}
+      social: {} as any
     }
   },
   async mounted() {
-    const response = await this.fetchSocialLink()
-    this.social = Object.entries(response)
-      .map(([key, value]: any) => ({
-        provider: key,
-        value
-      }))
-      .filter((item) => !!item.value?.authorize_url)
-      .map((item: any) => ({
-        ...item,
-        href: `${item.value.authorize_url}&redirect_uri=${location.origin}${item.value.redirect_path}`
-      }))
+    try {
+      const response = await this.fetchSocialLink()
+      this.social = Object.entries(response)
+        .map(([key, value]: any) => ({
+          provider: key,
+          value
+        }))
+        .filter((item) => !!item.value?.authorize_url)
+        .map((item: any) => ({
+          ...item,
+          href: `${item.value.authorize_url}&redirect_uri=${location.origin}${item.value.redirect_path}`
+        }))
+    } catch (e) {
+      console.error(e)
+    }
   }
 })
 </script>
diff --git a/frontend/pages/auth.vue b/frontend/pages/auth.vue
index e41a1e7d..67a4b392 100644
--- a/frontend/pages/auth.vue
+++ b/frontend/pages/auth.vue
@@ -5,7 +5,6 @@
         <v-row align="center" justify="center">
           <v-col cols="12" sm="8" md="4">
             <form-login :login="authenticateUser" />
-
             <social-login :fetch-social-link="fetchSocialLink" />
           </v-col>
         </v-row>
@@ -15,10 +14,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
-import { mapActions } from 'vuex'
 import FormLogin from '@/components/auth/FormLogin.vue'
 import SocialLogin from '@/components/auth/SocialLogin.vue'
+import Vue from 'vue'
+import { mapActions } from 'vuex'
 
 export default Vue.extend({
   components: {
diff --git a/frontend/plugins/services.ts b/frontend/plugins/services.ts
index 0638bdac..be5c6415 100644
--- a/frontend/plugins/services.ts
+++ b/frontend/plugins/services.ts
@@ -1,27 +1,27 @@
-import { Plugin } from '@nuxt/types'
+import { AuthApplicationService } from '@/services/application/auth/authApplicationService'
+import { ConfigApplicationService } from '@/services/application/autoLabeling/configApplicationService'
+import { TemplateApplicationService } from '@/services/application/autoLabeling/templateApplicationService'
 import { TaskStatusApplicationService } from '@/services/application/celery/taskStatusApplicationService'
-import { CatalogApplicationService } from '@/services/application/upload/catalogApplicationService'
-import { ParseApplicationService } from '@/services/application/upload/parseApplicationService'
+import { CommentApplicationService } from '@/services/application/comment/commentApplicationService'
+import { DownloadApplicationService } from '@/services/application/download/downloadApplicationService'
+import { DownloadFormatApplicationService } from '@/services/application/download/downloadFormatApplicationService'
+import { ExampleApplicationService } from '@/services/application/example/exampleApplicationService'
 import { LabelApplicationService } from '@/services/application/label/labelApplicationService'
 import { MemberApplicationService } from '@/services/application/member/memberApplicationService'
-import { UserApplicationService } from '@/services/application/user/userApplicationService'
-import { RoleApplicationService } from '@/services/application/role/roleApplicationService'
-import { ProjectApplicationService } from '@/services/application/project/projectApplicationService'
-import { CommentApplicationService } from '@/services/application/comment/commentApplicationService'
 import { MetricsApplicationService } from '@/services/application/metrics/metricsApplicationService'
-import { ExampleApplicationService } from '@/services/application/example/exampleApplicationService'
 import { OptionApplicationService } from '@/services/application/option/optionApplicationService'
-import { SequenceLabelingApplicationService } from '@/services/application/tasks/sequenceLabeling/sequenceLabelingApplicationService'
-import { Seq2seqApplicationService } from '@/services/application/tasks/seq2seq/seq2seqApplicationService'
-import { ConfigApplicationService } from '@/services/application/autoLabeling/configApplicationService'
-import { TemplateApplicationService } from '@/services/application/autoLabeling/templateApplicationService'
-import { TextClassificationService } from '@/services/application/tasks/textClassification/textClassificationApplicationService'
-import { AuthApplicationService } from '@/services/application/auth/authApplicationService'
-import { DownloadApplicationService } from '@/services/application/download/downloadApplicationService'
-import { DownloadFormatApplicationService } from '@/services/application/download/downloadFormatApplicationService'
+import { ProjectApplicationService } from '@/services/application/project/projectApplicationService'
+import { RoleApplicationService } from '@/services/application/role/roleApplicationService'
 import { TagApplicationService } from '@/services/application/tag/tagApplicationService'
 import { BoundingBoxApplicationService } from '@/services/application/tasks/boundingBox/boundingBoxApplicationService'
 import { SegmentationApplicationService } from '@/services/application/tasks/segmentation/segmentationApplicationService'
+import { Seq2seqApplicationService } from '@/services/application/tasks/seq2seq/seq2seqApplicationService'
+import { SequenceLabelingApplicationService } from '@/services/application/tasks/sequenceLabeling/sequenceLabelingApplicationService'
+import { TextClassificationService } from '@/services/application/tasks/textClassification/textClassificationApplicationService'
+import { CatalogApplicationService } from '@/services/application/upload/catalogApplicationService'
+import { ParseApplicationService } from '@/services/application/upload/parseApplicationService'
+import { UserApplicationService } from '@/services/application/user/userApplicationService'
+import { Plugin } from '@nuxt/types'
 import { repositories } from './repositories'
 
 export interface Services {
diff --git a/frontend/repositories/auth/apiAuthRepository.ts b/frontend/repositories/auth/apiAuthRepository.ts
index 7173ad3e..7edc4e97 100644
--- a/frontend/repositories/auth/apiAuthRepository.ts
+++ b/frontend/repositories/auth/apiAuthRepository.ts
@@ -1,5 +1,5 @@
-import ApiService from '@/services/api.service'
 import { AuthRepository } from '@/domain/models/auth/authRepository'
+import ApiService from '@/services/api.service'
 
 export class APIAuthRepository implements AuthRepository {
   constructor(private readonly request = ApiService) {}