DCSOlympus/manager/ejs/connections.ejs

<style>
    #manager-connections .option {
        background-color: var(--background);
        border: 1px solid var(--offwhite);
        width: 220px;
        height: 60px;
        color: var(--offwhite);
        display: flex;
        font-size: 18px;
        font-weight: 600;
        padding-left: 15px;
        align-items: center;
        border-radius: 5px;
        cursor: pointer;
        background-color: transparent;
        color: var(--offwhite);
        justify-content: center;
    }

    #manager-connections .option:hover {
        color: var(--background);
        background-color: var(--offwhite);
    }

    #manager-connections .buttons {
        display: flex;
        flex-direction: column;
        row-gap: 15px;
    }

    #manager-connections .success,
    #manager-connections .error {
        position: absolute;
        left: 420px;
        display: flex;
        width: 150px;
        column-gap: 8px;
    }

    #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="step-summary">
        <div class="blue <%= singleInstance? 'hide': '' %>"><%= install? 'User path': 'Instance selection' %></div>
        <div class="blue">Type of install</div>
        <div class="white">Ports and address</div>
        <div class="empty">Passwords</div>
        <div class="empty"> <%= install? 'Install': 'Update' %></div>
    </div>
    <div class="content">
        <% if (selectAutoOrManual) { %>
            <div class="instructions">
                <span>
                    Do you want to set port and address settings manually?
                </span>
                <span>
                    We can auto setup ports and addresses for you, or you can set the manually. <br>
                    If you don't have an understanding of how Olympus works, we recommend the auto option.
                </span>
            </div>

            <div class="buttons">
                <div class="option button auto">
                    Auto apply settings
                </div>
                <div class="option button manual">
                    Manually set options
                </div>
            </div>

        <% } else { %> 
            <div class="instructions">
                <span>
                    Enter the ports and address to use.
                </span>
                <span>
                    Select client and backend ports, making sure they are free to use with the provided check. <br>
                    Unless you want to support direct API calls to the backend, you can keep the address to localhost even for dedicated servers.
                </span>
            </div>

            <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"] %>">
                    <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 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["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
                    <img src="./icons/circle-info-solid.svg" title="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="<%= activeInstance["backendAddress"] %>">
            </div>
        <% } %>
        <div class="buttons-footer">
            <div class="button back">
                Back
            </div>
            <div class="button next">
                Next
            </div>
        </div>
        <div class="button cancel">
            <%= install? "Cancel installation": "Cancel editing" %>
        </div>
    </div>
</div>