https://github.com/anthgrim/login-form

Login Form using React and Formik
https://github.com/anthgrim/login-form

Last synced: 4 months ago
JSON representation

Login Form using React and Formik

• Host: GitHub
• URL: https://github.com/anthgrim/login-form
• Owner: anthgrim
• License: mit
• Created: 2022-05-12T16:01:46.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-05-14T19:47:16.000Z (over 3 years ago)
• Last Synced: 2024-12-28T13:40:42.667Z (about 1 year ago)
• Language: JavaScript
• Size: 430 KB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Login Form Coding Challenge

## Description

This is the login form coding challenge from MIT/xPro Fullstack Development with MERN Bootcamp. It consist on creating a form using React JS and Formik to add simple form validations. 

## Goal 

To create a form with Usarname and Password Field, as well for a submit button. The form should implement the following input validation rules:

- If the username or password inputs are empty, display the message "field required" under the text input.

- If the username is not in an email format, display the message "username should be an email" under the text input.

- If the username and password pass the validation above, then display the message "Login Successful" in an `alert` box.

## Extras

- Custom styles

## Future Adds

- To hide password in UI

- Add basic animations when login succesfully, besides the alert. 

## Final 

![image](./images/loginForm.png)

![image](./images/loginForm2.png)

![image](./images/loginForm3.png)

![image](./images/loginForm5.png)

## Author

Kevin Grimaldi - Student at MIT Bootcamp