refactor(sh-admin): improvements to invite links in dashboard (hoppsc…

…otch#4152)
JoelJacobStephen · Jun 28, 2024 · 0c06f26 · 0c06f26
1 parent fba22ea
commit 0c06f26
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 38 deletions.
diff --git a/packages/hoppscotch-sh-admin/locales/en.json b/packages/hoppscotch-sh-admin/locales/en.json
@@ -163,6 +163,7 @@
     "github_signin_failure": "Failed to login with Github",
     "google_signin_failure": "Failed to login with Google",
     "invalid_email": "Please enter a valid email address",
+    "link_copied_to_clipboard": "Link copied to clipboard",
     "logged_out": "Logged out",
     "login_as_admin": "and login with an admin account.",
     "logout": "Logout",

diff --git a/packages/hoppscotch-sh-admin/src/components.d.ts b/packages/hoppscotch-sh-admin/src/components.d.ts
@@ -1,45 +1,54 @@
 // generated by unplugin-vue-components
 // We suggest you to commit this file into source control
 // Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core';
+import '@vue/runtime-core'
 
-export {};
+export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    AppHeader: typeof import('./components/app/Header.vue')['default'];
-    AppLogin: typeof import('./components/app/Login.vue')['default'];
-    AppLogout: typeof import('./components/app/Logout.vue')['default'];
-    AppModal: typeof import('./components/app/Modal.vue')['default'];
-    AppSidebar: typeof import('./components/app/Sidebar.vue')['default'];
-    AppToast: typeof import('./components/app/Toast.vue')['default'];
-    DashboardMetricsCard: typeof import('./components/dashboard/MetricsCard.vue')['default'];
-    HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary'];
-    HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary'];
-    HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor'];
-    HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal'];
-    HoppSmartInput: typeof import('@hoppscotch/ui')['HoppSmartInput'];
-    HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem'];
-    HoppSmartLink: typeof import('@hoppscotch/ui')['HoppSmartLink'];
-    HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture'];
-    HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner'];
-    IconLucideInbox: typeof import('~icons/lucide/inbox')['default'];
-    SettingsAuthProvider: typeof import('./components/settings/AuthProvider.vue')['default'];
-    SettingsConfigurations: typeof import('./components/settings/Configurations.vue')['default'];
-    SettingsDataSharing: typeof import('./components/settings/DataSharing.vue')['default'];
-    SettingsReset: typeof import('./components/settings/Reset.vue')['default'];
-    SettingsServerRestart: typeof import('./components/settings/ServerRestart.vue')['default'];
-    SettingsSmtpConfiguration: typeof import('./components/settings/SmtpConfiguration.vue')['default'];
-    SetupDataSharingAndNewsletter: typeof import('./components/setup/DataSharingAndNewsletter.vue')['default'];
-    TeamsAdd: typeof import('./components/teams/Add.vue')['default'];
-    TeamsDetails: typeof import('./components/teams/Details.vue')['default'];
-    TeamsInvite: typeof import('./components/teams/Invite.vue')['default'];
-    TeamsMembers: typeof import('./components/teams/Members.vue')['default'];
-    TeamsPendingInvites: typeof import('./components/teams/PendingInvites.vue')['default'];
-    Tippy: typeof import('vue-tippy')['Tippy'];
-    UiAutoResetIcon: typeof import('./components/ui/AutoResetIcon.vue')['default'];
-    UsersDetails: typeof import('./components/users/Details.vue')['default'];
-    UsersInviteModal: typeof import('./components/users/InviteModal.vue')['default'];
-    UsersSharedRequests: typeof import('./components/users/SharedRequests.vue')['default'];
+    AppHeader: typeof import('./components/app/Header.vue')['default']
+    AppLogin: typeof import('./components/app/Login.vue')['default']
+    AppLogout: typeof import('./components/app/Logout.vue')['default']
+    AppModal: typeof import('./components/app/Modal.vue')['default']
+    AppSidebar: typeof import('./components/app/Sidebar.vue')['default']
+    AppToast: typeof import('./components/app/Toast.vue')['default']
+    DashboardMetricsCard: typeof import('./components/dashboard/MetricsCard.vue')['default']
+    HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary']
+    HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary']
+    HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']
+    HoppSmartCheckbox: typeof import('@hoppscotch/ui')['HoppSmartCheckbox']
+    HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']
+    HoppSmartInput: typeof import('@hoppscotch/ui')['HoppSmartInput']
+    HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
+    HoppSmartLink: typeof import('@hoppscotch/ui')['HoppSmartLink']
+    HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
+    HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture']
+    HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
+    HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab']
+    HoppSmartTable: typeof import('@hoppscotch/ui')['HoppSmartTable']
+    HoppSmartTabs: typeof import('@hoppscotch/ui')['HoppSmartTabs']
+    HoppSmartToggle: typeof import('@hoppscotch/ui')['HoppSmartToggle']
+    IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
+    IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
+    IconLucideSearch: typeof import('~icons/lucide/search')['default']
+    SettingsAuthProvider: typeof import('./components/settings/AuthProvider.vue')['default']
+    SettingsConfigurations: typeof import('./components/settings/Configurations.vue')['default']
+    SettingsDataSharing: typeof import('./components/settings/DataSharing.vue')['default']
+    SettingsReset: typeof import('./components/settings/Reset.vue')['default']
+    SettingsServerRestart: typeof import('./components/settings/ServerRestart.vue')['default']
+    SettingsSmtpConfiguration: typeof import('./components/settings/SmtpConfiguration.vue')['default']
+    SetupDataSharingAndNewsletter: typeof import('./components/setup/DataSharingAndNewsletter.vue')['default']
+    TeamsAdd: typeof import('./components/teams/Add.vue')['default']
+    TeamsDetails: typeof import('./components/teams/Details.vue')['default']
+    TeamsInvite: typeof import('./components/teams/Invite.vue')['default']
+    TeamsMembers: typeof import('./components/teams/Members.vue')['default']
+    TeamsPendingInvites: typeof import('./components/teams/PendingInvites.vue')['default']
+    Tippy: typeof import('vue-tippy')['Tippy']
+    UiAutoResetIcon: typeof import('./components/ui/AutoResetIcon.vue')['default']
+    UsersDetails: typeof import('./components/users/Details.vue')['default']
+    UsersInviteModal: typeof import('./components/users/InviteModal.vue')['default']
+    UsersSharedRequests: typeof import('./components/users/SharedRequests.vue')['default']
   }
