DCSOlympus/manager/ejs/managerconnections.ejs

<style>
    #manager-connections {
        display: flex;
        flex-direction: column;
        row-gap: 15px;
    }

    #manager-connections .input-group {
        color: var(--offwhite);
        display: flex;
        flex-direction: column;
        row-gap: 5px;
    }

    #manager-connections .input-group>span:nth-child(1) {
        font-size: 14px;
        font-weight: 600;
    }

    #manager-connections .input-group>span:nth-child(2) {
        font-size: 13px;
        font-weight: normal;
    }

    #manager-connections .input-group div {
        display: flex;
        align-items: center;
        column-gap: 5px;
        flex-wrap: wrap;
    }

    #manager-connections>.instructions {
        margin-bottom: 10px;
    }

    #manager-connections>.buttons-footer {
        margin-top: 10px;
    }

    #manager-connections .client-port input {
        width: 150px;
    }

    #manager-connections .backend-port input {
        width: 150px;
    }

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

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

    #manager-connections .error span {
        font-weight: 600;
        font-size: 12px;
        color: var(--red);
        height: fit-content;
    }

</style>
<div id="manager-connections">
    <div class="page-header">
        Step 2: Port and address settings
    </div>
    <div class="input-group client-port">
        <span>Client port</span>
        <span>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="<%= instance["clientPort"] %>">
            <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</span>
        <span>This port is used to communicate with DCS. It is not necessary to allow this port through your firewall.</span>
        <div>
            <input type="number" min="1024" max="65535" value="<%= instance["backendPort"] %>">
            <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>Backend address</span>
        <span>This is the backend address Olympus will listen on. Unless you know what you are doing, leave it as localhost, even for dedicated server installations.</span>
        <input type="text" value="<%= instance["backendAddress"] %>">
    </div>
    <div class="buttons-footer">
        <div class="button back">
            Back
        </div>
        <div class="button next">
            Next
        </div>
        <div class="button cancel">
            Cancel
        </div>
    </div>
</div>