search

zetkin / www.zetk.in

The main activist front-end for Zetkin.
https://www.zetk.in
4 stars 7 forks source link

Feature/phone widget #275

Closed niklasva82 closed 3 years ago

niklasva82 commented 3 years ago

Resolves #260

niklasva82 commented 3 years ago

Working on the UI and UX fixes.

Regarding the zero, where there is a default country, we could simply swap any leading zero for the default country code. This is already done when the country code is pre-entered and the user attempts to replace the country code. If we want to go further we could use IP geolocation to check for the country of the user on the global page and do the same there.

Regarding validation, it seems there is a stripped version of the Google phone number parsing library at only 130KB including metadata, referenced by the official implementation, so we could use that client-side without adding too much heft. https://github.com/catamphetamine/libphonenumber-js

richardolsson commented 3 years ago

Regarding the zero, where there is a default country, we could simply swap any leading zero for the default country code.

I think this sounds like a good solution!

This is already done when the country code is pre-entered and the user attempts to replace the country code.

Are you sure? If I delete the pre-entered code on an organization page and type 070…, it works the same as on the home page. Steps to reproduce:

  1. Navigate to www.dev.zetkin.org/o/1 (where default country code is +46)
  2. Focus the e-mail field to open registration form
  3. Place cursor/caret at end of pre-entered country prefix
  4. Press backspace three times to delete "everything" (+ sign remains, as intended)
  5. Type 070

Expected result (based on my understanding of what you're saying above): The zero should be immediately replaced with +46 Actual result: The zero is dropped and the entered number is "70", which is interpreted as the beginning of a Russian number, and the Russian flag is displayed.

The same happens when I try some other ways of deleting the pre-entered prefix (steps 3 and 4), e.g. selecting and hitting backspace or selecting and typing over it.

If we want to go further we could use IP geolocation to check for the country of the user on the global page and do the same there.

Let's not go that far for this update, but I think it's something we could consider down the line if we see that this doesn't fix the problem.

Regarding validation, it seems there is a stripped version of the Google phone number parsing library at only 130KB including metadata, referenced by the official implementation, so we could use that client-side without adding too much heft. https://github.com/catamphetamine/libphonenumber-js

Interesting! That's still a lot just for phone number validation, but maybe it's worth a try. The next challenge though is how we actually indicate when something is wrong. Red border? Red x icon to the right of field? Something else?

If you want to give it a try I think that would be great! But I think the most important piece to the puzzle is dealing with the zero when on an organization page, which is where most people register anyway.

richardolsson commented 3 years ago

Wrongly closed by incorrect reference in zetkin/zetkin-common#50. Re-opening to merge.