funnel
funnel copied to clipboard
Use a phone number input JS widget
We accept a phone number in two places: at login, and when adding a phone number to the account. This input widget uses type="tel" and renders as a plain text field, and can be disorienting to users not accustomed to entering a country code.
Using the international telephone input plugin (GitHub) can make this easier for a user.
- For new phone: use this widget always
- For login on mobile: use this widget, and hide it when user switches to email login
- For login on desktop: unclear, since we do not show a phone/email switcher
Ideal scenario for login on desktop:
- Start with a plain text widget
- If user input only contains phone number characters (
0-9,+,-,.,(,),⎵), switch to this widget - Revert to plain text widget if there's any other character in the field
However, this must not affect the widget's focus and cursor position, which may be difficult. It's unclear if the widget has internal support for this.
Additionally, the widget supports automatic country code detection from IP address, but the demo page uses a JSONP callback from an IP geolocation service. JSONP is insecure, so we should provide our own API (since we already have geolocation capability):
- New API endpoint that supplies this, or
- Include it in the initial page whenever a phone number widget is required (view handler provides a parameter to Jinja2 template, or new Jinja2 global function, or add it to
current_authas a callable).