Bug 28934 - OPAC registration form design is not consistent
Summary: OPAC registration form design is not consistent
Status: Signed Off
Alias: None
Product: Koha
Classification: Unclassified
Component: OPAC (show other bugs)
Version: master
Hardware: All All
: P5 - low trivial (vote)
Assignee: Joonas Kylmälä
QA Contact: Testopia
URL:
Keywords:
Depends on: 20819
Blocks:
  Show dependency treegraph
 
Reported: 2021-09-01 11:41 UTC by Owen Leonard
Modified: 2021-09-21 21:30 UTC (History)
3 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Small patch
Text to go in the release notes:
Version(s) released in:


Attachments
Bug 28934: Correct markup of GDPR consent in OPAC patron entry (3.95 KB, patch)
2021-09-01 12:14 UTC, Owen Leonard
Details | Diff | Splinter Review
Issue with GDPR checkbox at smaller widths and with Required field text (75.75 KB, image/png)
2021-09-02 23:09 UTC, Hayley Pelham
Details
Bug 28934: Correct markup of GDPR consent in OPAC patron entry (6.04 KB, patch)
2021-09-13 11:15 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 28934: Correct markup of GDPR consent in OPAC patron entry (6.12 KB, patch)
2021-09-14 03:37 UTC, Hayley Pelham
Details | Diff | Splinter Review
Bug 28934: Make the OPAC registration form design consistent (4.07 KB, patch)
2021-09-19 10:27 UTC, Joonas Kylmälä
Details | Diff | Splinter Review
Bug 28934: Make the OPAC registration form design consistent (6.13 KB, patch)
2021-09-21 16:32 UTC, Joonas Kylmälä
Details | Diff | Splinter Review
Bug 28934: Make the OPAC registration form design consistent (6.21 KB, patch)
2021-09-21 21:30 UTC, Hayley Pelham
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Owen Leonard 2021-09-01 11:41:35 UTC
The markup around the GDPR checkbox in the OPAC self registration/update form could be improved to make it more consistent with other form fields.
Comment 1 Owen Leonard 2021-09-01 12:14:32 UTC
Created attachment 124322 [details] [review]
Bug 28934: Correct markup of GDPR consent in OPAC patron entry

This patch makes changes to the markup around the GDPR consent checkbox
in the OPAC self-registration / update page to make it more consistent
with other form fields on the page.

The patch also adds some missing attributes which are required to enable
JavaScript validation of the checkbox.

To test, apply the patch and rebuild the OPAC CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

- Go to Administration -> System preferences and Enable the system
  preference PatronSelfRegistration.
- Set the system preference GDPR_Policy to "Enforce".
- Go to the OPAC and click the "Register here" link.
- Under the "GDPR consent" heading near the bottom of the page,
  confirm that the "I agree" checkbox lines up with other form fields on
  the page, and that the "Required" label lines up below it.
- Submit the form without checking the GDPR consent checkbox.
- The form should not be submitted, and a "This field is
  required" message should appear next to the checkbox label.
Comment 2 Hayley Pelham 2021-09-02 23:09:44 UTC
Created attachment 124441 [details]
Issue with GDPR checkbox at smaller widths and with Required field text
Comment 3 Hayley Pelham 2021-09-02 23:09:56 UTC
Hi Owen,

This looks good at larger browser widths and the checkbox and Required text lines up with the rest of the form, but at smaller browser widths the checkbox becomes misaligned, and when the form is submitted without checking the checkbox and the This field is required text appears, some weird interaction happens.

I have attached a screenshot illustrating this issue.

Cheers,
Hayley
Comment 4 Owen Leonard 2021-09-13 11:15:14 UTC Comment hidden (obsolete)
Comment 5 Hayley Pelham 2021-09-14 03:37:08 UTC
Created attachment 124852 [details] [review]
Bug 28934: Correct markup of GDPR consent in OPAC patron entry

This patch makes changes to the markup around the GDPR consent checkbox
in the OPAC self-registration / update page to make it more consistent
with other form fields on the page.

The patch also adds some missing attributes which are required to enable
JavaScript validation of the checkbox.

To test, apply the patch and rebuild the OPAC CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

- Go to Administration -> System preferences and Enable the system
  preference PatronSelfRegistration.
- Set the system preference GDPR_Policy to "Enforce".
- Go to the OPAC and click the "Register here" link.
- Under the "GDPR consent" heading near the bottom of the page,
  confirm that the "I agree" checkbox lines up with other form fields on
  the page, and that the "Required" label lines up below it.
- Submit the form without checking the GDPR consent checkbox.
- The form should not be submitted, and a "This field is
  required" message should appear next to the checkbox label.

