feat: add webapp login page and reset-password page

web/app/(shareLayout)/webapp-reset-password/check-code/page.tsx

@@ -0,0 +1,96 @@
+'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 { sendWebAppResetPasswordCode, verifyWebAppResetPasswordCode } from '@/service/common'
+import I18NContext from '@/context/i18n'
+
+export default function CheckCode() {
+  const { t } = useTranslation()
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const email = decodeURIComponent(searchParams.get('email') as string)
+  const token = decodeURIComponent(searchParams.get('token') as string)
+  const [code, setVerifyCode] = useState('')
+  const [loading, setIsLoading] = useState(false)
+  const { locale } = useContext(I18NContext)
+
+  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 ret = await verifyWebAppResetPasswordCode({ email, code, token })
+      if (ret.is_valid) {
+        const params = new URLSearchParams(searchParams)
+        params.set('token', encodeURIComponent(ret.token))
+        router.push(`/webapp-reset-password/set-password?${params.toString()}`)
+      }
+    }
+    catch (error) { console.error(error) }
+    finally {
+      setIsLoading(false)
+    }
+  }
+
+  const resendCode = async () => {
+    try {
+      const res = await sendWebAppResetPasswordCode(email, locale)
+      if (res.result === 'success') {
+        const params = new URLSearchParams(searchParams)
+        params.set('token', encodeURIComponent(res.data))
+        router.replace(`/webapp-reset-password/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 text-text-accent-light-mode-only shadow-lg'>
+      <RiMailSendFill className='h-6 w-6 text-2xl' />
+    </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 dangerouslySetInnerHTML={{ __html: t('login.checkCode.tips', { email }) as string }}></span>
+        <br />
+        {t('login.checkCode.validTime')}
+      </p>
+    </div>
+
+    <form action="">
+      <input type='text' className='hidden' />
+      <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)} max-length={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>
+}

web/app/(shareLayout)/webapp-reset-password/layout.tsx

@@ -0,0 +1,30 @@
+'use client'
+import Header from '@/app/signin/_header'
+
+import cn from '@/utils/classnames'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+
+export default function SignInLayout({ children }: any) {
+  const { systemFeatures } = useGlobalPublicStore()
+  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 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 && <div className='system-xs-regular px-8 py-6 text-text-tertiary'>
+          © {new Date().getFullYear()} LangGenius, Inc. All rights reserved.
+        </div>}
+      </div>
+    </div>
+  </>
+}

web/app/(shareLayout)/webapp-reset-password/page.tsx

@@ -0,0 +1,104 @@
+'use client'
+import Link from 'next/link'
+import { RiArrowLeftLine, RiLockPasswordLine } 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 { COUNT_DOWN_KEY, COUNT_DOWN_TIME_MS } from '@/app/components/signin/countdown'
+import { emailRegex } from '@/config'
+import Button from '@/app/components/base/button'
+import Input from '@/app/components/base/input'
+import Toast from '@/app/components/base/toast'
+import { sendResetPasswordCode } from '@/service/common'
+import I18NContext from '@/context/i18n'
+import { noop } from 'lodash-es'
+import useDocumentTitle from '@/hooks/use-document-title'
+
+export default function CheckCode() {
+  const { t } = useTranslation()
+  useDocumentTitle('')
+  const searchParams = useSearchParams()
+  const router = useRouter()
+  const [email, setEmail] = useState('')
+  const [loading, setIsLoading] = useState(false)
+  const { locale } = useContext(I18NContext)
+
+  const handleGetEMailVerificationCode = async () => {
+    try {
+      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
+      }
+      setIsLoading(true)
+      const res = await sendResetPasswordCode(email, locale)
+      if (res.result === 'success') {
+        localStorage.setItem(COUNT_DOWN_KEY, `${COUNT_DOWN_TIME_MS}`)
+        const params = new URLSearchParams(searchParams)
+        params.set('token', encodeURIComponent(res.data))
+        params.set('email', encodeURIComponent(email))
+        router.push(`/webapp-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',
+          message: res.data,
+        })
+      }
+    }
+    catch (error) {
+      console.error(error)
+    }
+    finally {
+      setIsLoading(false)
+    }
+  }
+
+  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'>
+      <RiLockPasswordLine 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.resetPassword')}</h2>
+      <p className='body-md-regular mt-2 text-text-secondary'>
+        {t('login.resetPasswordDesc')}
+      </p>
+    </div>
+
+    <form onSubmit={noop}>
+      <input type='text' className='hidden' />
+      <div className='mb-2'>
+        <label htmlFor="email" className='system-md-semibold my-2 text-text-secondary'>{t('login.email')}</label>
+        <div className='mt-1'>
+          <Input id='email' type="email" disabled={loading} value={email} placeholder={t('login.emailPlaceholder') as string} onChange={e => setEmail(e.target.value)} />
+        </div>
+        <div className='mt-3'>
+          <Button loading={loading} disabled={loading} variant='primary' className='w-full' onClick={handleGetEMailVerificationCode}>{t('login.sendVerificationCode')}</Button>
+        </div>
+      </div>
+    </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>
+    <Link href={`/webapp-signin?${searchParams.toString()}`} className='flex h-9 items-center justify-center text-text-tertiary hover:text-text-primary'>
+      <div className='inline-block rounded-full bg-background-default-dimmed p-1'>
+        <RiArrowLeftLine size={12} />
+      </div>
+      <span className='system-xs-regular ml-2'>{t('login.backToLogin')}</span>
+    </Link>
+  </div>
+}

