[OTHER] Integration with a module

[neo191987]

Hello, first of all I want to congratulate you on the new year and wish you a successful year. I want to integrate the social buttons with a login module but when I click on the button nothing happens. This is the code I use: https://github.com/neo191987/test/blob/main/social Any suggestion?

[nikosdion]

Your problem seems to be here:

<?php $form   = 'login-form';
$extraButtons = Joomla\CMS\Helper\AuthenticationHelper::getLoginButtons($form); ?>

The $form parameter must be the id attribute of your module's <form> element. Remember that the id must be unique on the HTML output of the page. Joomla is already using id="login-form" for its own login forms. Use something different for your module.

Further to that, check that there are no other JavaScript errors on the page.

[neo191987]

Hi, I was able to partially solve the problem. It was caused by a js conflict, I removed it using the following code, now I have to fix the Web Authentication button. Any ideas.

jQuery('body').on('click.toolbar.toggle.dropdown', '[data-fd-dropdown]', function() { for(var b=document.querySelectorAll('.akeeba-sociallogin-link-button-j4'),a=0;a<b.length;a++)b[a].addEventListener('click',function(c){window.location=c.currentTarget.dataset.socialurl}); });

[nikosdion]

Why are you using jQuery? It's no longer being loaded automatically in Joomla 4 and it will eventually become deprecated and ultimately removed from Joomla. jQuery was a crutch back when every browser had its own quirks and misadventures handing basic things like DOM, events, and XMLHttpRequest. Modern browsers —like, 2014 and later— have improved in strides with regards to interoperability. Just use vanilla JavaScript, it works.

Further to that, you should never add any kind of JavaScript click event listener on the additional login buttons. They already have their own event handlers. Don't try to circumvent what these buttons do!

Regarding the Web Authentication button, please read see the code which performs the login: https://github.com/joomla/joomla-cms/blob/75d6c4970d2940ae8fdebe52335ab5411b52f4ea/build/media_source/plg_system_webauthn/js/login.es6.js#L194-L197

You must have two input fields with name="username" (for the username) and name="return" (for the base64-encoded login return URL). If WebAuthn cannot find these fields it cannot work. The former is used to do an XHR to fetch the WebAuthn public keys of the user and the challenge random string so it can ask the browser to initiate the WebAuthn Public Key Challenge ceremony (logging in with WebAuthn). The latter is used to redirect the user to the correct page after the login is complete.