openpanel/templates/admini/databases/remote_mysql.html

<!-- remotemysql.html -->
{% extends 'base.html' %}

{% block content %}

<script type="module">
  // Function to attach event listeners
  function attachEventListeners() {
    document.querySelectorAll("button[type='submit']").forEach((btn) => {
      btn.addEventListener("click", async (ev) => {
        ev.preventDefault();

        const action = btn.closest("form").querySelector("input[name='action']").value;
        let btnClass, toastMessage, enabledMessage;

        if (action === 'enable') {
          btnClass = 'danger';
          toastMessage = "{{ _('Enabling remote MySQL access..') }}";
          enabledMessage = "{{ _('Remote MySQL access is enabled.') }}";
        } else if (action === 'disable') {
          btnClass = 'success';
          toastMessage = "{{ _('Disabling remote MySQL access..') }}";
          enabledMessage = "{{ _('Remote MySQL access is disabled.') }}";
        }

        const toast = toaster({
          body: toastMessage,
          className: `border-0 text-white bg-${btnClass}`,
        });

        try {
          const response = await fetch(window.location.href, {
            method: 'POST',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: `action=${action}`,
          });

          // Check if the user is still on the same URL
          if (window.location.pathname === '/databases/remote-mysql') {
            // get the response HTML content
            const resultHtml = await response.text();

            // Parse the HTML string to extract the content of the specific element
            const parser = new DOMParser();
            const doc = parser.parseFromString(resultHtml, 'text/html');
            const mainScopeContent = doc.getElementById("main-scope")?.innerHTML;

            // Replace the content of the element with the ID "main-scope"
            const mainScopeElement = document.getElementById("main-scope");
            if (mainScopeElement) {
              mainScopeElement.innerHTML = mainScopeContent || '';
            }

            // Reattach event listeners after updating content
            attachEventListeners();
          } else {
            const toast = toaster({
              body: enabledMessage,
              className: `border-0 text-white bg-primary`,
            });
          }
        } catch (error) {
          console.error('Error:', error);
        }
      });
    });
  }

  // Attach event listeners initially
  attachEventListeners();
</script>









<div class="row">

<p>{{ _('Remote MySQL access gives you the ability to connect to a MySQL database on this server from a another (remote) device or location over the internet.') }}</p>

<div class="col-xl-12">
          <div class="card card-one">

            <div class="card-body">
              <div class="row mt-2 mb-2">
                <label class="card-title fw-medium text-dark mb-1">{{ _('status:') }}</label><div class="col-6">
        {% if remote_mysql_display == 'ON' %}
<h3 class="card-value mb-1"><i class="bi bi-check-circle-fill"></i> {{ _('Enabled<') }}/h3>
        {% elif remote_mysql_display == 'OFF' %}
<h3 class="card-value mb-1"><i class="bi bi-x-lg"></i> {{ _('Disabled') }}</h3>
        {% else %}
<h3 class="card-value mb-1"><i class="bi bi-x-lg"></i>{{ _(' Unknown. Contact Administrator.') }}</h3>
        {% endif %}                 
                </div><!-- col -->
              </div>

        {% if remote_mysql_display == 'ON' %}
              <hr>
              <div class="row mt-2 mb-2">
                <div class="col-6">
                  <label class="card-title fw-medium text-dark mb-1">{{ _('Server IP address:') }}</label><h3 class="card-value mb-1">{{server_ip}}</h3>
                </div><!-- col -->
              </div>
              <hr>
              <div class="row mt-2 mb-2">
                <div class="col-12">
                  
                  <label class="card-title fw-medium text-dark mb-1">{{ _('MySQL Port:') }}</label>
                  <h3 class="card-value mb-1">{{container_port}}</h3><span class="d-block text-muted fs-11 ff-secondary lh-4">{{ _('*Port is random generated and unique to your account.') }}</span>
                </div><!-- col -->
              </div><!-- row -->
        {% elif remote_mysql_display == 'OFF' %}
        {% else %}
        {% endif %}     
            </div><!-- card-body -->
          </div><!-- card-one -->
        </div>


{% if remote_mysql_display == 'OFF' %}

<div class="col-xl-12">
        <div class="card card-one">
          <div class="card-header">
<h6 class="card-title">{{ _('Important Security Notice') }}</h6>
            <nav class="nav nav-icon nav-icon-sm ms-auto">
              <a href="" class="nav-link"><i class="ri-refresh-line"></i></a>
              <a href="" class="nav-link"><i class="ri-more-2-fill"></i></a>
            </nav>
          </div><!-- card-header -->
          <div class="card-body">
<div class="gap-2 mt-3 mt-md-0">
<p class="mb-3">{{ _('Allowing remote MySQL access opens your database to connections from the entire internet, which may pose a security risk. Please consider the following:') }}</p>
<ul>
<li><b>{{ _('Security Vulnerabilities') }}</b>: {{ _('Allowing access from the web can expose your database to potential security vulnerabilities, increasing the risk of unauthorized access, data breaches, and data loss.') }}</li>
<li><b>{{ _('Data Privacy') }}</b>: {{ _('Your sensitive data may be at risk if not properly secured. Make sure to use strong passwords and encryption to protect your information.') }}
<li><b>{{ _('Firewall and Access Control') }}</b>: {{ _('It is crucial to set up robust firewall rules and access control to restrict connections only to trusted IP addresses.') }}
<li><b>{{ _('Regular Backups') }}</b>: {{ _('Ensure that you have regular database backups in place to recover data in case of any security incidents.') }}
</ul>
<p class="mb-3">{{ _("Before enabling remote MySQL access, please review your security settings, and consider the potential risks carefully. If you're unsure about the security implications or need assistance, consult with your system administrator or a security expert.") }}</p>

<p class="mb-3">{{ _('Your data security is important to us, and we recommend taking the necessary precautions to protect it.') }}</p>
        </div>


             </div>
            </div>
          </div><!-- card-body -->
   </div>
{% endif %}

</section>
          <footer class="main-footer btn-toolbar" role="toolbar">

<div class="btn-group" role="group" aria-label="Status">
<label>status:</label><b> {% if remote_mysql_display == 'ON' %} {{ _('Enabled') }}{% elif remote_mysql_display == 'OFF' %} {{ _('Disabled') }}{% else %} {{ _('Unknown') }}{% endif %}</b>   
</div>

            <div class="ms-auto" role="group" aria-label="Actions">
{% if remote_mysql_display == 'ON' %}
<form method="post">
<input type="hidden" name="action" value="disable">
<button class="btn btn-success d-flex align-items-center gap-2" type="submit">{{ _('Disable Remote MySQL Access') }}</button>
</form>
{% elif remote_mysql_display == 'OFF' %}
<form method="post">
<input type="hidden" name="action" value="enable">
<button class="btn btn-danger d-flex align-items-center gap-2" type="submit">{{ _('Enable Remote MySQL Access') }}</button>
</form>
{% else %}
<form method="post">
<input type="hidden" name="action" value="disable">
<button class="btn btn-primary d-flex align-items-center gap-2" type="submit">{{ _('Disable Remote MySQL Access') }}</button>
</form>
<form method="post">
<input type="hidden" name="action" value="enable">
<button class="btn btn-primary d-flex align-items-center gap-2" type="submit">{{ _('Enable Remote MySQL Access') }}</button>
</form>
{% endif %}
</div>
</footer>


{% endblock %}