wip: update invite logic

web/app/activate/activateForm.tsx

@@ -3,16 +3,10 @@ import { useCallback, useState } from 'react'
 import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
-import { useSearchParams } from 'next/navigation'
-import Link from 'next/link'
-import { CheckCircleIcon } from '@heroicons/react/24/solid'
-import style from './style.module.css'
+import { useRouter, useSearchParams } from 'next/navigation'
 import cn from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 
-import { SimpleSelect } from '@/app/components/base/select'
-import { timezones } from '@/utils/timezone'
-import { LanguagesSupported, languages } from '@/i18n/language'
 import { activateMember, invitationCheck } from '@/service/common'
 import Toast from '@/app/components/base/toast'
 import Loading from '@/app/components/base/loading'
@@ -20,6 +14,7 @@ import I18n from '@/context/i18n'
 const validPassword = /^(?=.*[a-zA-Z])(?=.*\d).{8,}$/
 
 const ActivateForm = () => {
+  const router = useRouter()
   const { t } = useTranslation()
   const { locale, setLocaleOnClient } = useContext(I18n)
   const searchParams = useSearchParams()
@@ -37,6 +32,10 @@ const ActivateForm = () => {
   }
   const { data: checkRes, mutate: recheck } = useSWR(checkParams, invitationCheck, {
     revalidateOnFocus: false,
+    onSuccess(data, key, config) {
+      if (data.is_valid)
+        router.replace(`/signin?space=${data.workspace_name}&email=${email}&token=${token}`)
+    },
   })
 
   const [name, setName] = useState('')
@@ -92,7 +91,6 @@ const ActivateForm = () => {
       recheck()
     }
   }, [email, language, name, password, recheck, setLocaleOnClient, timezone, token, valid, workspaceID])
