| | |
| | | import { useTranslation } from 'react-i18next' |
| | | import useSWR from 'swr' |
| | | import { useSearchParams } from 'next/navigation' |
| | | import Link from 'next/link' |
| | | import cn from 'classnames' |
| | | import { CheckCircleIcon } from '@heroicons/react/24/solid' |
| | | import Input from '../components/base/input' |
| | |
| | | catch { |
| | | await revalidateToken() |
| | | } |
| | | }, [confirmPassword, password, revalidateToken, searchParams, valid]) |
| | | }, [password, revalidateToken, token, valid]) |
| | | |
| | | return ( |
| | | <div className={ |
| | | cn( |
| | | 'flex w-full grow flex-col items-center justify-center', |
| | | 'flex flex-col items-center w-full grow justify-center', |
| | | 'px-6', |
| | | 'md:px-[108px]', |
| | | ) |
| | |
| | | {!verifyTokenRes && <Loading />} |
| | | {verifyTokenRes && !verifyTokenRes.is_valid && ( |
| | | <div className="flex flex-col md:w-[400px]"> |
| | | <div className="mx-auto w-full"> |
| | | <div className="mb-3 flex h-20 w-20 items-center justify-center rounded-[20px] border border-divider-regular bg-components-option-card-option-bg p-5 text-[40px] font-bold shadow-lg">🤷♂️</div> |
| | | <h2 className="text-[32px] font-bold text-text-primary">{t('login.invalid')}</h2> |
| | | <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">🤷♂️</div> |
| | | <h2 className="text-[32px] font-bold text-gray-900">{t('login.invalid')}</h2> |
| | | </div> |
| | | <div className="mx-auto mt-6 w-full"> |
| | | <div className="w-full mx-auto mt-6"> |
| | | <Button variant='primary' className='w-full !text-sm'> |
| | | <a href="https://dify.ai">{t('login.explore')}</a> |
| | | </Button> |
| | |
| | | )} |
| | | {verifyTokenRes && verifyTokenRes.is_valid && !showSuccess && ( |
| | | <div className='flex flex-col md:w-[400px]'> |
| | | <div className="mx-auto w-full"> |
| | | <h2 className="text-[32px] font-bold text-text-primary"> |
| | | <div className="w-full mx-auto"> |
| | | <h2 className="text-[32px] font-bold text-gray-900"> |
| | | {t('login.changePassword')} |
| | | </h2> |
| | | <p className='mt-1 text-sm text-text-secondary'> |
| | | <p className='mt-1 text-sm text-gray-600'> |
| | | {t('login.changePasswordTip')} |
| | | </p> |
| | | </div> |
| | | |
| | | <div className="mx-auto mt-6 w-full"> |
| | | <div className="relative"> |
| | | <div className="w-full mx-auto mt-6"> |
| | | <div className="bg-white"> |
| | | {/* Password */} |
| | | <div className='mb-5'> |
| | | <label htmlFor="password" className="my-2 flex items-center justify-between text-sm font-medium text-text-primary"> |
| | | <label htmlFor="password" className="my-2 flex items-center justify-between text-sm font-medium text-gray-900"> |
| | | {t('common.account.newPassword')} |
| | | </label> |
| | | <Input |
| | |
| | | </div> |
| | | {/* Confirm Password */} |
| | | <div className='mb-5'> |
| | | <label htmlFor="confirmPassword" className="my-2 flex items-center justify-between text-sm font-medium text-text-primary"> |
| | | <label htmlFor="confirmPassword" className="my-2 flex items-center justify-between text-sm font-medium text-gray-900"> |
| | | {t('common.account.confirmPassword')} |
| | | </label> |
| | | <Input |
| | |
| | | )} |
| | | {verifyTokenRes && verifyTokenRes.is_valid && showSuccess && ( |
| | | <div className="flex flex-col md:w-[400px]"> |
| | | <div className="mx-auto w-full"> |
| | | <div className="mb-3 flex h-20 w-20 items-center justify-center rounded-[20px] border border-divider-regular bg-components-option-card-option-bg p-5 text-[40px] font-bold shadow-lg"> |
| | | <CheckCircleIcon className='h-10 w-10 text-[#039855]' /> |
| | | <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-text-primary"> |
| | | <h2 className="text-[32px] font-bold text-gray-900"> |
| | | {t('login.passwordChangedTip')} |
| | | </h2> |
| | | </div> |
| | | <div className="mx-auto mt-6 w-full"> |
| | | <div className="w-full mx-auto mt-6"> |
| | | <Button variant='primary' className='w-full'> |
| | | <Link href={'/signin'}>{t('login.passwordChanged')}</Link> |
| | | <a href="/signin">{t('login.passwordChanged')}</a> |
| | | </Button> |
| | | </div> |
| | | </div> |