Signed-off-by: Hayley Pelham <hayleypelham@catalyst.net.nz>
Comment 6 Joonas Kylmälä 2021-09-19 08:30:31 UTC
(In reply to Hayley Pelham from comment #5)
> Created attachment 124852 [details] [review] [review]
> Bug 28934: Correct markup of GDPR consent in OPAC patron entry
> 
> This patch makes changes to the markup around the GDPR consent checkbox
> in the OPAC self-registration / update page to make it more consistent
> with other form fields on the page.
> 
> The patch also adds some missing attributes which are required to enable
> JavaScript validation of the checkbox.
> 
> To test, apply the patch and rebuild the OPAC CSS
> (https://wiki.koha-community.org/wiki/
> Working_with_SCSS_in_the_OPAC_and_staff_client).
> 
> - Go to Administration -> System preferences and Enable the system
>   preference PatronSelfRegistration.
> - Set the system preference GDPR_Policy to "Enforce".
> - Go to the OPAC and click the "Register here" link.
> - Under the "GDPR consent" heading near the bottom of the page,
>   confirm that the "I agree" checkbox lines up with other form fields on
>   the page, and that the "Required" label lines up below it.
> - Submit the form without checking the GDPR consent checkbox.
> - The form should not be submitted, and a "This field is
>   required" message should appear next to the checkbox label.
> 
> Signed-off-by: Hayley Pelham <hayleypelham@catalyst.net.nz>

The alignment is still slightly off with this patch, noticable if you put the cursor to the input box above and then use down arrow to scroll to the checkbox. Also, I would prefer we would use consistent way to show the fields, i.e. always label and then the input form, this would make the alignment perfect as well. The gender field has also the same problem. I could send a patch to fix both of them.
Comment 7 Joonas Kylmälä 2021-09-19 10:27:39 UTC
Created attachment 125032 [details] [review]
Bug 28934: Make the OPAC registration form design consistent

The gender/sex and GDPR inputs were slightly misaligned (by
1.5em). Now they are aligned with the other inputs which have a width
of 10em (9em width + margin 1em). The label assignments and required
attributes for input elements are made also consistent.

To test:
 1) Enable GDPR_Policy syspref
 2) Apply patch, run "yarn build --view opac", restart plack
 3) Go to /cgi-bin/koha/opac-memberentry.pl
 3) Check that the GDPR input box shows the required text now in red
    color
 3) Check that the alignment of sex/gender and GDPR input matches with
    the other inputs perfectly.
Comment 8 Hayley Pelham 2021-09-20 03:16:26 UTC
Hi Joonas,

The alignment is much closer to the other form elements now, which is great.

However, if all required fields are completed except the GDPR checkbox, we don't get the 'This field is required' text and highlighting like we do for other elements.

Should this be present?

Cheers,
Hayley
Comment 9 Joonas Kylmälä 2021-09-21 14:38:17 UTC
(In reply to Hayley Pelham from comment #8)
> Hi Joonas,
> 
> The alignment is much closer to the other form elements now, which is great.
> 
> However, if all required fields are completed except the GDPR checkbox, we
> don't get the 'This field is required' text and highlighting like we do for
> other elements.
> 
> Should this be present?

It should be. I will revise this.
Comment 10 Joonas Kylmälä 2021-09-21 16:32:49 UTC
Created attachment 125117 [details] [review]
Bug 28934: Make the OPAC registration form design consistent

The gender/sex and GDPR inputs were slightly misaligned (by
1.5em). Now they are aligned with the other inputs which have a width
of 10em (9em width + margin 1em). The label assignments and required
attributes for input elements are made also consistent.

To test:
 1) Enable GDPR_Policy syspref
 2) Apply patch, run "yarn build --view opac", restart plack
 3) Go to /cgi-bin/koha/opac-memberentry.pl
 4) Check that the GDPR input box shows the required text now in red
    color
 5) Check that the alignment of sex/gender and GDPR input matches with
    the other inputs perfectly.
Comment 11 Joonas Kylmälä 2021-09-21 16:33:22 UTC
(In reply to Joonas Kylmälä from comment #9)
 > However, if all required fields are completed except the GDPR checkbox, we
> > don't get the 'This field is required' text and highlighting like we do for
> > other elements.
> > 
> > Should this be present?
> 
> It should be. I will revise this.

Done.
Comment 12 Hayley Pelham 2021-09-21 21:30:46 UTC
Created attachment 125123 [details] [review]
Bug 28934: Make the OPAC registration form design consistent

The gender/sex and GDPR inputs were slightly misaligned (by
1.5em). Now they are aligned with the other inputs which have a width
of 10em (9em width + margin 1em). The label assignments and required
attributes for input elements are made also consistent.

To test:
 1) Enable GDPR_Policy syspref
 2) Apply patch, run "yarn build --view opac", restart plack
 3) Go to /cgi-bin/koha/opac-memberentry.pl
 4) Check that the GDPR input box shows the required text now in red
    color
 5) Check that the alignment of sex/gender and GDPR input matches with
    the other inputs perfectly.

Signed-off-by: Hayley Pelham <hayleypelham@catalyst.net.nz>