Frontend: Email Verification Form Validation

[surmelienes1]

Any input was considered legitimate in the previous iteration of the email verification form because it lacked a validation mechanism. To avoid inaccurate situations, we had to define the inputs. As a result, I added a validation option to the email verification form.

Although it seems almost same in the browser, there have been significant changes made to the code and structure to deliver the best possible validation feature.

React-hook-form and Yup were used for validation and error handling, and bootstrap was utilized for error messaging as I indicated in #429.

[xltvy]

I have reviewed your work. It is nice decision to use react-hook-form, Yup, and bootstrap for the integrity of the code. Well done. However there are some points I need to mention:

1- Probably your updates in the style.css file messed up the sign up / login buttons page alignment. We need to fix this before merging. You can see this below:

2- It is not a big issue but, I think we need better wording for the error message. 4 digits can mean something like "aaaa" is also okay, we can say 4 digit number instead. I have also provided the screenshot.

[surmelienes1]

Thank you @xltvy for your careful inspection and comment!

The reason for this unintended alignment is because I was working with the old version of the sign-up page since your changes had not yet been applied on frontend dev. In addition, I had to update the style.css, so, there happened to be a mismatch between sign-up page and style.css file classes.

I have now fixed the sign-up page's relevant sections to reflect your modifications.

I have also added the word "digit numbers" instead of "digits" at the end of the warning given for the verification code input form.

[gokayyildiz]

I resolved the git fetch conflicts and it is now ready to merge without any backward or forward conflict

[xltvy]

Approved

[gokayyildiz]

ready to merge succesfully working