Whenever I attempt to enter text into the input fields, no characters show up. Strangely, a similar login page using the same code is functioning perfectly fine. At this moment, I'm baffled as to why it isn't working on this specific one. My suspicion was that the issue might be related to how I defined the initialValues since they are nested, but even after trying to rewrite them without nesting, the issue persists.
import { NextPage } from 'next'
import { Prisma } from '@prisma/client';
import { FormikValues, useFormik, validateYupSchema } from 'formik';
import * as Yup from 'yup'
import { useState } from 'react';
import { useRouter } from 'next/router';
import { useSession } from 'next-auth/react';
const Register: NextPage = () => {
const router = useRouter()
const { data: session } = useSession()
if (session) {
router.push('/')
}
const [error, setError] = useState('')
const handleRegister = async ({
userInfo: {
email,
password
},
companyInfo: {
companyName,
gender,
firstName,
lastName,
street,
houseNumber,
postcode,
city,
country,
countryCode,
callNumber,
emailAddress,
website,
socials
} }: FormikValues) => {
const userInfo: Prisma.UserCreateInput = {
email,
hashedPassword: password //Not hashed yet!
}
const companyInfo: Prisma.CompanyCreateInput = {
name: companyName,
gender,
firstName,
lastName,
street,
houseNumber,
postcode,
city,
country,
countryCode,
callNumber,
emailAddress,
website,
socials,
companyUser: {
connect: { id: '' }
}
}
const registerData: FormikValues = {
userInfo,
companyInfo
}
const registerDataJSON = JSON.stringify(registerData)
const endpoint: RequestInfo = '/api/register/register'
const options: RequestInit = {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: registerDataJSON
}
try {
const response: Response = await fetch(endpoint, options)
const url = response.headers.get('Location')
if (url) {
window.location.href = url
}
} catch {
setError('Register failed')
} finally {
formik.setSubmitting(false)
}
}
const formik = useFormik({
initialValues: {
userInfo: {
email: '',
password: ''
},
companyInfo: {
companyName: '',
gender: '',
firstName: '',
lastName: '',
street: '',
houseNumber: '',
postcode: '',
city: '',
country: '',
countryCode: '',
callNumber: '',
emailAddress: '',
website: '',
socials: ''
}
},
validationSchema: Yup.object().shape({
userInfo: Yup.object().shape({
email: Yup.string()
.required('email address is required')
.email('email address must be valid')
.transform((value) => value.replace(/\s+/g, ' ').trim())
.trim('Email Address cannot include leading and trailing spaces'),
password: Yup.string()
.required('Password address is required')
.min(8, 'Password must be at least 8 characters long')
.max(20, 'Password cannot be longer than 20 characters')
.matches(
/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&*])/,
'Password must contain at least one number as well as one uppercase, lowercase and special character'
)
.trim('Password cannot include leading and trailing spaces')
.matches(
/^(?!.* )/,
'Password cannot contain whitespaces'
)
}),
...
}),
onSubmit: (values) => {
handleRegister(values)
}
})
return (
<form onSubmit={formik.handleSubmit} noValidate>
<h2>User Information</h2>
<label>
Email Address<span>*</span>
<input
name='email'
type='email'
value={formik.values.userInfo.email}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
</label>
...
</form>
)
}
export default Register