With the all new AJAX powered TYPO3 backend, the default frontend loginbox looks like old and slow technology… In this tutorial I will turn the default TYPO3 loginbox into an AJAX-powered loginbox with the extension ods_ajaxfelogin.

First: Import the extension through the TYPO3 Extension Manager:

You might need to install two additional extensions: xajax (for ajax support) and the default TYPO3 loginbox which is already available but not active.

We now have all necessary extensions.

Insert a loginbox into a page, by selecting the regular default login content element. If this is your first loginbox, please create a usergroup and a user first, preferably in a System Folder. In the login content element, point the startingpoint to this System Folder.

If you’re familiar with the default TYPO3 login box, you’ll notice nothing has actually changed in the frontend. To make the ajax-magic work, you should make some (small) template adjustments. The extension (ods_ajaxfelogin) provides a ready-to-use template, which is basically the same default template but with those small adjustments.

To make use of this template, we need to tell TYPO3 to use this template, instead of the default one. Create a TypoScript template and put the following inside the ‘setup’ area:

# Custom template for the TYPO3 loginbox
plugin.tx_felogin_pi1 {
	templateFile = EXT:ods_ajaxfelogin/felogin.html
}

In the code above I use the template provided by ods_ajaxfelogin, but you might way to copy the contents of this file and create your own file. This way you can make adjustments according to your design needs.

After you applied the code above, you should have an AJAX-powered loginbox in the frontend.