jumpserver/apps/accounts/templates/accounts/check_account_report.html

{% load i18n %}
{% load static %}


<div class="report-container">
    <section class="basic-info-section">
        <div class="header-container">
        <span
            class="triangle-down-icon collapse-toggle"
            data-target="basic-info"
        ></span>

        <h2>{% trans 'Basic Information' %}</h2>
        </div>

        <div class="container-section collapsible-content" id="basic-info-content">
            <div class="item">
                <span class="item-label">{% trans 'Task name' %}</span>
                <span class="item-value">{{ execution.snapshot.name }}</span>
            </div>

            <div class="item">
                <span class="item-label">{% trans 'Date start' %}</span>
                <span class="item-value">{{ execution.date_start | date:"Y/m/d H:i:s" }}</span>
            </div>

            <div class="item">
                <span class="item-label">{% trans 'Date end' %}</span>
                <span class="item-value">{{ execution.date_finished | date:"Y/m/d H:i:s" }}</span>
            </div>

            <div class="item">
                <span class="item-label">{% trans 'Normal' %}</span>
                <span class="item-value">{{ summary.ok | default:0 }}</span>
            </div>

            <div class="item">
                <span class="item-label">{% trans 'Weak password' %}</span>
                <span class="item-value{% if summary.weak_password > 0 %} red{% endif %}">
                    {{ summary.weak_password | default:0 }}
                </span>
            </div>

            <div class="item">
                <span class="item-label">{% trans 'Leaked password' %}</span>
                <span class="item-value {% if summary.leaked_password > 0 %} red {% endif %}">
                    {{ summary.leaked_password | default:0 }}
                </span>
            </div>

            <div class="item">
                <span class="item-label">{% trans 'Repeated password' %}</span>
                <span class="item-value {% if summary.repeated_password > 0 %} red {% endif %}">
                    {{ summary.repeated_password | default:0 }}
                </span>
            </div>

            <div class="item">
                <span class="item-label">{% trans 'No secret' %}</span>
                <span class="item-value {% if summary.no_secret > 0 %} red {% endif %}">
                    {{ summary.no_secret | default:0 }}
                </span>
            </div>

            <div class="item">
                <span class="item-label">{% trans 'Time using' %}</span>
                <span class="item-value">{{ execution.duration }}s</span>
            </div>
        </div>
    </section>
</div>

<script>
  const toggleButtons = document.querySelectorAll('.collapse-toggle')

  toggleButtons.forEach((button) => {
    button.addEventListener('click', function () {
      const targetId = this.getAttribute('data-target')
      const targetContent = document.getElementById(`${targetId}-content`)

      if (this.classList.contains('triangle-down-icon')) {
        this.classList.remove('triangle-down-icon')
        this.classList.add('triangle-right-icon')
        targetContent.classList.add('collapsed')
      } else {
        this.classList.remove('triangle-right-icon')
        this.classList.add('triangle-down-icon')
        targetContent.classList.remove('collapsed')
      }
    })
  })
</script>

<style>
    html {
        font-size: 10px;
    }

    body,
    p {
        margin: 0;
        padding: 0;
    }

    .report-container {
        display: flex;
        flex-direction: column;
        row-gap: 16px;
    }

    .basic-info-section,
    .success,
    .failed {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 16px 20px;
        margin: 0 20px;
        border: 1px solid #dee0e3;
        border-radius: 6px;
        background-color: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        transition: all 0.2s ease;
    }

    .header-container {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 32px;
        margin-bottom: 12px;
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 8px;
    }

    .header-container h2 {
        color: #1f2329;
        font: 500 16px/24px 'PingFang SC';
        margin: 0;
        display: flex;
        align-items: center;
        width: 100%;
    }

    .header-container h2 span {
        display: inline-flex;
        margin-left: 8px;
        font-weight: normal;
    }

    .triangle-right-icon {
        display: inline-block;
        width: 0;
        height: 0;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 8px solid #1f2329;
        margin-right: 10px;
        cursor: pointer;
    }

    .triangle-down-icon {
        display: inline-block;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 8px solid #1f2329;
        margin-right: 10px;
        cursor: pointer;
    }

    .container-section {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: 100%;
        row-gap: 16px;
        column-gap: 10px;
    }

    .collapsible-content {
        overflow: auto;
        max-height: 1000px;
        opacity: 1;
        transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    }

    .collapsible-content.collapsed {
        max-height: 0;
        opacity: 0;
        margin: 0;
        padding: 0;
    }

    .container-section .item {
        display: flex;
        flex-basis: calc(33.33% - 10px);
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 4px;
        padding: 4px 0;
    }

    .container-section .item .item-label {
        color: #646a73;
        font: 400 14px/22px 'PingFang SC';
    }

    .container-section .item .item-value {
        color: #1f2329;
        font: 500 14px/22px 'PingFang SC';
    }

    .container-section .item .item-value.red {
        color: red;
    }

    .custom-table {
        margin-bottom: 0;
        width: 100%;
        border-collapse: collapse;
        overflow: hidden;
    }

    .custom-table th {
        background-color: #f5f7fa;
        color: #646A73;
        font: 500 14px/22px 'PingFang SC';
        text-align: left;
        padding: 12px 8px;
        border-bottom: 1px solid #ebeef5;
    }

    .custom-table td {
        color: #1F2329;
        font: 400 14px/22px 'PingFang SC';
        padding: 12px 8px;
        border-bottom: 1px solid #ebeef5;
    }

    .custom-table tr:nth-child(even) {
        background-color: #f6f6f6;
    }

    .custom-table tr:last-child td {
        border-bottom: none;
    }

    .no-data {
        color: #909399;
        font: 400 14px/22px 'PingFang SC';
        text-align: center;
        padding: 20px;
        font-style: italic;
        background-color: #f9f9f9;
        border-radius: 4px;
        margin: 10px 0;
        width: 100%;
    }

    .new-accounts .section-header span {
        background: #e8f5e9;
        color: #2e7d32;
    }


    .lost-accounts .section-header span {
        background: #fbe9e7;
        color: #d84315;
    }
    </style>