[4.3] Fix javascript error on frontend MFA captive login page #40330

richard67 · 2023-04-04T12:27:19Z

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

…-for-site

richard67 · 2023-04-05T15:12:03Z

@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.

dautrich · 2023-04-05T18:17:37Z

@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

richard67 · 2023-04-05T18:19:54Z

@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.

dautrich · 2023-04-05T18:24:49Z

I have tested this item ✅ successfully on a834ce0

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40330.}

StefanSTS · 2023-04-07T12:30:45Z

I have tested this item ✅ successfully on a834ce0

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40330.}

richard67 · 2023-04-07T12:33:33Z

RTC

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40330.}

richard67 · 2023-05-01T13:07:37Z

Back to pending due to code change.

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40330.}

richard67 · 2023-05-01T13:44:45Z

@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.

richard67 · 2023-05-01T13:46:41Z

@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 .

dautrich · 2023-05-01T19:52:13Z

@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.

richard67 · 2023-05-01T19:58:37Z

@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.

richard67 · 2023-05-01T21:11:38Z

@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.

dautrich · 2023-05-02T06:22:17Z

I have tested this item ✅ successfully on 35075f4

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40330.}

dautrich · 2023-05-02T06:24:17Z

@richard67
I additionally tested with "Backup Code" as an alternate method: The input field has focus.
Therefore, I set the test result to "Successful".

StefanSTS · 2023-05-02T07:37:12Z

@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.

richard67 · 2023-05-02T07:44:35Z

@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.

richard67 · 2023-05-02T07:46:57Z

@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.

StefanSTS · 2023-05-02T08:12:51Z

@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.

StefanSTS · 2023-05-02T08:14:59Z

I have tested this item ✅ successfully on 35075f4

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.}

richard67 · 2023-05-02T08:16:14Z

RTC

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40330.}

richard67 · 2023-05-02T08:43:34Z

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.}

richard67 · 2023-05-02T09:22:02Z

@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.

dautrich · 2023-05-02T11:34:21Z

I have tested this item ✅ successfully on 10a27fd

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40330.}

StefanSTS · 2023-05-02T11:51:52Z

I have tested this item ✅ successfully on 10a27fd

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40330.}

laoneo · 2023-05-05T13:05:06Z

RTC

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40330.}

…-for-site

obuisard · 2023-05-06T00:02:14Z

Thank you Richard @richard67 for the PR!

richard67 · 2023-05-07T16:24:51Z

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 .

…joomla#40330)" This reverts commit b5f5db7.

