File Manager

Editing File: /usr/local/cpanel/base/webmail/jupiter/mail_clients/mail_clients.tt

[%-
USE ExpVar;
    IF !global.mail_client_list;
        SET global.mail_client_list = execute("WebmailApps", "list_webmail_apps", {theme=CPANEL.CPDATA.RS}).data;
    END;
    SET NVData = Api2.exec("NVData" , "get" , {"names" =>"default_webmail_app" , "html_encoded" =>"1" }).0;
    SET default_webmail_app = NVData || "";
-%]
[% BLOCK available_client %]
    <button type="button" id="setAsActive-[% client.id %]" class="availableClientDock" tabindex="0" aria-disabled="false" aria-label="[% locale.maketext('Click to make “[_1]” the active mail client.', client.id) %]">
        <img class="availableClientDock" src="[% client.icon %]" alt="[% locale.maketext("Select “[_1]”", client.id) %]"  title="[% locale.maketext("Select “[_1]”", client.id) %]" aria-hidden="true">
    </button>
[% END %]
<section class="mail-client-section">
    <div class="row constrained">
    [% IF global.mail_client_list.size > 0 %]
        <div id="clientColumn" class="col-xs-12 col-md-5">
            <h3>[% locale.maketext('Open your inbox') %]</h3>
            <div id="activeClientContainer" class="panel panel-default">
                <button tabindex="0" type="button" class="panel-body" id="activeClientLogoContainer" autofocus title="[% locale.maketext('Open your inbox') %]" aria-disabled="false">
                    <img id="activeClientLogo" src="" aria-hidden="true">
                </button>
                <div id="activeClientButtons" class="panel-footer">
                    <button id="launchActiveButton" type="button" tabindex="0" class="btn btn-primary" autofocus aria-label="[% locale.maketext('Open my active mail client.') %]">[% locale.maketext('Open') %]</button>
                    <input type="checkbox" id="setActiveAsDefault" tabindex="0"><label for="setActiveAsDefault">[% locale.maketext('Open my inbox when I log in') %]</label>
                </div>
            </div>
            [% IF global.mail_client_list.size > 1 %]
            <div>
                <h3>[% locale.maketext('Change your webmail client') %]</h3>
            </div>
            <div class="row clientDock">
                [% FOREACH mail_client IN global.mail_client_list %]
                    [% PROCESS available_client client=mail_client %]
                [% END %]
            </div>
            [% END %]
        </div>
    [% END %]
        <div id="checkWithDevice" class="col-xs-12 col-md-5">
            <h3>[% locale.maketext('Set up email on your device') %]</h3>
            <form id="sendDeviceConfig">
                <div class="form-group">
                    <div class="row">
                        <div class="col-sm-12">
                            <h5 class="sendEmailFormLabel">[% locale.maketext('Select the device you will use:') %]</h5>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <select name="sendDeviceConfigFor" id="sendDeviceConfigFor" class="form-control" tabindex="0">
                                <option value="apple">Apple® (iPhone®, iPad®)</option>
                                <option value="android">[% locale.maketext('Android™ (Google Pixel™, Samsung Galaxy®, etc.)') %]</option>
                                <option value="other">[% locale.maketext('I’m not sure. Send me general instructions.') %]</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="row">
                        <div class="col-sm-12">
                            <h5 class="sendEmailFormLabel">[% locale.maketext('Enter an email address that you can access from your device:') %]</h5>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <input type="text" id="availableEmail" name="availableEmail" class="form-control" placeholder="[% locale.maketext('Example:') %] [% locale.maketext('[asis,user@example.com]') %]" tabindex="0">
                            <div id="emailFormValidation" class="alert alert-danger invisible">
                                <span class="glyphicon glyphicon-remove-sign" aria-hidden="true"></span>
                                <div>[% locale.maketext("Enter a valid email address.") %]</div>
                            </div>
                         </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="row">
                        <div class="col-sm-12">
                            <h5 class="sendEmailFormLabel">[% locale.maketext('Select the configurations that you would like to set up:') %]</h5>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <div>
                                <table><tr><td>
                                <label for="selectEmailConfig" style="font-weight: normal;">
                                    <input type="checkbox" id="selectEmailConfig" value="email" checked/>
                                    <span>[% locale.maketext('Email') %]</span>
                                </label>
                                </td>
								<td style="padding-left: 10px;">
                                <label for="selectCalendarConfig" style="font-weight: normal;">
                                    <input type="checkbox" id="selectCalendarConfig" value="caldav" checked/>
                                    <span>[% locale.maketext('Calendar') %]</span>
                                </label>
                                </td><td style="padding-left: 10px;">
                                <label for="selectContactsConfig" style="font-weight: normal;">
                                    <input type="checkbox" id="selectContactsConfig" value="carddav" checked/>
                                    <span>[% locale.maketext('Contacts') %]</span>
                                </label>
                                </td>
								</tr></table>
                            </div>
                            <div id="configsSelectValidation" class="alert alert-danger invisible">
                                <span class="glyphicon glyphicon-remove-sign" aria-hidden="true"></span>
                                <div>[% locale.maketext("You must select at least one configuration.") %]</div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <button type="button" id="sendInstructionsBtn" class="btn btn-default" tabindex="0" aria-disabled="true" disabled>
                                <span id="send-label" class="overexposed">[% locale.maketext('Send') %]</span>
                                <span id="send-spinner" class="invisible"><i class="fas fa-sync-alt fa-spin"></i></span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="row">
                        <div class="col-sm-12">
                            <div id="emailFormSuccess" class="alert alert-success invisible">
                                <span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span>
                                <div>[% locale.maketext("Success! Check your inbox.") %]</div>
                            </div>
                            <div id="emailFormDanger" class="alert alert-danger alert-dismissible invisible">
                                <span class="glyphicon glyphicon-remove-sign" aria-hidden="true"></span>
                                <button type="button" class="close" id="hideEmailErrorMessageBtn" aria-label="[% locale.maketext('Close error message') %]">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                                <div>
                                    <div id="basicErrorMsg">[% locale.maketext("The system was unable to send email.") %]
                                    </div>
                                    <div id="errorDetailsHeader">
                                        <button type="button"
                                            id="showHideErrorDetails"
                                            class="btn btn-link btn-show-hide"
                                            data-toggle="collapse"
                                            data-target="#errorDetails">
                                            <span id="showErrorDetailsLabel">Show Details <i class="fas fa-angle-double-down"></i></span>
                                            <span id="hideErrorDetailsLabel" class="invisible">Hide Details <i class="fas fa-angle-double-up"></i></span></button>
                                    </div>
                                    <div class="collapse" id="errorDetails">
                                        <div id="errorDetailDisplay" class="card card-body">
                                            Something really bad happened here!
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <div class="form-group">
                <div class="row">
                    <div class="col-sm-12">
                        <p><a id="autoConfigDeviceLnk" href="[% prefix %]mail/clientconf.html">[% locale.maketext('Automatically configure my device') %]</a></p>
                    </div>
                </div>
            </div>
        </div>
        <div id="stats" class="col-xs-12 col-md-2">
            <div id="generalInfoSection" class="panel panel-widget">
            <div id="generalInfoHeaderSection" class="panel-heading widget-heading">
                <span role="heading" aria-level="3">[% locale.maketext("General Information") %]</span>
            </div>
            <table class="table">
                <tbody>
                    <tr>
                        <td colspan="2">
                            <label id="lblEmailId" class="general-info-label updating-elements">[% locale.maketext("Email Address") %]</label>
                            <span id="txtEmailId" class="general-info-value">[% auth_user %]</span>
                        </td>
                    </tr>
                    [% IF is_user_analytics_required_by_leika %]
                        <tr>
                            <td colspan="2">
                                <div class="gen-info__title_row">
                                    <label id="lblAcctUuid" class="general-info-label gen-info__details-title">[% locale.maketext("Email User Analytics ID") %]</label>
                                    <span id="copyMsgContainer" class="copy-msg-container label label-success">
                                        [% locale.maketext('Copied') %]
                                    </span>
                                </div>
                                <div id="acctUuidContainer" class="general-info-value uuid-copy-container">
                                    <i id="iconCopyUuid" class="fas fa-sharp fa-solid fa-copy" title="[% locale.maketext('Click to copy the email user analytics ID.') %]" aria-hidden="true"></i>
                                    <a id="linkCopyUuid" href="javascript:void(0);" title="[% locale.maketext('Click to copy the email user analytics ID.') %]">
                                        <span id="txtAcctUuid" class="general-info-value long-text-fade-overflow">[% CPANEL.email_account_uuid() %]</span>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    [% END %]
                </tbody>
            </table>
        </div>
        </div>
    </div>
