New Auth Methods

web/app/account/account-page/index.tsx

@@ -15,6 +15,7 @@ import { ToastContext } from '@/app/components/base/toast'
 import AppIcon from '@/app/components/base/app-icon'
 import Avatar from '@/app/components/base/avatar'
 import { IS_CE_EDITION } from '@/config'
+import Input from '@/app/components/base/input'
 
 const titleClassName = `
   text-sm font-medium text-gray-900
@@ -31,6 +32,7 @@ const validPassword = /^(?=.*[a-zA-Z])(?=.*\d).{8,}$/
 
 export default function AccountPage() {
   const { t } = useTranslation()
+  const { systemFeatures } = useAppContext()
   const { mutateUserProfile, userProfile, apps } = useAppContext()
   const { notify } = useContext(ToastContext)
   const [editNameModalVisible, setEditNameModalVisible] = useState(false)
@@ -41,6 +43,9 @@ export default function AccountPage() {
   const [password, setPassword] = useState('')
   const [confirmPassword, setConfirmPassword] = useState('')
   const [showDeleteAccountModal, setShowDeleteAccountModal] = useState(false)
+  const [showCurrentPassword, setShowCurrentPassword] = useState(false)
+  const [showPassword, setShowPassword] = useState(false)
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
 
   const handleEditName = () => {
     setEditNameModalVisible(true)
@@ -158,8 +163,8 @@ export default function AccountPage() {
         </div>
       </div>
       {
-        IS_CE_EDITION && (
-          <div className='mb-8 flex justify-between'>
+        systemFeatures.enable_email_password_login && (
+          <div className='mb-8 flex justify-between gap-2'>
             <div>
               <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>
@@ -191,8 +196,7 @@ export default function AccountPage() {
           >
             <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}
+            <Input className='mt-2'
               value={editName}
               onChange={e => setEditName(e.target.value)}
             />
@@ -223,30 +227,61 @@ export default function AccountPage() {
             {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='relative mt-2'>
+                  <Input
+                    type={showCurrentPassword ? 'text' : 'password'}
+                    value={currentPassword}
+                    onChange={e => setCurrentPassword(e.target.value)}
+                  />
+
+                  <div className="absolute inset-y-0 right-0 flex items-center">
+                    <Button
+                      type="button"
+                      variant='ghost'
+                      onClick={() => setShowCurrentPassword(!showCurrentPassword)}
+                    >
+                      {showCurrentPassword ? '👀' : '😝'}
+                    </Button>
+                  </div>
+                </div>
               </>
             )}
             <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='relative mt-2'>
+              <Input
+                type={showPassword ? 'text' : 'password'}
+                value={password}
+                onChange={e => setPassword(e.target.value)}
+              />
+              <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='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='relative mt-2'>
+              <Input
+                type={showConfirmPassword ? 'text' : 'password'}
+                value={confirmPassword}
+                onChange={e => setConfirmPassword(e.target.value)}
+              />
+              <div className="absolute inset-y-0 right-0 flex items-center">
+                <Button
+                  type="button"
+                  variant='ghost'
+                  onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                >
+                  {showConfirmPassword ? '👀' : '😝'}
+                </Button>
+              </div>
+            </div>
             <div className='flex justify-end mt-10'>
               <Button className='mr-2' onClick={() => {
                 setEditPasswordModalVisible(false)

web/app/account/avatar.tsx

@@ -58,7 +58,7 @@ export default function AppSelector() {
             >
               <Menu.Items
                 className="
-                    absolute -right-3 -top-3 w-60 max-w-80
+                    absolute -right-2 -top-1 w-60 max-w-80
                     divide-y divide-gray-100 origin-top-right rounded-lg bg-white
                     shadow-lg
                   "

web/app/activate/activateForm.tsx

@@ -1,27 +1,16 @@
 'use client'
-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 { invitationCheck } from '@/service/common'
 import Loading from '@/app/components/base/loading'
-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()
   const workspaceID = searchParams.get('workspace_id')
   const email = searchParams.get('email')
@@ -35,64 +24,20 @@ const ActivateForm = () => {
       token,
     },
   }
-  const { data: checkRes, mutate: recheck } = useSWR(checkParams, invitationCheck, {
+  const { data: checkRes } = useSWR(checkParams, invitationCheck, {
     revalidateOnFocus: false,
+    onSuccess(data) {
+      if (data.is_valid) {
+        const params = new URLSearchParams(searchParams)
+        const { email, workspace_id } = data.data
+        params.set('email', encodeURIComponent(email))
+        params.set('workspace_id', encodeURIComponent(workspace_id))
+        params.set('invite_token', encodeURIComponent(token as string))
+        router.replace(`/signin?${params.toString()}`)
+      }
+    },
   })
 
-  const [name, setName] = useState('')
-  const [password, setPassword] = useState('')
-  const [timezone, setTimezone] = useState(Intl.DateTimeFormat().resolvedOptions().timeZone)
-  const [language, setLanguage] = useState(locale)
-  const [showSuccess, setShowSuccess] = useState(false)
-
-  const showErrorMessage = useCallback((message: string) => {
-    Toast.notify({
-      type: 'error',
-      message,
-    })
-  }, [])
-
-  const valid = useCallback(() => {
-    if (!name.trim()) {
-      showErrorMessage(t('login.error.nameEmpty'))
-      return false
-    }
-    if (!password.trim()) {
-      showErrorMessage(t('login.error.passwordEmpty'))
-      return false
-    }
-    if (!validPassword.test(password)) {
-      showErrorMessage(t('login.error.passwordInvalid'))
-      return false
-    }
-
-    return true
-  }, [name, password, showErrorMessage, t])
-
-  const handleActivate = useCallback(async () => {
-    if (!valid())
-      return
-    try {
-      await activateMember({
-        url: '/activate',
-        body: {
-          workspace_id: workspaceID,
-          email,
-          token,
-          name,
-          password,
-          interface_language: language,
-          timezone,
-        },
-      })
-      setLocaleOnClient(language, false)
-      setShowSuccess(true)
-    }
-    catch {
-      recheck()
-    }
-  }, [email, language, name, password, recheck, setLocaleOnClient, timezone, token, valid, workspaceID])
-
   return (
     <div className={
       cn(
@@ -115,125 +60,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'}
-                    tabIndex={1}
-                  />
-                </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'}
-                    tabIndex={2}
-                  />
-                </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>
   )
 }