diff --git a/packages/next/src/views/ForgotPassword/ForgotPasswordForm/index.tsx b/packages/next/src/views/ForgotPassword/ForgotPasswordForm/index.tsx
new file mode 100644
index 0000000000..680725bd95
--- /dev/null
+++ b/packages/next/src/views/ForgotPassword/ForgotPasswordForm/index.tsx
@@ -0,0 +1,81 @@
+'use client'
+
+import type { FormState, PayloadRequest } from 'payload/types'
+
+import { Email } from '@payloadcms/ui/fields/Email'
+import { Form } from '@payloadcms/ui/forms/Form'
+import { FormSubmit } from '@payloadcms/ui/forms/Submit'
+import { useConfig } from '@payloadcms/ui/providers/Config'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
+import { email } from 'payload/fields/validations'
+import React, { Fragment, useState } from 'react'
+import { toast } from 'react-toastify'
+
+export const ForgotPasswordForm: React.FC = () => {
+ const config = useConfig()
+
+ const {
+ admin: { user: userSlug },
+ routes: { api },
+ } = config
+
+ const { t } = useTranslation()
+ const [hasSubmitted, setHasSubmitted] = useState(false)
+
+ const handleResponse = (res) => {
+ res.json().then(
+ () => {
+ setHasSubmitted(true)
+ },
+ () => {
+ toast.error(t('authentication:emailNotValid'))
+ },
+ )
+ }
+
+ const initialState: FormState = {
+ email: {
+ initialValue: '',
+ valid: true,
+ value: undefined,
+ },
+ }
+
+ if (hasSubmitted) {
+ return (
+
+ {t('authentication:emailSent')}
+ {t('authentication:checkYourEmailForPasswordReset')}
+
+ )
+ }
+
+ return (
+
+ )
+}
diff --git a/packages/next/src/views/ForgotPassword/index.tsx b/packages/next/src/views/ForgotPassword/index.tsx
index 87e58ba3d8..3234a5c889 100644
--- a/packages/next/src/views/ForgotPassword/index.tsx
+++ b/packages/next/src/views/ForgotPassword/index.tsx
@@ -2,12 +2,11 @@ import type { AdminViewProps } from 'payload/types'
import { Button } from '@payloadcms/ui/elements/Button'
import { Translation } from '@payloadcms/ui/elements/Translation'
-import { Email } from '@payloadcms/ui/fields/Email'
-import { Form } from '@payloadcms/ui/forms/Form'
-import { FormSubmit } from '@payloadcms/ui/forms/Submit'
import LinkImport from 'next/link.js'
import React, { Fragment } from 'react'
+import { ForgotPasswordForm } from './ForgotPasswordForm/index.js'
+
export { generateForgotPasswordMetadata } from './meta.js'
const Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default
@@ -23,22 +22,9 @@ export const ForgotPasswordView: React.FC = ({ initPageResult })
} = initPageResult
const {
- admin: { user: userSlug },
- routes: { admin, api },
- serverURL,
+ routes: { admin },
} = config
- // const handleResponse = (res) => {
- // res.json().then(
- // () => {
- // setHasSubmitted(true)
- // },
- // () => {
- // toast.error(i18n.t('authentication:emailNotValid'))
- // },
- // )
- // }
-
if (user) {
return (
@@ -60,34 +46,9 @@ export const ForgotPasswordView: React.FC = ({ initPageResult })
)
}
- // if (hasSubmitted) {
- // return (
- //
- // {i18n.t('authentication:emailSent')}
- // {i18n.t('authentication:checkYourEmailForPasswordReset')}
- //
- // )
- // }
-
return (
-
+
{i18n.t('authentication:backToLogin')}
)
diff --git a/packages/next/src/views/Login/LoginForm/index.tsx b/packages/next/src/views/Login/LoginForm/index.tsx
index d526a77fd2..b49c86bfaa 100644
--- a/packages/next/src/views/Login/LoginForm/index.tsx
+++ b/packages/next/src/views/Login/LoginForm/index.tsx
@@ -6,7 +6,7 @@ import React from 'react'
const baseClass = 'login__form'
const Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default
-import type { FormState } from 'payload/types'
+import type { FormState, PayloadRequest } from 'payload/types'
import { FormLoadingOverlayToggle } from '@payloadcms/ui/elements/Loading'
import { Email } from '@payloadcms/ui/fields/Email'
@@ -15,6 +15,7 @@ import { Form } from '@payloadcms/ui/forms/Form'
import { FormSubmit } from '@payloadcms/ui/forms/Submit'
import { useConfig } from '@payloadcms/ui/providers/Config'
import { useTranslation } from '@payloadcms/ui/providers/Translation'
+import { email, password } from 'payload/fields/validations'
import './index.scss'
@@ -57,8 +58,43 @@ export const LoginForm: React.FC<{
>
-
-
+
+ email(value, {
+ name: 'email',
+ type: 'email',
+ data: {},
+ req: { t } as PayloadRequest,
+ required: true,
+ siblingData: {},
+ })
+ }
+ />
+
+ password(value, {
+ name: 'password',
+ type: 'text',
+ data: {},
+ req: {
+ payload: {
+ config,
+ },
+ t,
+ } as PayloadRequest,
+ required: true,
+ siblingData: {},
+ })
+ }
+ />
{t('authentication:forgotPasswordQuestion')}
{t('authentication:login')}
diff --git a/packages/translations/src/clientKeys.ts b/packages/translations/src/clientKeys.ts
index 63074666fb..d2e8a57920 100644
--- a/packages/translations/src/clientKeys.ts
+++ b/packages/translations/src/clientKeys.ts
@@ -6,6 +6,7 @@ export const clientTranslationKeys = [
'authentication:backToLogin',
'authentication:beginCreateFirstUser',
'authentication:changePassword',
+ 'authentication:checkYourEmailForPasswordReset',
'authentication:confirmGeneration',
'authentication:confirmPassword',
'authentication:createFirstUser',
@@ -222,10 +223,13 @@ export const clientTranslationKeys = [
'upload:sizesFor',
'upload:width',
+ 'validation:emailAddress',
'validation:fieldHasNo',
'validation:limitReached',
+ 'validation:longerThanMin',
'validation:required',
'validation:requiresAtLeast',
+ 'validation:shorterThanMax',
'version:aboutToPublishSelection',
'version:aboutToRestore',