refactor(sh-admin): improvements to invite links in dashboard (#4152)

This commit is contained in:
Joel Jacob Stephen
2024-06-28 18:45:40 +05:30
committed by GitHub
parent fba22ea687
commit 0c06f26893
5 changed files with 62 additions and 38 deletions

View File

@@ -163,6 +163,7 @@
"github_signin_failure": "Failed to login with Github", "github_signin_failure": "Failed to login with Github",
"google_signin_failure": "Failed to login with Google", "google_signin_failure": "Failed to login with Google",
"invalid_email": "Please enter a valid email address", "invalid_email": "Please enter a valid email address",
"link_copied_to_clipboard": "Link copied to clipboard",
"logged_out": "Logged out", "logged_out": "Logged out",
"login_as_admin": "and login with an admin account.", "login_as_admin": "and login with an admin account.",
"logout": "Logout", "logout": "Logout",

View File

@@ -1,45 +1,54 @@
// generated by unplugin-vue-components // generated by unplugin-vue-components
// We suggest you to commit this file into source control // We suggest you to commit this file into source control
// Read more: https://github.com/vuejs/core/pull/3399 // Read more: https://github.com/vuejs/core/pull/3399
import '@vue/runtime-core'; import '@vue/runtime-core'
export {}; export {}
declare module '@vue/runtime-core' { declare module '@vue/runtime-core' {
export interface GlobalComponents { export interface GlobalComponents {
AppHeader: typeof import('./components/app/Header.vue')['default']; AppHeader: typeof import('./components/app/Header.vue')['default']
AppLogin: typeof import('./components/app/Login.vue')['default']; AppLogin: typeof import('./components/app/Login.vue')['default']
AppLogout: typeof import('./components/app/Logout.vue')['default']; AppLogout: typeof import('./components/app/Logout.vue')['default']
AppModal: typeof import('./components/app/Modal.vue')['default']; AppModal: typeof import('./components/app/Modal.vue')['default']
AppSidebar: typeof import('./components/app/Sidebar.vue')['default']; AppSidebar: typeof import('./components/app/Sidebar.vue')['default']
AppToast: typeof import('./components/app/Toast.vue')['default']; AppToast: typeof import('./components/app/Toast.vue')['default']
DashboardMetricsCard: typeof import('./components/dashboard/MetricsCard.vue')['default']; DashboardMetricsCard: typeof import('./components/dashboard/MetricsCard.vue')['default']
HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary']; HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary']
HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary']; HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary']
HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']; HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']
HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']; HoppSmartCheckbox: typeof import('@hoppscotch/ui')['HoppSmartCheckbox']
HoppSmartInput: typeof import('@hoppscotch/ui')['HoppSmartInput']; HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']
HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']; HoppSmartInput: typeof import('@hoppscotch/ui')['HoppSmartInput']
HoppSmartLink: typeof import('@hoppscotch/ui')['HoppSmartLink']; HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture']; HoppSmartLink: typeof import('@hoppscotch/ui')['HoppSmartLink']
HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']; HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
IconLucideInbox: typeof import('~icons/lucide/inbox')['default']; HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture']
SettingsAuthProvider: typeof import('./components/settings/AuthProvider.vue')['default']; HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
SettingsConfigurations: typeof import('./components/settings/Configurations.vue')['default']; HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab']
SettingsDataSharing: typeof import('./components/settings/DataSharing.vue')['default']; HoppSmartTable: typeof import('@hoppscotch/ui')['HoppSmartTable']
SettingsReset: typeof import('./components/settings/Reset.vue')['default']; HoppSmartTabs: typeof import('@hoppscotch/ui')['HoppSmartTabs']
SettingsServerRestart: typeof import('./components/settings/ServerRestart.vue')['default']; HoppSmartToggle: typeof import('@hoppscotch/ui')['HoppSmartToggle']
SettingsSmtpConfiguration: typeof import('./components/settings/SmtpConfiguration.vue')['default']; IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
SetupDataSharingAndNewsletter: typeof import('./components/setup/DataSharingAndNewsletter.vue')['default']; IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
TeamsAdd: typeof import('./components/teams/Add.vue')['default']; IconLucideSearch: typeof import('~icons/lucide/search')['default']
TeamsDetails: typeof import('./components/teams/Details.vue')['default']; SettingsAuthProvider: typeof import('./components/settings/AuthProvider.vue')['default']
TeamsInvite: typeof import('./components/teams/Invite.vue')['default']; SettingsConfigurations: typeof import('./components/settings/Configurations.vue')['default']
TeamsMembers: typeof import('./components/teams/Members.vue')['default']; SettingsDataSharing: typeof import('./components/settings/DataSharing.vue')['default']
TeamsPendingInvites: typeof import('./components/teams/PendingInvites.vue')['default']; SettingsReset: typeof import('./components/settings/Reset.vue')['default']
Tippy: typeof import('vue-tippy')['Tippy']; SettingsServerRestart: typeof import('./components/settings/ServerRestart.vue')['default']
UiAutoResetIcon: typeof import('./components/ui/AutoResetIcon.vue')['default']; SettingsSmtpConfiguration: typeof import('./components/settings/SmtpConfiguration.vue')['default']
UsersDetails: typeof import('./components/users/Details.vue')['default']; SetupDataSharingAndNewsletter: typeof import('./components/setup/DataSharingAndNewsletter.vue')['default']
UsersInviteModal: typeof import('./components/users/InviteModal.vue')['default']; TeamsAdd: typeof import('./components/teams/Add.vue')['default']
UsersSharedRequests: typeof import('./components/users/SharedRequests.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']
} }
} }

