openpanel/templates/admini/mautic.html

711 lines
24 KiB
HTML

<!-- mautic.html -->
{% extends 'base.html' %}
{% block content %}
{% if domains %}
<style>
.toast-header {
background-color: #192030;
padding: 15px;
font-weight: 600;
font-size: 15px;
margin-bottom: 0;
line-height: 1.4;
color: rgb(255 255 255 / 84%)!important;
}
.no_link {
color: black;
text-decoration: none;
}
.nije-link {
text-decoration: none;
color: black;
border-bottom: 1px dashed black;
}
</style>
<!-- Flash messages -->
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
{% if "Error" in message %}
<script type="module">
const toastMessage = '{{ message }}';
const toast = toaster({
body: toastMessage,
header: `<div class="d-flex align-items-center" style="color: #495057;"><l-i class="bi bi-x-lg" class="me-2" style="color:red;"></l-i> {{ _("Mautic Installation failed.") }}</div>`,
});
</script>
{% else %}
<script type="module">
const toastMessage = '{{ message }}';
const toast = toaster({
body: toastMessage,
header: `<div class="d-flex align-items-center" style="color: #495057;"><l-i class="bi bi-check-lg" class="me-2" style="color:green;"></l-i> {{ _("Mautic successfully installed.") }}</div>`,
});
</script>
{% endif %}
{% endfor %}
{% endif %}
{% endwith %}
<!-- END Flash messages -->
<div class="row">
<div class="collapse mb-2" id="collapseExample">
<div class="card card-body">
<!-- Form for adding new containers -->
<div class="container">
<a href="#" class="nije-link" id="cancelLink" style="display: none;"><i class="bi bi-x-lg" style="right: 15px;top: 15px;position: absolute;color: black;padding: 6px 10px;border-radius: 50px;"></i></a>
<div class="row">
<div class="col-md-6 offset-md-3">
<h2 class="mb-3"><i class="bi bi-download"></i> {{ _("Install Mautic") }}</h2>
<p>{{ _("Install Mautic on an existing domain.") }}</p>
<form method="post" id="installForm" action="/mautic/install">
<div class="form-group row">
<div class="col-12">
<label for="website_name" class="form-label">{{ _("Website Name:") }}</label>
<input type="text" class="form-control" name="website_name" id="website_name" value="My Mautic" required>
</div>
</div>
<div class="form-group">
<label for="domain_id" class="form-label">{{ _("Domain:") }}</label>
<div class="input-group">
</select>
<select class="form-select" name="domain_id" id="domain_id">
{% for domain in domains %}
<option class="punycode" value="{{ domain.domain_id }}">{{ domain.domain_url }}</option>
{% endfor %}
</select>
</div>
</div>
<div class="form-group">
<label for="admin_email">{{ _("Admin Email:") }}</label>
<input type="email" class="form-control" name="admin_email" id="admin_email" required>
</div>
<script>
$(document).ready(function() {
// Check if the URL contains the parameter "install"
const urlParams = new URLSearchParams(window.location.search);
const installParam = urlParams.get('install');
if (installParam || window.location.hash === '#install') {
// Show the Bootstrap collapsible element
$("#collapseExample").collapse('show');
}
// Add event listener to the dropdown
$("#domain_id").change(function() {
// Get the selected domain URL
var selectedDomain = $("#domain_id option:selected").text();
// Update the admin email input value
var adminEmailInput = $("#admin_email");
var currentAdminEmail = adminEmailInput.val();
var atIndex = currentAdminEmail.indexOf('@');
if (atIndex !== -1) {
// If '@' exists in the email, replace the part after it with the selected domain
adminEmailInput.val(currentAdminEmail.substring(0, atIndex + 1) + selectedDomain);
} else {
// If '@' doesn't exist in the email, add the selected domain after 'admin@'
adminEmailInput.val('admin@' + selectedDomain);
}
});
// Add event listener to the "Install Mautic" button to toggle form and jumbotron
$("#collapseExample").on('shown.bs.collapse', function () {
$("#jumbotronSection").hide();
$("#cancelLink").show();
});
// Add event listener to the "Cancel" link to toggle form and jumbotron
$("#cancelLink").click(function() {
$("#collapseExample").collapse('hide');
$("#jumbotronSection").show();
$("#cancelLink").hide();
});
});
var selectedDomain = $("#domain_id option:selected").text();
// Update the admin email input value
var adminEmailInput = $("#admin_email");
var currentAdminEmail = adminEmailInput.val();
var atIndex = currentAdminEmail.indexOf('@');
if (atIndex !== -1) {
// If '@' exists in the email, replace the part after it with the selected domain
adminEmailInput.val(currentAdminEmail.substring(0, atIndex + 1) + selectedDomain);
} else {
// If '@' doesn't exist in the email, add the selected domain after 'admin@'
adminEmailInput.val('admin@' + selectedDomain);
}
</script>
<div class="form-group row">
<div class="col-md-6">
<label for="admin_username" class="form-label">{{ _("Admin Username:") }}</label>
<input type="text" class="form-control" name="admin_username" id="admin_username" required>
</div>
<div class="col-md-6">
<label for="admin_password" class="form-label">{{ _("Admin Password:") }}</label>
<div class="input-group">
<input type="password" class="form-control" name="admin_password" id="admin_password" required>
<div class="input-group-append">
<button class="btn btn-outline-success" type="button" id="generatePassword">
{{ _("Generate") }}
</button>
<button class="btn btn-outline-secondary" type="button" id="togglePassword">
<i class="bi bi-eye"></i>
</button>
</div>
</div>
</div>
</div>
<script>
function generateRandomUsername(length) {
const charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
let result = "";
for (let i = 0; i < length; i++) {
const randomIndex = Math.floor(Math.random() * charset.length);
result += charset.charAt(randomIndex);
}
return result;
}
function generateRandomStrongPassword(length) {
const charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()-_=+";
let result = "";
for (let i = 0; i < length; i++) {
const randomIndex = Math.floor(Math.random() * charset.length);
result += charset.charAt(randomIndex);
}
return result;
}
function generateInitiallyUsernameAndPassword() {
const generatedUsername = generateRandomUsername(8);
const generatedPassword = generateRandomStrongPassword(16);
document.getElementById("admin_username").value = generatedUsername;
document.getElementById("admin_password").value = generatedPassword;
};
generateInitiallyUsernameAndPassword();
document.getElementById("generatePassword").addEventListener("click", function() {
const generatedPassword = generateRandomStrongPassword(16);
document.getElementById("admin_password").value = generatedPassword;
const passwordField = document.getElementById("admin_password");
if (passwordField.type === "password") {
passwordField.type = "text";
}
});
document.getElementById("togglePassword").addEventListener("click", function() {
const passwordField = document.getElementById("admin_password");
if (passwordField.type === "password") {
passwordField.type = "text";
} else {
passwordField.type = "password";
}
});
</script>
<div class="form-group">
<label for="mautic_version" class="form-label">Mautic Version:</label>
<div class="form-field">
<select class="form-select" name="mautic_version" id="mautic_version">
</select>
</div>
</div>
<!-- https://github.com/mautic/mautic/releases -->
<br>
<button type="submit" class="btn btn-primary" id="installButton">{{ _("Start Installation") }}</button>
</form>
<script>
// Fetch the Mautic versions from the GitHub API
fetch('https://api.github.com/repos/mautic/mautic/tags')
.then(response => response.json())
.then(data => {
// Extract tag names from the response
const versions = data.map(tag => tag.name);
// Filter out versions if needed (for example, excluding beta or RC versions)
const filteredVersions = versions.filter(version => !version.includes('beta') && !version.includes('RC') && !version.includes('-'));
// Take the latest 10 versions
const latestVersions = filteredVersions.slice(0, 10);
// Populate the select dropdown with options
const selectElement = document.getElementById('mautic_version');
latestVersions.forEach(version => {
const option = document.createElement('option');
option.value = version;
option.textContent = `${version}`;
selectElement.appendChild(option);
});
})
.catch(error => {
console.error('Error fetching Mautic versions:', error);
// In case of an error, you might want to display a default option
const selectElement = document.getElementById('mautic_version');
const option = document.createElement('option');
option.value = ''; // Set a value for the default option if needed
option.textContent = 'Error fetching versions';
selectElement.appendChild(option);
});
// Function to compare two version strings
function compareVersions(a, b) {
const versionA = a.split('.').map(Number);
const versionB = b.split('.').map(Number);
for (let i = 0; i < Math.max(versionA.length, versionB.length); i++) {
const partA = versionA[i] || 0;
const partB = versionB[i] || 0;
if (partA < partB) return -1;
if (partA > partB) return 1;
}
return 0;
}
</script>
</div>
</div>
</div>
</div>
</div>
{% if data %}
{% if view_mode == 'table' %}
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>{{ _("Domain") }}</th>
<th>{{ _("Mautic Version") }}</th>
<th>{{ _("Admin Email") }}</th>
<th>{{ _("Created on") }}</th>
<th>{{ _("Actions") }}</th>
</tr>
</thead>
<tbody>
{% for row in data %}
<div class="modal fade" id="removeModal{{ row[6] }}" tabindex="-1" role="dialog" aria-labelledby="removeModalLabel{{ row[6] }}" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="removeModalLabel{{ row[6] }}">{{ row[0] }}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body row">
<div class="col-md-6">
<h4>{{ _("Delete Mautic website") }}</h4>
<p>{{ _("This will irreversibly delete the website, permanently deleting all files and database.") }}</p>
<button type="button" class="btn btn-danger" onclick="confirmRemove('{{ row[6] }}')">{{ _("Uninstall") }}</button>
</div>
<div class="col-md-6">
<h4>{{ _("Remove from the Manager") }}</h4>
<p>{{ _("This will just remove the installation from the Manager but keep the files and database.") }}</p>
<button type="button" class="btn btn-warning" onclick="confirmDetach('{{ row[6] }}')">{{ _("Detach") }}</button>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
{% set domain_url = row[0] %}
<tr>
<td><a class="punycode no_link domain_link" href="http://{{ row[0] }}" target="_blank"><img src="https://www.google.com/s2/favicons?domain={{ row[0] }}" alt="{{ row[0] }} Favicon" style="width:16px; height:16px; margin-right:5px;">
{{ row[0] }} <i class="bi bi-box-arrow-up-right"></i></a></td>
<td>{{ row[3] }}</td>
<td>{{ row[2] }}</td>
<td>{{ row[4] }}</td>
<td>
<a class="btn btn-secondary mx-2" href="/website?domain={{ row[0] }}">{{ _("Manage") }}</a>
<button type="button" class="btn btn-danger" style="border: 0px;" data-bs-toggle="modal" data-bs-target="#removeModal{{ row[1] }}"><i class="bi bi-trash3"></i> {{ _("Remove") }}</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
{% if view_mode == 'cards' %}
<style>
/* Style for the container */
.image-container {
position: relative;
display: inline-block;
}
/* Style for the button */
.center-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none; /* Hide the button by default */
z-index: 1; /* Ensure the button appears above the image */
}
/* Show the button when hovering over the image container */
.image-container:hover .center-button {
display: block;
}
.card {
border: none;
border-radius: 10px
}
.c-details span {
font-weight: 300;
font-size: 13px
}
.icon {
width: 50px;
height: 50px;
background-color: #eee;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 39px
}
.badge span {
background-color: black;
width: 80px;
height: 20px;
padding-bottom: 3px;
border-radius: 5px;
display: flex;
color: white;
justify-content: center;
align-items: center
}
.text1 {
font-size: 14px;
font-weight: 600
}
.text2 {
color: #a5aec0
}
a.close_button {
right: 5px;top: 10px;position: absolute;color: white;padding: 0px 4px;background: indianred;border-radius: 50px; z-index:1;
}
a.close_button:hover {
background: red;
}
</style>
<div class="container mb-3">
<div class="row">
{% for row in data %}
<div class="modal fade" id="removeModal{{ row[6] }}" tabindex="-1" role="dialog" aria-labelledby="removeModalLabel{{ row[6] }}" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="removeModalLabel{{ row[6] }}">{{ row[0] }}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body row">
<div class="col-md-6">
<h4>{{ _("Delete Mautic website") }}</h4>
<p>{{ _("This will irreversibly delete the website, permanently deleting all files and database.") }}</p>
<button type="button" class="btn btn-danger" onclick="confirmRemove('{{ row[6] }}')">{{ _("Uninstall") }}</button>
</div>
<div class="col-md-6">
<h4>{{ _("Remove from the Manager") }}</h4>
<p>{{ _("This will just remove the installation from the Manager but keep the files and database.") }}</p>
<button type="button" class="btn btn-warning" onclick="confirmDetach('{{ row[6] }}')">{{ _("Detach") }}</button>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card bg-light mb-2">
<a href="#" class="close_button" data-bs-toggle="modal" data-bs-target="#removeModal{{ row[6] }}"><i class="bi bi-x-lg" style=""></i></a>
<div class="mt-0">
<div class="image-container">
<a href="/website?domain={{ row[0] }}">
<img
id="screenshot-image-{{ row[0] }}"
src="/static/images/placeholder.svg"
alt="Screenshot of {{ row[0] }}"
class="img-fluid"
/>
</a>
<a href="/website?domain={{ row[0] }}" class="center-button btn btn-dark">
<i class="bi bi-sliders2-vertical"></i> {{ _("Manage") }}
</a>
</div>
</div>
<div class="d-flex p-2 justify-content-between">
<div class="d-flex flex-row align-items-center">
<div class="icon"> <i class=""><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="42px" height="42px" viewBox="0 0 349.779 349.779" enable-background="new 0 0 349.779 349.779" xml:space="preserve"><path fill="#FFFFFF" d="M174.89,349.779C78.612,349.779,0,271.462,0,174.89S78.612,0,174.89,0c23.26,0,45.931,4.417,67.129,13.543
c5.889,2.65,8.833,9.422,6.478,15.605c-2.649,5.888-9.421,8.833-15.604,6.477c-18.549-7.655-37.98-11.482-58.002-11.482
c-83.323,0-151.041,67.718-151.041,151.041S91.567,326.225,174.89,326.225c83.323,0,151.041-67.718,151.041-151.041
c0-17.96-2.944-35.332-9.127-51.819c-2.355-6.183,0.883-12.955,7.066-15.31c6.183-2.355,12.954,0.883,15.31,7.066
c7.066,19.138,10.6,39.453,10.6,60.063C349.779,271.167,271.462,349.779,174.89,349.779"></path><g><polygon fill="#FDB933" points="251.44,156.93 224.354,185.194 239.369,248.496 273.522,248.496 "></polygon></g><polygon fill="#FDB933" points="240.253,73.312 249.674,82.734 174.89,161.935 110.999,96.277 74.196,248.496 108.35,248.496
128.665,163.996 174.89,214.343 273.817,106.583 283.239,116.299 292.66,63.007 "></polygon></svg></i> </div>
<div class="ms-2 c-details">
<h6 class="punycode mb-0"><a href="http://{{ row[0] }}" target="_blank" class="nije-link">{{ row[0] }}</a></h6> <span>{{ _("Mautic") }} {{ row[3] }}</span>
</div>
</div>
<div class="badge" style="display: -webkit-box;">
<!--div class="dropdown" style="vertical-align: middle; display: inline;">
<a href="" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical" style="font-size: 1.3125rem;"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="more-actions">
<li><a class="dropdown-item" href="#">PHP Version</a></li>
<li><a class="dropdown-item" href="#">SSL Security</a></li>
<li><a class="dropdown-item" href="#">SSL Security</a></li>
<hr>
<li><a class="dropdown-item" href="#">Refresh Preview</a></li>
</ul>
</div--></div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<script>
// Function to update a screenshot image
function updateScreenshot(screenshotImage, screenshotURL) {
var imageLoader = new Image();
imageLoader.src = screenshotURL;
imageLoader.onload = function() {
screenshotImage.src = screenshotURL;
};
}
// Function to update all screenshot images
function updateAllScreenshots() {
{% for row in data %}
var screenshotImage = document.getElementById("screenshot-image-{{ row[0] }}");
var screenshotURL = "/screenshot/{{ row[0] }}";
updateScreenshot(screenshotImage, screenshotURL);
{% endfor %}
}
updateAllScreenshots();
</script>
{% endif %}
<script>
// Function to confirm removal
function confirmRemove(id) {
// Send an AJAX request to the server to remove Mautic
var xhr = new XMLHttpRequest();
xhr.open('POST', '/mautic/remove', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// Reload the page to update the table
location.reload();
} else {
alert('{{ _("An error occurred while removing Mautic.") }}');
}
}
};
xhr.send('id=' + id);
}
// Function to confirm detachment
function confirmDetach(id) {
// Send an AJAX request to the server to remove Mautic
var xhr = new XMLHttpRequest();
xhr.open('POST', '/mautic/detach', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// Redirect to wp manager page
window.location.href = '/mautic';
} else {
alert('{{ _("An error occurred while detaching Mautic.") }}');
}
}
};
xhr.send('id=' + id);
}
</script>
</div>
<style>
.nije-link {
text-decoration: none;
color: black;
border-bottom: 1px dashed black;
}
</style>
{% else %}
<!-- Display jumbotron for no wp installations -->
<div class="jumbotron text-center mt-5" id="jumbotronSection" style="min-height: 70vh;display:block;">
<h1>{{ _("No Mautic Installations") }}</h1>
<p>{{ _("There are no existing Mautic installations. You can install a new instance below.") }}</p>
<button class="btn btn-lg btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
<i class="bi bi-download"></i> {{ _("Install Mautic") }}
</button>
</div>
{% endif %}
{% else %}
<!-- Display jumbotron for no domains -->
<div class="jumbotron text-center mt-5" id="jumbotronSection">
<h1>{{ _("No Domains") }}</h1>
<p>{{ _("Add a domain name first in order to install Mautic.") }}</p>
<a href="/domains#add-new" class="btn btn-lg btn-primary">
<i class="bi bi-plus-lg"></i> {{ _("Add a Domain Name") }}
</a>
</div>
{% endif %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/punycode/2.1.1/punycode.min.js"></script>
<script type="module">
punnyCodeShouldBeGlobalFunction function() {
var punycodeElements = document.querySelectorAll(".punycode");
punycodeElements.forEach(function(element) {
element.textContent = punycode.toUnicode(element.textContent);
});
};
punnyCodeShouldBeGlobalFunction();
</script>
</section>
<footer class="main-footer btn-toolbar" role="toolbar">
<div class="btn-group" role="group" aria-label="Status">
</div>
<div class="ms-auto" role="group" aria-label="Actions">
<button class="btn btn-transparent" type="button" aria-expanded="false" id="refreshData">
<i class="bi bi-arrow-counterclockwise"></i> {{ _('Refresh') }}<span class="desktop-only"> {{ _('Data') }}</span>
</button>
<button class="btn btn-primary mx-2" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
<i class="bi bi-download"></i> {{ _('Install') }}<span class="desktop-only"> {{ _('Mautic') }}</span>
</button>
<span class="desktop-only">{% if view_mode == 'cards' %}
<a href="{{ url_for('list_mautic', view='table') }}" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ _('Switch to List View - perfect for those with many Websites.') }}" class="btn btn-outline" style="padding-left: 5px; padding-right: 5px;"><i class="bi bi-table"></i></a>
{% endif %}
{% if view_mode == 'table' %}
<a href="{{ url_for('list_mautic', view='cards') }}" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ _('Switch to Grid View - a visual representation of your Websites and their content.') }}" class="btn btn-outline" style="padding-left: 5px; padding-right: 5px;"><i class="bi bi-view-list"></i></a>
{% endif %}</span>
<script>
// Add an event listener to the links to hide tooltip as its buggy!
document.addEventListener('DOMContentLoaded', function () {
var links = document.querySelectorAll('.desktop-only a');
links.forEach(function (link) {
link.addEventListener('click', function () {
// Hide the tooltip when the link is clicked
var tooltip = new bootstrap.Tooltip(link);
tooltip.hide();
});
});
});
</script>
</div>
</footer>
{% endblock %}