MultiWAN: UI/UX improvements for rules and policies

[gsanchietti]

Proposed changes:

• support single ports, multiple ports, and port ranges in MultiWAN rules
• improve user experience with better validation and clear guidance
• fix UI issues and enhance form handling when required field are missing

1. Update Validator:

   • Allow single ports, multiple ports (comma-separated), and port ranges (e.g., '5500-5600') in MultiWAN rules.
   • Use a hyphen (-) in the UI for port ranges, but store it as a colon (:) in the database.

2. Add Information Tooltip:

   • Display a message: "Enter a single port, multiple ports separated by a comma (e.g., '8686, 9090'), or port ranges (e.g., '5500-5600')."

3. Documentation Update:

   • Reflect these changes in the documentation with examples.

4. Fix Input Field Issue:

   • Ensure input fields for policy and rule names are properly disabled when editing.

5. Add Form Validation:

   • Validate required fields in the policy editor.

6. Clean Forms on Exit:

   • Clear form content and validation messages when the drawer is closed or canceled.

7. Improve Translation Handling:

   • Ensure all UI elements are properly translated.

[gsanchietti]

Testing image: 8-23.05.3-ns.1.0.1-10-g168db29

[stephdl]

QA

Install the test image

configure a multiwan configuration for test purposes (two WAN and one LAN)

• test case 1 create a default policy create a policy edit the default policy, the label must be disabled create a rule edit the rule, the label must be disabled

• test case 2 when you have an error form, the cancel must have cleaned the form when you have filled input fields, the cancel must have cleaned the form

• test case 3 Create a rule with IP destinations with ports and let at the end of the input box some trailing spaces, the validation must not fail and the trailing spaces must be removed (label, IP, port)

Create a policy with a trailing space in the name, the validation must not fail and the trailing spaces must be removed

echo '{}' | /usr/libexec/rpcd/ns.mwan call index_rules
echo '{}' | /usr/libexec/rpcd/ns.mwan call index_policies

• test case 4 Create a rule with IP destinations with ports try to create rule with ports : 25,26,27 try to create rule with ports : 25-27 try to create rule with single port : 25 a tooltip must be present to explain what to use an error validation must raise if it is not something expected

• test case 5 every strings are translated in english

[cotosso]

port range is stored in the database with a hyphen (-) instead of colon (:) as requested.

[gsanchietti]

Testing image: 23.05.3-ns.1.0.1-15-g10de678

[cotosso]

now it works as expected.