web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx

@@ -0,0 +1,188 @@
+'use client'
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useRouter, useSearchParams } from 'next/navigation'
+import cn from 'classnames'
+import { RiCheckboxCircleFill } from '@remixicon/react'
+import { useCountDown } from 'ahooks'
+import Button from '@/app/components/base/button'
+import { changeWebAppPasswordWithToken } from '@/service/common'
+import Toast from '@/app/components/base/toast'
+import Input from '@/app/components/base/input'
+
+const validPassword = /^(?=.*[a-zA-Z])(?=.*\d).{8,}$/
+
+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 [showSuccess, setShowSuccess] = useState(false)
+  const [showPassword, setShowPassword] = useState(false)
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
+
+  const showErrorMessage = useCallback((message: string) => {
+    Toast.notify({
+      type: 'error',
+      message,
+    })
+  }, [])
+
+  const getSignInUrl = () => {
+    return `/webapp-signin?redirect_url=${searchParams.get('redirect_url') || ''}`
+  }
+
+  const AUTO_REDIRECT_TIME = 5000
+  const [leftTime, setLeftTime] = useState<number | undefined>(undefined)
+  const [countdown] = useCountDown({
+    leftTime,
+    onEnd: () => {
+      router.replace(getSignInUrl())
+    },
+  })
+
+  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 handleChangePassword = useCallback(async () => {
+    if (!valid())
+      return
+    try {
+      await changeWebAppPasswordWithToken({
+        url: '/forgot-password/resets',
+        body: {
+          token,
+          new_password: password,
+          password_confirm: confirmPassword,
+        },
+      })
+      setShowSuccess(true)
+      setLeftTime(AUTO_REDIRECT_TIME)
+    }
+    catch (error) {
+      console.error(error)
+    }
+  }, [password, token, valid, confirmPassword])
+
+  return (
+    <div className={
+      cn(
+        'flex w-full grow flex-col items-center justify-center',
+        'px-6',
+        'md:px-[108px]',
+      )
+    }>
+      {!showSuccess && (
+        <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 className="bg-white">
+              {/* 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={showPassword ? 'text' : 'password'}
+                    value={password}
+                    onChange={e => setPassword(e.target.value)}
+                    placeholder={t('login.passwordPlaceholder') || ''}
+                  />
+
+                  <div className="absolute inset-y-0 right-0 flex items-center">
+                    <Button
+                      type="button"
+                      variant='ghost'
+                      onClick={() => setShowPassword(!showPassword)}
+                    >
+                      {showPassword ? '👀' : '😝'}
+                    </Button>
+                  </div>
+                </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={showConfirmPassword ? 'text' : 'password'}
+                    value={confirmPassword}
+                    onChange={e => setConfirmPassword(e.target.value)}
+                    placeholder={t('login.confirmPasswordPlaceholder') || ''}
+                  />
+                  <div className="absolute inset-y-0 right-0 flex items-center">
+                    <Button
+                      type="button"
+                      variant='ghost'
+                      onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                    >
+                      {showConfirmPassword ? '👀' : '😝'}
+                    </Button>
+                  </div>
+                </div>
+              </div>
+              <div>
+                <Button
+                  variant='primary'
+                  className='w-full'
+                  onClick={handleChangePassword}
+                >
+                  {t('login.changePasswordBtn')}
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+      {showSuccess && (
+        <div className="flex flex-col md:w-[400px]">
+          <div className="mx-auto w-full">
+            <div className="mb-3 flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle font-bold shadow-lg">
+              <RiCheckboxCircleFill className='h-6 w-6 text-text-success' />
+            </div>
+            <h2 className="title-4xl-semi-bold text-text-primary">
+              {t('login.passwordChangedTip')}
+            </h2>
+          </div>
+          <div className="mx-auto mt-6 w-full">
+            <Button variant='primary' className='w-full' onClick={() => {
+              setLeftTime(undefined)
+              router.replace(getSignInUrl())
+            }}>{t('login.passwordChanged')} ({Math.round(countdown / 1000)}) </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default ChangePasswordForm

web/app/(shareLayout)/webapp-signin/check-code/page.tsx

@@ -8,7 +8,7 @@ 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 { emailLoginWithCode, sendEMailLoginCode } from '@/service/common'
+import { sendWebAppEMailLoginCode, webAppEmailLoginWithCode } from '@/service/common'
 import I18NContext from '@/context/i18n'
 import { checkOrSetAccessToken } from '@/app/components/share/utils'
 
@@ -56,7 +56,7 @@ export default function CheckCode() {
         return
       }
       setIsLoading(true)
-      const ret = await emailLoginWithCode({ email, code, token })
+      const ret = await webAppEmailLoginWithCode({ email, code, token })
       if (ret.result === 'success') {
         localStorage.setItem('webAppAccessToken', ret.data.access_token)
         await checkOrSetAccessToken()
@@ -71,7 +71,7 @@ export default function CheckCode() {
 
   const resendCode = async () => {
     try {
-      const ret = await sendEMailLoginCode(email, locale)
+      const ret = await sendWebAppEMailLoginCode(email, locale)
       if (ret.result === 'success') {
         const params = new URLSearchParams(searchParams)
         params.set('token', encodeURIComponent(ret.data))

web/app/(shareLayout)/webapp-signin/components/mail-and-code-auth.tsx

@@ -6,7 +6,7 @@ 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'
-import { sendEMailLoginCode } from '@/service/common'
+import { sendWebAppEMailLoginCode } from '@/service/common'
 import { COUNT_DOWN_KEY, COUNT_DOWN_TIME_MS } from '@/app/components/signin/countdown'
 import I18NContext from '@/context/i18n'
 import { noop } from 'lodash-es'
@@ -35,7 +35,7 @@ export default function MailAndCodeAuth() {
         return
       }
       setIsLoading(true)
-      const ret = await sendEMailLoginCode(email, locale)
+      const ret = await sendWebAppEMailLoginCode(email, locale)
       if (ret.result === 'success') {
         localStorage.setItem(COUNT_DOWN_KEY, `${COUNT_DOWN_TIME_MS}`)
         const params = new URLSearchParams(searchParams)

web/app/(shareLayout)/webapp-signin/components/mail-and-password-auth.tsx

@@ -99,11 +99,6 @@ export default function MailAndPasswordAuth({ isEmailSetup }: MailAndPasswordAut
       setIsLoading(false)
     }
   }
-  const getResetPasswordParams = () => {
-    const params = new URLSearchParams(searchParams)
-    params.set('from', 'webapp-signin')
-    return params.toString()
-  }
 
   return <form onSubmit={noop}>
     <div className='mb-3'>
@@ -127,7 +122,7 @@ export default function MailAndPasswordAuth({ isEmailSetup }: MailAndPasswordAut
       <label htmlFor="password" className="my-2 flex items-center justify-between">
         <span className='system-md-semibold text-text-secondary'>{t('login.password')}</span>
         <Link
-          href={`/reset-password?${getResetPasswordParams()}`}
+          href={`/webapp-reset-password?${searchParams.toString()}`}
           className={`system-xs-regular ${isEmailSetup ? 'text-components-button-secondary-accent-text' : 'pointer-events-none text-components-button-secondary-accent-text-disabled'}`}
           tabIndex={isEmailSetup ? 0 : -1}
           aria-disabled={!isEmailSetup}

web/app/(shareLayout)/webapp-signin/page.tsx

@@ -84,8 +84,11 @@ const WebSSOForm: FC = () => {
       <p className='system-xs-regular text-text-tertiary'>{t('login.webapp.disabled')}</p>
     </div>
   }
-  if (data && (data.accessMode === AccessMode.ORGANIZATION || data.accessMode === AccessMode.SPECIFIC_GROUPS_MEMBERS))
+  if (data && (data.accessMode === AccessMode.ORGANIZATION || data.accessMode === AccessMode.SPECIFIC_GROUPS_MEMBERS)) {
-    return <NormalForm />
+    return <div className='w-[400px]'>
+      <NormalForm />
+    </div>
+  }
 
   if (data && data.accessMode === AccessMode.EXTERNAL_MEMBERS)
     return <ExternalMemberSsoAuth />

web/app/reset-password/set-password/page.tsx

@@ -32,8 +32,6 @@ const ChangePasswordForm = () => {
   }, [])
 
   const getSignInUrl = () => {
-    if (searchParams.has('from') && searchParams.get('from') === 'webapp-signin')
-      return `/webapp-signin?redirect_url=${searchParams.get('redirect_url') || ''}`
     if (searchParams.has('invite_token')) {
       const params = new URLSearchParams()
       params.set('token', searchParams.get('invite_token') as string)

web/service/common.ts

@@ -327,6 +327,16 @@ export const verifyForgotPasswordToken: Fetcher<CommonResponse & { is_valid: boo
 export const changePasswordWithToken: Fetcher<CommonResponse, { url: string; body: { token: string; new_password: string; password_confirm: string } }> = ({ url, body }) =>
   post<CommonResponse>(url, { body })
 
+export const sendWebAppForgotPasswordEmail: Fetcher<CommonResponse & { data: string }, { url: string; body: { email: string } }> = ({ url, body }) =>
+  post<CommonResponse & { data: string }>(url, { body }, { isPublicAPI: true })
+
+export const verifyWebAppForgotPasswordToken: Fetcher<CommonResponse & { is_valid: boolean; email: string }, { url: string; body: { token: string } }> = ({ url, body }) => {
+  return post(url, { body }, { isPublicAPI: true }) as Promise<CommonResponse & { is_valid: boolean; email: string }>
+}
+
+export const changeWebAppPasswordWithToken: Fetcher<CommonResponse, { url: string; body: { token: string; new_password: string; password_confirm: string } }> = ({ url, body }) =>
+  post<CommonResponse>(url, { body }, { isPublicAPI: true })
+
 export const uploadRemoteFileInfo = (url: string, isPublic?: boolean) => {
   return post<{ id: string; name: string; size: number; mime_type: string; url: string }>('/remote-files/upload', { body: { url } }, { isPublicAPI: isPublic })
 }
@@ -343,6 +353,18 @@ export const sendResetPasswordCode = (email: string, language = 'en-US') =>
 export const verifyResetPasswordCode = (body: { email: string; code: string; token: string }) =>
   post<CommonResponse & { is_valid: boolean; token: string }>('/forgot-password/validity', { body })
 
+export const sendWebAppEMailLoginCode = (email: string, language = 'en-US') =>
+  post<CommonResponse & { data: string }>('/email-code-login', { body: { email, language } }, { isPublicAPI: true })
+
+export const webAppEmailLoginWithCode = (data: { email: string; code: string; token: string }) =>
+  post<LoginResponse>('/email-code-login/validity', { body: data }, { isPublicAPI: true })
+
+export const sendWebAppResetPasswordCode = (email: string, language = 'en-US') =>
+  post<CommonResponse & { data: string; message?: string; code?: string }>('/forgot-password', { body: { email, language } }, { isPublicAPI: true })
+
+export const verifyWebAppResetPasswordCode = (body: { email: string; code: string; token: string }) =>
+  post<CommonResponse & { is_valid: boolean; token: string }>('/forgot-password/validity', { body }, { isPublicAPI: true })
+
 export const sendDeleteAccountCode = () =>
   get<CommonResponse & { data: string }>('/account/delete/verify')