+
 }
diff --git a/packages/hoppscotch-sh-admin/src/components/users/InviteModal.vue b/packages/hoppscotch-sh-admin/src/components/users/InviteModal.vue
@@ -15,6 +15,7 @@
     <template #footer>
       <span class="flex space-x-2">
         <HoppButtonPrimary
+          :disabled="!smtpEnabled"
           :label="t('users.send_invite')"
           @click="emit('send-invite', email)"
         />
@@ -47,6 +48,10 @@ const emit = defineEmits<{
   (event: 'copy-invite-link', email: string): void;
 }>();
 
+defineProps<{
+  smtpEnabled: boolean;
+}>();
+
 const email = ref('');
 
 const hideModal = () => {

diff --git a/packages/hoppscotch-sh-admin/src/helpers/backend/gql/queries/IsSMTPEnabled.graphql b/packages/hoppscotch-sh-admin/src/helpers/backend/gql/queries/IsSMTPEnabled.graphql
@@ -0,0 +1,3 @@
+query IsSMTPEnabled {
+  isSMTPEnabled
+}
diff --git a/packages/hoppscotch-sh-admin/src/pages/users/index.vue b/packages/hoppscotch-sh-admin/src/pages/users/index.vue
@@ -205,6 +205,7 @@
 
     <UsersInviteModal
       v-if="showInviteUserModal"
+      :smtp-enabled="smtpEnabled"
       @hide-modal="showInviteUserModal = false"
       @send-invite="sendInvite"
       @copy-invite-link="copyInviteLink"
@@ -254,6 +255,7 @@ import { usePagedQuery } from '~/composables/usePagedQuery';
 import {
   DemoteUsersByAdminDocument,
   InviteNewUserDocument,
+  IsSmtpEnabledDocument,
   MakeUsersAdminDocument,
   MetricsDocument,
   RemoveUsersByAdminDocument,
@@ -448,6 +450,10 @@ const router = useRouter();
 const goToUserDetails = (user: UserInfoQuery['infra']['userInfo']) =>
   router.push('/users/' + user.uid);
 
+// Check if SMTP is enabled
+const { data: status } = useQuery({ query: IsSmtpEnabledDocument });
+const smtpEnabled = computed(() => status?.value?.isSMTPEnabled);
+
 // Send Invitation through Email
 const showInviteUserModal = ref(false);
 const sendInvitation = useMutation(InviteNewUserDocument);
@@ -474,7 +480,7 @@ const sendInvite = async (email: string) => {
 
     return false;
   } else {
-    toast.success(t('state.email_success'));
+    if (smtpEnabled.value) toast.success(t('state.email_success'));
     showInviteUserModal.value = false;
     return true;
   }
@@ -485,7 +491,7 @@ const copyInviteLink = async (email: string) => {
   if (!result) return;
   const baseURL = import.meta.env.VITE_BASE_URL ?? '';
   copyToClipboard(baseURL);
-  toast.success(t('state.copied_to_clipboard'));
+  toast.success(t('state.link_copied_to_clipboard'));
 };
 
 // Make Multiple Users Admin