Login password is not stored with Firefox 63.0.3

[LudovicRousseau]

Detailed description of the problem

I use Firefox 63.0.3 and it does not propose me to store the password I use to login to Lychee.
https://support.mozilla.org/en-US/kb/usernames-and-passwords-are-not-saved

It works fine with Safari 12.0.1 on the same Lychee site. Firefox also works fine to store password for other sites and for my test page described bellow.
I tried with Firefox in Safe mode and the problem is still present.
https://support.mozilla.org/en-US/kb/troubleshoot-extensions-themes-to-fix-problems

I tried to reproduce the problem using a simple HTML page using the same <input > fields as Lychee and the password is correctly stored.

	  <input class="text" name="username" autocomplete="on" type="text"
	  placeholder="Nom d'utilisateur" autocapitalize="off">

	  <input class="text" name="password"
	  autocomplete="current-password" type="password" placeholder="Mot de passe">

	  <a href="passwd.html">go</a>

Steps to reproduce the issue

Use Firefox to visit a Lychee site and login.
After you enter the login + password Firefox does not propose to store the password

I am not sure the problem is not on my side. So, someone, please confirm you can reproduce the problem.

Output of the diagnostics (Settings => Diagnostics)

Diagnostics

Warning: Dropbox import not working. No property for dropboxKey.
No critical problems found. Lychee should work without problems!

System Information

Lychee Version (json): 3.2.5
DB Version: update_030205
System: Linux
PHP Version: 7
MySQL Version: 50505
Imagick: 1
Imagick Active: 1
Imagick Version: 1687
GD Version: 2.2.4
Plugins:

Browser and system

Firefox 63.0.3 on macOS Mojave 10.14.1

[bennettscience]

I confirmed the bug and after some research, found the reason.

Browsers handle password submits differently. Firefox only offers to save passwords when there is a form.submit() event that includes a password input field (reference). Since the Lychee frontend uses AJAX to pass login information, there is no submit event, thus no password prompt.

Wrapping lychee.loginDialog in a <form> element and calling the .submit() method in lychee.login will display the save password prompt in Firefox.

Lychee-front/scripts/lychee.js line 187

lychee.loginDialog = function() {

	let msg = lychee.html`
			  <p class='signIn'>
			  <form id="loginForm" onsubmit="this.preventDefault()">
				  <input class='text' name='username' autocomplete='on' type='text' placeholder='$${ lychee.locale['USERNAME'] }' autocapitalize='off'>
				  <input class='text' name='password' autocomplete='current-password' type='password' placeholder='$${ lychee.locale['PASSWORD'] }'>
			  </form>
			  </p>
			  <p class='version'>Lychee ${ lychee.version }<span> &#8211; <a target='_blank' href='${ lychee.updateURL }'>${ lychee.locale['UPDATE_AVAILABLE'] }</a><span></p>
			  `;
...

line 152

lychee.login = function(data) {
    
    $('#loginForm').submit();
...

The problem this solution causes is that the window reload appends a query string exposing the username and password strings from the data object. Potentially, we could set the form method to POST, but I haven't tried that yet.