Support custom ports

[jurajhilje]

In addition to existing port selection, we need to add a custom input field that accepts a single port number within the supported ranges. Supported port ranges are fetched from the servers.json API, separately for OpenVPN and WireGuard.

[jurajhilje]

@gorkapernas Available in 2.6.4 (13) (staging API).

[gorkapernas]

@jurajhilje some early observations:

• When entering invalid data or random data, the validation is missing, nothing happens. Please add a validation for such cases.
• Tapping on "UDP", below "Add custom port", selects the first port on the list (UDP 53). Nothing should happen when tapping on this (unless we are planning to open a selection dropdown if TCP protocol would be available as a custom port)

[jurajhilje]

@gorkapernas Available in 2.7.0 (6), production API.

[gorkapernas]

Verified on version 2.7.0 (6), @jurajhilje please see my comments below.

• It is possible to add multiple times the same port, please note that on the desktop apps this is restricted, so it is suggested to add a validation in order to prevent the user from adding the same port more than once. Tested with OpenVPN and WireGuard, UDP and TCP. See screenshot below.

• On the desktop apps when adding a new port, this will appear on both protocols, i.e. if I add a new port to OpenVPN (UDP), this same port will be available for WireGuard and vice versa. Do we want to have the same implementation on iOS?

• It is possible to add non numeric characters to the port input field, it is suggested to restrict the input to numbers only.

---

Question:
Currently the new ports are displayed at the end of the list according the last added without any type of sorting rules, consequently the list could end up mixing UDP and TCP ports and higher and lower values. Ideally we should have some type of sorting rule in order to avoid confusion, however, if we do so:

1. Should we sort all ports or only custom ports?
2. Sorting rule: by type (UDP or TCP) and then by a port number (lower to higher) inside the type?

This also should be implemented in the desktop apps //Cc @stenya

[jurajhilje]

@gorkapernas I would keep the logic from the current Desktop app regarding sorting, it's more clear when you have your custom ports at the end of the list. I'll also update the iOS app to add the same UDP port to both protocols.

[jurajhilje]

@gorkapernas New TF build 2.7.0 (8) is available.

[gorkapernas]

Verified on 2.7.0(10), the issues reported have been fixed.
@jurajhilje I have one note, it seems like the iOS app does not remember the port after switching protocols, it always resets to default when changing protocols, this is not the case in the desktop apps.
Do you want to keep the actual implementation or should we align it with the desktop apps' implementation to keep consistency?

[jurajhilje]

@gorkapernas I would like to update this to have the same behaviour as our Desktop app. Will submit that in the next build.

[jurajhilje]

@gorkapernas This last change (persist port number and UDP/TCP when switching VPN protocols) will require more significant update in the code than I initially planned. Can you please open a new ticket? So we can plan that update in one of the next releases.
Thanks!

[gorkapernas]

@jurajhilje Done -> #294

FYI, I'll run a few more tests before moving this ticket to deployable.

[gorkapernas]

@jurajhilje this looks good to go.
Tested on latest TF version 2.7.0 (12), iPhone XR iOS 16.2, iPad 6 iOS 15.7.1.