Funnel needs a mixed-use widget in two places:
- The login form currently accepts "username or email"
- The registration form currently accepts an email address
There is a pending requirement to add support for a phone number (in funnel/issues#693), turning these use cases into:
- Login: Username or email address or phone number
- Register: Email address or phone number
A backend validator can detect the content type and process accordingly. The front-end however needs to give the user a hint of what is going on, and the UI pattern adopted by Decathlon may be our best inspiration.
The front-end widget must switch widget type and appearance based on which of the following regex patterns match:
- International phone:
\+[0-9. -]+ (allows period, space and dash in input, to be stripped later)
- Local phone:
[0-9. -]+
- Email:
.*@.*
- Default:
input type="text" (assume username)
The difference between international phone and local phone is that a guessed country code must appear when in local phone mode, as the submitted field will need to include the +country prefix. The code can be guessed from IP address location or browser timezone, using libphonenumber. (The server can send this pre-filled in the form to avoid adding a new JS library.)
Funnel needs a mixed-use widget in two places:
There is a pending requirement to add support for a phone number (in funnel/issues#693), turning these use cases into:
A backend validator can detect the content type and process accordingly. The front-end however needs to give the user a hint of what is going on, and the UI pattern adopted by Decathlon may be our best inspiration.
The front-end widget must switch widget type and appearance based on which of the following regex patterns match:
\+[0-9. -]+(allows period, space and dash in input, to be stripped later)[0-9. -]+.*@.*input type="text"(assume username)The difference between international phone and local phone is that a guessed country code must appear when in local phone mode, as the submitted field will need to include the +country prefix. The code can be guessed from IP address location or browser timezone, using libphonenumber. (The server can send this pre-filled in the form to avoid adding a new JS library.)