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 ( +
+

{t('authentication:forgotPassword')}

+

{t('authentication:forgotPasswordEmailInstructions')}

+ + email(value, { + name: 'email', + type: 'email', + data: {}, + req: { t } as PayloadRequest, + required: true, + siblingData: {}, + }) + } + /> + {t('general:submit')} + + ) +} 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:forgotPassword')}

-

{i18n.t('authentication:forgotPasswordEmailInstructions')}

- - {i18n.t('general:submit')} - + {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',