chaddjohnson / react-signup-form

React-based sign up form prototype.

React Signup Form

Overview

This is a "Sign Up" form prototype using React demonstrating the following:

1. Three input fields: username, password, and password confirmation.
2. State persistence.
3. Password and password confirmation match validation.
4. Informing the user when the password and password confirmation do not match.
5. Styling using Emotion.
6. Theming.
7. Presence validation for username, password, and password confirmation.
8. Username format validation.
9. Minimum length validation for username and password.
10. Maximum length enforcement for username.
11. Password strength validation.
12. Dependencies across fields for validation.

Demo

https://chaddjohnson.github.io/react-signup-form/

Running locally

1. Run yarn install or npm install.
2. Run yarn start or npm start.
3. Visit http://localhost:3000 in a browser.

Running tests

Run yarn test or npm run test.

Deployment

Push to master, and the app will be deployed to GitHub Pages via CI.

Possible improvements

• Provide a way to access a list of all errors present in the form.
• Explore leveraging onFocus with form hooks to provide developer the option to only display errors when fields do not have focus.
• Break out form hooks into a separate package.
• Add Checkbox component.
• Ensure validation for checkbox types are supported.
• Ensure TextField fully supports all possible HTML input types.
• Consider adding more helper methods such as setFieldValue from Formik to support a wider range of validation scenarios.
• Investigate how React Hook Form and Formik work, and see if any ideas or developer options from those could be incorporated. Namely, analyze their uses of ref.
• Consider the possibility of making TextField an uncontrolled component to reduce re-renders during validation (as React Hook Form does).
• Set form as dirty only when comparison of initial field values to current field values yields a difference.