{% extends "base.html" %}
{% load i18n countries %}
{% block title %}{% translate "Generate CSR" %} - Eenos{% endblock %}
{% block content %}
{% get_countries as countries %}
<div class="eenos-page-header flex-wrap gap-3"><div><h1 class="eenos-page-title">{% translate "Generate Certificate Signing Request" %}</h1><div class="eenos-page-subtitle">{% translate "Create a private key and CSR for submission to a certificate authority." %}</div></div><div class="col-12 col-sm-auto"><a href="{% url 'ssl_csr' %}" class="btn btn-outline-primary d-flex align-items-center justify-content-center gap-2 w-100"><i data-lucide="list"></i>{% translate "Generated CSRs" %}</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 "Generate CSR" %}</span></nav>
{% include "includes/form_alerts.html" %}
<div class="eenos-notice eenos-notice-warning mb-4"><div class="eenos-notice-icon"><i data-lucide="triangle-alert"></i></div><div class="eenos-notice-content"><div class="eenos-notice-text">{% translate "ECDSA certificates may not support some older clients. RSA 4096-bit is the safest general-purpose choice." %}</div></div></div>
<form method="post" id="csrForm" class="eenos-form" data-parsley-validate>{% csrf_token %}<input type="hidden" name="generate_csr" value="yes"><input type="hidden" name="emailcsr" id="emailcsr" value="{{ form.emailcsr.value|default:'off' }}"><input type="hidden" name="emailcsrto" id="emailcsrto" value="{{ form.emailcsrto.value|default:'' }}">
<div class="row g-4">
  <div class="col-12 col-xl-5"><div class="eenos-card h-100"><div class="eenos-card-header"><div><h2 class="eenos-card-title">{% translate "Request Options" %}</h2><p class="eenos-card-subtitle">{% translate "Choose the key algorithm and optional email delivery." %}</p></div><div class="eenos-card-action-icon"><i data-lucide="settings-2"></i></div></div>
    <div class="mb-4"><label for="keytype" class="form-label">{% translate "Private Key Type" %}</label><select class="form-select" name="keytype" id="keytype" required data-parsley-required-message="{% translate 'Please select a private key type.' %}"><option value="rsa-4096" {% if form.keytype.value == "rsa-4096" or not form.keytype.value %}selected{% endif %}>RSA, 4096 bit ({% translate "Recommended" %})</option><option value="rsa-2048" {% if form.keytype.value == "rsa-2048" %}selected{% endif %}>RSA, 2048 bit</option><option value="ecdsa-secp521r1" {% if form.keytype.value == "ecdsa-secp521r1" %}selected{% endif %}>ECDSA, P-521</option><option value="ecdsa-secp384r1" {% if form.keytype.value == "ecdsa-secp384r1" %}selected{% endif %}>ECDSA, P-384</option><option value="ecdsa-prime256v1" {% if form.keytype.value == "ecdsa-prime256v1" %}selected{% endif %}>ECDSA, P-256</option></select></div>
    <div class="form-check form-switch mb-3"><input class="form-check-input eenos-switch-success" type="checkbox" role="switch" id="sendmail" {% if form.emailcsr.value == "on" %}checked{% endif %}><label class="form-check-label" for="sendmail">{% translate "Email the CSR and private key after generation" %}</label></div>
    <div id="emailDeliveryFields" class="d-none"><label for="xemail" class="form-label">{% translate "Delivery Email Address" %}</label><input class="form-control" type="email" id="xemail" value="{{ form.emailcsrto.value|default:'' }}" autocomplete="email" data-parsley-type-message="{% translate 'Please enter a valid delivery email address.' %}" data-parsley-required-message="{% translate 'Please enter the address that should receive the CSR.' %}"><div class="form-text">{% translate "The CSR and private key will be sent to this address." %}</div></div>
  </div></div>
  <div class="col-12 col-xl-7"><div class="eenos-card h-100"><div class="eenos-card-header"><div><h2 class="eenos-card-title">{% translate "Certificate Identity" %}</h2><p class="eenos-card-subtitle">{% translate "Enter the identity details submitted to the certificate authority." %}</p></div><div class="eenos-card-action-icon"><i data-lucide="file-key-2"></i></div></div><div class="row g-3">
    <div class="col-12"><label for="domain" class="form-label">{% translate "Primary Domain" %}</label><select class="form-select eenos-select-search" name="domain" id="domain" required data-parsley-required-message="{% translate 'Please select a domain name.' %}"><option value="">{% translate "Select domain" %}</option><optgroup label="{% translate 'Primary Domain' %}"><option value="{{ main_domain }}" {% if 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 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 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 form.domain.value == item %}selected{% endif %}>{{ item }}</option>{% endfor %}</optgroup>{% endif %}</select></div>
    <div class="col-md-6"><label for="emailAddress" class="form-label">{% translate "CA Contact Email" %}</label><input class="form-control" type="email" name="emailAddress" id="emailAddress" value="{{ form.emailAddress.value|default:'' }}" required data-parsley-required-message="{% translate 'Please enter the certificate authority contact email.' %}" data-parsley-type-message="{% translate 'Please enter a valid email address.' %}"></div>
    <div class="col-md-6"><label for="organizationName" class="form-label">{% translate "Organization" %}</label><input class="form-control" type="text" name="organizationName" id="organizationName" value="{{ form.organizationName.value|default:'' }}" required data-parsley-required-message="{% translate 'Please enter the organization name.' %}"></div>
    <div class="col-md-6"><label for="organizationalUnitName" class="form-label">{% translate "Organizational Unit" %}</label><input class="form-control" type="text" name="organizationalUnitName" id="organizationalUnitName" value="{{ form.organizationalUnitName.value|default:'' }}" required data-parsley-required-message="{% translate 'Please enter the department or organizational unit.' %}"></div>
    <div class="col-md-6"><label for="city" class="form-label">{% translate "City or Locality" %}</label><input class="form-control" type="text" name="city" id="city" value="{{ form.city.value|default:'' }}" required data-parsley-required-message="{% translate 'Please enter the complete city name.' %}"></div>
    <div class="col-md-6"><label for="state" class="form-label">{% translate "State or Province" %}</label><input class="form-control" type="text" name="state" id="state" value="{{ form.state.value|default:'' }}" required data-parsley-required-message="{% translate 'Please enter the complete state or province.' %}"></div>
    <div class="col-md-6"><label for="country" class="form-label">{% translate "Country" %}</label><select class="form-select eenos-select-search" name="country" id="country" required data-parsley-required-message="{% translate 'Please select a country.' %}"><option value="">{% translate "Choose a country" %}</option>{% for item in countries %}<option value="{{ item.code }}" {% if form.country.value == item.code %}selected{% endif %}>{{ item.code }} — {{ item.name }}</option>{% endfor %}</select></div>
    <div class="col-12"><label for="sans" class="form-label">{% translate "Additional SAN Domains" %}</label><textarea class="form-control font-monospace" name="sans" id="sans" rows="3" placeholder="www.example.com, mail.example.com">{{ form.sans.value|default:'' }}</textarea><div class="form-text">{% translate "Enter additional domains as a comma-separated list." %}</div></div>
  </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="reviewCsr"><i data-lucide="key-round"></i>{% translate "Generate CSR" %}</button><a href="{% url 'ssl_csr' %}" class="btn btn-outline-secondary"><i data-lucide="arrow-left"></i>{% translate "Go Back" %}</a></div>
