feat: member invitation and activation (#535)

Co-authored-by: John Wang <takatost@gmail.com>
2025-12-09 19:06:51 +08:00 · 2023-07-14 11:19:26 +08:00
parent 004b3caa43
commit cd51d3323b
51 changed files with 1235 additions and 329 deletions
--- a/web/app/components/header/account-about/index.module.css
+++ b/web/app/components/header/account-about/index.module.css
@@ -1,6 +1,6 @@
 .logo-icon {
  background: url(../assets/logo-icon.png) center center no-repeat;
-  background-size: contain;
+  background-size: 32px;
  box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.05), 0px 2px 4px -2px rgba(0, 0, 0, 0.05);
 }

--- a/web/app/components/header/account-about/index.tsx
+++ b/web/app/components/header/account-about/index.tsx
@@ -34,7 +34,7 @@ export default function AccountAbout({
        <div>
          <div className={classNames(
            s['logo-icon'],
-            'mx-auto mb-3 w-12 h-12 bg-white rounded border border-gray-200',
+            'mx-auto mb-3 w-12 h-12 bg-white rounded-xl border border-gray-200',
          )} />
          <div className={classNames(
            s['logo-text'],
--- a/web/app/components/header/account-setting/account-page/index.tsx
+++ b/web/app/components/header/account-setting/account-page/index.tsx
@@ -25,13 +25,19 @@ const inputClassName = `
  text-sm font-normal text-gray-800
 `

+const validPassword = /^(?=.*[a-zA-Z])(?=.*\d).{8,}$/
+
 export default function AccountPage() {
+  const { t } = useTranslation()
  const { mutateUserProfile, userProfile, apps } = useAppContext()
  const { notify } = useContext(ToastContext)
  const [editNameModalVisible, setEditNameModalVisible] = useState(false)
  const [editName, setEditName] = useState('')
  const [editing, setEditing] = useState(false)
-  const { t } = useTranslation()
+  const [editPasswordModalVisible, setEditPasswordModalVisible] = useState(false)
+  const [currentPassword, setCurrentPassword] = useState('')
+  const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')

  const handleEditName = () => {
    setEditNameModalVisible(true)
@@ -52,6 +58,56 @@ export default function AccountPage() {
      setEditing(false)
    }
  }
+
+  const showErrorMessage = (message: string) => {
+    notify({
+      type: 'error',
+      message,
+    })
+  }
+  const valid = () => {
+    if (!password.trim()) {
+      showErrorMessage(t('login.error.passwordEmpty'))
+      return false
+    }
+    if (!validPassword.test(password))
+      showErrorMessage(t('login.error.passwordInvalid'))
+    if (password !== confirmPassword)
+      showErrorMessage(t('common.account.notEqual'))
+
+    return true
+  }
+  const resetPasswordForm = () => {
+    setCurrentPassword('')
+    setPassword('')
+    setConfirmPassword('')
+  }
+  const handleSavePassowrd = async () => {
+    if (!valid())
+      return
+    try {
+      setEditing(true)
+      await updateUserProfile({
+        url: 'account/password',
+        body: {
+          password: currentPassword,
+          new_password: password,
+          repeat_new_password: confirmPassword,
+        },
+      })
+      notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
+      mutateUserProfile()
+      setEditPasswordModalVisible(false)
+      resetPasswordForm()
+      setEditing(false)
+    }
+    catch (e) {
+      notify({ type: 'error', message: (e as Error).message })
+      setEditPasswordModalVisible(false)
+      setEditing(false)
+    }
+  }
+
  const renderAppItem = (item: IItem) => {
    return (
      <div className='flex px-3 py-1'>
@@ -80,51 +136,105 @@ export default function AccountPage() {
        <div className={titleClassName}>{t('common.account.email')}</div>
        <div className={classNames(inputClassName, 'cursor-pointer')}>{userProfile.email}</div>
      </div>
-      {
-        !!apps.length && (
-          <>
-            <div className='mb-6 border-[0.5px] border-gray-100' />
-            <div className='mb-8'>
-              <div className={titleClassName}>{t('common.account.langGeniusAccount')}</div>
-              <div className={descriptionClassName}>{t('common.account.langGeniusAccountTip')}</div>
-              <Collapse
-                title={`${t('common.account.showAppLength', { length: apps.length })}`}
-                items={apps.map(app => ({ key: app.id, name: app.name }))}
-                renderItem={renderAppItem}
-                wrapperClassName='mt-2'
-              />
-            </div>
-          </>
-        )
-      }
-      {
-        editNameModalVisible && (
-          <Modal
-            isShow
-            onClose={() => setEditNameModalVisible(false)}
-            className={s.modal}
-          >
-            <div className='mb-6 text-lg font-medium text-gray-900'>{t('common.account.editName')}</div>
-            <div className={titleClassName}>{t('common.account.name')}</div>
-            <input
-              className={inputClassName}
-              value={editName}
-              onChange={e => setEditName(e.target.value)}
+      <div className='mb-8'>
+        <div className='mb-1 text-sm font-medium text-gray-900'>{t('common.account.password')}</div>
+        <div className='mb-2 text-xs text-gray-500'>{t('common.account.passwordTip')}</div>
+        <Button className='font-medium !text-gray-700 !px-3 !py-[7px] !text-[13px]' onClick={() => setEditPasswordModalVisible(true)}>{userProfile.is_password_set ? t('common.account.resetPassword') : t('common.account.setPassword')}</Button>
+      </div>
+      {!!apps.length && (
+        <>
+          <div className='mb-6 border-[0.5px] border-gray-100' />
+          <div className='mb-8'>
+            <div className={titleClassName}>{t('common.account.langGeniusAccount')}</div>
+            <div className={descriptionClassName}>{t('common.account.langGeniusAccountTip')}</div>
+            <Collapse
+              title={`${t('common.account.showAppLength', { length: apps.length })}`}
+              items={apps.map(app => ({ key: app.id, name: app.name }))}
+              renderItem={renderAppItem}
+              wrapperClassName='mt-2'
            />
-            <div className='flex justify-end mt-10'>
-              <Button className='mr-2 text-sm font-medium' onClick={() => setEditNameModalVisible(false)}>{t('common.operation.cancel')}</Button>
-              <Button
-                disabled={editing || !editName}
-                type='primary'
-                className='text-sm font-medium'
-                onClick={handleSaveName}
-              >
-                {t('common.operation.save')}
-              </Button>
-            </div>
-          </Modal>
-        )
-      }
+          </div>
+        </>
+      )}
+      {editNameModalVisible && (
+        <Modal
+          isShow
+          onClose={() => setEditNameModalVisible(false)}
+          className={s.modal}
+        >
+          <div className='mb-6 text-lg font-medium text-gray-900'>{t('common.account.editName')}</div>
+          <div className={titleClassName}>{t('common.account.name')}</div>
+          <input
+            className={inputClassName}
+            value={editName}
+            onChange={e => setEditName(e.target.value)}
+          />
+          <div className='flex justify-end mt-10'>
+            <Button className='mr-2 text-sm font-medium' onClick={() => setEditNameModalVisible(false)}>{t('common.operation.cancel')}</Button>
+            <Button
+              disabled={editing || !editName}
+              type='primary'
+              className='text-sm font-medium'
+              onClick={handleSaveName}
+            >
+              {t('common.operation.save')}
+            </Button>
+          </div>
+        </Modal>
+      )}
+      {editPasswordModalVisible && (
+        <Modal
+          isShow
+          onClose={() => {
+            setEditPasswordModalVisible(false)
+            resetPasswordForm()
+          }}
+          className={s.modal}
+        >
+          <div className='mb-6 text-lg font-medium text-gray-900'>{userProfile.is_password_set ? t('common.account.resetPassword') : t('common.account.setPassword')}</div>
+          {userProfile.is_password_set && (
+            <>
+              <div className={titleClassName}>{t('common.account.currentPassword')}</div>
+              <input
+                type="password"
+                className={inputClassName}
+                value={currentPassword}
+                onChange={e => setCurrentPassword(e.target.value)}
+              />
+            </>
+          )}
+          <div className='mt-8 text-sm font-medium text-gray-900'>
+            {userProfile.is_password_set ? t('common.account.newPassword') : t('common.account.password')}
+          </div>
+          <input
+            type="password"
+            className={inputClassName}
+            value={password}
+            onChange={e => setPassword(e.target.value)}
+          />
+          <div className='mt-8 text-sm font-medium text-gray-900'>{t('common.account.confirmPassword')}</div>
+          <input
+            type="password"
+            className={inputClassName}
+            value={confirmPassword}
+            onChange={e => setConfirmPassword(e.target.value)}
+          />
+          <div className='flex justify-end mt-10'>
+            <Button className='mr-2 text-sm font-medium' onClick={() => {
+              setEditPasswordModalVisible(false)
+              resetPasswordForm()
+            }}>{t('common.operation.cancel')}</Button>
+            <Button
+              disabled={editing}
+              type='primary'
+              className='text-sm font-medium'
+              onClick={handleSavePassowrd}
+            >
+              {userProfile.is_password_set ? t('common.operation.reset') : t('common.operation.save')}
+            </Button>
+          </div>
+        </Modal>
+      )}
    </>
  )
 }
--- a/web/app/components/header/account-setting/index.tsx
+++ b/web/app/components/header/account-setting/index.tsx
@@ -1,6 +1,7 @@
 'use client'
 import { useTranslation } from 'react-i18next'
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
+import cn from 'classnames'
 import { AtSymbolIcon, CubeTransparentIcon, GlobeAltIcon, UserIcon, UsersIcon, XMarkIcon } from '@heroicons/react/24/outline'
 import { GlobeAltIcon as GlobalAltIconSolid, UserIcon as UserIconSolid, UsersIcon as UsersIconSolid } from '@heroicons/react/24/solid'
 import AccountPage from './account-page'
@@ -18,6 +19,10 @@ const iconClassName = `
  w-4 h-4 ml-3 mr-2
 `

+const scrolledClassName = `
+  border-b shadow-xs bg-white/[.98]
+`
+
 type IAccountSettingProps = {
  onCancel: () => void
  activeTab?: string
@@ -78,6 +83,22 @@ export default function AccountSetting({
      ],
    },
  ]
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const [scrolled, setScrolled] = useState(false)
+  const scrollHandle = (e: any) => {
+    if (e.target.scrollTop > 0)
+      setScrolled(true)
+
+    else
+      setScrolled(false)
+  }
+  useEffect(() => {
+    const targetElement = scrollRef.current
+    targetElement?.addEventListener('scroll', scrollHandle)
+    return () => {
+      targetElement?.removeEventListener('scroll', scrollHandle)
+    }
+  }, [])

  return (
    <Modal
@@ -115,29 +136,19 @@ export default function AccountSetting({
            }
          </div>
        </div>
-        <div className='w-[520px] h-[580px] px-6 py-4 overflow-y-auto'>
-          <div className='flex items-center justify-between h-6 mb-8 text-base font-medium text-gray-900 '>
+        <div ref={scrollRef} className='relative w-[520px] h-[580px] pb-4 overflow-y-auto'>
+          <div className={cn('sticky top-0 px-6 py-4 flex items-center justify-between h-14 mb-4 bg-white text-base font-medium text-gray-900', scrolled && scrolledClassName)}>
            {[...menuItems[0].items, ...menuItems[1].items].find(item => item.key === activeMenu)?.name}
            <XMarkIcon className='w-4 h-4 cursor-pointer' onClick={onCancel} />
          </div>
-          {
-            activeMenu === 'account' && <AccountPage />
-          }
-          {
-            activeMenu === 'members' && <MembersPage />
-          }
-          {
-            activeMenu === 'integrations' && <IntegrationsPage />
-          }
-          {
-            activeMenu === 'language' && <LanguagePage />
-          }
-          {
-            activeMenu === 'provider' && <ProviderPage />
-          }
-          {
-            activeMenu === 'data-source' && <DataSourcePage />
-          }
+          <div className='px-6'>
+            {activeMenu === 'account' && <AccountPage />}
+            {activeMenu === 'members' && <MembersPage />}
+            {activeMenu === 'integrations' && <IntegrationsPage />}
+            {activeMenu === 'language' && <LanguagePage />}
+            {activeMenu === 'provider' && <ProviderPage />}
+            {activeMenu === 'data-source' && <DataSourcePage />}
+          </div>
        </div>
      </div>
    </Modal>
--- a/web/app/components/header/account-setting/members-page/index.tsx
+++ b/web/app/components/header/account-setting/members-page/index.tsx
@@ -30,6 +30,7 @@ const MembersPage = () => {
  const { userProfile } = useAppContext()
  const { data, mutate } = useSWR({ url: '/workspaces/current/members' }, fetchMembers)
  const [inviteModalVisible, setInviteModalVisible] = useState(false)
+  const [invitationLink, setInvitationLink] = useState('')
  const [invitedModalVisible, setInvitedModalVisible] = useState(false)
  const accounts = data?.accounts || []
  const owner = accounts.filter(account => account.role === 'owner')?.[0]?.email === userProfile.email
@@ -93,8 +94,9 @@ const MembersPage = () => {
        inviteModalVisible && (
          <InviteModal
            onCancel={() => setInviteModalVisible(false)}
-            onSend={() => {
+            onSend={(url) => {
              setInvitedModalVisible(true)
+              setInvitationLink(url)
              mutate()
            }}
          />
@@ -103,6 +105,7 @@ const MembersPage = () => {
      {
        invitedModalVisible && (
          <InvitedModal
+            invitationLink={invitationLink}
            onCancel={() => setInvitedModalVisible(false)}
          />
        )
--- 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
@@ -3,16 +3,16 @@ import { useState } from 'react'
 import { useContext } from 'use-context-selector'
 import { XMarkIcon } from '@heroicons/react/24/outline'
 import { useTranslation } from 'react-i18next'
+import s from './index.module.css'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
-import s from './index.module.css'
 import { inviteMember } from '@/service/common'
 import { emailRegex } from '@/config'
 import { ToastContext } from '@/app/components/base/toast'

-interface IInviteModalProps {
-  onCancel: () => void,
-  onSend: () => void,
+type IInviteModalProps = {
+  onCancel: () => void
+  onSend: (url: string) => void
 }
 const InviteModal = ({
  onCancel,
@@ -25,16 +25,16 @@ const InviteModal = ({
  const handleSend = async () => {
    if (emailRegex.test(email)) {
      try {
-        const res = await inviteMember({ url: '/workspaces/current/members/invite-email', body: { email, role: 'admin'} })
+        const res = await inviteMember({ url: '/workspaces/current/members/invite-email', body: { email, role: 'admin' } })

        if (res.result === 'success') {
          onCancel()
-          onSend()
+          onSend(res.invite_url)
        }
-      } catch (e) {
-        
      }
-    } else {
+      catch (e) {}
+    }
+    else {
      notify({ type: 'error', message: t('common.members.emailInvalid') })
    }
  }
@@ -51,15 +51,15 @@ const InviteModal = ({
          <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 
+              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') || ''}
          />
-          <Button 
-            className='w-full text-sm font-medium' 
+          <Button
+            className='w-full text-sm font-medium'
            onClick={handleSend}
            type='primary'
          >
--- a/web/app/components/header/account-setting/members-page/invited-modal/assets/copied.svg
+++ b/web/app/components/header/account-setting/members-page/invited-modal/assets/copied.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10.6665 2.66683C11.2865 2.66683 11.5965 2.66683 11.8508 2.73498C12.541 2.91991 13.0801 3.45901 13.265 4.14919C13.3332 4.40352 13.3332 4.71352 13.3332 5.3335V11.4668C13.3332 12.5869 13.3332 13.147 13.1152 13.5748C12.9234 13.9511 12.6175 14.2571 12.2412 14.4488C11.8133 14.6668 11.2533 14.6668 10.1332 14.6668H5.8665C4.7464 14.6668 4.18635 14.6668 3.75852 14.4488C3.3822 14.2571 3.07624 13.9511 2.88449 13.5748C2.6665 13.147 2.6665 12.5869 2.6665 11.4668V5.3335C2.6665 4.71352 2.6665 4.40352 2.73465 4.14919C2.91959 3.45901 3.45868 2.91991 4.14887 2.73498C4.4032 2.66683 4.71319 2.66683 5.33317 2.66683M5.99984 10.0002L7.33317 11.3335L10.3332 8.3335M6.39984 4.00016H9.59984C9.9732 4.00016 10.1599 4.00016 10.3025 3.9275C10.4279 3.86359 10.5299 3.7616 10.5938 3.63616C10.6665 3.49355 10.6665 3.30686 10.6665 2.9335V2.40016C10.6665 2.02679 10.6665 1.84011 10.5938 1.6975C10.5299 1.57206 10.4279 1.47007 10.3025 1.40616C10.1599 1.3335 9.97321 1.3335 9.59984 1.3335H6.39984C6.02647 1.3335 5.83978 1.3335 5.69718 1.40616C5.57174 1.47007 5.46975 1.57206 5.40583 1.6975C5.33317 1.84011 5.33317 2.02679 5.33317 2.40016V2.9335C5.33317 3.30686 5.33317 3.49355 5.40583 3.63616C5.46975 3.7616 5.57174 3.86359 5.69718 3.9275C5.83978 4.00016 6.02647 4.00016 6.39984 4.00016Z" stroke="#1D2939" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/web/app/components/header/account-setting/members-page/invited-modal/assets/copy-hover.svg
+++ b/web/app/components/header/account-setting/members-page/invited-modal/assets/copy-hover.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10.6665 2.66634H11.9998C12.3535 2.66634 12.6926 2.80682 12.9426 3.05687C13.1927 3.30691 13.3332 3.64605 13.3332 3.99967V13.333C13.3332 13.6866 13.1927 14.0258 12.9426 14.2758C12.6926 14.5259 12.3535 14.6663 11.9998 14.6663H3.99984C3.64622 14.6663 3.30708 14.5259 3.05703 14.2758C2.80698 14.0258 2.6665 13.6866 2.6665 13.333V3.99967C2.6665 3.64605 2.80698 3.30691 3.05703 3.05687C3.30708 2.80682 3.64622 2.66634 3.99984 2.66634H5.33317M5.99984 1.33301H9.99984C10.368 1.33301 10.6665 1.63148 10.6665 1.99967V3.33301C10.6665 3.7012 10.368 3.99967 9.99984 3.99967H5.99984C5.63165 3.99967 5.33317 3.7012 5.33317 3.33301V1.99967C5.33317 1.63148 5.63165 1.33301 5.99984 1.33301Z" stroke="#1D2939" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/web/app/components/header/account-setting/members-page/invited-modal/assets/copy.svg
+++ b/web/app/components/header/account-setting/members-page/invited-modal/assets/copy.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10.6665 2.66634H11.9998C12.3535 2.66634 12.6926 2.80682 12.9426 3.05687C13.1927 3.30691 13.3332 3.64605 13.3332 3.99967V13.333C13.3332 13.6866 13.1927 14.0258 12.9426 14.2758C12.6926 14.5259 12.3535 14.6663 11.9998 14.6663H3.99984C3.64622 14.6663 3.30708 14.5259 3.05703 14.2758C2.80698 14.0258 2.6665 13.6866 2.6665 13.333V3.99967C2.6665 3.64605 2.80698 3.30691 3.05703 3.05687C3.30708 2.80682 3.64622 2.66634 3.99984 2.66634H5.33317M5.99984 1.33301H9.99984C10.368 1.33301 10.6665 1.63148 10.6665 1.99967V3.33301C10.6665 3.7012 10.368 3.99967 9.99984 3.99967H5.99984C5.63165 3.99967 5.33317 3.7012 5.33317 3.33301V1.99967C5.33317 1.63148 5.63165 1.33301 5.99984 1.33301Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/web/app/components/header/account-setting/members-page/invited-modal/index.module.css
+++ b/web/app/components/header/account-setting/members-page/invited-modal/index.module.css
@@ -2,4 +2,20 @@
  padding: 32px !important;
  width: 480px !important;
  background: linear-gradient(180deg, rgba(3, 152, 85, 0.05) 0%, rgba(3, 152, 85, 0) 22.44%), #F9FAFB !important;
+}
+
+.copyIcon {
+  background-image: url(./assets/copy.svg);
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.copyIcon:hover {
+  background-image: url(./assets/copy-hover.svg);
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.copyIcon.copied {
+  background-image: url(./assets/copied.svg);
 }
--- 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,15 +1,17 @@
 import { CheckCircleIcon } from '@heroicons/react/24/solid'
 import { XMarkIcon } from '@heroicons/react/24/outline'
 import { useTranslation } from 'react-i18next'
+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 s from './index.module.css'
-
-interface IInvitedModalProps {
-  onCancel: () => void,
+type IInvitedModalProps = {
+  invitationLink: string
+  onCancel: () => void
 }
 const InvitedModal = ({
-  onCancel
+  invitationLink,
+  onCancel,
 }: IInvitedModalProps) => {
  const { t } = useTranslation()

@@ -27,10 +29,14 @@ const InvitedModal = ({
          <XMarkIcon className='w-4 h-4 cursor-pointer' onClick={onCancel} />
        </div>
        <div className='mb-1 text-xl font-semibold text-gray-900'>{t('common.members.invitationSent')}</div>
-        <div className='mb-10 text-sm text-gray-500'>{t('common.members.invitationSentTip')}</div>
+        <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>
        <div className='flex justify-end'>
-          <Button 
-            className='w-[96px] text-sm font-medium' 
+          <Button
+            className='w-[96px] text-sm font-medium'
            onClick={onCancel}
            type='primary'
          >
@@ -42,4 +48,4 @@ const InvitedModal = ({
  )
 }

-export default InvitedModal
+export default InvitedModal
--- 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
@@ -0,0 +1,63 @@
+'use client'
+import React, { useCallback, useEffect, useState } from 'react'
+import { t } from 'i18next'
+import s from './index.module.css'
+import Tooltip from '@/app/components/base/tooltip'
+import useCopyToClipboard from '@/hooks/use-copy-to-clipboard'
+
+type IInvitationLinkProps = {
+  value?: string
+}
+
+const InvitationLink = ({
+  value = '',
+}: IInvitationLinkProps) => {
+  const [isCopied, setIsCopied] = useState(false)
+  const [_, copy] = useCopyToClipboard()
+
+  const copyHandle = useCallback(() => {
+    copy(value)
+    setIsCopied(true)
+  }, [value, copy])
+
+  useEffect(() => {
+    if (isCopied) {
+      const timeout = setTimeout(() => {
+        setIsCopied(false)
+      }, 1000)
+
+      return () => {
+        clearTimeout(timeout)
+      }
+    }
+  }, [isCopied])
+
+  return (
+    <div className='flex rounded-lg bg-gray-100 hover:bg-gray-100 border border-gray-200 py-2 items-center'>
+      <div className="flex items-center flex-grow h-5">
+        <div className='flex-grow bg-gray-100 text-[13px] relative h-full'>
+          <Tooltip
+            selector="top-uniq"
+            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>
+          </Tooltip>
+        </div>
+        <div className="flex-shrink-0 h-4 bg-gray-200 border" />
+        <Tooltip
+          selector="top-uniq"
+          content={isCopied ? `${t('appApi.copied')}` : `${t('appApi.copy')}`}
+          className='z-10'
+        >
+          <div className="px-0.5 flex-shrink-0">
+            <div className={`box-border w-[30px] h-[30px] flex items-center justify-center rounded-lg hover:bg-gray-100 cursor-pointer ${s.copyIcon} ${isCopied ? s.copied : ''}`} onClick={copyHandle}>
+            </div>
+          </div>
+        </Tooltip>
+      </div>
+    </div>
+  )
+}
+
+export default InvitationLink