index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Certificates Manager</title>
    <link rel="icon" href="icons/logo.ico"/>
    <!-- CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="main.css"/>
    <script type="text/javascript">
        /* FIXME: This is a default value that should be overridable from
         * something like a config.json served from the server and first
         * fetched by the client. */
        const API_BASE_URL = '.';
    </script>
</head>
<body>
    <div class="container-fluid">
        <form id="certForm">
            <div class="form-group">
                <!-- Lock interface button -->
                <button type="button" class="btn btn-danger rounded-3 me-2" id="lockBtn">
                    <img src="icons/lock-white-solid.svg" class="icon"/>
                </button>

                <!-- Create a certificate -->
                <button type="button" class="btn btn-secondary rounded-3 me-2" id="createBtn" disabled>
                    <img src="icons/plus-solid.svg" class="icon"/>
                </button>

                <!-- Search Bar -->
                <div class="position-relative d-flex w-100 text-truncate">
                    <input type="text" id="searchInput" class="form-control border-light shadow-sm rounded-3 me-2" placeholder="Search for a certificate">

                    <!-- Status buttons (quick access) -->
                    <div class="button-container position-absolute" style="top: 50%; right: 20px; transform: translateY(-50%);">
                        <span class="tooltip-container" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="bottom" data-bs-title="Valid certificates">
                            <button type="button" class="btn btn-ssm btn-success rounded-pill" id="tagValid" style="width: 70px;"><img src="icons/circle-check-solid.svg" class="icon"/></button>
                        </span>
                        <span class="tooltip-container" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="bottom" data-bs-title='Expired certificates'>
                            <button type="button" class="btn btn-ssm btn-warning rounded-pill" id="tagExpired" style="width: 70px;"><img src="icons/triangle-exclamation-solid.svg" class="icon"/></button>
                        </span>
                        <span class="tooltip-container" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="bottom" data-bs-title='Revoked certificates'>
                            <button type="button" class="btn btn-ssm btn-danger rounded-pill" id="tagRevoked" style="width: 70px;"><img src="icons/circle-xmark-solid.svg" class="icon"/></button>
                        </span>
                        <span class="tooltip-container" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="bottom" data-bs-title='Disabled certificates'>
                            <button type="button" class="btn btn-ssm btn-dark rounded-pill" id="tagDisabled" style="width: 70px;"><img src="icons/circle-minus-solid.svg" class="icon"/></button>
                        </span>
                    </div>
                </div>

                <!-- See current CA & switch -->
                <button type="button" class="btn btn-primary rounded-3 me-2 text-truncate" id="switchBtn" style="min-width: 200px;" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <!-- Dropdown title (dynamic) --> No CA found
                </button>
                <div class="dropdown-menu dropdown-menu-left mt-1" aria-labelledby="switchBtn" id="switchMenu">
                    <!-- Dropdown content (dynamic) -->
                </div>

                <!-- Import CA certificate file button -->
                <!-- <span class="tooltip-container" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="bottom" data-bs-title='Upload ca.crt'>
                    <button type="button" class="btn btn-primary rounded-3 me-2" id="importCA" style="min-width: 90px;">
                        <img src="icons/upload-solid.svg" class="icon me-1"/> CA
                    </button>
                </span> -->

                <!-- Export CA certificate file button -->
                <span class="tooltip-container" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="bottom" data-bs-title='Download ca.crt'>
                    <button type="button" class="btn btn-primary rounded-3 me-2" id="downloadCA" style="min-width: 90px;">
                        <img src="icons/download-solid.svg" class="icon me-1"/> CA
                    </button>
                </span>

                <!-- Export CA CRL file button -->
                <span class="tooltip-container" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="bottom" data-bs-title='Download ca.crl'>
                    <button type="button" class="btn btn-primary rounded-3 me-2" id="downloadCRL" style="min-width: 100px;">
                        <img src="icons/download-solid.svg" class="icon me-1"/> CRL
                    </button>
                </span>

                <!-- Language dropdown -->
                <button class="btn btn-secondary rounded-3" id="settingsDropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <img src="icons/gear-solid.svg" class="icon"/>
                </button>
                <div class="dropdown-menu dropdown-menu-right mt-1" aria-labelledby="settingsDropdown" id="languageMenu">
                    <a class="dropdown-item d-flex justify-content-between text-wrap" id="english" data-lang="en">English</a>
                    <a class="dropdown-item d-flex justify-content-between text-wrap" id="french" data-lang="fr">French</a>
                </div>
            </div>
        </form>

        <!-- Table header -->
        <table class="table table-sm">
            <thead class="thead">
                <tr>
                    <!-- <th class="text-center" width="50px" scope="col" data-sort="selectBox" draggable="true" ondragstart="onDragStart(event)" ondragover="onDragOver(event)" ondragend="onDragEnd(event)">
                        <img src="icons/square-check-solid.svg" class="icon"/>
                    </th> -->
                    <th class="resizable" width="150px" scope="col" data-sort="status" draggable="true" ondragstart="onDragStart(event)" ondragover="onDragOver(event)" ondragend="onDragEnd(event)">
                        <img src="icons/chart-simple-solid.svg" class="icon me-1"/> Status
                    </th>
                    <th class="resizable" scope="col" data-sort="commonName" draggable="true" ondragstart="onDragStart(event)" ondragover="onDragOver(event)" ondragend="onDragEnd(event)">
                        <img src="icons/file-lines-solid.svg" class="icon me-1"/> Common Name (CN) <img src="icons/arrow-down-solid.svg" class="icon arrow"/>
                    </th>
                    <th class="resizable" scope="col" data-sort="serial" draggable="true" ondragstart="onDragStart(event)" ondragover="onDragOver(event)" ondragend="onDragEnd(event)">
                        <img src="icons/hashtag-solid.svg" class="icon me-1"/> Serial <img src="icons/arrow-down-solid.svg" class="icon arrow"/>
                    </th>
                    <th class="resizable" scope="col" data-sort="type" draggable="true" ondragstart="onDragStart(event)" ondragover="onDragOver(event)" ondragend="onDragEnd(event)">
                        <img src="icons/file-invoice-solid.svg" class="icon me-1"/> Type <img src="icons/arrow-down-solid.svg" class="icon arrow"/>
                    </th>
                    <th class="resizable" scope="col" data-sort="startDate" draggable="true" ondragstart="onDragStart(event)" ondragover="onDragOver(event)" ondragend="onDragEnd(event)">
                        <img src="icons/calendar-day-solid.svg" class="icon me-1"/> Start Date <img src="icons/arrow-down-solid.svg" class="icon arrow"/>
                    </th>
                    <th class="resizable" scope="col" data-sort="endDate" draggable="true" ondragstart="onDragStart(event)" ondragover="onDragOver(event)" ondragend="onDragEnd(event)">
                        <img src="icons/calendar-days-solid.svg" class="icon me-1"/> End Date <img src="icons/arrow-down-solid.svg" class="icon arrow"/>
                    </th>
                    <th class="text-center" width="1px" scope="col" data-sort="downloads" draggable="true" ondragstart="onDragStart(event)" ondragover="onDragOver(event)" ondragend="onDragEnd(event)"></th>
                </tr>
            </thead>
            <tbody id="tableContent">
                <!-- Certificates Data -->
            </tbody>
        </table>
    </div>

    <!-- Alert for general errors -->
    <div class="toast bg-light border-light" id="basicAlert" role="alert" aria-live="assertive" aria-atomic="true" style="position: fixed; bottom: 10px; right: 10px; width: max-content; z-index: 9999;">
        <div class="toast-header" id="errorFound">
            <img src="icons/triangle-exclamation-solid.svg" class="icon mt-0 me-2"/>
            <strong class="me-auto">Error</strong>
        </div>
        <div class="toast-body" id="errorFoundDescription">
            An error has occurred, check the logs for details.
        </div>
    </div>

    <!-- Alert on missing certificates -->
    <div class="toast bg-light border-light" id="listAlert" role="alert" aria-live="assertive" aria-atomic="true" style="position: fixed; bottom: 10px; right: 10px; width: max-content; z-index: 9999;">
        <div class="toast-header" id="missingCertificate">
            <img src="icons/triangle-exclamation-solid.svg" class="icon mt-0 me-2"/>
            <strong class="me-auto">Missing certificates</strong>
        </div>
        <div class="toast-body" id="missingCertificateDescription">
            No certificate found, please create one.
        </div>
    </div>

    <!-- Alert if already selected DNS-->
    <div class="toast bg-light border-light" id="DNSAlert" role="alert" aria-live="assertive" aria-atomic="true" style="position: fixed; bottom: 10px; right: 10px; width: max-content; z-index: 9999;">
        <div class="toast-header" id="incorrectDNS">
            <img src="icons/triangle-exclamation-solid.svg" class="icon mt-0 me-2"/>
            <strong class="me-auto">Incorrect DNS</strong>
        </div>
        <div class="toast-body" id="incorrectDNSDescription">
            This DNS is already selected, select another one.
        </div>
    </div>

    <!-- Alert if already selected IP-->
    <div class="toast bg-light border-light" id="IPAlert" role="alert" aria-live="assertive" aria-atomic="true" style="position: fixed; bottom: 10px; right: 10px; width: max-content; z-index: 9999;">
        <div class="toast-header" id="incorrectIP">
            <img src="icons/triangle-exclamation-solid.svg" class="icon mt-0 me-2"/>
            <strong class="me-auto">Incorrect IP</strong>
        </div>
        <div class="toast-body" id="incorrectIPDescription">
            This IP adress is already selected, select another one.
        </div>
    </div>

    <!-- Alert if incorrect DNS / IP format -->
    <div class="toast bg-light border-light" id="formatAlert" role="alert" aria-live="assertive" aria-atomic="true" style="position: fixed; bottom: 10px; right: 10px; width: max-content; z-index: 9999;">
        <div class="toast-header" id="incorrectFormat">
            <img src="icons/triangle-exclamation-solid.svg" class="icon mt-0 me-2"/>
            <strong class="me-auto">Incorrect Format</strong>
        </div>
        <div class="toast-body" id="incorrectFormatDescription">
            Use a correct format in the SAN input.
        </div>
    </div>

    <!-- Alert if incorrect passphrase -->
    <div class="toast bg-light border-light" id="passphraseAlert" role="alert" aria-live="assertive" aria-atomic="true" style="position: fixed; bottom: 10px; right: 10px; width: max-content; z-index: 9999;">
        <div class="toast-header" id="incorrectPassphrase">
            <img src="icons/triangle-exclamation-solid.svg" class="icon mt-0 me-2"/>
            <strong class="me-auto">Incorrect Passphrase</strong>
        </div>
        <div class="toast-body" id="incorrectPassphraseDescription">
            Use the right certificate authority passphrase to continue.
        </div>
    </div>

    <!-- Alert to select profile -->
    <div class="toast bg-light border-light" id="profileAlert" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false" style="position: fixed; top: 10px; left: 10px; width: max-content; z-index: 9999;">
        <div class="toast-header" id="sessionExpired">
            <img src="icons/circle-info-solid.svg" class="icon mt-0 me-2"/>
            <strong class="me-auto">Session Expired</strong>
        </div>
        <div class="toast-body" id="sessionExpiredDescription">
            The session has expired, please select a profile.
        </div>
    </div>

    <!-- Alert if search failed -->
    <div class="toast bg-light border-light text-center" id="searchAlert" role="alert" aria-live="assertive" aria-atomic="true" style="position: fixed; bottom: 50%; right: 50%; transform: translateX(50%); width: max-content; z-index: 9999;">
        <div class="toast-header" id="searchFailed">
            <img src="icons/circle-info-solid.svg" class="icon mt-0"/>
            <strong class="m-auto">No certificate found</strong>
            <img src="icons/circle-info-solid.svg" class="icon mt-0"/>
        </div>
        <div class="toast-body" id="searchFailedDescription">
            No certificate found, search another one.
        </div>
    </div>

    <!-- Modal for unlocking -->
    <div class="modal fade" id="passwordModal" tabindex="-1">
        <div class="modal-dialog float me-3">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="passwordModalTitle">Enter your Passphrase</h5>
                    <button class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="passwordForm">
                        <div class="input-group has-validation mb-3">
                            <input type="password" class="form-control shadow-sm" id="passwordInput" name="password" placeholder="CA passphrase (can be empty)">
                            <button type="button" class="btn border rounded-end toggle-password">
                                <img src="icons/eye-solid.svg" class="toggle-icon" width="20" height="20"/>
                            </button>
                            <div class="valid-feedback" id="rightPassword"></div>
                            <div class="invalid-feedback" id="wrongPassword"></div>
                        </div>
                        <button type="submit" class="btn btn-primary float-end mt-3" id="passwordSubmit">Confirm</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal for PKCS12 -->
    <div class="modal fade" id="pkcs12Modal" tabindex="-1">
        <div class="modal-dialog float me-3">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="pkcs12ModalTitle">Download .p12 file</h5>
                    <button class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="pkcs12Form">
                        <div class="input-group mb-2">
                            <input type="password" class="form-control shadow-sm" id="pkcs12Password" name="password" placeholder="Certificate password (can be empty)">
                            <button type="button" class="btn border rounded-end toggle-password">
                                <img src="icons/eye-solid.svg" class="toggle-icon" width="20" height="20"/>
                            </button>
                        </div>
                        <div class="input-group">
                            <input type="password" class="form-control shadow-sm" id="pkcs12Export" name="password" placeholder="Export password (can be empty)" required>
                            <button type="button" class="btn border rounded-end toggle-password">
                                <img src="icons/eye-solid.svg" class="toggle-icon" width="20" height="20"/>
                            </button>
                        </div>
                        <button type="submit" class="btn btn-primary float-end mt-3" id="pkcs12Submit">Confirm</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Dynamic modal (Create View Renew Revoke Remove) -->
    <div class="modal fade" id="dynamicModal" tabindex="-1" aria-labelledby="dynamicModalLabel">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="dynamicModalLabel">Certificate Action</h5>
                    <button class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="dynamicForm">
                        <div id="formContent"></div>
                    </form>
                </div>
                <div class="modal-footer" id="footerContent"></div>
            </div>
        </div>
    </div>

    <!-- JS -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.14.0/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <script type="text/javascript" src="main.js"></script>
    <script type="text/javascript">
        let headers = [...document.querySelectorAll('th')];
        let dragCurEl = null;
        let dragNextEl = null;
        let dragOldIndex = -1;
        let dragNewIndex = -1;

        function onDragStart(evt) {
            dragCurEl = evt.target;
            dragOldIndex = headers.findIndex((e) => e === dragCurEl);
            evt.dataTransfer.effectAllowed = 'move';
        }

        function onDragOver(evt) {
            evt.preventDefault();
            if (dragNextEl) {
                dragNextEl.classList.remove('autotable-drag-border');
            }
            dragNextEl = evt.target.closest('th');
            if (dragNextEl) {
                dragNextEl.classList.add('autotable-drag-border');
            }
        }

        function onDragEnd() {
            dragNewIndex = headers.findIndex((e) => e === dragNextEl);
            if (dragNextEl) {
                dragNextEl.classList.remove('autotable-drag-border');
            }

            if (dragOldIndex !== -1 && dragNewIndex !== -1 && dragNewIndex !== dragOldIndex) {
                arrayMove(headers, dragOldIndex, dragNewIndex);

                const rows = [...document.querySelectorAll('#tableContent tr')];
                rows.forEach(row => {
                    const cells = [...row.children];
                    arrayMove(cells, dragOldIndex, dragNewIndex);
                    row.innerHTML = '';
                    cells.forEach(cell => row.appendChild(cell));
                });
                updateTable();
            }

            dragCurEl = null;
            dragNextEl = null;
            dragOldIndex = -1;
            dragNewIndex = -1;
        }

        function arrayMove(arr, oldIndex, newIndex) {
            const movedItem = arr.splice(oldIndex, 1)[0];
            arr.splice(newIndex, 0, movedItem);
        }

        function updateTable() {
            const tableHeader = document.querySelector('.thead tr');
            tableHeader.innerHTML = '';
            headers.forEach(header => {
                tableHeader.appendChild(header);
            });
        }
    </script>
</body>
</html>