certmanager/templates/create_certificate.html

{% extends "base.html" %}

{% block title %}创建证书{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header">
        <h4 class="card-title">创建新证书</h4>
    </div>
    <div class="card-body">
        <form method="POST" action="{{ url_for('create_certificate_view') }}" id="certificateForm">
            <div class="row mb-3">
                <div class="col-md-6">
                    <label for="common_name" class="form-label">通用名(CN)</label>
                    <input type="text" class="form-control" id="common_name" name="common_name"
                           required pattern="[a-zA-Z0-9.-]+"
                           title="只能包含字母、数字、点号和短横线，且不能以点号或短横线开头或结尾">
                    <div class="form-text">证书的Common Name字段，通常是域名</div>
                </div>
                <div class="col-md-6">
                    <label for="ca_id" class="form-label">颁发CA</label>
                    <select class="form-select" id="ca_id" name="ca_id" required>
                        <option value="">-- 选择CA机构 --</option>
                        {% for ca in cas %}
                            <option value="{{ ca.id }}" {% if request.args.get('ca_id') == ca.id|string %}selected{% endif %}>{{ ca.name }} ({{ ca.common_name }})</option>
                        {% endfor %}
                    </select>
                </div>
            </div>

            <div class="row mb-3">
                <div class="col-md-6">
                    <label for="organization" class="form-label">组织(O)</label>
                    <input type="text" class="form-control" id="organization" name="organization" required>
                </div>
                <div class="col-md-6">
                    <label for="organizational_unit" class="form-label">组织单位(OU)</label>
                    <input type="text" class="form-control" id="organizational_unit" name="organizational_unit">
                </div>
            </div>

            <div class="row mb-3">
                <div class="col-md-3">
                    <label for="country" class="form-label">国家代码(C)</label>
                    <input type="text" class="form-control" id="country" name="country" maxlength="2" required>
                    <div class="form-text">2字母国家代码，如CN</div>
                </div>
                <div class="col-md-3">
                    <label for="state" class="form-label">州/省(ST)</label>
                    <input type="text" class="form-control" id="state" name="state">
                </div>
                <div class="col-md-3">
                    <label for="locality" class="form-label">城市(L)</label>
                    <input type="text" class="form-control" id="locality" name="locality">
                </div>
            </div>

            <div class="row mb-3">
                <div class="col-md-6">
                    <label for="san_dns" class="form-label">
                        SAN DNS (可选)
                        <span class="text-primary ms-1" data-bs-toggle="tooltip"
                              title="Subject Alternative Name - 主题备用名称，用于指定证书可用的多个域名">
                            <i class="fas fa-question-circle"></i>
                        </span>
                    </label>
                    <input type="text" class="form-control" id="san_dns" name="san_dns">
                    <div class="form-text">多个DNS用逗号分隔，如: example.com,www.example.com</div>
                </div>
                <div class="col-md-6">
                    <label for="san_ip" class="form-label">
                        SAN IP (可选)
                        <span class="text-primary ms-1" data-bs-toggle="tooltip"
                              title="Subject Alternative Name - 主题备用名称，用于指定证书可用的多个IP地址">
                            <i class="fas fa-question-circle"></i>
                        </span>
                    </label>
                    <input type="text" class="form-control" id="san_ip" name="san_ip">
                    <div class="form-text">多个IP用逗号分隔，如: 192.168.1.1,10.0.0.1</div>
                </div>
            </div>

            <div class="row mb-3">
                <div class="col-md-6">
                    <label for="key_size" class="form-label">密钥长度</label>
                    <select class="form-select" id="key_size" name="key_size">
                        <option value="2048">2048位</option>
                        <option value="3072">3072位</option>
                        <option value="4096">4096位</option>
                    </select>
                </div>
                <div class="col-md-6">
                    <label for="days_valid" class="form-label">有效期(天)</label>
                    <input type="number" class="form-control" id="days_valid" name="days_valid" value="365" required>
                </div>
            </div>

            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                <a href="{{ url_for('certificate_list') }}" class="btn btn-secondary me-md-2">取消</a>
                <button type="submit" class="btn btn-primary">创建证书</button>
            </div>
        </form>
    </div>
</div>

<!-- SAN 警告模态框 -->
<div class="modal fade" id="sanWarningModal" tabindex="-1" aria-labelledby="sanWarningModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">  <!-- 修改了这一行，添加了bg-danger和text-white类 -->
                <h5 class="modal-title" id="sanWarningModalLabel">缺少SAN扩展警告</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>您没有配置任何SAN(主题备用名称)扩展，这可能导致以下问题：</p>
                <ul>
                    <li>现代浏览器可能不信任没有SAN扩展的证书</li>
                    <li>证书只能通过Common Name(CN)字段指定的名称访问</li>
                    <li>不符合现代安全标准</li>
                </ul>
                <p>建议至少配置一个DNS SAN或IP SAN。</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">返回修改</button>
                <button type="button" class="btn btn-primary" id="continueWithoutSan">继续创建</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
{{ super() }}
<script>
// 初始化工具提示
document.addEventListener('DOMContentLoaded', function() {
    // 初始化Bootstrap工具提示
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    })

    // 表单提交验证
    document.getElementById('certificateForm').addEventListener('submit', function(e) {
        const sanDns = document.getElementById('san_dns').value.trim()
        const sanIp = document.getElementById('san_ip').value.trim()

        // 检查是否没有配置任何SAN
        if (!sanDns && !sanIp) {
            e.preventDefault() // 阻止表单提交

            // 显示警告模态框
            var sanWarningModal = new bootstrap.Modal(document.getElementById('sanWarningModal'))
            sanWarningModal.show()

            // 继续创建按钮事件
            document.getElementById('continueWithoutSan').addEventListener('click', function() {
                sanWarningModal.hide()
                document.getElementById('certificateForm').submit()
            })
        }
    })
})
</script>
{% endblock %}