BetterDesk/web-nodejs/views/registrations.ejs

<%- include('layouts/main', {
    title: _('nav.registrations'),
    pageStyles: ['registrations'],
    pageScripts: ['registrations'],
    currentPage: 'registrations',
    breadcrumb: [{ label: _('nav.registrations') }],
    body: `
        <div class="registrations-page">
            <!-- Header -->
            <div class="page-header">
                <div class="page-title">
                    <h1>${_('registrations.title')}</h1>
                    <span class="badge badge-info" id="pending-count">0</span>
                </div>
                <p class="page-subtitle">${_('registrations.subtitle')}</p>
            </div>

            <div class="enrollment-mode-banner" id="enrollment-mode-banner" style="display: none;" role="status">
                <span class="material-icons">info</span>
                <span id="enrollment-mode-banner-text"></span>
                <a href="/settings#auth" class="btn btn-secondary btn-sm">${_('registrations.enrollment_settings_link')}</a>
            </div>

            <!-- Filters -->
            <div class="registrations-filters">
                <div class="filter-group">
                    <div class="search-wrapper">
                        <span class="material-icons">search</span>
                        <input type="text" class="form-input" id="search-input"
                            placeholder="${_('registrations.search_placeholder')}">
                    </div>
                    <div class="filter-buttons">
                        <button class="btn filter-btn active" data-status="">${_('common.all')}</button>
                        <button class="btn filter-btn" data-status="pending">${_('registrations.status_pending')}</button>
                        <button class="btn filter-btn" data-status="approved">${_('registrations.status_approved')}</button>
                        <button class="btn filter-btn" data-status="rejected">${_('registrations.status_rejected')}</button>
                    </div>
                </div>
            </div>

            <!-- Registrations Table -->
            <div class="registrations-table-wrapper">
                <table class="registrations-table" id="registrations-table">
                    <thead>
                        <tr>
                            <th>${_('registrations.col_device_id')}</th>
                            <th>${_('registrations.col_hostname')}</th>
                            <th>${_('registrations.col_platform')}</th>
                            <th>${_('registrations.col_ip')}</th>
                            <th>${_('registrations.col_version')}</th>
                            <th>${_('registrations.col_status')}</th>
                            <th>${_('registrations.col_requested')}</th>
                            <th>${_('registrations.col_actions')}</th>
                        </tr>
                    </thead>
                    <tbody id="registrations-body">
                        <tr class="empty-row">
                            <td colspan="8">
                                <div class="empty-state">
                                    <span class="material-icons">how_to_reg</span>
                                    <p>${_('registrations.no_registrations')}</p>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- Approve Modal (enrollment) -->
            <div class="modal-overlay" id="approve-modal" style="display: none;">
                <div class="modal">
                    <div class="modal-header">
                        <h3>${_('registrations.approve_title')}</h3>
                        <button class="btn-icon modal-close" data-modal="approve-modal">
                            <span class="material-icons">close</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p class="modal-device-line">
                            <span class="material-icons">how_to_reg</span>
                            <code id="approve-device-id"></code>
                        </p>
                        <div class="form-group">
                            <label for="approve-display-name">${_('registrations.field_name')}</label>
                            <input type="text" id="approve-display-name" class="form-input"
                                placeholder="${_('registrations.field_name_placeholder')}">
                        </div>
                        <div class="form-group">
                            <label for="approve-sync-mode">${_('registrations.field_sync_mode')}</label>
                            <select id="approve-sync-mode" class="form-input">
                                <option value="standard">${_('registrations.sync_standard')}</option>
                                <option value="silent">${_('registrations.sync_silent')}</option>
                                <option value="turbo">${_('registrations.sync_turbo')}</option>
                            </select>
                        </div>
                        <div class="form-group" id="approve-tags-text-group">
                            <label for="approve-tags">${_('registrations.field_tags')}</label>
                            <input type="text" id="approve-tags" class="form-input"
                                placeholder="${_('registrations.field_tags_placeholder')}">
                        </div>
                        <div class="form-group" id="approve-tags-picker-group" style="display: none;">
                            <label>${_('registrations.field_tags_existing')}</label>
                            <div id="approve-tags-picker" class="approve-tags-picker"></div>
                            <div class="approve-tags-new-row" style="margin-top: 8px; display: flex; gap: 8px;">
                                <input type="text" id="approve-tag-new" class="form-input" style="flex: 1;"
                                    placeholder="${_('registrations.field_tag_add_placeholder')}">
                                <button type="button" class="btn btn-secondary btn-sm" id="approve-tag-add-btn">${_('registrations.field_tag_add_btn')}</button>
                            </div>
                            <div id="approve-tags-selected" class="approve-tags-selected"></div>
                        </div>
                        <div class="form-group">
                            <label>${_('registrations.field_groups')}</label>
                            <div id="approve-groups-picker" class="approve-groups-picker">
                                <span class="form-hint">${_('common.loading')}</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="approve-folder">${_('registrations.field_folder')}</label>
                            <select id="approve-folder" class="form-input">
                                <option value="0">${_('registrations.field_folder_none')}</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-secondary modal-close" data-modal="approve-modal">${_('common.cancel')}</button>
                        <button class="btn btn-primary" id="confirm-approve-btn">${_('registrations.approve_btn')}</button>
                    </div>
                </div>
            </div>

            <!-- Reject Modal -->
            <div class="modal-overlay" id="reject-modal" style="display: none;">
                <div class="modal">
                    <div class="modal-header">
                        <h3>${_('registrations.reject_title')}</h3>
                        <button class="btn-icon modal-close" data-modal="reject-modal">
                            <span class="material-icons">close</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p>${_('registrations.reject_confirm')}</p>
                        <div class="form-group" style="margin-top: 12px;">
                            <label for="reject-reason">${_('registrations.reject_reason')}</label>
                            <textarea id="reject-reason" class="form-input" rows="3"
                                placeholder="${_('registrations.reject_reason_placeholder')}"></textarea>
                        </div>
                        <div class="form-group form-check" id="reject-ban-group" style="margin-top: 12px;">
                            <label class="check-label">
                                <input type="checkbox" id="reject-ban-checkbox">
                                <span>${_('registrations.reject_ban_option')}</span>
                            </label>
                            <p class="form-hint">${_('registrations.reject_ban_hint')}</p>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-secondary modal-close" data-modal="reject-modal">${_('common.cancel')}</button>
                        <button class="btn btn-danger" id="confirm-reject-btn">${_('registrations.reject_btn')}</button>
                    </div>
                </div>
            </div>
        </div>
    `
}) %>