I just using the tutorial code,the intermission part, and then in my sign up page, I add last name, first name and email field.
web/src/pages/SignupPage/SignupPage.js
import { useRef } from 'react'
import { useEffect } from 'react'
import {
Form,
Label,
TextField,
PasswordField,
FieldError,
Submit,
} from '@redwoodjs/forms'
import { Link, navigate, routes } from '@redwoodjs/router'
import { MetaTags } from '@redwoodjs/web'
import { toast, Toaster } from '@redwoodjs/web/toast'
import { useAuth } from 'src/auth'
const SignupPage = () => {
const { isAuthenticated, signUp } = useAuth()
useEffect(() => {
if (isAuthenticated) {
navigate(routes.home())
}
}, [isAuthenticated])
// focus on email box on page load
const usernameRef = useRef()
useEffect(() => {
usernameRef.current.focus()
}, [])
const onSubmit = async (data) => {
const response = await signUp({ ...data })
if (response.message) {
toast(response.message)
} else if (response.error) {
toast.error(response.error)
} else {
// user is signed in automatically
toast.success('Welcome!')
}
}
return (
<>
<MetaTags title="Signup" />
<main className="rw-main mx-auto mt-12 w-96">
<Toaster toastOptions={{ className: 'rw-toast', duration: 6000 }} />
<div className="rw-scaffold rw-login-container">
<div className="rw-segment">
<header className="rw-segment-header">
<h2 className="rw-heading rw-heading-secondary">Signup</h2>
</header>
<div className="rw-segment-main">
<div className="rw-form-wrapper">
<Form onSubmit={onSubmit} className="rw-form-wrapper">
<Label
name="lastName"
className="rw-label"
errorClassName="rw-label rw-label-error"
>
Last Name:
</Label>
<TextField
name="lastName"
className="rw-input"
errorClassName="rw-input rw-input-error"
ref={usernameRef}
validation={{
required: {
value: true,
message: 'Last Name is required',
},
}}
/>
<FieldError name="lastName" className="rw-field-error" />
<Label
name="firstName"
className="rw-label"
errorClassName="rw-label rw-label-error"
>
First Name:
</Label>
<TextField
name="firstName"
className="rw-input"
errorClassName="rw-input rw-input-error"
ref={usernameRef}
validation={{
required: {
value: true,
message: 'First Name is required',
},
}}
/>
<FieldError name="firstName" className="rw-field-error" />
<Label
name="email"
className="rw-label"
errorClassName="rw-label rw-label-error"
>
Email:
</Label>
<TextField
name="username"
className="rw-input"
errorClassName="rw-input rw-input-error"
ref={usernameRef}
validation={{
required: {
value: true,
message: 'Email is required',
},
}}
/>
<FieldError name="email" className="rw-field-error" />
<Label
name="password"
className="rw-label"
errorClassName="rw-label rw-label-error"
>
Password
</Label>
<PasswordField
name="password"
className="rw-input"
errorClassName="rw-input rw-input-error"
autoComplete="current-password"
validation={{
required: {
value: true,
message: 'Password is required',
},
}}
/>
<FieldError name="password" className="rw-field-error" />
<div className="rw-button-group">
<Submit className="rw-button rw-button-blue">
Sign Up
</Submit>
</div>
</Form>
</div>
</div>
</div>
<div className="rw-login-link mt-2 text-center">
<span>Already have an account?</span>{' '}
<Link to={routes.login()} className="rw-link">
Log in!
</Link>
</div>
</div>
</main>
</>
)
}
export default SignupPage
and my user model schema will looks like following:
model User {
id Int @id @default(autoincrement())
lastName String? @map("last_name") @db.VarChar(255)
firstName String? @map("first_name") @db.VarChar(255)
username String? @db.VarChar(255)
email String? @unique(map: "app_user_pk") @db.VarChar(255)
hashedPassword String? @map("password") @db.VarChar(255)
salt String
createdAt DateTime? @default(now()) @map("create_time") @db.Timestamp(0)
updatedAt DateTime? @default(now()) @updatedAt @map("update_time") @db.Timestamp(0)
@@map("app_user")
}
Sign up success and return the last name and first name, but when I logout and try to log back in again, it said password not correct
and also when I click on forgot password
it tells me unknown error occurred
What I need to do?