-
   return (
     <div className={
       cn(
@@ -115,123 +113,6 @@ const ActivateForm = () => {
           </div>
         </div>
       )}
-      {checkRes && checkRes.is_valid && !showSuccess && (
-        <div className='flex flex-col md:w-[400px]'>
-          <div className="w-full mx-auto">
-            <div className={`mb-3 flex justify-center items-center w-20 h-20 p-5 rounded-[20px] border border-gray-100 shadow-lg text-[40px] font-bold ${style.logo}`}>
-            </div>
-            <h2 className="text-[32px] font-bold text-gray-900">
-              {`${t('login.join')} ${checkRes.workspace_name}`}
-            </h2>
-            <p className='mt-1 text-sm text-gray-600 '>
-              {`${t('login.joinTipStart')} ${checkRes.workspace_name} ${t('login.joinTipEnd')}`}
-            </p>
-          </div>
-
-          <div className="w-full mx-auto mt-6">
-            <div className="bg-white">
-              {/* username */}
-              <div className='mb-5'>
-                <label htmlFor="name" className="my-2 flex items-center justify-between text-sm font-medium text-gray-900">
-                  {t('login.name')}
-                </label>
-                <div className="mt-1 relative rounded-md shadow-sm">
-                  <input
-                    id="name"
-                    type="text"
-                    value={name}
-                    onChange={e => setName(e.target.value)}
-                    placeholder={t('login.namePlaceholder') || ''}
-                    className={'appearance-none block w-full rounded-lg pl-[14px] px-3 py-2 border border-gray-200 hover:border-gray-300 hover:shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 placeholder-gray-400 caret-primary-600 sm:text-sm pr-10'}
-                  />
-                </div>
-              </div>
-              {/* password */}
-              <div className='mb-5'>
-                <label htmlFor="password" className="my-2 flex items-center justify-between text-sm font-medium text-gray-900">
-                  {t('login.password')}
-                </label>
-                <div className="mt-1 relative rounded-md shadow-sm">
-                  <input
-                    id="password"
-                    type='password'
-                    value={password}
-                    onChange={e => setPassword(e.target.value)}
-                    placeholder={t('login.passwordPlaceholder') || ''}
-                    className={'appearance-none block w-full rounded-lg pl-[14px] px-3 py-2 border border-gray-200 hover:border-gray-300 hover:shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 placeholder-gray-400 caret-primary-600 sm:text-sm pr-10'}
-                  />
-                </div>
-                <div className='mt-1 text-xs text-gray-500'>{t('login.error.passwordInvalid')}</div>
-              </div>
-              {/* language */}
-              <div className='mb-5'>
-                <label htmlFor="name" className="my-2 flex items-center justify-between text-sm font-medium text-gray-900">
-                  {t('login.interfaceLanguage')}
-                </label>
-                <div className="relative mt-1 rounded-md shadow-sm">
-                  <SimpleSelect
-                    defaultValue={LanguagesSupported[0]}
-                    items={languages.filter(item => item.supported)}
-                    onSelect={(item) => {
-                      setLanguage(item.value as string)
-                    }}
-                  />
-                </div>
-              </div>
-              {/* timezone */}
-              <div className='mb-4'>
-                <label htmlFor="timezone" className="block text-sm font-medium text-gray-700">
-                  {t('login.timezone')}
-                </label>
-                <div className="relative mt-1 rounded-md shadow-sm">
-                  <SimpleSelect
-                    defaultValue={timezone}
-                    items={timezones}
-                    onSelect={(item) => {
-                      setTimezone(item.value as string)
-                    }}
-                  />
-                </div>
-              </div>
-              <div>
-                <Button
-                  variant='primary'
-                  className='w-full !text-sm'
-                  onClick={handleActivate}
-                >
-                  {`${t('login.join')} ${checkRes.workspace_name}`}
-                </Button>
-              </div>
-              <div className="block w-hull mt-2 text-xs text-gray-600">
-                {t('login.license.tip')}
-                &nbsp;
-                <Link
-                  className='text-primary-600'
-                  target='_blank' rel='noopener noreferrer'
-                  href={`https://docs.dify.ai/${language !== LanguagesSupported[1] ? 'user-agreement' : `v/${locale.toLowerCase()}/policies`}/open-source`}
-                >{t('login.license.link')}</Link>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-      {checkRes && checkRes.is_valid && showSuccess && (
-        <div className="flex flex-col md:w-[400px]">
-          <div className="w-full mx-auto">
-            <div className="mb-3 flex justify-center items-center w-20 h-20 p-5 rounded-[20px] border border-gray-100 shadow-lg text-[40px] font-bold">
-              <CheckCircleIcon className='w-10 h-10 text-[#039855]' />
-            </div>
-            <h2 className="text-[32px] font-bold text-gray-900">
-              {`${t('login.activatedTipStart')} ${checkRes.workspace_name} ${t('login.activatedTipEnd')}`}
-            </h2>
-          </div>
-          <div className="w-full mx-auto mt-6">
-            <Button variant='primary' className='w-full !text-sm'>
-              <a href="/signin">{t('login.activated')}</a>
-            </Button>
-          </div>
-        </div>
-      )}
     </div>
   )
 }

web/app/signin/components/mail-and-code-auth.tsx

@@ -1,20 +1,33 @@
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useSearchParams } from 'next/navigation'
 import Input from '@/app/components/base/input'
 import Button from '@/app/components/base/button'
 import { emailRegex } from '@/config'
 import Toast from '@/app/components/base/toast'
 
-export default function MailAndCodeAuth() {
+type MailAndCodeAuthProps = {
+  isInvite: boolean
+}
+
+export default function MailAndCodeAuth({ isInvite }: MailAndCodeAuthProps) {
   const { t } = useTranslation()
-  const [email, setEmail] = useState('')
+  const searchParams = useSearchParams()
+  const emailFromLink = searchParams.get('email') as string
+  const [email, setEmail] = useState(isInvite ? emailFromLink : '')
 
   const handleGetEMailVerificationCode = async () => {
+    if (!email) {
+      Toast.notify({ type: 'error', message: t('login.error.emailEmpty') })
+      return
+    }
+
     if (!emailRegex.test(email)) {
       Toast.notify({
         type: 'error',
         message: t('login.error.emailInValid'),
       })
+      return
     }
     window.location.href = '/signin/check-code'
   }

web/app/signin/components/mail-and-password-auth.tsx

@@ -2,19 +2,30 @@ import Link from 'next/link'
 import router from 'next/router'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useSearchParams } from 'next/navigation'
 import Button from '@/app/components/base/button'
 import Toast from '@/app/components/base/toast'
 import { emailRegex } from '@/config'
 import { login } from '@/service/common'
 
-export default function MailAndPasswordAuth() {
+type MailAndPasswordAuthProps = {
+  isInvite: boolean
+}
+
+export default function MailAndPasswordAuth({ isInvite }: MailAndPasswordAuthProps) {
   const { t } = useTranslation()
+  const searchParams = useSearchParams()
   const [showPassword, setShowPassword] = useState(false)
-  const [email, setEmail] = useState('')
+  const emailFromLink = searchParams.get('email') as string
+  const [email, setEmail] = useState(isInvite ? emailFromLink : '')
   const [password, setPassword] = useState('')
 
   const [isLoading, setIsLoading] = useState(false)
   const handleEmailPasswordLogin = async () => {
+    if (!email) {
+      Toast.notify({ type: 'error', message: t('login.error.emailEmpty') })
+      return
+    }
     if (!emailRegex.test(email)) {
       Toast.notify({
         type: 'error',
@@ -57,6 +68,8 @@ export default function MailAndPasswordAuth() {
         <input
           value={email}
           onChange={e => setEmail(e.target.value)}
+          disabled={isInvite}
+          readOnly={isInvite}
           id="email"
           type="email"
           autoComplete="email"

web/app/signin/normalForm.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Link from 'next/link'
+import { useSearchParams } from 'next/navigation'
 import Loading from '../components/base/loading'
 import MailAndCodeAuth from './components/mail-and-code-auth'
 import MailAndPasswordAuth from './components/mail-and-password-auth'
@@ -15,11 +16,17 @@ type AuthType = 'password' | 'code' | 'sso' | 'social'
 
 const NormalForm = () => {
   const { t } = useTranslation()
+  const searchParams = useSearchParams()
+  const token = searchParams.get('token')
+  const email = searchParams.get('email') || ''
+  const spaceName = searchParams.get('space') || ''
   const [isLoading, setIsLoading] = useState(true)
   const [systemFeatures, setSystemFeatures] = useState(defaultSystemFeatures)
   const [authType, updateAuthType] = useState('code')
   const [enabledAuthType, updateEnabledAuthType] = useState<AuthType[]>(['password', 'code', 'sso', 'social'])
 
+  const isInviteLink = Boolean(token && token !== 'null')
+
   const shouldShowORLine = (enabledAuthType.includes('code') || enabledAuthType.includes('password')) && (enabledAuthType.includes('social') || enabledAuthType.includes('sso'))
 
   useEffect(() => {
@@ -43,12 +50,16 @@ const NormalForm = () => {
 
   return (
     <>
-      <div className="w-full mx-auto">
-        <h2 className="text-2xl font-bold text-gray-900">{t('login.pageTitle')}</h2>
-        <p className='mt-1 text-sm text-gray-600'>{t('login.welcome')}</p>
-      </div>
-
       <div className="w-full mx-auto mt-8">
+        {token
+          ? <div className="w-full mx-auto">
+            <h2 className="text-2xl font-bold text-gray-900">{t('login.join')}{spaceName}</h2>
+            <p className='mt-1 text-sm text-gray-600'>{t('login.joinTipStart')}{spaceName}{t('login.joinTipEnd')}</p>
+          </div>
+          : <div className="w-full mx-auto">
+            <h2 className="text-2xl font-bold text-gray-900">{t('login.pageTitle')}</h2>
+            <p className='mt-1 text-sm text-gray-600'>{t('login.welcome')}</p>
+          </div>}
         <div className="bg-white ">
           <div className="flex flex-col gap-3 mt-6">
             {enabledAuthType.includes('social') && <SocialAuth />}
@@ -66,13 +77,13 @@ const NormalForm = () => {
             </div>
           </div>}
           {enabledAuthType.includes('code') && authType === 'code' && <>
-            <MailAndCodeAuth />
+            <MailAndCodeAuth isInvite={isInviteLink} />
             {enabledAuthType.includes('password') && <div className='cursor-pointer py-1 text-center' onClick={() => { updateAuthType('password') }}>
               <span className='text-xs text-components-button-secondary-accent-text'>{t('login.usePassword')}</span>
             </div>}
           </>}
           {enabledAuthType.includes('password') && authType === 'password' && <>
-            <MailAndPasswordAuth />
+            <MailAndPasswordAuth isInvite={isInviteLink} />
             {enabledAuthType.includes('code') && <div className='cursor-pointer py-1 text-center' onClick={() => { updateAuthType('code') }}>
               <span className='text-xs text-components-button-secondary-accent-text'>{t('login.useVerificationCode')}</span>
             </div>}

web/app/signin/page.tsx

@@ -8,17 +8,20 @@ const SignIn = () => {
   const router = useRouter()
   const searchParams = useSearchParams()
   const consoleToken = searchParams.get('console_token')
-  const invitationCode = searchParams.get('invitation_code')
+  const invitationToken = searchParams.get('token')
+  const step = searchParams.get('step')
   useEffect(() => {
+    if (invitationToken || step)
+      return
+
     if (consoleToken) {
       localStorage.setItem('console_token', consoleToken)
-      if (!invitationCode)
-        router.replace('/apps')
+      router.replace('/apps')
     }
-  }, [consoleToken, invitationCode, router])
-  if (!consoleToken)
+  }, [consoleToken, invitationToken, router, step])
+  if (invitationToken || !consoleToken)
     return <NormalForm />
-  else if (invitationCode)
+  if (step === 'next')
     return <OneMoreStep />
   return null
 }