Show invite code to send if no email service in modal

frontend/src/views/Settings/OrgSettingsPage/OrgSettingsPage.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
+import { useState } from 'react';
 import { useTranslation } from 'next-i18next';
 import { plans } from 'public/data/frequentConstants';
 
@@ -51,6 +52,8 @@ export const OrgSettingsPage = () => {
   const addIncidentContact = useAddIncidentContact();
   const removeIncidentContact = useDeleteIncidentContact();
 
+  const [completeInviteLink, setcompleteInviteLink] = useState<string|undefined>("")
+
   const isMoreUsersNotAllowed =
     (orgUsers || []).length >= 5 &&
     subscriptionPlan === plans.starter &&
@@ -96,11 +99,16 @@ export const OrgSettingsPage = () => {
     if (!currentOrg?._id) return;
 
     try {
-      await addUserToOrg.mutateAsync({ organizationId: currentOrg?._id, inviteeEmail: email });
-      createNotification({
-        text: 'Successfully invited user to the organization.',
-        type: 'success'
-      });
+      const {data} = await addUserToOrg.mutateAsync({ organizationId: currentOrg?._id, inviteeEmail: email });
+      setcompleteInviteLink(data?.completeInviteLink)
+
+      // only show this notification when email is configured. A [completeInviteLink] will not be sent if smtp is configured
+      if (!data.completeInviteLink){
+        createNotification({
+          text: 'Successfully invited user to the organization.',
+          type: 'success'
+        });
+      }
     } catch (error) {
       console.error(error);
       createNotification({
@@ -247,6 +255,8 @@ export const OrgSettingsPage = () => {
             onRemoveMember={onRemoveUserOrgMembership}
             onRoleChange={onUpdateOrgUserRole}
             onGrantAccess={onGrantUserAccess}
+            completeInviteLink={completeInviteLink}
+            setCompleteInviteLink={setcompleteInviteLink}
           />
         </div>
         <div className="mb-6 mt-2 flex w-full flex-col items-start rounded-md bg-white/5 px-6 pt-6 pb-6">

frontend/src/views/Settings/OrgSettingsPage/components/OrgMembersTable/OrgMembersTable.tsx

@@ -1,7 +1,7 @@
-import { useMemo, useState } from 'react';
+import { Dispatch, SetStateAction, useMemo, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { useRouter } from 'next/router';
-import { faMagnifyingGlass, faPlus, faTrash, faUsers } from '@fortawesome/free-solid-svg-icons';
+import { faCheck, faCopy, faMagnifyingGlass, faPlus, faTrash, faUsers } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { yupResolver } from '@hookform/resolvers/yup';
 import * as yup from 'yup';
@@ -43,6 +43,8 @@ type Props = {
   onGrantAccess: (userId: string, publicKey: string) => Promise<void>;
   // the current user id to block remove org button
   userId: string;
+  completeInviteLink: string | undefined,
+  setCompleteInviteLink: Dispatch<SetStateAction<string | undefined>>
 };
 
 const addMemberFormSchema = yup.object({
@@ -61,7 +63,9 @@ export const OrgMembersTable = ({
   onGrantAccess,
   onRoleChange,
   userId,
-  isLoading
+  isLoading,
+  completeInviteLink,
+  setCompleteInviteLink
 }: Props) => {
   const router = useRouter();
   const [searchMemberFilter, setSearchMemberFilter] = useState('');
@@ -82,8 +86,11 @@ export const OrgMembersTable = ({
 
   const onAddMember = async ({ email }: TAddMemberForm) => {
     await onInviteMember(email);
-      handlePopUpClose('addMember');
-      reset(); 
+      if (serverDetails?.emailConfigured){
+        handlePopUpClose('addMember');
+      }
+      
+      reset();
   };
 
   const onRemoveOrgMemberApproved = async () => {
@@ -109,6 +116,11 @@ export const OrgMembersTable = ({
     [members, searchMemberFilter]
   );
 
+  const copyTokenToClipboard = () => {
+    navigator.clipboard.writeText(completeInviteLink as string);
+    // setIsTokenCopied.on();
+  };
+
   return (
     <div className="w-full">
       <div className="mb-4 flex">
@@ -124,15 +136,16 @@ export const OrgMembersTable = ({
           <Button
             leftIcon={<FontAwesomeIcon icon={faPlus} />}
             onClick={() => {
-              if (serverDetails?.emailConfigured){
+              // if (serverDetails?.emailConfigured){
                 if (isMoreUserNotAllowed) {
                   handlePopUpOpen('upgradePlan');
                 } else {
+                  reset();
                   handlePopUpOpen('addMember');
                 }
-              } else {
-                handlePopUpOpen('setUpEmail');
-              }
+              // } else {
+              //   handlePopUpOpen('setUpEmail');
+              // }
             }}
           >
             Add Member
@@ -180,7 +193,7 @@ export const OrgMembersTable = ({
                             <SelectItem value="member">member</SelectItem>
                           </Select>
                         )}
-                        {(status === 'invited' || status === 'verified') && (
+                        {((status === 'invited' || status === 'verified') && serverDetails?.emailConfigured) && (
                           <Button className='w-40' colorSchema="secondary" onClick={() => onInviteMember(email)}>
                             Resend Invite
                           </Button>
@@ -241,20 +254,23 @@ export const OrgMembersTable = ({
         isOpen={popUp?.addMember?.isOpen}
         onOpenChange={(isOpen) => {
           handlePopUpToggle('addMember', isOpen);
-          reset();
+          setCompleteInviteLink(undefined) 
         }}
       >
         <ModalContent
           title={`Invite others to ${orgName}`}
           subTitle={
-            <>
-              An invite is specific to an email address and expires after 1 day.
-              <br />
-              For security reasons, you will need to separately add members to projects.
-            </>
+            <div>
+              {!completeInviteLink && <div>
+                An invite is specific to an email address and expires after 1 day.
+                <br />
+                For security reasons, you will need to separately add members to projects.
+              </div>}
+              {completeInviteLink && "This Infisical instance does not have a email provider setup. Please share this invite link with the invitee manually"}
+            </div>
           }
         >
-          <form onSubmit={handleSubmit(onAddMember)}>
+          {!completeInviteLink && <form onSubmit={handleSubmit(onAddMember)} >
             <Controller
               control={control}
               defaultValue=""
@@ -283,7 +299,22 @@ export const OrgMembersTable = ({
                 Cancel
               </Button>
             </div>
-          </form>
+          </form>}
+          {
+            completeInviteLink && 
+            <div className="mt-2 mb-3 mr-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+            <p className="mr-4 break-all">{completeInviteLink}</p>
+            <IconButton
+              ariaLabel="copy icon"
+              colorSchema="secondary"
+              className="group relative"
+              onClick={copyTokenToClipboard}
+            >
+              <FontAwesomeIcon icon={false ? faCheck : faCopy} />
+              <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">click to copy</span>
+            </IconButton>
+          </div>
+          }
         </ModalContent>
       </Modal>
       <DeleteActionModal