LB1721: Added LastFM save button in connect services setting.

[GauravGupta993]

Problem

This solves a part of the ticket LB-1721, which aims to create a submit button in the LastFM connect services setting page to improve the UI.

Solution

The submit button and input fields are disabled if someone has selected the Disable option. Other than that for "Connect to Last.FM" and "Import loved tracks," the submit button works according to the option selected.

Recording.2025-01-21.003829.1.mp4

[MonkeyDo]

Thanks for opening the PR, it's going to be easier to follow for feedback !

I tested the new mechanism and I think it needs some changes.
I don't like the fact that clicking on "connect to lastfm" does nothing by itself when you click it, making it different from the other music services above/below.

My observations after testing:

• Clicking on "connect to LFM" or "import loved tracks" should perform the action on click (rather than the smaller submit button).
• This means we can't have disabled input fields initially because the user needs to input their username (my bad on that one, I didn't think it through)

Here is my updated proposal:

• on page load, if user is not connected, input fields are empty and enabled, "edit" button is disabled and greyed out (btn-default class):
  
• After successfully connecting to LFM, the name and import time inputs are set as readonly, and the "edit" button becomes enabled (btn-warning class):
  
• clicking on the edit button, inputs become enabled and the button text changes color to green (btn-success class) and text changes to "save":
  
• after clicking on the "save" button, inputs become readonly again and the action to connect to LFM is performed again automatically to connect with the new name
• We can't use native form validation if the inputs are readonly or disabled, which means we need to add a check for empty username and show a warning toast message if it's empty.

How does that sound to you?

[MonkeyDo]

Some leftover commented out code here to clean up

[GauravGupta993]

Some leftover commented out code here to clean up

Yeah, my bad. Will keep in mind to remove all the unnecessary comments.

[GauravGupta993]

Thanks for opening the PR, it's going to be easier to follow for feedback !

I tested the new mechanism and I think it needs some changes. I don't like the fact that clicking on "connect to lastfm" does nothing by itself when you click it, making it different from the other music services above/below.

My observations after testing:

• Clicking on "connect to LFM" or "import loved tracks" should perform the action on click (rather than the smaller submit button).
• This means we can't have disabled input fields initially because the user needs to input their username (my bad on that one, I didn't think it through)

Here is my updated proposal:

• on page load, if user is not connected, input fields are empty and enabled, "edit" button is disabled and greyed out (btn-default class):
  
• After successfully connecting to LFM, the name and import time inputs are set as readonly, and the "edit" button becomes enabled (btn-warning class):
  
• clicking on the edit button, inputs become enabled and the button text changes color to green (btn-success class) and text changes to "save":
  
• after clicking on the "save" button, inputs become readonly again and the action to connect to LFM is performed again automatically to connect with the new name
• We can't use native form validation if the inputs are readonly or disabled, which means we need to add a check for empty username and show a warning toast message if it's empty.

How does that sound to you?

Sounds great. Thanks for the review. I will do it this way.