View File

@@ -15,6 +15,7 @@
<template #footer> <template #footer>
<span class="flex space-x-2"> <span class="flex space-x-2">
<HoppButtonPrimary <HoppButtonPrimary
:disabled="!smtpEnabled"
:label="t('users.send_invite')" :label="t('users.send_invite')"
@click="emit('send-invite', email)" @click="emit('send-invite', email)"
/> />
@@ -47,6 +48,10 @@ const emit = defineEmits<{
(event: 'copy-invite-link', email: string): void; (event: 'copy-invite-link', email: string): void;
}>(); }>();
defineProps<{
smtpEnabled: boolean;
}>();
const email = ref(''); const email = ref('');
const hideModal = () => { const hideModal = () => {

View File

@@ -0,0 +1,3 @@
query IsSMTPEnabled {
isSMTPEnabled
}

View File

@@ -205,6 +205,7 @@
<UsersInviteModal <UsersInviteModal
v-if="showInviteUserModal" v-if="showInviteUserModal"
:smtp-enabled="smtpEnabled"
@hide-modal="showInviteUserModal = false" @hide-modal="showInviteUserModal = false"
@send-invite="sendInvite" @send-invite="sendInvite"
@copy-invite-link="copyInviteLink" @copy-invite-link="copyInviteLink"
@@ -254,6 +255,7 @@ import { usePagedQuery } from '~/composables/usePagedQuery';
import { import {
DemoteUsersByAdminDocument, DemoteUsersByAdminDocument,
InviteNewUserDocument, InviteNewUserDocument,
IsSmtpEnabledDocument,
MakeUsersAdminDocument, MakeUsersAdminDocument,
MetricsDocument, MetricsDocument,
RemoveUsersByAdminDocument, RemoveUsersByAdminDocument,
@@ -448,6 +450,10 @@ const router = useRouter();
const goToUserDetails = (user: UserInfoQuery['infra']['userInfo']) => const goToUserDetails = (user: UserInfoQuery['infra']['userInfo']) =>
router.push('/users/' + user.uid); 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 // Send Invitation through Email
const showInviteUserModal = ref(false); const showInviteUserModal = ref(false);
const sendInvitation = useMutation(InviteNewUserDocument); const sendInvitation = useMutation(InviteNewUserDocument);
@@ -474,7 +480,7 @@ const sendInvite = async (email: string) => {
return false; return false;
} else { } else {
toast.success(t('state.email_success')); if (smtpEnabled.value) toast.success(t('state.email_success'));
showInviteUserModal.value = false; showInviteUserModal.value = false;
return true; return true;
} }
@@ -485,7 +491,7 @@ const copyInviteLink = async (email: string) => {
if (!result) return; if (!result) return;
const baseURL = import.meta.env.VITE_BASE_URL ?? ''; const baseURL = import.meta.env.VITE_BASE_URL ?? '';
copyToClipboard(baseURL); copyToClipboard(baseURL);
toast.success(t('state.copied_to_clipboard')); toast.success(t('state.link_copied_to_clipboard'));
}; };
// Make Multiple Users Admin // Make Multiple Users Admin