From 2c3097eeb7e1247399ebc03da6f50e42b977c304 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sun, 24 Oct 2021 14:46:32 +0530
Subject: [PATCH] feat: successfully joined team prompt

---
 packages/hoppscotch-app/locales/en.json     |  2 ++
 packages/hoppscotch-app/pages/join-team.vue | 37 ++++++++++++++++++---
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/packages/hoppscotch-app/locales/en.json b/packages/hoppscotch-app/locales/en.json
index 3f8f26633..45432d870 100644
--- a/packages/hoppscotch-app/locales/en.json
+++ b/packages/hoppscotch-app/locales/en.json
@@ -492,6 +492,8 @@
     "join": "Invitation accepted",
     "join_beta": "Join the beta program to access teams.",
     "join_team": "Join {team}",
+    "joined_team": "You have joined {team}",
+    "joined_team_description": "You are now a member of this team",
     "left": "You left the team",
     "login_to_continue": "Login to continue",
     "login_to_continue_description": "You need to be logged in to join a team.",
diff --git a/packages/hoppscotch-app/pages/join-team.vue b/packages/hoppscotch-app/pages/join-team.vue
index 012fbd0ac..74514a180 100644
--- a/packages/hoppscotch-app/pages/join-team.vue
+++ b/packages/hoppscotch-app/pages/join-team.vue
@@ -63,7 +63,11 @@
           </p>
         </div>
         <div
-          v-if="!inviteDetails.loading && E.isRight(inviteDetails.data)"
+          v-if="
+            !inviteDetails.loading &&
+            E.isRight(inviteDetails.data) &&
+            !joinTeamSuccess
+          "
           class="flex-col flex-1 p-4 flex items-center justify-center"
         >
           <h1 class="heading">
@@ -94,7 +98,32 @@
               @click.native="joinTeam"
             />
           </div>
-          <pre v-if="error" class="p-4 text-red-500">{{ error }}</pre>
+        </div>
+        <div
+          v-if="
+            !inviteDetails.loading &&
+            E.isRight(inviteDetails.data) &&
+            joinTeamSuccess
+          "
+          class="flex-col flex-1 p-4 flex items-center justify-center"
+        >
+          <h1 class="heading">
+            {{
+              $t("team.joined_team", {
+                team: inviteDetails.data.right.teamInvitation.team.name,
+              })
+            }}
+          </h1>
+          <p class="text-secondaryLight mt-2">
+            {{
+              $t("team.joined_team_description", {
+                team: inviteDetails.data.right.teamInvitation.team.name,
+              })
+            }}
+          </p>
+          <div class="mt-8">
+            <ButtonSecondary to="/" svg="home" filled :label="$t('app.home')" />
+          </div>
         </div>
       </div>
     </div>
@@ -165,8 +194,8 @@ export default defineComponent({
       showLogin: false,
       loading: false,
       revokedLink: false,
-      error: null,
       inviteID: "",
+      joinTeamSuccess: false,
     }
   },
   beforeMount() {
@@ -193,8 +222,8 @@ export default defineComponent({
             })
           },
           () => {
+            this.joinTeamSuccess = true
             this.loading = false
-            this.$router.push("/")
           }
         )
       )()