search

harshith-venkatesh / Website-Signup-Referral

Website Signup page with multiple screens with emphasis on testing for each components
https://website-signup-referral-portal.netlify.app/
0 stars 0 forks source link

Website-Signup-Referral Project #7

Open harshith-venkatesh opened 3 years ago

harshith-venkatesh commented 3 years ago

Website Signup Referral

The project is a flow of sign up process consisting of signup page, OTP input page, referral page.

SignUp Page

The signup page would contain three fields for the user to enter 1.email 2.password 3.re-enter password

The email field need to meet constraints failing which respective error message 'Email cannot be blank/Email is invalid' message needs to be displayed The password field needs to meet constraints failing which, password strength of type weak,medium,strong should be displayed based on constraints specified. The re-enter password field needs to check for the match of the password, if passed password match! message needs to be displayed The signup button should be enabled , if all the fields passes with no errors. On click of signup button should enable loader and move to OTP page

OTP Page

The OTP page would contain five fields for numbers to be entered by the user The fields include:

  1. Five fields which takes number

    The fields should be filled with numbers. Submit should be enabled on filling all fields, which should make an API call to move to referral page

Referral Page

The referral page would have alphanumeric field for user to enter referral data. The fields include:

  1. Referral Input

    The referral input should accept alphanumeric code If the user doesn't have referral code , user can opt for 'I don't have it!' option. On successful submission of referral input

Congratulations Page

The page is to be designed to show user message with referrer name

Page for No Referral

The page is to be designed to show user the queue to continue signup process

harshith-venkatesh commented 3 years ago

Design flow:

image