Create account form will have fields for First Name, Last Name, Email, Mobile Number, Password & Confirm Password.
Considerations:
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'}} />
When users fill mobile number, then default state of the field should be +91 - followed by users entered mobile number.
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'}} />
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'}} />
As a user, I want to create an account.
Features:
Considerations:
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'}} />
When users fill mobile number, then default state of the field should be +91 - followed by users entered mobile number.
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'}} />
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'}} />