3^nd Homework

The goal of this homework is to create settings page.

There are 3 steps:

Design settings page
Connect fields to React Hook Form and use Yup validation
Send a link to a working settings page

Deadline: Monday 10/10/2022 - 23:59:59

Step 0: Connect to the Server

Connect to the remote server using your editor of choice
Make sure you base your work on the practical-03 branch of the vse-4it580 git repository:

To get the latest state of Quacker in your folder, open your terminal and run the following commands on the server:

This will fetch the newly created branch practical-03 from the GitHub origin and reset your code to the final state of the 2nd practical class.

If you have trouble connecting, see "Hello, Server!" guide or contact your teacher.

Step 1: Design settings page

Update Practical03Page and SettingsSection components according to screenshots below (be as close as possible). Use Chakra UI, for more info see here.

Desktup:

Tablet:

Mobile:

Step 2: Connect fields to React Hook Form and use Yup validation

All fields should be connected to React Hook Form library.

There should be validation using Yup on all fields.

all fields are required (non empty string, etc.)
email is valid email addres
"Agree to Terms and Conditions" must be set to true
text in "Profile bio" can't contain strings "lorem" and "ipsum"

When save button is pressed:

if form is invalid it should dispaly error messages
if form is valid it should use alert() to show form values

Step 3: Send a Link to a Working Settings Page

Once you are finished:

send a link to a working settings page
http://dev.frontend.USERNAME.vse.handson.pro/practical/03
using MS Teams to: Tomas Horacek (@hort19)