feat: init loading states, minor ui improvements

packages/hoppscotch-app/components/teams/Invite.vue

@@ -29,6 +29,12 @@
           </div>
         </div>
       </div>
+      <div
+        v-else-if="sendingInvites"
+        class="flex p-4 items-center justify-center"
+      >
+        <SmartSpinner />
+      </div>
       <div v-else class="flex flex-col px-2">
         <div class="flex flex-1 justify-between items-center">
           <label for="memberList" class="pb-4 px-4">
@@ -375,6 +381,8 @@ const sendInvitesResult = ref<
   }>
 >([])
 
+const sendingInvites = ref<boolean>(false)
+
 const sendInvites = async () => {
   const validationResult = pipe(
     newInvites.value,
@@ -400,6 +408,8 @@ const sendInvites = async () => {
     return
   }
 
+  sendingInvites.value = true
+
   sendInvitesResult.value = await pipe(
     A.sequence(T.task)(validationResult.value),
     T.chain(
@@ -423,9 +433,12 @@ const sendInvites = async () => {
       )
     )
   )()
+
+  sendingInvites.value = false
 }
 
 const hideModal = () => {
+  sendingInvites.value = false
   sendInvitesResult.value = []
   newInvites.value = []
   emit("hide-modal")

packages/hoppscotch-app/locales/en.json

@@ -478,10 +478,13 @@
     "exit_disabled": "Only owner cannot exit the team",
     "invalid_email_format": "Email format is invalid",
     "invalid_member_permission": "Please provide a valid permission to the team member",
+    "invalid_invite_link": "Invalid invite link",
+    "invalid_invite_link_description": "The link you followed is invalid. Contact your team owner.",
     "invite": "Invite",
     "invite_more": "Invite more",
     "invite_tooltip": "Invite people to this workspace",
     "invited_to_team": "{owner} invited you to join {team}",
+    "join": "Invitation accepted",
     "join_beta": "Join the beta program to access teams.",
     "join_team": "Join {team}",
     "left": "You left the team",

packages/hoppscotch-app/package.json

@@ -20,7 +20,9 @@
     "lint:script": "eslint --ext .ts,.js,.vue --ignore-path .gitignore",
     "lint:style": "stylelint **/*.{css,scss,vue} --ignore-path .gitignore",
     "lint": "pnpm run lint:script && pnpm run lint:style",
-    "lintfix": "eslint --ext .ts,.js,.vue --ignore-path .gitignore --fix",
+    "lintfix:script": "eslint --fix --ext .ts,.js,.vue --ignore-path .gitignore",
+    "lintfix:style": "stylelint --fix **/*.{css,scss,vue} --ignore-path .gitignore",
+    "lintfix": "pnpm run lintfix:script && pnpm run lintfix:style",
     "test": "jest",
     "do-dev": "pnpm run dev",
     "do-build-prod": "pnpm run generate",

packages/hoppscotch-app/pages/team-invite.vue

@@ -1,26 +1,45 @@
 <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 class="flex flex-col min-h-screen items-center justify-between">
+    <div
+      v-if="invalidLink"
+      class="flex flex-1 items-center justify-center flex-col"
+    >
+      <h1 class="heading text-center">
+        {{ $t("team.invalid_invite_link") }}
+      </h1>
+      <p class="text-center">
+        {{ $t("team.invalid_invite_link_description") }}
+      </p>
+    </div>
+    <div v-else class="flex-col flex-1 p-4 flex 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' })"
+          :loading="loading"
+          :disabled="revokedLink"
+          @click.native="joinTeam"
+        />
+      </div>
+      <pre v-if="error" class="p-4 text-red-500">{{ error }}</pre>
+      <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
+    </div>
+    <div class="p-4">
+      <ButtonSecondary
+        class="tracking-wide !font-bold !text-secondaryDark"
+        label="HOPPSCOTCH"
+        to="/"
       />
     </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>
-     TODO: revoked invite link -->
-    <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
   </div>
 </template>
 
@@ -39,17 +58,37 @@ export default defineComponent({
   },
   data() {
     return {
+      invalidLink: false,
       showLogin: false,
-      //  loading : false
-      //  error : null
+      loading: false,
+      revokedLink: false,
+      error: null,
+      teamID: "",
     }
   },
   beforeMount() {
     initializeFirebase()
   },
-  async mounted() {},
+  mounted() {
+    this.teamID = this.$route.query.id
+    this.invalidLink = !this.teamID
+    // TODO: check revokeTeamInvitation
+    // TODO: check login user already a member
+  },
   methods: {
-    joinTeam() {},
+    joinTeam() {
+      this.loading = true
+      // TODO: run join team mutation
+      // TODO: show success toast and redirect to home page / error toast
+      // this.$router.push({ path: "/" })
+      // $toast.success(`${t("team.join")}`, {
+      //   icon: "person",
+      // })
+      // this.$toast.error(this.$t("error.something_went_wrong"), {
+      //   icon: "error_outline",
+      // })
+      // console.error(e)
+    },
   },
 })
 </script>