<script>
// this script block is run before the initialization code in base.js, so any variables
// that depend on template toolkit input need to be created here as well as globals
// needed there
var dispatchSettingURL= "[% cp_security_token %]/execute/Email/dispatch_client_settings?account=[% CPANEL.user %]@[% mail_client_settings.domain %] &to=";
var sendButton = document.getElementById("sendInstructionsBtn");
var sendLabel = document.getElementById("send-label");
var sendSpinner = document.getElementById("send-spinner");
var toAddressInput = document.getElementById("availableEmail");
var emailConfigSelect = document.getElementById("selectEmailConfig");
var calendarConfigSelect = document.getElementById("selectCalendarConfig");
var contactsConfigSelect = document.getElementById("selectContactsConfig");
var showHideErrorDetails = document.getElementById("showHideErrorDetails");
var errorDisplays = {
    error: document.getElementById("emailFormDanger"),
    validation : document.getElementById("emailFormValidation"),
    success: document.getElementById("emailFormSuccess"),
    configsSelectValidation: document.getElementById("configsSelectValidation")
};

emailConfigSelect.addEventListener("click", validateFormInputs);
if (calendarConfigSelect) {
    calendarConfigSelect.addEventListener("click", validateFormInputs);
}
if (contactsConfigSelect) {
    contactsConfigSelect.addEventListener("click", validateFormInputs);
}
showHideErrorDetails.addEventListener("click", toggleErrorDetailsLabel);

