search

onenroll / onenroll.in

Official website for ONEnroll
0 stars 0 forks source link

User SignUp: Create account application #1

Open k279avi opened 3 years ago

k279avi commented 3 years ago

As a user, I want to create an account.

Features:

  1. Create account form will have fields for First Name, Last Name, Email, Mobile Number, Password & Confirm Password.

Considerations:

  1. When users try to submit blank or incomplete form, error should be shown. import { Icon, InlineIcon } from '@iconify/react'; import bxsErrorCircle from '@iconify/icons-bx/bxs-error-circle'; <Icon icon={bxsErrorCircle} style={{color: '#ff0033', fontSize: '18px'}} />

  2. When users fill mobile number, then default state of the field should be +91 - followed by users entered mobile number.

  3. Password strength: User generated password should contain atleast 8 characters including 1 upper case character, i numeric character, and 1 special character. Update the password strength box with each user entry. import { Icon, InlineIcon } from '@iconify/react'; import successStandardLine from '@iconify/icons-clarity/success-standard-line'; <Icon icon={successStandardLine} style={{color: '#323232', fontSize: '15px'}} />

  4. Other icons inlcude in create account form: 4.1. India flag import { Icon, InlineIcon } from '@iconify/react'; import flagForIndia from '@iconify/icons-emojione-v1/flag-for-india'; <Icon icon={flagForIndia} style={{fontSize: '28px'}} /> 4.2. Dropdown import { Icon, InlineIcon } from '@iconify/react'; import dropdownIcon from '@iconify/icons-gridicons/dropdown'; <Icon icon={dropdownIcon} style={{color: '#323232', fontSize: '20px'}} /> 4.3. Show Password import { Icon, InlineIcon } from '@iconify/react'; import bxsShow from '@iconify/icons-bx/bxs-show'; <Icon icon={bxsShow} style={{color: '#323232', fontSize: '18px'}} /> 4.4. Hide Password import { Icon, InlineIcon } from '@iconify/react'; import bxsHide from '@iconify/icons-bx/bxs-hide'; <Icon icon={bxsHide} style={{color: '#323232', fontSize: '18px'}} /> 4.5. Google Icon import { Icon, InlineIcon } from '@iconify/react'; import bxlGoogle from '@iconify/icons-bx/bxl-google'; <Icon icon={bxlGoogle} style={{color: '#ffffff', fontSize: '23px'}} /> 4.6. Facebook Icon import { Icon, InlineIcon } from '@iconify/react'; import bxlFacebook from '@iconify/icons-bx/bxl-facebook'; <Icon icon={bxlFacebook} style={{color: '#ffffff', fontSize: '23px'}} /> 4.7. Arrow Icon import { Icon, InlineIcon } from '@iconify/react'; import bxArrowBack from '@iconify/icons-bx/bx-arrow-back'; <Icon icon={bxArrowBack} style={{color: '#ffffff', fontSize: '23px'}} />

k279avi commented 3 years ago

Font Awesome icons are used instead of Iconify icons. @notamanbag ensure that icon size remains the same.