From bf6e634e042b726edd97335ac36b2305f8101b3f Mon Sep 17 00:00:00 2001
From: Inverle <inverle@proton.me>
Date: Tue, 30 Sep 2025 10:12:15 +0200
Subject: Fix autocomplete issues in change password form (#7812)

## Screenshots

<details>
<summary>Before</summary>

<img width="773" height="652" alt="image" src="https://github.com/user-attachments/assets/89a0e58c-8c4a-41ff-b5d6-3e916079d563" />

</details>

<details>
<summary>After</summary>

<img width="1006" height="646" alt="image" src="https://github.com/user-attachments/assets/f4575103-7365-4870-a170-2742bf10eb27" />

</details>

This is an example on Firefox, where the `Master authentication token` field was incorrectly being autofilled.
Red borders are indicating that the fields are required.

## List of changes

* `required="required"` is now being added to the password fields if the section is open
* The `challenge` field is being added if section is open instead of when at least one of the password fields isn't empty due to autocomplete
* Added `autocomplete="new-password"` on fields that shouldn't be autocompleted
   * Unfortunately Chrome requires a workaround with CSS
   * Not tested on Safari yet
* User will be redirected to profile page after successfully changing their password instead of index page

## How to test

Autocomplete related changes should be tested on a HTTPS page with saved credentials for FreshRSS
---
 p/scripts/extra.js | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

(limited to 'p/scripts')

diff --git a/p/scripts/extra.js b/p/scripts/extra.js
index 48f50325b..476970c3b 100644
--- a/p/scripts/extra.js
+++ b/p/scripts/extra.js
@@ -36,8 +36,8 @@ function init_crypto_forms() {
 		crypto_form.onsubmit = function (e) {
 			let challenge = crypto_form.querySelector('#challenge');
 			if (!challenge) {
-				crypto_form.querySelectorAll('[data-challenge-if-not-empty] input[type="password"]').forEach(el => {
-					if (el.value !== '' && !challenge) {
+				crypto_form.querySelectorAll('details[data-challenge-if-open]').forEach(el => {
+					if (el.open && !challenge) {
 						crypto_form.insertAdjacentHTML('beforeend', '<input type="hidden" id="challenge" name="challenge" />');
 						challenge = crypto_form.querySelector('#challenge');
 					}
@@ -485,6 +485,25 @@ function init_configuration_alert() {
 	};
 }
 
+function init_details_attributes() {
+	function toggleRequired(details) {
+		details.querySelectorAll('[data-required-if-open]').forEach(el => {
+			if (details.open) {
+				el.setAttribute('required', 'required');
+			} else {
+				el.removeAttribute('required');
+			}
+		});
+	}
+
+	document.querySelectorAll('details').forEach(details => {
+		details.addEventListener('toggle', () => {
+			toggleRequired(details);
+		});
+		toggleRequired(details);
+	});
+}
+
 function init_extra_afterDOM() {
 	if (!window.context) {
 		if (window.console) {
@@ -504,6 +523,7 @@ function init_extra_afterDOM() {
 		init_configuration_alert();
 		init_2stateButton();
 		init_update_feed();
+		init_details_attributes();
 
 		data_auto_leave_validation(document.body);
 
-- 
cgit v1.2.3