{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Install Commercial SSL" %} - Eenos{% endblock %}
{% block content %}
<div class="eenos-page-header flex-wrap gap-3"><div><h1 class="eenos-page-title">{% translate "Install Commercial SSL Certificate" %}</h1><div class="eenos-page-subtitle">{% translate "Install a certificate, matching private key, and optional CA chain for a hosted domain." %}</div></div><div class="col-12 col-sm-auto"><a href="{% url 'ssl_domains' %}" class="btn btn-outline-primary d-flex align-items-center justify-content-center gap-2 w-100"><i data-lucide="badge-check"></i>{% translate "SSL Certificates" %}</a></div></div>
<nav class="eenos-breadcrumb" aria-label="{% translate 'Breadcrumb' %}"><a href="{% url 'dashboard' %}">{% translate "Dashboard" %}</a><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span>{% translate "Security" %}</span><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><a href="{% url 'ssl_domains' %}">{% translate "SSL/TLS" %}</a><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span class="eenos-breadcrumb-current">{% translate "Install Certificate" %}</span></nav>
{% include "includes/form_alerts.html" %}
<div class="eenos-amber-notice mb-4" role="status"><div class="eenos-amber-notice-icon"><i data-lucide="info"></i></div><div class="eenos-amber-notice-content"><div class="eenos-amber-notice-title">{% translate "Certificate requirements" %}</div><div class="eenos-amber-notice-text">{% translate "Paste complete PEM values, including their BEGIN and END lines. The private key must match the certificate." %}</div></div></div>
<form method="post" id="commercialSslForm" class="eenos-form" data-parsley-validate>{% csrf_token %}<input type="hidden" name="install_ssl" value="yes">
<div class="eenos-card"><div class="eenos-card-header"><div><h2 class="eenos-card-title">{% translate "Certificate Material" %}</h2><p class="eenos-card-subtitle">{% translate "Select the website and provide the certificate files issued by your certificate authority." %}</p></div><div class="eenos-card-action-icon"><i data-lucide="shield-plus"></i></div></div>
<div class="col-12 col-lg-7 mb-4"><label for="domain" class="form-label">{% translate "Domain" %}</label><select class="form-select eenos-select-search" name="domain" id="domain" required data-parsley-required-message="{% translate 'Please select the domain that will use this certificate.' %}"><option value="">{% translate "Select domain" %}</option><optgroup label="{% translate 'Primary Domain' %}"><option value="{{ main_domain }}" {% if domain == main_domain or form.domain.value == main_domain %}selected{% endif %}>{{ main_domain }}</option></optgroup>{% if addon_domains %}<optgroup label="{% translate 'Addon Domains' %}">{% for item in addon_domains %}<option value="{{ item }}" {% if domain == item or form.domain.value == item %}selected{% endif %}>{{ item }}</option>{% endfor %}</optgroup>{% endif %}{% if parked_domains %}<optgroup label="{% translate 'Alias Domains' %}">{% for item in parked_domains %}<option value="{{ item }}" {% if domain == item or form.domain.value == item %}selected{% endif %}>{{ item }}</option>{% endfor %}</optgroup>{% endif %}{% if sub_domains %}<optgroup label="{% translate 'Subdomains' %}">{% for item in sub_domains %}<option value="{{ item }}" {% if domain == item or form.domain.value == item %}selected{% endif %}>{{ item }}</option>{% endfor %}</optgroup>{% endif %}</select></div>
<div class="row g-4"><div class="col-12 col-xl-6"><label for="crt" class="form-label">{% translate "Certificate" %}</label><textarea class="form-control font-monospace" name="crt" id="crt" rows="15" required placeholder="-----BEGIN CERTIFICATE-----" data-parsley-required-message="{% translate 'Please paste the SSL certificate.' %}">{{ form.crt.value|default:'' }}</textarea><div class="form-text">{% translate "Paste the domain certificate issued by your certificate authority." %}</div></div><div class="col-12 col-xl-6"><label for="key" class="form-label">{% translate "Private Key" %}</label><textarea class="form-control font-monospace" name="key" id="key" rows="15" required placeholder="-----BEGIN PRIVATE KEY-----" data-parsley-required-message="{% translate 'Please paste the matching private key.' %}">{{ form.key.value|default:'' }}</textarea><div class="form-text">{% translate "Paste the private key that was generated with the CSR." %}</div></div><div class="col-12"><label for="ca" class="form-label">{% translate "Certificate Authority Bundle" %} <span class="text-muted fw-normal">({% translate "optional" %})</span></label><textarea class="form-control font-monospace" name="ca" id="ca" rows="8" placeholder="-----BEGIN CERTIFICATE-----">{{ form.ca.value|default:'' }}</textarea><div class="form-text">{% translate "Include the intermediate certificate chain supplied by the certificate authority." %}</div></div></div>
</div>
<div class="d-flex flex-column flex-sm-row gap-2 mt-4"><button type="button" class="btn btn-primary" id="reviewCommercialSsl"><i data-lucide="shield-check"></i>{% translate "Install Certificate" %}</button><a href="{% url 'ssl_domains' %}" class="btn btn-outline-secondary"><i data-lucide="arrow-left"></i>{% translate "Go Back" %}</a></div>
</form>
<div class="modal fade" id="installSslModal" tabindex="-1" aria-labelledby="installSslTitle" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="modal-header"><div><h2 class="modal-title fs-5" id="installSslTitle">{% translate "Install SSL Certificate" %}</h2><div class="small text-muted mt-1">{% translate "Confirm the target domain before installation." %}</div></div><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Close' %}"></button></div><div class="modal-body"><div class="eenos-modal-info mb-4"><div class="eenos-modal-info-icon"><i data-lucide="globe-2"></i></div><div class="eenos-modal-info-content"><div class="eenos-modal-info-label">{% translate "Domain" %}</div><div class="eenos-modal-info-value" id="installSslDomain"></div></div></div><div class="eenos-notice eenos-notice-warning mb-0"><div class="eenos-notice-icon"><i data-lucide="triangle-alert"></i></div><div class="eenos-notice-content"><div class="eenos-notice-text">{% translate "The new certificate will replace the currently installed commercial certificate for this domain." %}</div></div></div></div><div class="modal-footer"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{% translate "Cancel" %}</button><button type="button" class="btn btn-primary" id="confirmCommercialSsl"><i data-lucide="shield-check"></i>{% translate "Install Certificate" %}</button></div></div></div></div>
{% endblock %}
{% block extra_js %}<script>(function($){"use strict";$(function(){const form=$("#commercialSslForm"),modal=bootstrap.Modal.getOrCreateInstance(document.getElementById("installSslModal"));$("#reviewCommercialSsl").on("click",function(){const validator=form.parsley();validator.validate();if(!validator.isValid())return;$("#installSslDomain").text($("#domain").val());modal.show()});$("#confirmCommercialSsl").on("click",()=>document.getElementById("commercialSslForm").submit())})})(jQuery);</script>{% endblock %}