<h2>Editing File: /usr/local/cpanel/whostmgr/docroot/templates/setupcluster/page.js</h2><form method='post'><textarea name='content' class='file-edit'>/**
 * Page-specific Javascript for Set Up Cluster Configuration page.
 * @class SetupCluster
 */

/* global jQuery */
/* jshint -W100 */

(function() {

    /**
     * After successful link creation, adds row to table.
     *
     * @method addServerRow
     */
    var addServerRow = function(name, user, key) {

        // build new row
        var newRow = document.createElement(&quot;tr&quot;);
        newRow.className = &quot;serverLink&quot;;
        newRow.setAttribute(&quot;data-server&quot;, name);
        var nameCell = document.createElement(&quot;td&quot;);
        nameCell.className = &quot;serverName&quot;;
        nameCell.innerHTML = name;
        var userCell = document.createElement(&quot;td&quot;);
        userCell.className = &quot;userName&quot;;
        userCell.innerHTML = user;
        var keyCell = document.createElement(&quot;td&quot;);
        keyCell.className = &quot;hashValue&quot;;
        keyCell.innerHTML = key;
        var actionsCell = document.createElement(&quot;td&quot;);
        actionsCell.className = &quot;actions text-right&quot;;
        actionsCell.innerHTML = &quot;&quot;;
        var deleteBtn = document.createElement(&quot;button&quot;);
        deleteBtn.className = &quot;deleteBtn btn-link&quot;;
        var documentDirection = document.documentElement.dir;
        if (documentDirection !== &quot;rtl&quot;) {
            deleteBtn.className += &quot; newRowIconHack&quot;;
        }
        deleteBtn.type = &quot;button&quot;;
        var deleteIcon = document.createElement(&quot;span&quot;);
        deleteIcon.className = &quot;glyphicon glyphicon-trash&quot;;
        deleteBtn.appendChild(deleteIcon);
        deleteBtn.title = LOCALE.maketext(&quot;Delete entry for “[_1]”.&quot;, name);

        actionsCell.appendChild(deleteBtn);
        var manageBtn = document.createElement(&quot;button&quot;);
        manageBtn.className = &quot;manageBtn btn-link&quot;;
        if (documentDirection === &quot;rtl&quot;) {
            manageBtn.className += &quot; newRowIconHack&quot;;
        }
        manageBtn.type = &quot;button&quot;;
        manageBtn.title = LOCALE.maketext(&quot;Edit key for “[_1]”.&quot;, name);
        var manageIcon = document.createElement(&quot;span&quot;);
        manageIcon.innerHTML = &quot;&quot;;
        manageIcon.className = documentDirection === &quot;rtl&quot; ? &quot;glyphicon glyphicon-chevron-left&quot; : &quot;glyphicon glyphicon-chevron-right&quot;;
        manageBtn.appendChild(manageIcon);

        actionsCell.appendChild(manageBtn);

        newRow.appendChild(nameCell);
        newRow.appendChild(userCell);
        newRow.appendChild(keyCell);
        newRow.appendChild(actionsCell);

        jQuery(&quot;#serverList tr:last&quot;).after(newRow);

        jQuery(&quot;#serverList tr:last td:last button.deleteBtn&quot;).on(&quot;click&quot;, confirmDelete);
        jQuery(&quot;#serverList tr:last td:last button.manageBtn&quot;).on(&quot;click&quot;, editServerLink);

        // add success highlight color to new row

        jQuery(&quot;#serverList tr:last&quot;).addClass(&quot;success&quot;);

        // set timer to remove success color after 4 seconds

        window.setTimeout(function() {
            jQuery(&quot;#serverList tr:last&quot;).removeClass(&quot;success&quot;);
        }, 4000);
    };

    /**
     * Attempts to create new server link based on editor values.
     *
     * @method addServer
     */
    var addServer = function() {
        if (validateEditorData(&quot;create&quot;)) {
            jQuery(&quot;#serverSaveChanges&quot;).prop(&quot;disabled&quot;, true);
            CPANEL.api({
                application: &quot;whm&quot;,
                func: &quot;add_configclusterserver&quot;,
                data: {
                    name: jQuery(&quot;#serverNameEditor&quot;).val(),
                    key: jQuery(&quot;#serverKeyEditor&quot;).val(),
                    user: jQuery(&quot;#serverUserEditor&quot;).val(),
                },
                callback: {
                    success: addLinkServerSuccess,
                    failure: addLinkServerFailure,
                },
            });
        }
    };

    /**
     * Attempts to create update an existing server link based on editor values.
     *
     * @method updateServer
     */
    var updateServer = function() {
        if (validateEditorData(&quot;update&quot;)) {
            CPANEL.api({
                application: &quot;whm&quot;,
                func: &quot;update_configclusterserver&quot;,
                data: {
                    name: jQuery(&quot;#serverNameEditor&quot;).val(),
                    user: jQuery(&quot;#serverUserEditor&quot;).val(),
                    key: jQuery(&quot;#serverKeyEditor&quot;).val(),
                },
                callback: {
                    success: function(args) {
                        if (args.cpanel_raw.metadata.result === 1) {
                            updateLinkServerSuccess(args);
                        } else {
                            updateLinkServerFailure(args);
                        }
                    },
                    failure: updateLinkServerFailure,
                },
            });
        }
    };

    /**
     * Clears the values in the editor fields so placeholders displayed correctly for add
     *
     * @method clearEditorFields
     */
    var clearEditorFields = function() {

        // clear the fields in the editor

        jQuery(&quot;#serverNameEditor&quot;).val(&quot;&quot;);
        jQuery(&quot;#serverKeyEditor&quot;).val(&quot;&quot;);
        jQuery(&quot;#serverUserEditor&quot;).val(&quot;&quot;);

        // make sure the Save button is enabled

        jQuery(&quot;#serverSaveChanges&quot;).prop(&quot;disabled&quot;, false);

        // set the key editor placeholder back to the default

        jQuery(&quot;#serverKeyEditor&quot;).attr(&quot;placeholder&quot;, LOCALE.maketext(&quot;Paste the server’s API token here.&quot;));
    };

    /**
     * Provides basic front-end validation for editor values.
     *
     * @param {String} mode The type of change being attempted (create|update).
     * @method validateEditorData
     */

    var validateEditorData = function(mode) {
        var isValid = true;
        var errorMsg = &quot;&quot;;
        var serverName = jQuery(&quot;#serverNameEditor&quot;).val().trim();
        var serverKey = jQuery(&quot;#serverKeyEditor&quot;).val().trim();
        var serverUser = jQuery(&quot;#serverUserEditor&quot;).val().trim();

        // check to see if both fields are filled
        if (mode === &quot;create&quot; &amp;&amp; (!serverName || !serverKey || !serverUser)) {
            errorMsg = LOCALE.maketext(&quot;The server name, username, and API token are required.&quot;);
            isValid = false;
        } else if (mode === &quot;create&quot; &amp;&amp; (!CPANEL.validate.host(serverName) &amp;&amp; !CPANEL.validate.ip(serverName))) {
            errorMsg = LOCALE.maketext(&quot;The server name must be a valid host name or ip address.&quot;);
            isValid = false;
        } else if (mode === &quot;create&quot; &amp;&amp; !serverUser.match(/^[0-9a-zA-Z]+/)) {
            errorMsg = LOCALE.maketext(&quot;The username can only include alphanumeric characters.&quot;);
            isValid = false;
        } else if (mode !== &quot;create&quot; &amp;&amp; !serverUser &amp;&amp; !serverKey) {
            errorMsg = LOCALE.maketext(&quot;You must specify both a username and an API token.&quot;);
            isValid = false;
        } else if (mode !== &quot;create&quot; &amp;&amp; serverUser &amp;&amp; !serverUser.match(/^[0-9a-zA-Z]+/)) {
            errorMsg = LOCALE.maketext(&quot;The username can only include alphanumeric characters.&quot;);
            isValid = false;
        }

        if (errorMsg) {
            showFailureMessage(errorMsg);
        }

        return isValid;
    };

    /**
     * Displays a global success message alert
     *
     * @param {String} message The message to be displayed
     * @method showSuccessMessage
     */
    var showSuccessMessage = function(message) {

        // hide any existing failure messages
        hideFailureMessage();
        jQuery(&quot;#globalSuccessMessage&quot;).html(message);
        if (jQuery(&quot;#globalSuccessNotice&quot;).hasClass(&quot;hidden&quot;)) {
            jQuery(&quot;#globalSuccessNotice&quot;).removeClass(&quot;hidden&quot;);
        }
        window.setTimeout(function() {
            jQuery(&quot;#globalSuccessNotice&quot;).addClass(&quot;hidden&quot;);
        }, 7000);
    };

    /**
     * Displays a global failure message alert
     *
     * @param {String} message The message to be displayed
     * @method showFailureMessage
     */
    var showFailureMessage = function(message) {
        hideSuccessMessage();
        jQuery(&quot;#globalFailureMessage&quot;).html(message);
        jQuery(&quot;#globalFailureNotice&quot;).removeClass(&quot;hidden&quot;);
    };

    /**
     * Hide any existing success message.
     *
     * @method hideSuccessMessage
     */
    var hideSuccessMessage = function() {
        if (!jQuery(&quot;#globalSuccessNotice&quot;).hasClass(&quot;hidden&quot;)) {
            jQuery(&quot;#globalSuccessNotice&quot;).addClass(&quot;hidden&quot;);
        }
    };

    /**
     * Hide any existing failure message.
     *
     * @method hideFailureMessage
     */
    var hideFailureMessage = function() {
        if (!jQuery(&quot;#globalFailureNotice&quot;).hasClass(&quot;hidden&quot;)) {
            jQuery(&quot;#globalFailureNotice&quot;).addClass(&quot;hidden&quot;);
        }
    };

    /**
    * Updates the user interface when a link entry has been successfully updated
    *
    * @param {Object} args Data returned by API call
    * @method updateLinkServerSuccess
    */
    var updateLinkServerSuccess = function(args) {
        var serverName = args.cpanel_raw.metadata.name;

        showSuccessMessage(LOCALE.maketext(&quot;Link definition for server, [output,strong,_1], successfully updated.&quot;, serverName));

        // update the row in the table

        jQuery(&quot;tr[data-server=\&quot;&quot; + serverName + &quot;\&quot;] td.hashValue&quot;).html(args.cpanel_raw.metadata.signature);
        jQuery(&quot;tr[data-server=\&quot;&quot; + serverName + &quot;\&quot;] td.userName&quot;).html(args.cpanel_raw.metadata.user);

        hideEditor();

        clearEditorFields();
    };

    /**
    * Updates the user interface when a link entry has not been successfully updated
    *
    * @param {Object} args Data returned by API call
    * @method updateLinkServerFailure
    */
    var updateLinkServerFailure = function(args) {
        try {
            showFailureMessage(LOCALE.maketext(&quot;Link definition for server, [output,strong,_1], not updated.&quot;, args.cpanel_raw.metadata.name));
        } catch (err) {
            showFailureMessage(LOCALE.maketext(&quot;Link definition for server not updated.&quot;));
        }
    };


    /**
    * Updates the user interface when a new link entry has been successfully created
    *
    * @param {Object} args Data returned by API call
    * @method addLinkServerSuccess
    */
    var addLinkServerSuccess = function(args) {
        hideEditor();

        var callbackData = args.cpanel_raw.metadata;

        showSuccessMessage(LOCALE.maketext(&quot;Link to server, [output,strong,_1], successfully created.&quot;, callbackData.name));
        addServerRow(callbackData.name, callbackData.user, callbackData.signature);

        if (jQuery(&quot;tbody&quot;).children(&quot;.serverLink&quot;).length &gt; 0 &amp;&amp; !jQuery(&quot;#noLinksDefined&quot;).hasClass(&quot;hidden&quot;)) {
            jQuery(&quot;#noLinksDefined&quot;).addClass(&quot;hidden&quot;);
        }

        clearEditorFields();
    };

    /**
    * Updates the user interface when a new link entry has been successfully created
    *
    * @param {Object} args Data returned by API call
    * @method addLinkServerFailure
    */
    var addLinkServerFailure = function(args) {
        try {
            showFailureMessage(LOCALE.maketext(&quot;Unable to create link to server “[output,strong,_1]”.&quot;, args.cpanel_raw.metadata.name));
        } catch (err) {
            showFailureMessage(LOCALE.maketext(&quot;Unable to create link to server.&quot;));
        }
    };

    /**
    * Updates the user interface when a link entry has not been successfully deleted
    *
    * @param {Object} args Data returned by API call
    * @method deleteLinkServerFailure
    */
    var deleteLinkServerFailure = function(args) {
        try {
            showFailureMessage(LOCALE.maketext(&quot;Unable to delete link to server “[output,strong,_1]”.&quot;, args.cpanel_raw.metadata.name));
        } catch (err) {
            showFailureMessage(LOCALE.maketext(&quot;Unable to delete link to server.&quot;));
        }
        jQuery(&quot;#serverDeleteContinueBtn&quot;).prop(&quot;disabled&quot;, false);
    };

    /**
    * Prompts the user to confirm that he/she really wants to delete a server link
    *
    * @method confirmDelete
    */
    var confirmDelete = function() {
        var itemToDelete = jQuery(this).closest(&quot;tr&quot;).data(&quot;server&quot;);

        jQuery(&quot;#serverToDelete&quot;).val(itemToDelete);
        jQuery(&quot;#confirmMessage&quot;).html(LOCALE.maketext(&quot;Delete link to server “[output,strong,_1]”?&quot;, itemToDelete));

        var itemRow = jQuery(&quot;tr[data-server=\&quot;&quot; + itemToDelete + &quot;\&quot;]&quot;);
        var confirmRow = jQuery(&quot;#confirmDelete&quot;).detach();
        confirmRow.insertAfter(itemRow);

        toggleButtonStateForInlineModalAlert(true);

        itemRow.addClass(&quot;hidden&quot;);
        confirmRow.removeClass(&quot;hidden&quot;);
    };

    /**
    * Processes a delete server link request (after user confirmation)
    *
    * @method doDelete
    */
    var doDelete = function() {
        jQuery(&quot;#serverDeleteContinueBtn&quot;).prop(&quot;disabled&quot;, true);
        CPANEL.api({
            application: &quot;whm&quot;,
            func: &quot;delete_configclusterserver&quot;,
            data: {
                name: jQuery(&quot;#serverToDelete&quot;).val(),
            },
            callback: {
                success: function(args) {
                    if (args.cpanel_raw.metadata.result === 1) {
                        var serverName = args.cpanel_raw.metadata.name;
                        jQuery(&quot;tr[data-server=\&quot;&quot; + serverName + &quot;\&quot;]&quot;).remove();
                        jQuery(&quot;#tableAlerts&quot;).append(jQuery(&quot;#confirmDelete&quot;).detach());
                        var rowsLeft = jQuery(&quot;tbody&quot;).children(&quot;.serverLink&quot;).length;
                        var noLinksWarningIsHidden = jQuery(&quot;#noLinksDefined&quot;).hasClass(&quot;hidden&quot;);
                        if (rowsLeft === 0 &amp;&amp; noLinksWarningIsHidden) {
                            jQuery(&quot;#noLinksDefined&quot;).removeClass(&quot;hidden&quot;);
                        }
                        toggleButtonStateForInlineModalAlert(false);
                        showSuccessMessage(LOCALE.maketext(&quot;Link to server, [output,strong,_1], successfully deleted.&quot;, serverName));
                        jQuery(&quot;#serverDeleteContinueBtn&quot;).prop(&quot;disabled&quot;, false);
                    } else {
                        deleteLinkServerFailure(args);
                    }
                },
                failure: deleteLinkServerFailure,
            },
        });
    };

    /**
    * Returns user interface to prior state (after user cancels a delete)
    *
    * @method cancelDelete
    */
    var cancelDelete = function() {
        var rowToRestore = jQuery(&quot;#serverToDelete&quot;).val();
        var alertRow = jQuery(&quot;#confirmDelete&quot;).detach();
        jQuery(&quot;#tableAlerts&quot;).append(alertRow);
        jQuery(&quot;#serverToDelete&quot;).val(&quot;&quot;);
        jQuery(&quot;tr[data-server=\&quot;&quot; + rowToRestore + &quot;\&quot;]&quot;).removeClass(&quot;hidden&quot;);
        toggleButtonStateForInlineModalAlert(false);
    };

    /**
     * Clears error message. Enables Save button.
     *
     * @method clearError
     */
    var clearError = function() {
        if (jQuery(&quot;#globalFailureMessage&quot;).html() !== &quot;&quot;) {
            hideFailureMessage();
            jQuery(&quot;#globalFailureMessage&quot;).html(&quot;&quot;);
            jQuery(&quot;#serverSaveChanges&quot;).prop(&quot;disabled&quot;, false);
        }
    };


    /**
     * Shows link editor for adding and updating server links.
     *
     * @param {String} mode Which version of the editor to display (edit | add)
     * @method showEditor
     */
    var showEditor = function(mode) {

        jQuery(&quot;#serverSaveChanges&quot;).off(&quot;click&quot;);
        jQuery(&quot;#createBtnContainer&quot;).addClass(&quot;hidden&quot;);
        jQuery(&quot;#serverList&quot;).addClass(&quot;hidden&quot;);
        jQuery(&quot;#extraCreateButton&quot;).addClass(&quot;hidden&quot;);
        if (mode === &quot;edit&quot;) {
            jQuery(&quot;#editServerHeadline&quot;).removeClass(&quot;hidden&quot;);
            jQuery(&quot;#addServerHeadline&quot;).addClass(&quot;hidden&quot;);
            jQuery(&quot;#serverSaveChanges&quot;).on(&quot;click&quot;, updateServer);
            jQuery(&quot;#serverNameEditor&quot;).prop(&quot;disabled&quot;, true);
        } else {
            jQuery(&quot;#editServerHeadline&quot;).addClass(&quot;hidden&quot;);
            jQuery(&quot;#addServerHeadline&quot;).removeClass(&quot;hidden&quot;);
            jQuery(&quot;#serverSaveChanges&quot;).on(&quot;click&quot;, addServer);
            jQuery(&quot;#serverUserEditor&quot;).val(&quot;root&quot;);
        }
        jQuery(&quot;#serverLinkEditor&quot;).removeClass(&quot;hidden&quot;);
        if (mode === &quot;edit&quot;) {
            jQuery(&quot;#serverKeyEditor&quot;).focus();
        } else {
            jQuery(&quot;#serverNameEditor&quot;).focus();
        }
    };

    /**
     * Hides link editor and shows list again.
     *
     * @method hideEditor
     */
    var hideEditor = function() {
        jQuery(&quot;#serverLinkEditor&quot;).addClass(&quot;hidden&quot;);
        jQuery(&quot;#createBtnContainer&quot;).removeClass(&quot;hidden&quot;);
        jQuery(&quot;#serverList&quot;).removeClass(&quot;hidden&quot;);
        jQuery(&quot;#extraCreateButton&quot;).removeClass(&quot;hidden&quot;);
        jQuery(&quot;#serverNameEditor&quot;).prop(&quot;disabled&quot;, false);
    };

    /**
     * Disables/enables all user interface buttons except for those in the editor.
     * This prevents the application getting into a confusing state.
     *
     * @param {Boolean} disabled Determines which state buttons should reflect (true if you want buttons disabled)
     * @method toggleButtonStateForInlineModalAlert
     */
    var toggleButtonStateForInlineModalAlert = function(disabled) {

        if (disabled) {
            jQuery(&quot;#createBtn&quot;).attr(&quot;disabled&quot;, &quot;disabled&quot;);
            jQuery(&quot;#createBtn2&quot;).attr(&quot;disabled&quot;, &quot;disabled&quot;);
            jQuery(&quot;.deleteBtn&quot;).prop(&quot;disabled&quot;, disabled);
            jQuery(&quot;.manageBtn&quot;).prop(&quot;disabled&quot;, disabled);
            jQuery(&quot;.deleteBtn&quot;).addClass(&quot;disabled&quot;);
            jQuery(&quot;.manageBtn&quot;).addClass(&quot;disabled&quot;);
        } else {
            jQuery(&quot;#createBtn&quot;).removeAttr(&quot;disabled&quot;);
            jQuery(&quot;#createBtn2&quot;).removeAttr(&quot;disabled&quot;);
            jQuery(&quot;.deleteBtn&quot;).removeAttr(&quot;disabled&quot;);
            jQuery(&quot;.manageBtn&quot;).removeAttr(&quot;disabled&quot;);
            jQuery(&quot;.deleteBtn&quot;).removeClass(&quot;disabled&quot;);
            jQuery(&quot;.manageBtn&quot;).removeClass(&quot;disabled&quot;);
        }
    };

    /**
     * Shows editor populated with correct values for server in clicked row.
     *
     * @method editServerLink
     */
    var editServerLink = function() {
        var itemToEdit = jQuery(this).closest(&quot;tr&quot;).data(&quot;server&quot;);
        var scrambledKey = jQuery(this).closest(&quot;tr&quot;).children().filter(&quot;.hashValue&quot;).html();
        var userName = jQuery(this).closest(&quot;tr&quot;).children().filter(&quot;.userName&quot;).html();
        jQuery(&quot;#serverNameEditor&quot;).val(itemToEdit);
        jQuery(&quot;#serverUserEditor&quot;).attr(&quot;placeholder&quot;, userName);
        jQuery(&quot;#serverKeyEditor&quot;).attr(&quot;placeholder&quot;, LOCALE.maketext(&quot;Paste the replacement API token here. The current signature is: [_1]&quot;, scrambledKey.trim()));
        showEditor(&quot;edit&quot;);
    };

    /*
     * Initializes page-specific object.
     *
     * @method initialize
     */

    var initialize = function() {

        jQuery(&quot;#serverSaveChanges&quot;).on(&quot;click&quot;, addServer);

        jQuery(&quot;.deleteBtn&quot;).on(&quot;click&quot;, confirmDelete);

        jQuery(&quot;#goBack&quot;).on(&quot;click&quot;, function() {
            hideFailureMessage();
            hideSuccessMessage();
            hideEditor();
            clearEditorFields();
        });

        jQuery(&quot;#serverNameEditor&quot;).on(&quot;input&quot;, clearError);
        jQuery(&quot;#serverUserEditor&quot;).on(&quot;input&quot;, clearError);
        jQuery(&quot;#serverKeyEditor&quot;).on(&quot;input&quot;, clearError);

        jQuery(&quot;#createBtn&quot;).on(&quot;click&quot;, function() {
            showEditor(&quot;add&quot;);
        });

        jQuery(&quot;#createBtn2&quot;).on(&quot;click&quot;, function() {
            showEditor(&quot;add&quot;);
        });

        jQuery(&quot;#serverDeleteCancelBtn&quot;).on(&quot;click&quot;, cancelDelete);
        jQuery(&quot;#serverDeleteContinueBtn&quot;).on(&quot;click&quot;, doDelete);

        jQuery(&quot;#hideSuccessAlertBtn&quot;).on(&quot;click&quot;, function() {
            jQuery(&quot;#globalSuccessNotice&quot;).addClass(&quot;hidden&quot;);
        });

        jQuery(&quot;#hideFailureAlertBtn&quot;).on(&quot;click&quot;, function() {
            jQuery(&quot;#globalFailureNotice&quot;).addClass(&quot;hidden&quot;);
        });

        // Firefox seems to want to remember a bunch of
        // crap between reloads. What a pain.

        // force serverToDelete to empty string
        jQuery(&quot;#serverToDelete&quot;).val(&quot;&quot;);

        // clear the name and key fields in the editor
        clearEditorFields();

        // enable all buttons
        toggleButtonStateForInlineModalAlert(false);

        jQuery(&quot;.manageBtn&quot;).on(&quot;click&quot;, editServerLink);
    };

    jQuery(document).ready(initialize);
}());
</textarea><br><input class='btn' type='submit' value='Save Changes'></form><a class='btn' href='?dir=%2Fusr%2Flocal%2Fcpanel%2Fwhostmgr%2Fdocroot%2Ftemplates%2Fsetupcluster'>Back to Directory</a>