Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Rethink the PA picker widget #158

Closed
bfabio opened this issue Mar 26, 2021 · 0 comments · Fixed by #187
Closed

Rethink the PA picker widget #158

bfabio opened this issue Mar 26, 2021 · 0 comments · Fixed by #187
Assignees
@bfabio

Comments

@bfabio
Copy link
Member

bfabio commented Mar 26, 2021 •
edited
Loading

The current PA picker widget has a number of problems:

  • it's not accessible
  • it's not intuitive
  • it's not clear the inputs that it compiles are special / readonly
  • there's no loading indication
  • it conflicts with input history (at least with my Firefox)
@bfabio bfabio self-assigned this Apr 11, 2021
bfabio added a commit to bfabio/developers-italia-onboarding that referenced this issue May 26, 2021
@bfabio
wip: refactor
231ee72 
fix: centered layout in home page

fix: phone number, don't mention E.164
fix: correctly validate phone numbers
feat: accept spaces in phone numbers

fix: better PA picker (italia#158)
* debounced
* properly aligned
* doesn't flicker
* no unintuitive readonly fields

fix: ability to edit the form on error (italia#159)

refactor: simplify the validators (italia#138)

feat: detect wrong urls (TODO)

TODO: tests
bfabio added a commit to bfabio/developers-italia-onboarding that referenced this issue May 26, 2021
@bfabio
feat: improve validation and UI/UX
2b69173 
* fix: centered layout in home page

* fix: don't mention E.164 in phone number validation
  E.164 is unknown to most users.
  Besides, the validation never checked for it anyway and the
  majority of past onboardings were performed with no international
  prefix.

* feat: accept spaces in phone numbers to lower the chance for
  error and improve the UX.

* feat: better PA picker (Fixes italia#158)
  The PA picker in home page does not flicker when typing,
  it's properly aligned and doesn't rely on the readonly support
  fields anymore.

  The result are shown in a more intuitive way.

  Also, the input is debounced and makes less calls to Elasticsearch.

* fix: ability to edit the form on error (Fixes italia#159)
  When the server side validation fails, the user can now fix what's
  wrong right there instead of starting over.

* refactor: simplify the validators (Fixes italia#138)

* feat: code hosting URL validation
  The validation now rejects non HTTPS URLs and URLs that don't
  look like a code hosting organization.

  (ie. https://github.com/foobar/repo will be rejected, but
  https://github.com/foobar won't)
@bfabio bfabio mentioned this issue May 26, 2021
Merged
bfabio added a commit to bfabio/developers-italia-onboarding that referenced this issue May 26, 2021
@bfabio
feat: improve validation and UI/UX
8ee33ca 
* fix: centered layout in home page

* fix: don't mention E.164 in phone number validation
  E.164 is unknown to most users.
  Besides, the validation never checked for it anyway and the
  majority of past onboardings were performed with no international
  prefix.

* feat: accept spaces in phone numbers to lower the chance for
  error and improve the UX.

* feat: better PA picker (Fixes italia#158)
  The PA picker in home page does not flicker when typing, provides
  loading feedback, it's properly aligned and doesn't rely on the
  readonly support fields anymore.

  The result are shown in a more intuitive way.

  Also, the input is debounced and makes less calls to Elasticsearch.

* fix: ability to edit the form on error (Fixes italia#159)
  When the server side validation fails, the user can now fix what's
  wrong right there instead of starting over.

* refactor: simplify the validators (Fixes italia#138)

* feat: code hosting URL validation
  The validation now rejects non HTTPS URLs and URLs that don't
  look like a code hosting organization.

  (ie. https://github.com/foobar/repo will be rejected, but
  https://github.com/foobar won't)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@bfabio bfabio

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: improve validation and UI/UX bfabio/developers-italia-onboarding
1 participant
@bfabio