diff --git a/web/app/(shareLayout)/webapp-signin/components/mail-and-code-auth.tsx b/web/app/(shareLayout)/webapp-signin/components/mail-and-code-auth.tsx index 29af3e3a57..107442761a 100644 --- a/web/app/(shareLayout)/webapp-signin/components/mail-and-code-auth.tsx +++ b/web/app/(shareLayout)/webapp-signin/components/mail-and-code-auth.tsx @@ -60,7 +60,7 @@ export default function MailAndCodeAuth() { setEmail(e.target.value)} />
- +
diff --git a/web/app/reset-password/page.tsx b/web/app/reset-password/page.tsx index 8a9bf78eb9..11dfd07e5c 100644 --- a/web/app/reset-password/page.tsx +++ b/web/app/reset-password/page.tsx @@ -47,12 +47,6 @@ export default function CheckCode() { params.set('email', encodeURIComponent(email)) router.push(`/reset-password/check-code?${params.toString()}`) } - else if (res.code === 'account_not_found') { - Toast.notify({ - type: 'error', - message: t('login.error.registrationNotAllowed'), - }) - } else { Toast.notify({ type: 'error', diff --git a/web/app/signin/components/mail-and-code-auth.tsx b/web/app/signin/components/mail-and-code-auth.tsx index 3ad57de855..35fd5855ca 100644 --- a/web/app/signin/components/mail-and-code-auth.tsx +++ b/web/app/signin/components/mail-and-code-auth.tsx @@ -64,7 +64,7 @@ export default function MailAndCodeAuth({ isInvite }: MailAndCodeAuthProps) { setEmail(e.target.value)} />
- +
diff --git a/web/app/signin/components/mail-and-password-auth.tsx b/web/app/signin/components/mail-and-password-auth.tsx index b7e010e2fd..ca8a481feb 100644 --- a/web/app/signin/components/mail-and-password-auth.tsx +++ b/web/app/signin/components/mail-and-password-auth.tsx @@ -47,13 +47,7 @@ export default function MailAndPasswordAuth({ isInvite, isEmailSetup, allowRegis Toast.notify({ type: 'error', message: t('login.error.passwordEmpty') }) return } - if (!passwordRegex.test(password)) { - Toast.notify({ - type: 'error', - message: t('login.error.passwordInvalid'), - }) - return - } + try { setIsLoading(true) const loginData: Record = { @@ -79,19 +73,11 @@ export default function MailAndPasswordAuth({ isInvite, isEmailSetup, allowRegis router.replace(redirectUrl || '/apps') } } - else if (res.code === 'account_not_found') { - if (allowRegistration) { - const params = new URLSearchParams() - params.append('email', encodeURIComponent(email)) - params.append('token', encodeURIComponent(res.data)) - router.replace(`/reset-password/check-code?${params.toString()}`) - } - else { - Toast.notify({ - type: 'error', - message: t('login.error.registrationNotAllowed'), - }) - } + else if (res.code === 'authentication_failed') { + Toast.notify({ + type: 'error', + message: t('login.error.invalidEmailOrPassword'), + }) } else { Toast.notify({ diff --git a/web/app/signin/normal-form.tsx b/web/app/signin/normal-form.tsx index 3d20b72c5f..a5a30a0cdd 100644 --- a/web/app/signin/normal-form.tsx +++ b/web/app/signin/normal-form.tsx @@ -15,6 +15,7 @@ import Toast from '@/app/components/base/toast' import { IS_CE_EDITION } from '@/config' import { useGlobalPublicStore } from '@/context/global-public-context' import { resolvePostLoginRedirect } from './utils/post-login-redirect' +import Split from './split' const NormalForm = () => { const { t } = useTranslation() @@ -166,8 +167,19 @@ const NormalForm = () => { {t('login.useVerificationCode')} } } + } + + {systemFeatures.is_allow_register && authType === 'password' && ( +
+ {t('login.signup.noAccount')} + {t('login.signup.signUp')} +
+ )} {allMethodsAreDisabled && <>
@@ -207,7 +219,6 @@ const NormalForm = () => { >{t('login.setAdminAccount')}
} } -
diff --git a/web/app/signin/split.tsx b/web/app/signin/split.tsx new file mode 100644 index 0000000000..504e58d412 --- /dev/null +++ b/web/app/signin/split.tsx @@ -0,0 +1,19 @@ +'use client' +import type { FC } from 'react' +import React from 'react' +import cn from '@/utils/classnames' + +type Props = { + className?: string +} + +const Split: FC = ({ + className, +}) => { + return ( +
+
+ ) +} +export default React.memo(Split) diff --git a/web/app/signup/check-code/page.tsx b/web/app/signup/check-code/page.tsx new file mode 100644 index 0000000000..159965908b --- /dev/null +++ b/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
+
+ +
+
+

{t('login.checkCode.checkYourEmail')}

+

+ + {t('login.checkCode.tipsPrefix')} + {email} + +
+ {t('login.checkCode.validTime')} +

+
+ +
+ + setVerifyCode(e.target.value)} max-length={6} className='mt-1' placeholder={t('login.checkCode.verificationCodePlaceholder') as string} /> + + + +
+
+
+
router.back()} className='flex h-9 cursor-pointer items-center justify-center text-text-tertiary'> +
+ +
+ {t('login.back')} +
+
+} diff --git a/web/app/signup/components/input-mail.tsx b/web/app/signup/components/input-mail.tsx new file mode 100644 index 0000000000..4b0b0ec0b1 --- /dev/null +++ b/web/app/signup/components/input-mail.tsx @@ -0,0 +1,102 @@ +'use client' +import { noop } from 'lodash' +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
+
+ +
+ setEmail(e.target.value)} + id="email" + type="email" + autoComplete="email" + placeholder={t('login.emailPlaceholder') || ''} + tabIndex={1} + /> +
+
+
+ +
+ + +
+ {t('login.signup.haveAccount')} + {t('login.signup.signIn')} +
+ + {!systemFeatures.branding.enabled && <> +
+ {t('login.tosDesc')} +   + {t('login.tos')} +  &  + {t('login.pp')} +
+ } + + +} diff --git a/web/app/signup/layout.tsx b/web/app/signup/layout.tsx new file mode 100644 index 0000000000..c5d39ac07a --- /dev/null +++ b/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 <> +
+
+
+
+
+ {children} +
+
+ {systemFeatures.branding.enabled === false &&
+ © {new Date().getFullYear()} LangGenius, Inc. All rights reserved. +
} +
+
+ +} diff --git a/web/app/signup/page.tsx b/web/app/signup/page.tsx new file mode 100644 index 0000000000..d410f5c085 --- /dev/null +++ b/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 ( +
+
+

{t('login.signup.createAccount')}

+

{t('login.signup.welcome')}

+
+ +
+ ) +} + +export default Signup diff --git a/web/app/signup/set-password/page.tsx b/web/app/signup/set-password/page.tsx new file mode 100644 index 0000000000..a85d1199d7 --- /dev/null +++ b/web/app/signup/set-password/page.tsx @@ -0,0 +1,140 @@ +'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, data } = res as MailRegisterResponse + if (result === 'success') { + Toast.notify({ + type: 'success', + message: t('common.api.actionSuccess'), + }) + localStorage.setItem('console_token', data.access_token) + localStorage.setItem('refresh_token', data.refresh_token) + router.replace('/apps') + } + } + catch (error) { + console.error(error) + } + }, [password, token, valid, confirmPassword, register]) + + return ( +
+
+
+

+ {t('login.changePassword')} +

+

+ {t('login.changePasswordTip')} +

+
+ +
+
+ {/* Password */} +
+ +
+ setPassword(e.target.value)} + placeholder={t('login.passwordPlaceholder') || ''} + /> + +
+
{t('login.error.passwordInvalid')}
+
+ {/* Confirm Password */} +
+ +
+ setConfirmPassword(e.target.value)} + placeholder={t('login.confirmPasswordPlaceholder') || ''} + /> +
+
+
+ +
+
+
+
+
+ ) +} + +export default ChangePasswordForm diff --git a/web/i18n/en-US/login.ts b/web/i18n/en-US/login.ts index a00e73b901..6015098022 100644 --- a/web/i18n/en-US/login.ts +++ b/web/i18n/en-US/login.ts @@ -1,6 +1,6 @@ const translation = { - pageTitle: 'Hey, let\'s get started!', - welcome: '👋 Welcome to Dify, please log in to continue.', + pageTitle: 'Log in to Dify', + welcome: '👋 Welcome! Please log in to get started.', email: 'Email address', emailPlaceholder: 'Your email', password: 'Password', @@ -62,6 +62,7 @@ const translation = { passwordLengthInValid: 'Password must be at least 8 characters', passwordInvalid: 'Password must contain letters and numbers, and the length must be greater than 8', registrationNotAllowed: 'Account not found. Please contact the system admin to register.', + invalidEmailOrPassword: 'Invalid email or password.', }, license: { tip: 'Before starting Dify Community Edition, read the GitHub', @@ -110,6 +111,15 @@ const translation = { noLoginMethodTip: 'Please contact the system admin to add an authentication method.', disabled: 'Webapp authentication is disabled. Please contact the system admin to enable it. You can try to use the app directly.', }, + signup: { + noAccount: 'Don’t have an account? ', + signUp: 'Sign Up', + createAccount: 'Create your account', + welcome: '👋 Welcome! Please fill in the details to get started.', + verifyMail: 'Continue with verification code', + haveAccount: 'Already have an account? ', + signIn: 'Sign In', + }, } export default translation diff --git a/web/i18n/ja-JP/login.ts b/web/i18n/ja-JP/login.ts index 7c116c4c18..3f2abbc7b3 100644 --- a/web/i18n/ja-JP/login.ts +++ b/web/i18n/ja-JP/login.ts @@ -1,6 +1,6 @@ const translation = { - pageTitle: 'はじめましょう！👋', - welcome: 'Dify へようこそ。続行するにはログインしてください。', + pageTitle: 'Dify にログイン', + welcome: '👋 ようこそ！まずはログインしてご利用ください。', email: 'メールアドレス', emailPlaceholder: 'メールアドレスを入力してください', password: 'パスワード', @@ -92,7 +92,7 @@ const translation = { withSSO: 'SSO を続行する', noLoginMethod: '認証方法が構成されていません', backToLogin: 'ログインに戻る', - continueWithCode: 'コードで続行', + continueWithCode: '認証コードで続行', noLoginMethodTip: 'システム管理者に連絡して、認証方法を追加してください。', usePassword: 'パスワードを使用', sendVerificationCode: '確認コードの送信', @@ -110,6 +110,15 @@ const translation = { noLoginMethodTip: 'システム管理者に連絡して、認証方法を追加してください。', disabled: 'Web アプリの認証が無効になっています。システム管理者に連絡して有効にしてください。直接アプリを使用してみてください。', }, + signup: { + noAccount: 'アカウントをお持ちでないですか？', + signUp: '新規登録', + createAccount: 'アカウントを作成', + welcome: '👋 ようこそ！ご利用を始めるために必要な情報をご入力ください。', + verifyMail: '認証コードで続行', + haveAccount: 'すでにアカウントをお持ちですか？', + signIn: 'ログインはこちら', + }, } export default translation diff --git a/web/i18n/zh-Hans/login.ts b/web/i18n/zh-Hans/login.ts index d0b2cbe8c5..82c6b355f9 100644 --- a/web/i18n/zh-Hans/login.ts +++ b/web/i18n/zh-Hans/login.ts @@ -1,6 +1,6 @@ const translation = { - pageTitle: '嗨，近来可好', - welcome: '👋 欢迎来到 Dify, 登录以继续', + pageTitle: '登录 Dify', + welcome: '👋 欢迎！请登录以开始使用。', email: '邮箱', emailPlaceholder: '输入邮箱地址', password: '密码', @@ -62,6 +62,7 @@ const translation = { passwordInvalid: '密码必须包含字母和数字，且长度不小于 8 位', passwordLengthInValid: '密码必须至少为 8 个字符', registrationNotAllowed: '账户不存在，请联系系统管理员注册账户', + invalidEmailOrPassword: '邮箱或密码错误', }, license: { tip: '启动 Dify 社区版之前，请阅读 GitHub 上的', @@ -110,6 +111,15 @@ const translation = { noLoginMethodTip: '请联系系统管理员添加身份认证方式', disabled: 'Web 应用身份认证已禁用，请联系系统管理员启用。您也可以尝试直接使用应用。', }, + signup: { + noAccount: '没有账户？', + signUp: '立即注册', + createAccount: '创建您的账户', + welcome: '👋 欢迎！请填写信息以开始使用。', + verifyMail: '发送验证码', + haveAccount: '已有账户？', + signIn: '立即登录', + }, } export default translation diff --git a/web/service/base.ts b/web/service/base.ts index 9621d21a27..0aaff26ef3 100644 --- a/web/service/base.ts +++ b/web/service/base.ts @@ -482,6 +482,12 @@ export const request = async(url: string, options = {}, otherOptions?: IOther return resp const errResp: Response = err as any if (errResp.status === 401) { + if(/\/login/.test(url)) { + const clonedResponse = errResp.clone() + const bodyJson = await clonedResponse.json() as Promise + return bodyJson + } + const [parseErr, errRespData] = await asyncRunSafe(errResp.json()) const loginUrl = `${globalThis.location.origin}${basePath}/signin` if (parseErr) { diff --git a/web/service/use-common.ts b/web/service/use-common.ts index d49f3803ac..4c5c19ae5d 100644 --- a/web/service/use-common.ts +++ b/web/service/use-common.ts @@ -26,3 +26,35 @@ export const useGenerateStructuredOutputRules = () => { }, }) } + +export type MailSendResponse = { data: string, result: string } +export const useSendMail = () => { + return useMutation({ + mutationKey: [NAME_SPACE, 'mail-send'], + mutationFn: (body: { email: string, language: string }) => { + return post('/email-register/send-email', { body }) + }, + }) +} + +export type MailValidityResponse = { is_valid: boolean, token: string } + +export const useMailValidity = () => { + return useMutation({ + mutationKey: [NAME_SPACE, 'mail-validity'], + mutationFn: (body: { email: string, code: string, token: string }) => { + return post('/email-register/validity', { body }) + }, + }) +} + +export type MailRegisterResponse = { result: string, data: { access_token: string, refresh_token: string } } + +export const useMailRegister = () => { + return useMutation({ + mutationKey: [NAME_SPACE, 'mail-register'], + mutationFn: (body: { token: string, new_password: string, password_confirm: string }) => { + return post('/email-register', { body }) + }, + }) +}