Viewing 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">×</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 buildErrorList(errorData) {
if (errorData.status === 0 && errorData.errors && errorData.errors.length > 0) {
var errorList = "<ul>";
for (var errorIdx = 0; errorIdx < errorData.errors.length; errorIdx++) {
errorList += "<li>";
errorList += errorData.errors[errorIdx];
errorList += "</li>";
}
errorList += "</ul>";
return errorList;
}
return null;
}
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;
}
function toggleConfigsSelectState() {
emailConfigSelect.disabled = !emailConfigSelect.disabled;
if (calendarConfigSelect) {
calendarConfigSelect.disabled = !calendarConfigSelect.disabled;
}
if (contactsConfigSelect) {
contactsConfigSelect.disabled = !contactsConfigSelect.disabled;
}
}
function dispatchClientConfigEmail() {
hidePreviousMessages();
toggleSendButtonState();
toggleConfigsSelectState();
var configsList = buildSelectedConfigsList();
var device = document.getElementById("sendDeviceConfigFor").value;
var fullUrl = dispatchSettingURL + toAddressInput.value + "&block_on_send=1" + "&" + configsList + "&selected_device=" + device;
var xhr = new XMLHttpRequest();
xhr.open("GET", fullUrl, true);
xhr.onload = function (e) {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
data = JSON.parse(xhr.responseText);
if(data.status) {
showSuccessMessage();
}
else {
showErrorMessage(buildErrorList(data));
}
} else {
showErrorMessage(buildErrorList(JSON.parse(xhr.responseText)));
}
}
// add a little delay so the button spinner spins for a bit
setTimeout(function(){
toggleSendButtonState();
toggleConfigsSelectState();
}, 2000);
};
xhr.onerror = function (e) {
showErrorMessage(buildErrorList(JSON.parse(xhr.responseText)));
};
xhr.send(null);
}
var defaultClient = [% default_webmail_app.json %];
window.NVData["prefix"] = "[% prefix %]";
window.NVData["default_webmail_app"] = defaultClient.value;
var clientList = [% global.mail_client_list.json() %];
var launchActiveButton = document.getElementById("launchActiveButton");
var setDefaultCheckbox = document.getElementById("setActiveAsDefault");
var logoContainer = document.getElementById("activeClientLogoContainer");
var sendInstructionsButton = document.getElementById("sendInstructionsBtn");
var hideEmailDangerAlert = document.getElementById("hideEmailErrorMessageBtn");
sendInstructionsButton.addEventListener("click", dispatchClientConfigEmail);
var sendEmailForm = document.getElementById("sendDeviceConfig");
if (hideEmailDangerAlert) {
hideEmailDangerAlert.addEventListener("click", function() {
errorDisplays["error"].classList.add("invisible");
});
}
if (sendEmailForm) {
sendEmailForm.addEventListener("keydown", function(kbEvent) {
if ((kbEvent.key && kbEvent.key === "Enter") ||
(kbEvent.keyCode && kbEvent.keyCode === 13)) {
kbEvent.preventDefault();
if (!sendInstructionsButton.disabled) {
dispatchClientConfigEmail();
}
}
});
}
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);
});
}
document.addEventListener("DOMContentLoaded", function(){
// Account UUID copy event handler.
var copyUuidLinkEl = document.getElementById("linkCopyUuid");
var copyUuidIconEl = document.getElementById("iconCopyUuid");
if (copyUuidLinkEl) {
copyUuidLinkEl.addEventListener("click", copyUuidHandler);
}
if (copyUuidIconEl) {
copyUuidIconEl.addEventListener("click", copyUuidHandler);
}
});
</script>
</section>
Back to Directory
File Manager