[#40330] - [4.3] Fix javascript error on frontend MFA captive login page
- Fixed in Code Base
- 6 May 2023
- Medium
- Build: 4.3-dev
- # 40330
- Diff
- richard67:4.3-dev-fix-multifactorauth-captive-focus-for-site
User tests: Successful: Unsuccessful:
Pull Request for Issue #40273 .
Summary of Changes
This pull request (PR) moves the .querySelector('button') in the "two-factor-focus.es6.js" script to the right place to fix a javascript error on the MFA captive login page for the site (frontend).
The remaining code in that function is already so that it does not need the removed part.
Testing Instructions
Apply the changes from this PR and then run npm ci or npm run build:js when on a development environment.
When on a regular installation where you have no npm, use the update package or the custom update URL created by drone for this PR.
After having applied the changes, clear your browser cache to make sure you are not testing the old, unmodified javascript.
- Create a user account with MFA active who can login to backend and frontend.
The user should have activated at least one MFA method which requires to enter a numeric verification code, e.g. TOTP, and another one which doesn't require such a code (Webauthn e.g with Windows Hello). - Login to the frontend with this account with username and password.
- Check if depending on the MFA method, the input field for the verification code has focus.
Use the "Select a different method" button in the toolbar and check that for each method.
Watch the browser console with the developer tools of your browser to see if there are js errors.
Result: See section "Actual result BEFORE applying this Pull Request" without the PR, and "Expected result AFTER applying this Pull Request" with the PR. - Enter a verification code if necessary and use the validation button to finally log in.
- Login to the backend with this account with username and password.
- Check if depending on the MFA method, the input field for the verification code or the button to validate with the authenticator has focus.
Use the "Select a different method" button in the toolbar and check that for each method.
Watch the browser console with the developer tools of your browser to see if there are js errors.
Result: The MFA captive login page for the backend works with this PR on the same way as without this PR, i.e. nothing is broken by this PR, no javascript errors related to the "two-factor-focus" in both cases. - Enter a verification code if necessary and use the validation button to finally log in.
Actual result BEFORE applying this Pull Request
On the MFA captive login page for the frontend:
- When an MFA method is used which does not require to enter a numeric verification code, i.e. webauthn, no button does have focus because the javascript modified by this PR here is not loaded, see https://github.com/joomla/joomla-cms/blob/4.3-dev/components/com_users/tmpl/captive/default.php#L25-L28 , i.e. this works as expected.
- When an MFA method is used which requires to enter a numeric verification code, e.g. TOTP or backup codes, you get a Javascript error "Uncaught TypeError: document.getElementById(...) is null" in the browser console, and no input field has focus.
When "Debug System" is on in Global Configuration so the unminified javascript is loaded, you will see the error happens here: https://github.com/joomla/joomla-cms/blob/4.3-dev/build/media_source/com_users/js/two-factor-focus.es6.js#L12
On the MFA captive login page for the backend everything works as expected:
- When an MFA method is used which does not require to enter a numeric verification code, i.e. webauthn, the button to validate with the authenticator has focus.
- When an MFA method is used which requires to enter a numeric verification code, e.g. TOTP or backup codes, the field to enter the verification code has focus.
Expected result AFTER applying this Pull Request
On the MFA captive login page for the frontend:
- When an MFA method is used which does not require to enter a numeric verification code, i.e. webauthn, everything works as before applying this pull request, i.e. no button has focus.
- When an MFA method is used which requires to enter a numeric verification code, e.g. TOTP or backup codes, the field to enter the verification code has focus. There are no javascript error in browser console related to the "two-factor-focus" script.
On the MFA captive login page for the backend: Everything works as well as before applying this pull request.
Link to documentations
Please select:
-
No documentation changes for docs.joomla.org needed
-
No documentation changes for manual.joomla.org needed
joomla-cms-bot
- | Category | ⇒ | JavaScript Repository NPM Change |
| Status | New | ⇒ | Pending |
| Title |
|
||||||
| Labels |
Added:
NPM Resource Changed
PR-4.3-dev
|
||
@richard67 I've successfully tested this pull request on a fresh 4.3.0-rc1 installation, following your instructions.
- No Javascript error on frontend login
- Cursor sits in input field on frontend login
- Submit button works
- No change in behavior on backend login
@dautrich Could you go to the PR in the issue tracker here https://issues.joomla.org/tracker/joomla-cms/40330 and use the blue "Test this" button at the top left corner, then select the appropriate test result (success in this case) and finally submit? Thanks in advance.
I have tested this item
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40330.
I have tested this item
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40330.
| Status | Pending | ⇒ | Ready to Commit |
RTC
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40330.
| Labels |
Added:
?
bug
|
||
| Status | Ready to Commit | ⇒ | Pending |
Back to pending due to code change.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40330.
@dautrich @StefanSTS Sorry, but I had to fix a bug in this pull request. Could you test it again with the latest changes? You can find the new update package or custom update URL here: https://ci.joomla.org/artifacts/joomla/joomla-cms/4.3-dev/40330/downloads/65131/ . Thanks in advance.
@dautrich @StefanSTS P.S.: Please also check the updated testing instructions. If not sure how to add a Webauthn authenticator: When using a Windows client, you can add e.g. a PIN authentication with Windows Hello as described here: https://help.deakin.edu.au/ithelp?id=kb_article&sysparm_article=KB0013049 .
@richard67
I did a test on a (nearly empty) installation with 4.3.1-rc1 and Cassiopeia. To do so, I extracted the 6 relevant files from your update package and used them to replace the 6 files from my installation. I tested with a user with TOTP (as default method) and Windows Hello (as additional Webauthn Authenticator).
In backend everything works as expected: When TOTP is chosen, the input field has focus. With Windows Hello, the "Validate ..." button has focus.
In frontend there is a little issue: While using TOTP, the input field has focus; fine. With Windows Hello, the "Validate ..." button does not have focus.
There are no JS errors any more.
For me, the result is fine: I typically use my mouse to click a button, not the enter key on my keyboard.
@dautrich Thanks for testing. Regarding the frontend and the "Validate ..." button with Windows Hello I have to check and possibly make again a correction. Maybe it was already broken without the PR. Not sure if I manage that today. I'll let you know when I have it ready.
@dautrich Your test was valid. I just have investigated and found out that when Webauthn is used, then nothing has focus on the frontend captive page because the javascript is not loaded due to these lines: https://github.com/joomla/joomla-cms/blob/4.3-dev/components/com_users/tmpl/captive/default.php#L25-L28 . So your observation is correct and expected. I have updated the testing instructions accordingly. Could you mark your test result on the issue tracker again here https://issues.joomla.org/tracker/joomla-cms/40330 ? Thanks in advance.
I have tested this item
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40330.
@richard67
I additionally tested with "Backup Code" as an alternate method: The input field has focus.
Therefore, I set the test result to "Successful".
@richard67 I could only test the Fixed Code auth, that is working as expected with focus on the code input.
Unfortunately I cannot test the method with the hidden code input and button focus, since I don't put auth apps on my phone.
@StefanSTS If you are working with the browser on a Windows 10 or 11 computer, you can temporarily add a PIN authentication with Windows Hello in "Einstellungen -> Konten" as described here: https://help.deakin.edu.au/ithelp?id=kb_article&sysparm_article=KB0013049 , then configure MFA in Joomla backend to use that, and then after the test remove that PIN authentication from your Windows.
@StefanSTS P.S.: If you can't do what I suggested in my previous comment, then your test covers the bug fix, it only doesn't cover the test if everything else still works. I would count it as a successful test, so you could mark your test result in the issue tracker.
@richard67 I am running Linux, so I cannot do the Hello test.
The function of the JS seems fine, even though the variables are a bit mixed up now, since elToolbarButton is now the outer custom HTML element and not the button element anymore while elValidateButton is a button element.
In administrator/components/com_users/tmpl/captive/default.php the button structure is also different.
Maybe this mix of custom HTML elemenet joomla-toolbar-button, button and simple a element needs some maintenance in the versions to come.
For now I guess it's about functionality, so I mark this successful in the sense that you mentioned.
I have tested this item
Tested focus on the code input successfully. Could not test the button focus with my means.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40330.
| Status | Pending | ⇒ | Ready to Commit |
RTC
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40330.
| Status | Ready to Commit | ⇒ | Pending |
Back to pending again due to code change.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40330.
@dautrich @StefanSTS Sorry for bothering you again. But Stephan is right, the variable name is misleading now. I have changed that. Could you repeat your tests? You can find the new downloads on https://ci.joomla.org/artifacts/joomla/joomla-cms/4.3-dev/40330/downloads/65149/ . Thanks in advance.
I have tested this item
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40330.
I have tested this item
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40330.
| Status | Pending | ⇒ | Ready to Commit |
RTC
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40330.
| Status | Ready to Commit | ⇒ | Fixed in Code Base |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2023-05-06 00:01:35 |
| Closed_By | ⇒ | obuisard |
Thank you Richard @richard67 for the PR!
Thanks @dautrich and @StefanSTS for tests. I have made a follow up PR to fix the submit button focus for Webauthn in frontend, too. So if you can find the time for testing: #40555 .
@dautrich Could you test this pull request here which fixes your issue #40273 "[4.2.9] Cursor Placement on MFA Login to the Frontend"? If you are not sure how to test, here some instructions.
Download the update package for this PR from here: https://ci.joomla.org/artifacts/joomla/joomla-cms/4.3-dev/40330/downloads/64345/Joomla_4.3.0-rc3-dev+pr.40330-Development-Update_Package.zip .
If that download is not available anymore you can also download from here: https://test5.richard-fath.de/Joomla_4.3.0-rc3-dev+pr.40330-Development-Update_Package.zip .
Unpack that zip in some folder on your PR.
Then make a backup of folder "media/com_users/js" on your site, or better on a copy of your site which you can use for testing. The backup is only for the case if something gets broken (what I don't expect).
Then take all files with names beginning with "two-factor-focus" from the same folder "media/com_users/js" in the unpacked zip file, which are:
two-factor-focus-es5.js
two-factor-focus-es5.min.js
two-factor-focus-es5.min.js.gz
two-factor-focus.js
two-factor-focus.min.js
two-factor-focus.min.js.gz
Then copy these files to the "media/com_users/js" folder of your site (or the copy site for testing).
Then follow the testing instructions in the description (initial post) of this pull request here.
The files haven't changed since 4.2.0 so they are compatible even if built on a 4.3-dev branch.
Thanks in advance.