function hidePreviousMessages() {
    errorDisplays["error"].classList.add("invisible");
    errorDisplays["success"].classList.add("invisible");
}

function validateFormInputs() {
    var validationResult = CPANEL.validate.email(toAddressInput.value);
    var configsList = buildSelectedConfigsList();

if(!validationResult || configsList === null) {
        sendButton.disabled = true;
        sendButton.setAttribute("aria-disabled", "true");
    } else {
        sendButton.disabled = false;
        sendButton.setAttribute("aria-disabled", "false");
    }

if(configsList === null) {
        errorDisplays["configsSelectValidation"].classList.remove("invisible");
    } else {
        errorDisplays["configsSelectValidation"].classList.add("invisible");
    }

if(!validationResult) {
        if (toAddressInput.value.length > 0) {
            errorDisplays["validation"].classList.remove("invisible");
            toAddressInput.classList.add("invalid");
        } else {
            errorDisplays["validation"].classList.add("invisible");
            toAddressInput.classList.remove("invalid");
        }
    } else {
        errorDisplays["validation"].classList.add("invisible");
        toAddressInput.classList.remove("invalid");
    }
    hidePreviousMessages();
}

toAddressInput.addEventListener("input", validateFormInputs);

function showSuccessMessage() {
    errorDisplays["success"].classList.remove("invisible");
    window.setTimeout(function() {
        errorDisplays["success"].classList.add("invisible")
    }, 5000);
}

function showErrorMessage(additionalMessage) {
    if (additionalMessage) {
        var errorMessageContainer = document.getElementById("errorDetailDisplay");
        errorMessageContainer.innerHTML = additionalMessage;
        document.getElementById("errorDetailsHeader").classList.remove("invisible");
        document.getElementById("errorDetails").classList.remove("invisible");
    }
    else {
        document.getElementById("errorDetailsHeader").classList.add("invisible");
        document.getElementById("errorDetails").classList.add("invisible");
    }

errorDisplays["error"].classList.remove("invisible");
}

function toggleSendButtonState() {
    sendButton.disabled = sendButton.disabled ? false : true;
    sendLabel.classList.toggle("invisible");
    sendLabel.classList.toggle("overexposed");
    sendSpinner.classList.toggle("invisible");
    sendSpinner.classList.toggle("overexposed");
}

function toggleErrorDetailsLabel() {
    showErrorDetailsLabel.classList.toggle("invisible");
    hideErrorDetailsLabel.classList.toggle("invisible");
}

function buildSelectedConfigsList() {
    var configsList="selected_account_services="
    var emailValue = emailConfigSelect.checked ? emailConfigSelect.value : null;
    var calendarValue = calendarConfigSelect?.checked ? calendarConfigSelect.value : null;
    var contactsValue = contactsConfigSelect?.checked ? contactsConfigSelect.value : null;

if(!emailValue && !calendarValue && !contactsValue) {
        return null;
    } else {
        if(emailValue) {
            configsList = configsList + emailValue + ",";
        }

if(calendarValue) {
            configsList = configsList + calendarValue + ",";
        }

if(contactsValue) {
            configsList = configsList + contactsValue;
        }
    }
    return configsList;
}

var defaultClient = [% default_webmail_app.json %];

window.NVData["prefix"] = "[% prefix %]";
window.NVData["default_webmail_app"] = defaultClient.value;

var clientList = [% global.mail_client_list.json() %];

function copyUuidHandler() {
    var uuidTxtEl = document.getElementById("txtAcctUuid");
    var copyMsgEl = document.getElementById("copyMsgContainer");
    const copyText = uuidTxtEl.textContent;

navigator.clipboard
        .writeText(copyText)
        .then(() => {
            copyMsgEl.classList.add("show-copy-success");
            window.setTimeout(function() {
                copyMsgEl.classList.remove("show-copy-success");
            }, 3000);
        },
        (err) => {
            console.error(err);
        });
}

Back to Directory File Manager