dify

2025-12-01 17:21:38 +08:00
parent 32fee2b8ab
commit fab8c13cb3
7511 changed files with 996300 additions and 0 deletions
--- a/dify/web/app/signup/check-code/page.tsx
+++ b/dify/web/app/signup/check-code/page.tsx
@@ -0,0 +1,110 @@
+'use client'
+import { RiArrowLeftLine, RiMailSendFill } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { useState } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { useContext } from 'use-context-selector'
+import Countdown from '@/app/components/signin/countdown'
+import Button from '@/app/components/base/button'
+import Input from '@/app/components/base/input'
+import Toast from '@/app/components/base/toast'
+import I18NContext from '@/context/i18n'
+import type { MailSendResponse, MailValidityResponse } from '@/service/use-common'
+import { useMailValidity, useSendMail } from '@/service/use-common'
+
+export default function CheckCode() {
+  const { t } = useTranslation()
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const email = decodeURIComponent(searchParams.get('email') as string)
+  const [token, setToken] = useState(decodeURIComponent(searchParams.get('token') as string))
+  const [code, setVerifyCode] = useState('')
+  const [loading, setIsLoading] = useState(false)
+  const { locale } = useContext(I18NContext)
+  const { mutateAsync: submitMail } = useSendMail()
+  const { mutateAsync: verifyCode } = useMailValidity()
+
+  const verify = async () => {
+    try {
+      if (!code.trim()) {
+        Toast.notify({
+          type: 'error',
+          message: t('login.checkCode.emptyCode'),
+        })
+        return
+      }
+      if (!/\d{6}/.test(code)) {
+        Toast.notify({
+          type: 'error',
+          message: t('login.checkCode.invalidCode'),
+        })
+        return
+      }
+      setIsLoading(true)
+      const res = await verifyCode({ email, code, token })
+      console.log(res)
+      if ((res as MailValidityResponse).is_valid) {
+        const params = new URLSearchParams(searchParams)
+        params.set('token', encodeURIComponent((res as MailValidityResponse).token))
+        router.push(`/signup/set-password?${params.toString()}`)
+      }
+      else {
+        Toast.notify({
+          type: 'error',
+          message: t('login.checkCode.invalidCode'),
+        })
+      }
+    }
+    catch (error) { console.error(error) }
+    finally {
+      setIsLoading(false)
+    }
+  }
+
+  const resendCode = async () => {
+    try {
+      const res = await submitMail({ email, language: locale })
+      if ((res as MailSendResponse).result === 'success') {
+        const params = new URLSearchParams(searchParams)
+        const newToken = (res as MailSendResponse)?.data
+        params.set('token', encodeURIComponent(newToken))
+        setToken(newToken)
+        router.replace(`/signup/check-code?${params.toString()}`)
+      }
+    }
+    catch (error) { console.error(error) }
+  }
+
+  return <div className='flex flex-col gap-3'>
+    <div className='inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge shadow-lg'>
+      <RiMailSendFill className='h-6 w-6 text-2xl text-text-accent-light-mode-only' />
+    </div>
+    <div className='pb-4 pt-2'>
+      <h2 className='title-4xl-semi-bold text-text-primary'>{t('login.checkCode.checkYourEmail')}</h2>
+      <p className='body-md-regular mt-2 text-text-secondary'>
+        <span>
+          {t('login.checkCode.tipsPrefix')}
+          <strong>{email}</strong>
+        </span>
+        <br />
+        {t('login.checkCode.validTime')}
+      </p>
+    </div>
+
+    <form action="">
+      <label htmlFor="code" className='system-md-semibold mb-1 text-text-secondary'>{t('login.checkCode.verificationCode')}</label>
+      <Input value={code} onChange={e => setVerifyCode(e.target.value)} maxLength={6} className='mt-1' placeholder={t('login.checkCode.verificationCodePlaceholder') as string} />
+      <Button loading={loading} disabled={loading} className='my-3 w-full' variant='primary' onClick={verify}>{t('login.checkCode.verify')}</Button>
+      <Countdown onResend={resendCode} />
+    </form>
+    <div className='py-2'>
+      <div className='h-px bg-gradient-to-r from-background-gradient-mask-transparent via-divider-regular to-background-gradient-mask-transparent'></div>
+    </div>
+    <div onClick={() => router.back()} className='flex h-9 cursor-pointer items-center justify-center text-text-tertiary'>
+      <div className='bg-background-default-dimm inline-block rounded-full p-1'>
+        <RiArrowLeftLine size={12} />
+      </div>
+      <span className='system-xs-regular ml-2'>{t('login.back')}</span>
+    </div>
+  </div>
+}
--- a/dify/web/app/signup/components/input-mail.tsx
+++ b/dify/web/app/signup/components/input-mail.tsx
@@ -0,0 +1,102 @@
+'use client'
+import { noop } from 'lodash-es'
+import Input from '@/app/components/base/input'
+import { useTranslation } from 'react-i18next'
+import { useContext } from 'use-context-selector'
+import { useCallback, useState } from 'react'
+import Button from '@/app/components/base/button'
+import { emailRegex } from '@/config'
+import Toast from '@/app/components/base/toast'
+import type { MailSendResponse } from '@/service/use-common'
+import { useSendMail } from '@/service/use-common'
+import I18n from '@/context/i18n'
+import Split from '@/app/signin/split'
+import Link from 'next/link'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+
+type Props = {
+  onSuccess: (email: string, payload: string) => void
+}
+export default function Form({
+  onSuccess,
+}: Props) {
+  const { t } = useTranslation()
+  const [email, setEmail] = useState('')
+  const { locale } = useContext(I18n)
+  const { systemFeatures } = useGlobalPublicStore()
+
+  const { mutateAsync: submitMail, isPending } = useSendMail()
+
+  const handleSubmit = useCallback(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
+    }
+    const res = await submitMail({ email, language: locale })
+    if((res as MailSendResponse).result === 'success')
+      onSuccess(email, (res as MailSendResponse).data)
+  }, [email, locale, submitMail, t])
+
+  return <form onSubmit={noop}>
+    <div className='mb-3'>
+      <label htmlFor="email" className="system-md-semibold my-2 text-text-secondary">
+        {t('login.email')}
+      </label>
+      <div className="mt-1">
+        <Input
+          value={email}
+          onChange={e => setEmail(e.target.value)}
+          id="email"
+          type="email"
+          autoComplete="email"
+          placeholder={t('login.emailPlaceholder') || ''}
+          tabIndex={1}
+        />
+      </div>
+    </div>
+    <div className='mb-2'>
+      <Button
+        tabIndex={2}
+        variant='primary'
+        onClick={handleSubmit}
+        disabled={isPending || !email}
+        className="w-full"
+      >{t('login.signup.verifyMail')}</Button>
+    </div>
+    <Split className='mb-5 mt-4' />
+
+    <div className='text-[13px] font-medium leading-4 text-text-secondary'>
+      <span>{t('login.signup.haveAccount')}</span>
+      <Link
+        className='text-text-accent'
+        href='/signin'
+      >{t('login.signup.signIn')}</Link>
+    </div>
+
+    {!systemFeatures.branding.enabled && <>
+      <div className="system-xs-regular mt-3 block w-full text-text-tertiary">
+        {t('login.tosDesc')}
+              &nbsp;
+        <Link
+          className='system-xs-medium text-text-secondary hover:underline'
+          target='_blank' rel='noopener noreferrer'
+          href='https://dify.ai/terms'
+        >{t('login.tos')}</Link>
+              &nbsp;&&nbsp;
+        <Link
+          className='system-xs-medium text-text-secondary hover:underline'
+          target='_blank' rel='noopener noreferrer'
+          href='https://dify.ai/privacy'
+        >{t('login.pp')}</Link>
+      </div>
+    </>}
+
+  </form>
+}
--- a/dify/web/app/signup/layout.tsx
+++ b/dify/web/app/signup/layout.tsx
@@ -0,0 +1,26 @@
+'use client'
+import Header from '@/app/signin/_header'
+
+import cn from '@/utils/classnames'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+import useDocumentTitle from '@/hooks/use-document-title'
+
+export default function RegisterLayout({ children }: any) {
+  const { systemFeatures } = useGlobalPublicStore()
+  useDocumentTitle('')
+  return <>
+    <div className={cn('flex min-h-screen w-full justify-center bg-background-default-burn p-6')}>
+      <div className={cn('flex w-full shrink-0 flex-col items-center rounded-2xl border border-effects-highlight bg-background-default-subtle')}>
+        <Header />
+        <div className={cn('flex w-full grow flex-col items-center justify-center px-6 md:px-[108px]')}>
+          <div className='flex flex-col md:w-[400px]'>
+            {children}
+          </div>
+        </div>
+        {systemFeatures.branding.enabled === false && <div className='system-xs-regular px-8 py-6 text-text-tertiary'>
+          © {new Date().getFullYear()} LangGenius, Inc. All rights reserved.
+        </div>}
+      </div>
+    </div>
+  </>
+}
--- a/dify/web/app/signup/page.tsx
+++ b/dify/web/app/signup/page.tsx
@@ -0,0 +1,30 @@
+'use client'
+import { useCallback } from 'react'
+import MailForm from './components/input-mail'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { useTranslation } from 'react-i18next'
+
+const Signup = () => {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const { t } = useTranslation()
+
+  const handleInputMailSubmitted = useCallback((email: string, result: string) => {
+    const params = new URLSearchParams(searchParams)
+    params.set('token', encodeURIComponent(result))
+    params.set('email', encodeURIComponent(email))
+    router.push(`/signup/check-code?${params.toString()}`)
+  }, [router, searchParams])
+
+  return (
+    <div className="mx-auto mt-8 w-full">
+      <div className="mx-auto mb-10 w-full">
+        <h2 className="title-4xl-semi-bold text-text-primary">{t('login.signup.createAccount')}</h2>
+        <p className='body-md-regular mt-2 text-text-tertiary'>{t('login.signup.welcome')}</p>
+      </div>
+      <MailForm onSuccess={handleInputMailSubmitted} />
+    </div>
+  )
+}
+
+export default Signup
--- a/dify/web/app/signup/set-password/page.tsx
+++ b/dify/web/app/signup/set-password/page.tsx
@@ -0,0 +1,138 @@
+'use client'
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useRouter, useSearchParams } from 'next/navigation'
+import cn from 'classnames'
+import Button from '@/app/components/base/button'
+import Toast from '@/app/components/base/toast'
+import Input from '@/app/components/base/input'
+import { validPassword } from '@/config'
+import type { MailRegisterResponse } from '@/service/use-common'
+import { useMailRegister } from '@/service/use-common'
+
+const ChangePasswordForm = () => {
+  const { t } = useTranslation()
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const token = decodeURIComponent(searchParams.get('token') || '')
+
+  const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const { mutateAsync: register, isPending } = useMailRegister()
+
+  const showErrorMessage = useCallback((message: string) => {
+    Toast.notify({
+      type: 'error',
+      message,
+    })
+  }, [])
+
+  const valid = useCallback(() => {
+    if (!password.trim()) {
+      showErrorMessage(t('login.error.passwordEmpty'))
+      return false
+    }
+    if (!validPassword.test(password)) {
+      showErrorMessage(t('login.error.passwordInvalid'))
+      return false
+    }
+    if (password !== confirmPassword) {
+      showErrorMessage(t('common.account.notEqual'))
+      return false
+    }
+    return true
+  }, [password, confirmPassword, showErrorMessage, t])
+
+  const handleSubmit = useCallback(async () => {
+    if (!valid())
+      return
+    try {
+      const res = await register({
+        token,
+        new_password: password,
+        password_confirm: confirmPassword,
+      })
+      const { result } = res as MailRegisterResponse
+      if (result === 'success') {
+        Toast.notify({
+          type: 'success',
+          message: t('common.api.actionSuccess'),
+        })
+        router.replace('/apps')
+      }
+    }
+    catch (error) {
+      console.error(error)
+    }
+  }, [password, token, valid, confirmPassword, register])
+
+  return (
+    <div className={
+      cn(
+        'flex w-full grow flex-col items-center justify-center',
+        'px-6',
+        'md:px-[108px]',
+      )
+    }>
+      <div className='flex flex-col md:w-[400px]'>
+        <div className="mx-auto w-full">
+          <h2 className="title-4xl-semi-bold text-text-primary">
+            {t('login.changePassword')}
+          </h2>
+          <p className='body-md-regular mt-2 text-text-secondary'>
+            {t('login.changePasswordTip')}
+          </p>
+        </div>
+
+        <div className="mx-auto mt-6 w-full">
+          <div>
+            {/* Password */}
+            <div className='mb-5'>
+              <label htmlFor="password" className="system-md-semibold my-2 text-text-secondary">
+                {t('common.account.newPassword')}
+              </label>
+              <div className='relative mt-1'>
+                <Input
+                  id="password"
+                  type='password'
+                  value={password}
+                  onChange={e => setPassword(e.target.value)}
+                  placeholder={t('login.passwordPlaceholder') || ''}
+                />
+
+              </div>
+              <div className='body-xs-regular mt-1 text-text-secondary'>{t('login.error.passwordInvalid')}</div>
+            </div>
+            {/* Confirm Password */}
+            <div className='mb-5'>
+              <label htmlFor="confirmPassword" className="system-md-semibold my-2 text-text-secondary">
+                {t('common.account.confirmPassword')}
+              </label>
+              <div className='relative mt-1'>
+                <Input
+                  id="confirmPassword"
+                  type='password'
+                  value={confirmPassword}
+                  onChange={e => setConfirmPassword(e.target.value)}
+                  placeholder={t('login.confirmPasswordPlaceholder') || ''}
+                />
+              </div>
+            </div>
+            <div>
+              <Button
+                variant='primary'
+                className='w-full'
+                onClick={handleSubmit}
+                disabled={isPending || !password || !confirmPassword}
+              >
+                {t('login.changePasswordBtn')}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ChangePasswordForm