… using Webauthn (#40555) * Fix submit button focus on MFA captive site login * Revert "[4.3] Fix javascript error on frontend MFA captive login page (#40330)" This reverts commit b5f5db7. * Use optional chaining operator * Revert unneccessary check for the button * PHPCS --------- Co-authored-by: Olivier Buisard <olivier.buisard@simplifyyourweb.com>

Fix javascript error on frontend MFA captive login

ced141e

joomla-cms-bot added NPM Resource Changed This Pull Request can't be tested by Patchtester PR-4.3-dev labels Apr 4, 2023

richard67 mentioned this pull request Apr 4, 2023

[4.2.9] Cursor Placement on MFA Login to the Frontend #40273

Closed

richard67 changed the title ~~[4.3] Fix javascript error on frontend MFA captive login~~ [4.3] Fix javascript error on frontend MFA captive login page Apr 4, 2023

Merge branch '4.3-dev' into 4.3-dev-fix-multifactorauth-captive-focus…

a834ce0

…-for-site

joomla-cms-bot added the RTC This Pull Request is Ready To Commit label Apr 7, 2023

Hackwar added the bug label Apr 8, 2023

Fix button not focussed when hidden code field

35075f4

joomla-cms-bot removed the RTC This Pull Request is Ready To Commit label May 1, 2023

richard67 added the RTC This Pull Request is Ready To Commit label May 2, 2023

Fix misleading variable name

10a27fd

joomla-cms-bot removed the RTC This Pull Request is Ready To Commit label May 2, 2023

laoneo added the RTC This Pull Request is Ready To Commit label May 5, 2023

laoneo and others added 2 commits May 5, 2023 15:28

Merge branch '4.3-dev' into 4.3-dev-fix-multifactorauth-captive-focus…

9c1fae0

…-for-site

Merge branch '4.3-dev' into 4.3-dev-fix-multifactorauth-captive-focus…

f2cfa8f

…-for-site

obuisard merged commit b5f5db7 into joomla:4.3-dev May 6, 2023

obuisard added this to the Joomla! 4.3.2 milestone May 6, 2023

joomla-cms-bot removed the RTC This Pull Request is Ready To Commit label May 6, 2023

richard67 deleted the 4.3-dev-fix-multifactorauth-captive-focus-for-site branch May 6, 2023 06:40

richard67 mentioned this pull request May 7, 2023

[4.3] Fix submit button focus on frontend MFA captive login page when using Webauthn #40555

Merged

2 tasks

richard67 added a commit to richard67/joomla-cms that referenced this pull request May 8, 2023

Revert "[4.3] Fix javascript error on frontend MFA captive login page (…

6e4453b

…joomla#40330)" This reverts commit b5f5db7.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[4.3] Fix javascript error on frontend MFA captive login page #40330

[4.3] Fix javascript error on frontend MFA captive login page #40330

richard67 commented Apr 4, 2023 •

edited

Loading

richard67 commented Apr 5, 2023 •

edited

Loading

dautrich commented Apr 5, 2023

richard67 commented Apr 5, 2023

dautrich commented Apr 5, 2023

StefanSTS commented Apr 7, 2023

richard67 commented Apr 7, 2023

richard67 commented May 1, 2023

richard67 commented May 1, 2023 •

edited

Loading

richard67 commented May 1, 2023

dautrich commented May 1, 2023

richard67 commented May 1, 2023

richard67 commented May 1, 2023

dautrich commented May 2, 2023

dautrich commented May 2, 2023 •

edited

Loading

StefanSTS commented May 2, 2023

richard67 commented May 2, 2023

richard67 commented May 2, 2023

StefanSTS commented May 2, 2023

StefanSTS commented May 2, 2023

richard67 commented May 2, 2023

richard67 commented May 2, 2023

richard67 commented May 2, 2023

dautrich commented May 2, 2023

StefanSTS commented May 2, 2023

laoneo commented May 5, 2023

obuisard commented May 6, 2023

richard67 commented May 7, 2023

[4.3] Fix javascript error on frontend MFA captive login page #40330

[4.3] Fix javascript error on frontend MFA captive login page #40330

Conversation

richard67 commented Apr 4, 2023 • edited Loading

Summary of Changes

Testing Instructions

Actual result BEFORE applying this Pull Request

Expected result AFTER applying this Pull Request

Link to documentations

richard67 commented Apr 5, 2023 • edited Loading

dautrich commented Apr 5, 2023

richard67 commented Apr 5, 2023

dautrich commented Apr 5, 2023

StefanSTS commented Apr 7, 2023

richard67 commented Apr 7, 2023

richard67 commented May 1, 2023

richard67 commented May 1, 2023 • edited Loading

richard67 commented May 1, 2023

dautrich commented May 1, 2023

richard67 commented May 1, 2023

richard67 commented May 1, 2023

dautrich commented May 2, 2023

dautrich commented May 2, 2023 • edited Loading

StefanSTS commented May 2, 2023

richard67 commented May 2, 2023

richard67 commented May 2, 2023

StefanSTS commented May 2, 2023

StefanSTS commented May 2, 2023

richard67 commented May 2, 2023

richard67 commented May 2, 2023

richard67 commented May 2, 2023

dautrich commented May 2, 2023

StefanSTS commented May 2, 2023

laoneo commented May 5, 2023

obuisard commented May 6, 2023

richard67 commented May 7, 2023

richard67 commented Apr 4, 2023 •

edited

Loading

richard67 commented Apr 5, 2023 •

edited

Loading

richard67 commented May 1, 2023 •

edited

Loading

dautrich commented May 2, 2023 •

edited

Loading