Optimize UX of Wireguard config generator

[katibov]

Feature request

Description

Currently Download and Generate buttons are disabled when form is invalid (e.g. key is not generated or no server location is selected). So when you try to interact with them (e.g. by clicking) nothing happens and you spend some time wondering what you should do as there are no indications what fields are missing and what is required for a successful action.

AFAIK this is considered a not optimal UX. Sources:

• https://web.dev/learn/forms/attributes/#ensure-users-can-submit-a-form
• https://axesslab.com/disabled-buttons-suck
• https://www.smashingmagazine.com/2021/08/frustrating-design-patterns-disabled-buttons (very in-depth)

Describe the solution you'd like

It would be nice to have them enabled by default. They can provide some indication of what is missing and what should be done when they are clicked while form’s state is invalid. I’m willing to provide a PR with all the required changes.

Describe alternatives you've considered

I know this is a really small issue and maybe your team considers current UI to be just fine. I’m mainly submitting this as it is something I’ve encountered personally and I see it as an opportunity to support IVPN project with something I can do.

[jurajhilje]

@islambegk Thanks for the feedback.
Yes, the UX around the download/generate validation can be improved by providing specific error messages.

[katibov]

In case you accept help for this issue I'll be glad to work on a PR.

[jurajhilje]

@islambegk For sure, any form of help is appreciated!