wwf
3 天以前 a430284aa21e3ae1f0d5654e55b2ad2852519cc2
app/forgot-password/ChangePasswordForm.tsx
@@ -3,7 +3,6 @@
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'
@@ -73,12 +72,12 @@
    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]',
      )
@@ -86,11 +85,11 @@
      {!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>
@@ -99,20 +98,20 @@
      )}
      {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
@@ -127,7 +126,7 @@
              </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
@@ -154,17 +153,17 @@
      )}
      {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>