feat(ui): add port mapping table

[ReenigneArcher]

Description

Add a port configuration table to the UI.

Also validates the config port is is in the range of 1029 to 65514, and that all ports are in the range of 1024 to 65535.

Modifies alerts to include a font awesome icon.

Screenshot

Default value:

Custom value:

Invalid values:

Issues Fixed or Closed

• Resolves feat(ui): add port mapping table based on selected config port #1682

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Dependency update (updates to dependencies)
• Documentation update (changes to documentation)
• Repository update (changes to repository files, e.g. .github/...)

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have added or updated the in code docstring/documentation-blocks for new or existing methods/components

Branch Updates

LizardByte requires that branches be up-to-date before merging. This means that after any PR is merged, this branch
must be updated before it can be merged. You must also
Allow edits from maintainers.

• I want maintainers to keep my branch updated

[LizardByte-bot]

⚠️ Qodana is checking this PR ⚠️
Live results available here

[cgutman]

Can you add a description or some emphasis on the HTTP port entry that indicates that's the one that should be provided to Moonlight when adding a PC manually?

[yungleballz]

I would like to suggest to include an info that the Web UI Port does not have to (and should not) be forwarded.

[ReenigneArcher]

@cgutman yes, good idea.

@yungleballz that will depend on user preferences. Many users forward it so they can modify settings away from home, or pair a new client.

[ReenigneArcher]

Idea: Add port checker -> https://www.npmjs.com/package/is-port-reachable

This probably needs to be in a separate PR after webpack is implemented.

[TheElixZammuto]

@yungleballz that will depend on user preferences. Many users forward it so they can modify settings away from home, or pair a new client.

I agree with yungle here, we need a big red scary warning to avoid people forwarding the UI without knowing what they do

Idea: Add port checker -> https://www.npmjs.com/package/is-port-reachable

This probably needs to be in a separate PR after webpack is implemented.

Due to NAT (and hairpin), having Sunshine itself make the test is not representitive, the Internet Streaming Tool uses a relay server IIRC

[ReenigneArcher]

Due to NAT (and hairpin), having Sunshine itself make the test is not representitive, the Internet Streaming Tool uses a relay server IIRC

I wanted to add two columns.

• Show if port is available on the localhost
• Show if port is available using public ip address (maybe we can use this site somehow? https://canyouseeme.org/)

[ReenigneArcher]

@cgutman This will appear if the user specifies a non default port.

[ReenigneArcher]

Modified UI to:

Default:

Non Default:

Too Low:

Too High:

[ReenigneArcher]

Added these warnings if web ui is allowed on WAN.