BOINC Drupal Release

Terms-of-use Form: make form button YES disabled if checkbox is not checked

Details

Description

When the user visits a page such as the terms-of-use (TOU) agreement form, there is a checkbox which you must agree to the TOU. If that checkbox is not checked, the 'Yes' button should be grayed-out or disabled, preventing the user from clicking it.

Update: Another similar place this should be implemented is the Account Registration Form, where the TOU is present. The checkbox should be checked before the submit button is available.

This would be a more friendly UX.

Issue Links

is related to

Bug - A problem which impairs or prevents the functions of the product. DBOINCP-497 Web registration broken

  • Critical - Highest priority action items
  • Resolved - A resolution has been taken, and it is awaiting verification by reporter. From here issues are either reopened, or are closed.

Activity

Ascending order - Click to sort in descending order
Shawn Kwang made changes -
Field Original Value New Value
Description When the user visits a page such as the terms-of-use (TOU) agreement form, there is a checkbox which you must agree to the TOU. If that checkbox is not checked, the 'Yes' button should be grayed-out or disabled, preventing the user from clicking it.

This would be a more friendly UX. 		When the user visits a page such as the terms-of-use (TOU) agreement form, there is a checkbox which you must agree to the TOU. If that checkbox is not checked, the 'Yes' button should be grayed-out or disabled, preventing the user from clicking it.

Update: Another similar place this should be implemented is the Account Registration Form, where the TOU is present. The checkbox should be checked before the submit button is available.

This would be a more friendly UX.
Hide
Permalink
Shawn Kwang added a comment - - edited

Created two merge requests:

1. Github PR 3033

Adds Javascript to terms-of-use forms, both user registration form and terms-of-use form for existing users. Disables submit button until the checkbox has been checked. For non-JS browsers, if the checkbox is not checked the submit button will work, but user will receive error message.

CSS changed so submit button is grayed-out and strike-through added, corresponding MR for einsteni theme is below.

2. AEI Gitlab MR 37

Changes style of text when disabled: text is grayed-out and strike-through added. See screenshot below.

Show
Shawn Kwang added a comment - - edited Created two merge requests: 1. Github PR 3033 Adds Javascript to terms-of-use forms, both user registration form and terms-of-use form for existing users. Disables submit button until the checkbox has been checked. For non-JS browsers, if the checkbox is not checked the submit button will work, but user will receive error message. CSS changed so submit button is grayed-out and strike-through added, corresponding MR for einsteni theme is below. 2. AEI Gitlab MR 37 Changes style of text when disabled: text is grayed-out and strike-through added. See screenshot below.
Shawn Kwang made changes -
Assignee Shawn Kwang [ skwang ] Tristan Olive [ tristano ]
Shawn Kwang made changes -
Attachment srcsh_termsofusejs101.png [ 16101 ]
Hide
Permalink
Shawn Kwang added a comment -

Meeting Summary (2019-02-28):

Tristan merged the javascript code in. I will change the CSS in the einstein theme on our AEI Gitlab instance. I will also updated the boinc theme CSS as well. The plan is to look into CSS cursor changes, and even pointer-events.

Finally, we discussed the possibility of re-visiting our UI in terms of button/links.

Show
Shawn Kwang added a comment - Meeting Summary (2019-02-28): Tristan merged the javascript code in. I will change the CSS in the einstein theme on our AEI Gitlab instance. I will also updated the boinc theme CSS as well. The plan is to look into CSS cursor changes, and even pointer-events. Finally, we discussed the possibility of re-visiting our UI in terms of button/links.
Shawn Kwang made changes -
Assignee Tristan Olive [ tristano ] Oliver Behnke [ oliverb ]
Hide
Permalink
Shawn Kwang added a comment -

Deployment: Deploy codebase for BOINC-drupal and then (drupal) Einstein theme.

Show
Shawn Kwang added a comment - Deployment: Deploy codebase for BOINC-drupal and then (drupal) Einstein theme.
Hide
Permalink
Oliver Behnke added a comment -

Deployed on both sites, please test.

Show
Oliver Behnke added a comment - Deployed on both sites, please test.
Oliver Behnke made changes -
Assignee Oliver Behnke [ oliverb ] Shawn Kwang [ skwang ]
Hide
Permalink
Shawn Kwang added a comment -

Javascript feature is working as expected.

Show
Shawn Kwang added a comment - Javascript feature is working as expected.
Shawn Kwang made changes -
Status Open [ 1 ] Resolved [ 5 ]
Resolution Fixed [ 1 ]
Oliver Behnke made changes -
Link This issue is related to DBOINCP-497 [ DBOINCP-497 ]

People

  • Assignee:
    Shawn Kwang
    Reporter:
    Shawn Kwang
Vote (0)
Watch (2)

Dates

  • Created:
    Updated:
    Resolved: