New Auth Methods (#8119)
This commit is contained in:
parent
853b0e84cc
commit
3898fe3311
32 changed files with 1568 additions and 787 deletions
|
|
@ -5,6 +5,7 @@ import useSWR from 'swr'
|
|||
import { useSearchParams } from 'next/navigation'
|
||||
import cn from 'classnames'
|
||||
import { CheckCircleIcon } from '@heroicons/react/24/solid'
|
||||
import Input from '../components/base/input'
|
||||
import Button from '@/app/components/base/button'
|
||||
import { changePasswordWithToken, verifyForgotPasswordToken } from '@/service/common'
|
||||
import Toast from '@/app/components/base/toast'
|
||||
|
|
@ -113,33 +114,29 @@ const ChangePasswordForm = () => {
|
|||
<label htmlFor="password" className="my-2 flex items-center justify-between text-sm font-medium text-gray-900">
|
||||
{t('common.account.newPassword')}
|
||||
</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'}
|
||||
/>
|
||||
</div>
|
||||
<div className='mt-1 text-xs text-gray-500'>{t('login.error.passwordInvalid')}</div>
|
||||
<Input
|
||||
id="password"
|
||||
type='password'
|
||||
value={password}
|
||||
onChange={e => setPassword(e.target.value)}
|
||||
placeholder={t('login.passwordPlaceholder') || ''}
|
||||
className='mt-1'
|
||||
/>
|
||||
<div className='mt-1 text-xs text-text-secondary'>{t('login.error.passwordInvalid')}</div>
|
||||
</div>
|
||||
{/* Confirm Password */}
|
||||
<div className='mb-5'>
|
||||
<label htmlFor="confirmPassword" className="my-2 flex items-center justify-between text-sm font-medium text-gray-900">
|
||||
{t('common.account.confirmPassword')}
|
||||
</label>
|
||||
<div className="mt-1 relative rounded-md shadow-sm">
|
||||
<input
|
||||
id="confirmPassword"
|
||||
type='password'
|
||||
value={confirmPassword}
|
||||
onChange={e => setConfirmPassword(e.target.value)}
|
||||
placeholder={t('login.confirmPasswordPlaceholder') || ''}
|
||||
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'}
|
||||
/>
|
||||
</div>
|
||||
<Input
|
||||
id="confirmPassword"
|
||||
type='password'
|
||||
value={confirmPassword}
|
||||
onChange={e => setConfirmPassword(e.target.value)}
|
||||
placeholder={t('login.confirmPasswordPlaceholder') || ''}
|
||||
className='mt-1'
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
|
|
@ -165,7 +162,7 @@ const ChangePasswordForm = () => {
|
|||
</h2>
|
||||
</div>
|
||||
<div className="w-full mx-auto mt-6">
|
||||
<Button variant='primary' className='w-full !text-sm'>
|
||||
<Button variant='primary' className='w-full'>
|
||||
<a href="/signin">{t('login.passwordChanged')}</a>
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import { useForm } from 'react-hook-form'
|
|||
import { z } from 'zod'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import Loading from '../components/base/loading'
|
||||
import Input from '../components/base/input'
|
||||
import Button from '@/app/components/base/button'
|
||||
|
||||
import {
|
||||
|
|
@ -78,7 +79,7 @@ const ForgotPasswordForm = () => {
|
|||
|
||||
return (
|
||||
loading
|
||||
? <Loading/>
|
||||
? <Loading />
|
||||
: <>
|
||||
<div className="sm:mx-auto sm:w-full sm:max-w-md">
|
||||
<h2 className="text-[32px] font-bold text-gray-900">
|
||||
|
|
@ -98,10 +99,9 @@ const ForgotPasswordForm = () => {
|
|||
{t('login.email')}
|
||||
</label>
|
||||
<div className="mt-1">
|
||||
<input
|
||||
<Input
|
||||
{...register('email')}
|
||||
placeholder={t('login.emailPlaceholder') || ''}
|
||||
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'}
|
||||
/>
|
||||
{errors.email && <span className='text-red-400 text-sm'>{t(`${errors.email?.message}`)}</span>}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue