Feat/support to invite multiple users (#1011)

2025-12-10 03:16:51 +08:00 · 2023-08-31 01:18:31 +08:00
parent 7df56ed617
commit d3f8ea2df0
12 changed files with 222 additions and 70 deletions
--- a/web/app/components/header/account-setting/members-page/index.tsx
+++ b/web/app/components/header/account-setting/members-page/index.tsx
@@ -16,6 +16,7 @@ import { fetchMembers } from '@/service/common'
 import I18n from '@/context/i18n'
 import { useAppContext } from '@/context/app-context'
 import Avatar from '@/app/components/base/avatar'
+import type { InvitationResult } from '@/models/common'

 dayjs.extend(relativeTime)

@@ -30,7 +31,7 @@ const MembersPage = () => {
  const { userProfile, currentWorkspace, isCurrentWorkspaceManager } = useAppContext()
  const { data, mutate } = useSWR({ url: '/workspaces/current/members' }, fetchMembers)
  const [inviteModalVisible, setInviteModalVisible] = useState(false)
-  const [invitationLink, setInvitationLink] = useState('')
+  const [invitationResults, setInvitationResults] = useState<InvitationResult[]>([])
  const [invitedModalVisible, setInvitedModalVisible] = useState(false)
  const accounts = data?.accounts || []
  const owner = accounts.filter(account => account.role === 'owner')?.[0]?.email === userProfile.email
@@ -78,7 +79,7 @@ const MembersPage = () => {
                  <div className='shrink-0 w-[96px] flex items-center'>
                    {
                      (owner && account.role !== 'owner')
-                        ? <Operation member={account} onOperate={() => mutate()} />
+                        ? <Operation member={account} onOperate={mutate} />
                        : <div className='px-3 text-[13px] text-gray-700'>{RoleMap[account.role] || RoleMap.normal}</div>
                    }
                  </div>
@@ -92,9 +93,9 @@ const MembersPage = () => {
        inviteModalVisible && (
          <InviteModal
            onCancel={() => setInviteModalVisible(false)}
-            onSend={(url) => {
+            onSend={(invitationResults) => {
              setInvitedModalVisible(true)
-              setInvitationLink(url)
+              setInvitationResults(invitationResults)
              mutate()
            }}
          />
@@ -103,7 +104,7 @@ const MembersPage = () => {
      {
        invitedModalVisible && (
          <InvitedModal
-            invitationLink={invitationLink}
+            invitationResults={invitationResults}
            onCancel={() => setInvitedModalVisible(false)}
          />
        )
--- a/web/app/components/header/account-setting/members-page/invite-modal/index.module.css
+++ b/web/app/components/header/account-setting/members-page/invite-modal/index.module.css
@@ -1,4 +1,12 @@
 .modal {
  padding: 24px 32px !important;
  width: 400px !important;
+}
+
+.emailsInput {
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity)) !important;
+}
+
+.emailBackground {
+  background-color: white !important;
 }
--- a/web/app/components/header/account-setting/members-page/invite-modal/index.tsx
+++ b/web/app/components/header/account-setting/members-page/invite-modal/index.tsx
@@ -1,35 +1,57 @@
 'use client'
-import { useState } from 'react'
+import { Fragment, useCallback, useMemo, useState } from 'react'
 import { useContext } from 'use-context-selector'
 import { XMarkIcon } from '@heroicons/react/24/outline'
 import { useTranslation } from 'react-i18next'
+import { ReactMultiEmail } from 'react-multi-email'
+import { Listbox, Transition } from '@headlessui/react'
+import { CheckIcon } from '@heroicons/react/20/solid'
+import cn from 'classnames'
 import s from './index.module.css'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 import { inviteMember } from '@/service/common'
 import { emailRegex } from '@/config'
 import { ToastContext } from '@/app/components/base/toast'
+import type { InvitationResult } from '@/models/common'

+import 'react-multi-email/dist/style.css'
 type IInviteModalProps = {
  onCancel: () => void
-  onSend: (url: string) => void
+  onSend: (invitationResults: InvitationResult[]) => void
 }
+
 const InviteModal = ({
  onCancel,
  onSend,
 }: IInviteModalProps) => {
  const { t } = useTranslation()
-  const [email, setEmail] = useState('')
+  const [emails, setEmails] = useState<string[]>([])
  const { notify } = useContext(ToastContext)

-  const handleSend = async () => {
-    if (emailRegex.test(email)) {
-      try {
-        const res = await inviteMember({ url: '/workspaces/current/members/invite-email', body: { email, role: 'admin' } })
+  const InvitingRoles = useMemo(() => [
+    {
+      name: 'normal',
+      description: t('common.members.normalTip'),
+    },
+    {
+      name: 'admin',
+      description: t('common.members.adminTip'),
+    },
+  ], [t])
+  const [role, setRole] = useState(InvitingRoles[0])

-        if (res.result === 'success') {
+  const handleSend = useCallback(async () => {
+    if (emails.map(email => emailRegex.test(email)).every(Boolean)) {
+      try {
+        const { result, invitation_results } = await inviteMember({
+          url: '/workspaces/current/members/invite-email',
+          body: { emails, role: role.name },
+        })
+
+        if (result === 'success') {
          onCancel()
-          onSend(res.invite_url)
+          onSend(invitation_results)
        }
      }
      catch (e) {}
@@ -37,11 +59,11 @@ const InviteModal = ({
    else {
      notify({ type: 'error', message: t('common.members.emailInvalid') })
    }
-  }
+  }, [role, emails, notify, onCancel, onSend, t])

  return (
    <div className={s.wrap}>
-      <Modal isShow onClose={() => {}} className={s.modal}>
+      <Modal overflowVisible isShow onClose={() => {}} className={s.modal}>
        <div className='flex justify-between mb-2'>
          <div className='text-xl font-semibold text-gray-900'>{t('common.members.inviteTeamMember')}</div>
          <XMarkIcon className='w-4 h-4 cursor-pointer' onClick={onCancel} />
@@ -49,18 +71,79 @@ const InviteModal = ({
        <div className='mb-7 text-[13px] text-gray-500'>{t('common.members.inviteTeamMemberTip')}</div>
        <div>
          <div className='mb-2 text-sm font-medium text-gray-900'>{t('common.members.email')}</div>
-          <input
-            className='
-              block w-full py-2 mb-9 px-3 bg-gray-50 outline-none border-none
-              appearance-none text-sm text-gray-900 rounded-lg
-            '
-            value={email}
-            onChange={e => setEmail(e.target.value)}
-            placeholder={t('common.members.emailPlaceholder') || ''}
-          />
+          <div className='mb-8 h-36 flex items-stretch'>
+            <ReactMultiEmail
+              className={cn('w-full pt-2 px-3 outline-none border-none',
+                'appearance-none text-sm text-gray-900 rounded-lg overflow-y-auto',
+                s.emailsInput,
+              )}
+              autoFocus
+              emails={emails}
+              inputClassName='bg-transparent'
+              onChange={setEmails}
+              getLabel={(email, index, removeEmail) =>
+                <div data-tag key={index} className={cn(s.emailBackground)}>
+                  <div data-tag-item>{email}</div>
+                  <span data-tag-handle onClick={() => removeEmail(index)}>
+                      ×
+                  </span>
+                </div>
+              }
+              placeholder={t('common.members.emailPlaceholder') || ''}
+            />
+          </div>
+          <Listbox value={role} onChange={setRole}>
+            <div className="relative pb-6">
+              <Listbox.Button className="relative w-full py-2 pl-3 pr-10 text-left bg-gray-100 outline-none border-none appearance-none text-sm text-gray-900 rounded-lg">
+                <span className="block truncate capitalize">{t('common.members.invitedAsRole', { role: t(`common.members.${role.name}`) })}</span>
+              </Listbox.Button>
+              <Transition
+                as={Fragment}
+                leave="transition ease-in duration-200"
+                leaveFrom="opacity-200"
+                leaveTo="opacity-0"
+              >
+                <Listbox.Options className="absolute w-full py-1 my-2 overflow-auto text-base bg-white rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+                  {InvitingRoles.map(role =>
+                    <Listbox.Option
+                      key={role.name}
+                      className={({ active }) =>
+                        `${active ? ' bg-gray-50 rounded-xl' : ' bg-transparent'}
+                          cursor-default select-none relative py-2 px-4 mx-2 flex flex-col`
+                      }
+                      value={role}
+                    >
+                      {({ selected }) => (
+                        <div className='flex flex-row'>
+                          <span
+                            className={cn(
+                              'text-indigo-600 w-8',
+                              'flex items-center',
+                            )}
+                          >
+                            {selected && (<CheckIcon className="h-5 w-5" aria-hidden="true" />)}
+                          </span>
+                          <div className=' flex flex-col flex-grow'>
+                            <span className={`${selected ? 'font-medium' : 'font-normal'} capitalize block truncate`}>
+                              {t(`common.members.${role.name}`)}
+                            </span>
+                            <span className={`${selected ? 'font-medium' : 'font-normal'} capitalize block truncate`}>
+                              {role.description}
+                            </span>
+                          </div>
+                        </div>
+                      )}
+                    </Listbox.Option>,
+                  )}
+                </Listbox.Options>
+              </Transition>
+            </div>
+          </Listbox>
          <Button
+            tabIndex={0}
            className='w-full text-sm font-medium'
            onClick={handleSend}
+            disabled={!emails.length}
            type='primary'
          >
            {t('common.members.sendInvite')}
--- a/web/app/components/header/account-setting/members-page/invited-modal/index.tsx
+++ b/web/app/components/header/account-setting/members-page/invited-modal/index.tsx
@@ -1,22 +1,31 @@
 import { CheckCircleIcon } from '@heroicons/react/24/solid'
-import { XMarkIcon } from '@heroicons/react/24/outline'
+import { QuestionMarkCircleIcon, XMarkIcon } from '@heroicons/react/24/outline'
 import { useTranslation } from 'react-i18next'
+import { useMemo } from 'react'
 import InvitationLink from './invitation-link'
 import s from './index.module.css'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 import { IS_CE_EDITION } from '@/config'
+import type { InvitationResult } from '@/models/common'
+import Tooltip from '@/app/components/base/tooltip'
+
+export type SuccessInvationResult = Extract<InvitationResult, { status: 'success' }>
+export type FailedInvationResult = Extract<InvitationResult, { status: 'failed' }>

 type IInvitedModalProps = {
-  invitationLink: string
+  invitationResults: InvitationResult[]
  onCancel: () => void
 }
 const InvitedModal = ({
-  invitationLink,
+  invitationResults,
  onCancel,
 }: IInvitedModalProps) => {
  const { t } = useTranslation()

+  const successInvationResults = useMemo<SuccessInvationResult[]>(() => invitationResults?.filter(item => item.status === 'success') as SuccessInvationResult[], [invitationResults])
+  const failedInvationResults = useMemo<FailedInvationResult[]>(() => invitationResults?.filter(item => item.status !== 'success') as FailedInvationResult[], [invitationResults])
+
  return (
    <div className={s.wrap}>
      <Modal isShow onClose={() => {}} className={s.modal}>
@@ -37,9 +46,38 @@ const InvitedModal = ({
        {IS_CE_EDITION && (
          <>
            <div className='mb-5 text-sm text-gray-500'>{t('common.members.invitationSentTip')}</div>
-            <div className='mb-9'>
-              <div className='py-2 text-sm font-Medium text-gray-900'>{t('common.members.invitationLink')}</div>
-              <InvitationLink value={invitationLink} />
+            <div className='flex flex-col gap-2 mb-9'>
+              {
+                !!successInvationResults.length
+                  && <>
+                    <div className='py-2 text-sm font-Medium text-gray-900'>{t('common.members.invitationLink')}</div>
+                    {successInvationResults.map(item =>
+                      <InvitationLink key={item.email} value={item} />)}
+                  </>
+              }
+              {
+                !!failedInvationResults.length
+                  && <>
+                    <div className='py-2 text-sm font-Medium text-gray-900'>{t('common.members.failedinvitationEmails')}</div>
+                    <div className='flex flex-wrap justify-between gap-y-1'>
+                      {
+                        failedInvationResults.map(item =>
+                          <div key={item.email} className='flex justify-center border border-red-300 rounded-md px-1 bg-orange-50'>
+                            <Tooltip
+                              selector={`invitation-tag-${item.email}`}
+                              htmlContent={item.message}
+                            >
+                              <div className='flex justify-center items-center text-sm gap-1'>
+                                {item.email}
+                                <QuestionMarkCircleIcon className='w-4 h-4 text-red-300' />
+                              </div>
+                            </Tooltip>
+                          </div>,
+                        )
+                      }
+                    </div>
+                  </>
+              }
            </div>
          </>
        )}
--- a/web/app/components/header/account-setting/members-page/invited-modal/invitation-link.tsx
+++ b/web/app/components/header/account-setting/members-page/invited-modal/invitation-link.tsx
@@ -3,21 +3,22 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { t } from 'i18next'
 import copy from 'copy-to-clipboard'
 import s from './index.module.css'
+import type { SuccessInvationResult } from '.'
 import Tooltip from '@/app/components/base/tooltip'
 import { randomString } from '@/utils'

 type IInvitationLinkProps = {
-  value?: string
+  value: SuccessInvationResult
 }

 const InvitationLink = ({
-  value = '',
+  value,
 }: IInvitationLinkProps) => {
  const [isCopied, setIsCopied] = useState(false)
  const selector = useRef(`invite-link-${randomString(4)}`)

  const copyHandle = useCallback(() => {
-    copy(value)
+    copy(value.url)
    setIsCopied(true)
  }, [value])

@@ -42,7 +43,7 @@ const InvitationLink = ({
            content={isCopied ? `${t('appApi.copied')}` : `${t('appApi.copy')}`}
            className='z-10'
          >
-            <div className='absolute top-0 left-0 w-full pl-2 pr-2 truncate cursor-pointer r-0' onClick={copyHandle}>{value}</div>
+            <div className='absolute top-0 left-0 w-full pl-2 pr-2 truncate cursor-pointer r-0' onClick={copyHandle}>{value.url}</div>
          </Tooltip>
        </div>
        <div className="flex-shrink-0 h-4 bg-gray-200 border" />