Assignment 5

[dnhn]

https://dffe23-dn-5.vercel.app

• Migrate the entire project from #8
• Book edit
• Login page
• Implement form validation and error indicators
• Add password strength meter

[ngolapnguyen]

Requirements

• [x] All core functionalities present
• [x] Edit form
• [x] Login page
• [x] Forms built by react-hook-form
• [x] Validation by zod
• [x] Bonus: Password Strengh Meter

Result: ✅

Feedbacks

1. I'd move these constants out of the component to avoid re-declaring them every render:

2. You can extract the form logic out of the AddEditBookDialog into a BookForm component, which accepts onSubmit as a property.

Then you can reuse it like this:

// AddBookDialog.tsx

<BookForm onSubmit={(values) => addBook(values)} />

// EditBookDialog.tsx

<BookForm initialValues={bookToEdit} onSubmit={(values) => editBook(values)} />

This way, you don't have to hard-code the async logic (create/edit requests) in the book form & can reuse it for other scenarios.

3. Another good practice is to build a generic wrapper for form fields that share a similar layout:

We can add something like this:

<Field label="Email" error={errors.email} {...} >
  <input {...} />
</Field>

This will help make the form shorter, cleaner and more consistent.

4. ... (Please refer to my feedbacks in previous assignments)