From 49bdf9f2031f2a3677561e87b8ab290b33e5cc66 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Wed, 13 Oct 2021 16:12:02 +0530
Subject: [PATCH] feat: init teams invite page

---
 packages/hoppscotch-app/locales/en.json       |  2 +
 .../hoppscotch-app/pages/teams-invite.vue     | 40 +++++++++++++++++++
 2 files changed, 42 insertions(+)
 create mode 100644 packages/hoppscotch-app/pages/teams-invite.vue

diff --git a/packages/hoppscotch-app/locales/en.json b/packages/hoppscotch-app/locales/en.json
index aa056a1d4..7062fb851 100644
--- a/packages/hoppscotch-app/locales/en.json
+++ b/packages/hoppscotch-app/locales/en.json
@@ -475,7 +475,9 @@
     "invalid_member_permission": "Please provide a valid permission to the team member",
     "invite": "Invite",
     "invite_tooltip": "Invite people to this workspace",
+    "invited_to_team": "{owner} invited you to join {team}",
     "join_beta": "Join the beta program to access teams.",
+    "join_team": "Join {team}",
     "left": "You left the team",
     "member_removed": "User removed",
     "member_role_updated": "User roles updated",
diff --git a/packages/hoppscotch-app/pages/teams-invite.vue b/packages/hoppscotch-app/pages/teams-invite.vue
new file mode 100644
index 000000000..1cd0c0eaa
--- /dev/null
+++ b/packages/hoppscotch-app/pages/teams-invite.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="flex flex-col min-h-screen items-center justify-center">
+    <h1 class="heading">{{ $t("team.join_team", { team: "Tesla" }) }}</h1>
+    <p class="text-secondaryLight mt-2">
+      {{ $t("team.invited_to_team", { owner: "Elon Musk", team: "Tesla" }) }}
+    </p>
+    <div v-if="currentUser === null" class="mt-8">
+      <ButtonPrimary
+        :label="$t('auth.login_to_hoppscotch')"
+        @click.native="showLogin = true"
+      />
+    </div>
+    <div v-else class="mt-8">
+      <ButtonPrimary
+        :label="$t('team.join_team', { team: 'Tesla' })"
+        @click.native="joinTeam"
+      />
+    </div>
+    <!-- <SmartSpinner v-if="loading" />
+    <SmartLoadingIndicator v-else />
+    <pre v-if="error">{{ error }}</pre> -->
+    <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "@nuxtjs/composition-api"
+import { initializeFirebase } from "~/helpers/fb"
+import { currentUser$ } from "~/helpers/fb/auth"
+import { useReadonlyStream } from "~/helpers/utils/composables"
+initializeFirebase()
+
+const currentUser = useReadonlyStream(currentUser$, null)
+
+// const loading = ref(false)
+// const error = ref(null)
+const showLogin = ref(false)
+
+const joinTeam = () => {}
+</script>