jyapayne/dify
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: Warning on invite modal when mail setup is incomplete (#11809)

Browse source
This commit is contained in:
Shun Miyazawa 2024-12-23 16:27:49 +09:00 • committed by GitHub
commit 4e3d732934
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
22 changed files with 42 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

3
web/app/components/header/account-setting/members-page/index.tsx
View file

@ -34,7 +34,7 @@ const MembersPage = () => {
}
const { locale } = useContext(I18n)
const { userProfile, currentWorkspace, isCurrentWorkspaceOwner, isCurrentWorkspaceManager } = useAppContext()
const { userProfile, currentWorkspace, isCurrentWorkspaceOwner, isCurrentWorkspaceManager, systemFeatures } = useAppContext()
const { data, mutate } = useSWR({ url: '/workspaces/current/members' }, fetchMembers)
const [inviteModalVisible, setInviteModalVisible] = useState(false)
const [invitationResults, setInvitationResults] = useState<InvitationResult[]>([])
@ -122,6 +122,7 @@ const MembersPage = () => {
{
inviteModalVisible && (
<InviteModal
isEmailSetup={systemFeatures.is_email_setup}
onCancel={() => setInviteModalVisible(false)}
onSend={(invitationResults) => {
setInvitedModalVisible(true)

21
web/app/components/header/account-setting/members-page/invite-modal/index.tsx
View file

@ -4,6 +4,7 @@ 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 { RiErrorWarningFill } from '@remixicon/react'
import RoleSelector from './role-selector'
import s from './index.module.css'
import cn from '@/utils/classnames'
@ -17,11 +18,13 @@ import I18n from '@/context/i18n'
import 'react-multi-email/dist/style.css'
type IInviteModalProps = {
isEmailSetup: boolean
onCancel: () => void
onSend: (invitationResults: InvitationResult[]) => void
}
const InviteModal = ({
isEmailSetup,
onCancel,
onSend,
}: IInviteModalProps) => {
@ -59,7 +62,23 @@ const InviteModal = ({
<div className='text-xl font-semibold text-gray-900'>{t('common.members.inviteTeamMember')}</div>
<XMarkIcon className='w-4 h-4 cursor-pointer' onClick={onCancel} />
</div>
<div className='mb-7 text-[13px] text-gray-500'>{t('common.members.inviteTeamMemberTip')}</div>
<div className='mb-3 text-[13px] text-gray-500'>{t('common.members.inviteTeamMemberTip')}</div>
{!isEmailSetup && (
<div className='grow basis-0 overflow-y-auto pb-4'>
<div className='relative mb-1 p-2 rounded-xl border border-components-panel-border shadow-xs'>
<div className='absolute top-0 left-0 w-full h-full rounded-xl opacity-40' style={{ background: 'linear-gradient(92deg, rgba(255, 171, 0, 0.25) 18.12%, rgba(255, 255, 255, 0.00) 167.31%)' }}></div>
<div className='relative flex items-start w-full h-full'>
<div className='shrink-0 mr-0.5 p-0.5'>
<RiErrorWarningFill className='w-5 h-5 text-text-warning' />
</div>
<div className='text-text-primary system-xs-medium'>
<span>{t('common.members.emailNotSetup')}</span>
</div>
</div>
</div>
</div>
)}
<div>
<div className='mb-2 text-sm font-medium text-gray-900'>{t('common.members.email')}</div>
<div className='mb-8 h-36 flex items-stretch'>