GuacPanel/webgui/templates/ssl.html

{% extends 'base.html' %}
{% block title %}SSL{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
  <h4 class="mb-0"><i class="bi bi-lock me-2"></i>SSL certifikat</h4>
  {% if active %}
    <span class="badge bg-success fs-6">Aktivan</span>
  {% else %}
    <span class="badge bg-warning text-dark fs-6">Nije aktivan</span>
  {% endif %}
</div>

{% if active %}
<div class="row g-4">
  <div class="col-md-6">
    <div class="card">
      <div class="card-header fw-semibold">Informacije</div>
      <div class="card-body">
        <dl class="row mb-0">
          <dt class="col-5 text-muted small">Domena / IP</dt>
          <dd class="col-7">{{ domain }}</dd>
        </dl>
        {% if cert_info %}
        <pre class="mt-2 p-2 rounded small text-muted"
             style="background:#0d1117;border:1px solid #30363d;font-size:.75rem;max-height:200px;overflow:auto">{{ cert_info }}</pre>
        {% endif %}
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="card">
      <div class="card-header fw-semibold">Akcije</div>
      <div class="card-body d-flex flex-column gap-2">
        <button class="btn btn-outline-primary" onclick="renewSSL()">
          <i class="bi bi-arrow-repeat"></i> Obnovi Let's Encrypt certifikat
        </button>
        <button class="btn btn-outline-secondary" onclick="loadSelfSignedInfo()">
          <i class="bi bi-info-circle"></i> Provjeri self-signed info
        </button>
      </div>
    </div>
  </div>
</div>
<pre id="ss-info" class="mt-3 p-3 rounded small d-none"
     style="background:#0d1117;border:1px solid #30363d;color:#8b949e"></pre>

{% else %}
<div class="row g-4">

  <!-- Let's Encrypt -->
  <div class="col-md-6">
    <div class="card h-100">
      <div class="card-header fw-semibold">
        <i class="bi bi-globe me-1"></i> Let's Encrypt
        <span class="badge bg-success ms-1 small">Preporučeno</span>
      </div>
      <div class="card-body">
        <ul class="small text-muted mb-3">
          <li>Besplatan, povjerljiv certifikat</li>
          <li>Browser ne pokazuje upozorenje</li>
          <li>Zahtijeva javnu domenu (ne radi s IP-om)</li>
          <li>Auto-obnova svakih 90 dana</li>
        </ul>
        <div class="alert alert-warning small py-2">
          <i class="bi bi-exclamation-triangle me-1"></i>
          DNS mora pokazivati na ovaj server.
        </div>
        <div class="row g-2 mt-1">
          <div class="col-12">
            <input id="ssl-domain" type="text" class="form-control form-control-sm"
                   value="{{ domain }}" placeholder="rdp.firma.com">
          </div>
          <div class="col-12">
            <input id="ssl-email" type="email" class="form-control form-control-sm"
                   placeholder="admin@firma.com">
          </div>
          <div class="col-12">
            <button class="btn btn-success w-100" onclick="enableSSL()">
              <i class="bi bi-lock"></i> Aktiviraj Let's Encrypt
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Self-signed -->
  <div class="col-md-6">
    <div class="card h-100">
      <div class="card-header fw-semibold">
        <i class="bi bi-shield-lock me-1"></i> Self-signed certifikat
      </div>
      <div class="card-body">
        <ul class="small text-muted mb-3">
          <li>Radi s IP adresom ili domenom</li>
          <li>Enkriptiran promet (HTTPS)</li>
          <li>Browser pokazuje upozorenje pri prvom posjetu</li>
          <li>Vrijedi 10 godina, bez potrebe za obnovom</li>
        </ul>
        <div class="alert alert-info small py-2">
          <i class="bi bi-info-circle me-1"></i>
          Idealno za internu mrežu ili testiranje.<br>
          Generirat ce se za: <strong>{{ domain }}</strong>
        </div>
        <button class="btn btn-outline-primary w-100 mt-2" onclick="enableSelfSigned()">
          <i class="bi bi-shield-lock"></i> Generiraj self-signed certifikat
        </button>
      </div>
    </div>
  </div>

</div>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
async function enableSSL() {
  const btn = event.target;
  btn.disabled = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Aktivacija (moze potrajati)...';
  const r = await api('/api/ssl/enable', {
    domain: document.getElementById('ssl-domain').value.trim(),
    email:  document.getElementById('ssl-email').value.trim()
  });
  showToast(r.ok ? 'SSL aktiviran!' : r.msg, r.ok);
  if (r.ok) setTimeout(() => location.reload(), 2000);
  else { btn.disabled = false; btn.innerHTML = '<i class="bi bi-lock"></i> Aktiviraj Let\'s Encrypt'; }
}

async function enableSelfSigned() {
  const btn = event.target;
  btn.disabled = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Generiranje...';
  const r = await api('/api/ssl/selfsigned');
  showToast(r.msg, r.ok);
  if (r.ok) setTimeout(() => location.reload(), 1500);
  else { btn.disabled = false; btn.innerHTML = '<i class="bi bi-shield-lock"></i> Generiraj self-signed certifikat'; }
}

async function renewSSL() {
  const btn = event.target;
  btn.disabled = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Obnavljanje...';
  const r = await api('/api/ssl/renew');
  showToast(r.ok ? 'Certifikat obnovljen' : r.msg, r.ok);
  btn.disabled = false;
  btn.innerHTML = '<i class="bi bi-arrow-repeat"></i> Obnovi Let\'s Encrypt certifikat';
}

async function loadSelfSignedInfo() {
  const r = await fetch('/api/ssl/selfsigned_info').then(r => r.json());
  const el = document.getElementById('ss-info');
  el.textContent = r.info;
  el.classList.remove('d-none');
}
</script>
{% endblock %}