Two Factor Authentication select box not working in user profile

belcirelk

In the frontend, it's impossible to add 2 factor authentication (google or yubikey) in the user edit profile page. The select field is not working. When looking at the source there is a style "display: none" on the div containing the settings while the javascript toggle between class hidden/nothing.

saguaros

belcirelk

Does it show with default Joomla template? Could you try it first?

belcirelk

saguaros Yes, it works in the default Joomla, I used it to understand what was not working and to make a quick fix for my website.
I am not an expert, but I quickly fixed it on my website by removing the default style "display:none" in profile/edit.php and adding the class hidden instead (line 120, exactly like in default joomla). Then I added a class hidden with display:none on a stylesheet loaded when this page is shown.

saguaros

belcirelk is that ok now?

belcirelk

Yes, I was able to fix it, but it would be nice to have it fixed in the official package. I am probably not the only one to use 2 factor authentification.

Here how to see the bug:
1) activate the "Two Factor Authentication - Google Authenticator" or "Two Factor Authentication - YubiKey" (or both) plugin that come with Joomla 4.
2) Go on the frontend and login.
3) Go to the user profile page
4) Click on edit
5) The two factor section is there, but nothing happens when you select one (the block is there in the source, but the javascript is not working when it's time to reveal it).

saguaros

belcirelk

Yes, I replicated the same steps, even with default template of Joomla - Cassiopeia but it looks the same as editing profile with T4:

Not sure how you want it should be?

belcirelk

saguaros If this is what you get in t4, it means that it works. For me it was not showing up! So it looks like there is something wrong on my side interfering with it.

saguaros

belcirelk I think so, pls try to install latest version for T4 plugin and template + clear all caches.

4creator

Same issue here!
I use the latest version for T4 plug-in (T4 System Plugin 2.2.1) and template (T4 Blank Template Bs5 1.1.6).

4creator

I found the reason.
The following HTML was generated:
<div id="com_users_twofactor_totp" style="display: none">

You should investigate the possibility of selecting "Google Authenticator" from the pull-down menu and still having style="display: none".

Postscript:
T4 is outputting a different source than Cassiopeia. Compare below;

Cassiopeia:
<select id="jform_twofactor_method" name="jform[twofactor][method]" onchange="Joomla.twoFactorMethodChange();" class="form-select">

Change from <div id="com_users_twofactor_totp" class="hidden"> to <div id="com_users_twofactor_totp" class>

T4:
<select id="jform_twofactor_method" name="jform[twofactor][method]" onchange="Joomla.twoFactorMethodChange()" style="display: none;">

Operating the pulldown does not change the following sources;
<div id="com_users_twofactor_totp" style="display: none">

saguaros

4creator

You can try this tweak:

1 -- Backup this file: /plugins/system/t4/themes/base/html/com_users/profile/edit.php
2 -- Download attached file >> unzip and copy to replace above file

editphp.zip

3kB

4creator

Hi saguaros,

Thank you for sending a file. However, unfortunately this doesn't solve the issue. This is because the behavior does not change according to the pull-down selection of Authentication Method.

In this new file, even if I select Disable Two Factor Authentication, the result is the same as when Google Authentication is selected. The result is no different than when I force CSS to eliminate style="display: none".

Could you please reconsider?

4creator

Hello again,

After applying the new file, I was able to confirm the following behaviors by the Authentication Method pull-down;

From
<div id="com_users_twofactor_totp" class="hidden">
To
<div id="com_users_twofactor_totp" class>

So, I added the following CSS to my custom.css;
#com_users_twofactor_totp.hidden{display: none; visibility: hidden}

Finally, my issue was sloved!

Thanks!!

saguaros

4creator We made it so it looks the same with default Joomla.

Thanks for your sharing though 🙂