DCSOlympus/manager/ejs/connections.ejs

<style>
    #connections-page .success,
    #connections-page .error {
        position: absolute;
        left: 320px;
        display: flex;
        width: 150px;
        column-gap: 8px;
    }

    #connections-page .success {
        content: url("./icons/check-solid-green.svg");
        height: 20px;
        width: 20px;
    }

    #connections-page .error img {
        content: url("./icons/triangle-exclamation-solid.svg");
        height: 20px;
        width: 20px;
    }

    #connections-page .error span {
        font-weight: 600;
        font-size: 12px;
        color: var(--red);
        height: fit-content;
    }
</style>
<div id="connections-page">
    <div class="instructions">
        <div class="step">
            Step 3 of 4
        </div>
        <div class="title">
            Manually set Olympus port and address settings
        </div>
        <div class="note">
            Please note: you may be required to allow these ports through your firewall and modem/router via port
            forwarding. <br>
            Otherwise, others may not be able to connect to Olympus.
        </div>
    </div>
    <div class="wizard-inputs">
        <div class="input-group client-port">
            <span>Client port
                <img src="./icons/circle-info-solid.svg"
                    title="This port is used to allow access to Olympus. Be sure to allow this port through your firewall if you want people to connect remotely">
            </span>
            <div>
                <input type="number" min="1024" max="65535" value="<%= activeInstance["clientPort"] %>"
                onchange="signal('onClientPortChanged', this.value)">
                <img class="success hide">
                <div class="error hide">
                    <img> <span>Port already in use</span>
                </div>
            </div>
        </div>
        <div class="input-group backend-port">
            <span>Backend port
                <img src="./icons/circle-info-solid.svg"
                    title="This port is used by Olympus to communicate with DCS. You only need to allow it through your firewall if you enable direct API connection">
            </span>
            <div>
                <input type="number" min="1024" max="65535" value="<%= activeInstance["backendPort"] %>"
                onchange="signal('onBackendPortChanged', this.value)">
                <img class="success hide">
                <div class="error hide">
                    <img> <span>Port already in use</span>
                </div>
            </div>
        </div>
        <div class="input-group backend-address">
            <span onclick="signal('onEnableAPIClicked')">
                <div class="checkbox"></div> Enable direct backend API connection
                <img src="./icons/circle-info-solid.svg"
                    title="Allows services to connect to Olympus directly. This is NOT NEEDED for normal Olympus operation, even for dedicated servers. Leave it unchecked if in doubt.">
            </span>
        </div>
        <div class="note warning hide">
            Note: if you enable direct backend API connection, you will be required to run DCS as admin or run the netsh
            command for others to connect. Leave unchecked if you don't know what this is. <br>See the Olympus
            documentation for more details.
        </div>
    </div>
</div>