</form>
<div class="modal fade" id="confirmCsrModal" tabindex="-1" aria-labelledby="confirmCsrTitle" 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="confirmCsrTitle">{% translate "Generate Certificate Signing Request" %}</h2><div class="small text-muted mt-1">{% translate "Review the request details before generating the private key." %}</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-3"><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 "Primary domain" %}</div><div class="eenos-modal-info-value" id="confirmCsrDomain"></div></div></div>
        <div class="eenos-modal-info mb-4"><div class="eenos-modal-info-icon"><i data-lucide="key-round"></i></div><div class="eenos-modal-info-content"><div class="eenos-modal-info-label">{% translate "Private key type" %}</div><div class="eenos-modal-info-value" id="confirmCsrKeyType"></div></div></div>
        <div class="eenos-notice eenos-notice-warning mb-0"><div class="eenos-notice-icon"><i data-lucide="shield-alert"></i></div><div class="eenos-notice-content"><div class="eenos-notice-title">{% translate "Protect the generated private key" %}</div><div class="eenos-notice-text">{% translate "Store it securely and never disclose it to an untrusted party." %}</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="confirmGenerateCsr"><i data-lucide="key-round"></i>{% translate "Generate CSR" %}</button></div>
    </div>
  </div>
</div>
{% endblock %}
{% block extra_js %}<script>
(function($){"use strict";$(function(){
const form=$("#csrForm"),modal=bootstrap.Modal.getOrCreateInstance(document.getElementById("confirmCsrModal"));let confirmed=false;
const toggle=()=>{const enabled=$("#sendmail").is(":checked");$("#emailcsr").val(enabled?"on":"off");$("#emailDeliveryFields").toggleClass("d-none",!enabled);$("#xemail").prop("required",enabled).prop("disabled",!enabled);if(!enabled)$("#xemail").val("");$("#emailcsrto").val(enabled?$("#xemail").val():"")};
const review=()=>{toggle();const validator=form.parsley();validator.validate();if(!validator.isValid())return;$("#confirmCsrDomain").text($("#domain option:selected").text().trim());$("#confirmCsrKeyType").text($("#keytype option:selected").text().trim());modal.show()};
$("#sendmail").on("change",toggle);$("#xemail").on("input",function(){$("#emailcsrto").val(this.value)});$("#reviewCsr").on("click",review);
form.on("submit",function(event){toggle();const validator=form.parsley();validator.validate();if(!validator.isValid()){event.preventDefault();return}if(!confirmed){event.preventDefault();review()}});
$("#confirmGenerateCsr").on("click",function(){confirmed=true;form[0].requestSubmit()});
$("#confirmCsrModal").on("hidden.bs.modal",function(){confirmed=false});
toggle();
})})(jQuery);
</script>{% endblock %}