Prepopulate username field on web app login pages

Often I need to access several web apps running on the same hostname, with different usernames. For example, I might need to access webmail, phpMyAdmin, and a wiki all on https://dev.example.com/. For convenience, I usually save the login details in the web browser, but if there are multiple different usernames on the same host then the browser doesn’t know which one to automatically populate into the login field. However, if each login page itself prepopulates the username, then the browser is then able to prepopulate the saved password as well.

It turns out that it’s possible to prepopulate the username in many common open source web apps by passing it in as a GET parameter when loading the login page. You can then save this as a bookmark to speed up future logins. Here are examples for several web services:

Roundcube: https://example.com/roundcubemail/?_user=foo
MediaWiki: https://example.com/mediawiki/index.php/Special:UserLogin?wpName=foo
Nextcloud: https://example.com/index.php/login?user=foo
Kopano: https://example.com/kopano/?user=foo

These apps also autofocus the login form, meaning that you can just load the bookmark and then press Enter to log in immediately.

It’s possible to get phpMyAdmin to preload the username and autofocus the login form as well, but it requires a bit of hacking around as it’s not currently supported out of the box. To preload the username, open the file libraries/classes/Plugins/Auth/AuthenticationCookie.php in a text editor and add the following snippet in the function showLoginForm() after the section that sets the initial value of $default_user:

// Preload username from $_GET if available
if (empty($default_user) and !empty($_GET['pma_username'])) {
  $default_user = htmlspecialchars($_GET['pma_username'] ?? '', ENT_QUOTES);
}

To autofocus the login form, add the following snippet to the end of templates/login/form.twig:

<script>
/*<![CDATA[*/
document.addEventListener('DOMContentLoaded', function () {
  setTimeout(() => {
    document.getElementById('input_username').focus();
    document.getElementById('input_username').selectionStart = document.getElementById('input_username').selectionEnd = document.getElementById('input_username').value.length;
  }, 0);
});
/*]]>*/
</script>

(Note that adding the autofocus attribute to the input_username field does not work, even though it normally does in HTML forms.)

In general I don’t recommend messing with core files, but phpMyAdmin is so complicated that I haven’t figured out a neat way to slot these code changes into config or add-ons. Hopefully they will support these features for convenience going forwards. Once you’ve made these changes then you can use a bookmark like this:

phpMyAdmin: https://example/phpmyadmin/index.php?pma_username=foo

Prepopulate username field on web app login pages

Add new comment