58 lines
1.1 KiB
TypeScript
58 lines
1.1 KiB
TypeScript
'use client'
|
|
|
|
import {
|
|
ConfirmPasswordField,
|
|
Form,
|
|
FormSubmit,
|
|
PasswordField,
|
|
useFormFields,
|
|
} from '@payloadcms/ui'
|
|
import React from 'react'
|
|
|
|
export const ClientForm: React.FC = () => {
|
|
return (
|
|
<Form
|
|
initialState={{
|
|
'confirm-password': {
|
|
initialValue: '',
|
|
valid: false,
|
|
value: '',
|
|
},
|
|
password: {
|
|
initialValue: '',
|
|
valid: false,
|
|
value: '',
|
|
},
|
|
}}
|
|
>
|
|
<CustomPassword />
|
|
<ConfirmPasswordField />
|
|
<FormSubmit>Submit</FormSubmit>
|
|
</Form>
|
|
)
|
|
}
|
|
|
|
const CustomPassword: React.FC = () => {
|
|
const confirmPassword = useFormFields(
|
|
([fields]) => (fields && fields?.['confirm-password']) || null,
|
|
)
|
|
|
|
const confirmValue = confirmPassword.value
|
|
|
|
return (
|
|
<PasswordField
|
|
autoComplete="off"
|
|
label="Password"
|
|
name="password"
|
|
required
|
|
validate={(value) => {
|
|
if (value && confirmValue) {
|
|
return confirmValue === value ? true : 'Passwords must match!!!!'
|
|
}
|
|
|
|
return 'Field is required'
|
|
}}
|
|
/>
|
|
)
|
|
}
|