refactor: move frontend JS to external files and enable strict CSP

public/links.html

@@ -16,7 +16,7 @@
   </div>
 </div>
 
-<div class="modal-overlay" id="linkModal" onclick="if(event.target===this)closeLinkModal()">
+<div class="modal-overlay" id="linkModal">
   <div class="edit-modal">
     <h3 id="linkModalTitle">Новая ссылка</h3>
     <div>
@@ -56,153 +56,14 @@
       <input type="password" id="linkPassword" placeholder="Оставьте пустым для открытого доступа">
     </div>
     <div class="actions">
-      <button class="cancel" onclick="closeLinkModal()">Отмена</button>
-      <button class="save" onclick="saveLink()">Сохранить</button>
+      <button class="cancel" type="button" id="linkCancelBtn">Отмена</button>
+      <button class="save" type="button" id="linkSaveBtn">Сохранить</button>
     </div>
   </div>
 </div>
 
 <div class="toast" id="toast"></div>
 <script src="admin.js"></script>
-<script>
-let links = [];
-let groups = [];
-let editingId = null;
-let studentsLoaded = false;
-
-function linkUrl(token) { return `${location.origin}/s/${token}`; }
-
-async function loadLinks() {
-  const res = await fetch(`${API}/api/links`, { headers: hdr() });
-  links = await res.json();
-  const el = document.getElementById('linksList');
-  if (!links.length) { el.innerHTML = '<div class="empty">Ссылок пока нет. Создайте её в Журнале кнопкой «Ссылка».</div>'; return; }
-  el.innerHTML = links.map(l => `
-    <div class="item">
-      <div style="min-width:0">
-        <div class="name">${esc(l.name)}</div>
-        <div style="font-size:.8rem;color:var(--muted);margin-top:2px">
-          ${l.group_name ? `Группа: <b>${esc(l.group_name)}</b>` : ''}
-          ${l.student_name ? `${l.group_name ? ' · ' : ''}Ученик: <b>${esc(l.student_name)}</b>` : ''}
-          ${l.date_from || l.date_to ? ` · период: <b>${l.date_from ? l.date_from.split('-').reverse().join('.') : '…'}</b> — <b>${l.date_to ? l.date_to.split('-').reverse().join('.') : '…'}</b>` : ' · весь период'}
-          ${l.expires_at ? ` · истекает ${new Date(l.expires_at).toLocaleDateString('ru')}` : ''}
-          ${l.anonymize_names ? ` · <span style="color:#f59e0b">анонимизировано</span>` : ''}
-          ${l.access_password_hash ? ` · <span style="color:#2563eb">🔒 пароль</span>` : ''}
-          · создана ${new Date(l.created_at).toLocaleString('ru')}
-        </div>
-      </div>
-      <div style="display:flex;gap:8px;flex-shrink:0;align-items:center">
-        <a class="btn-link" style="text-decoration:none" href="/s/${l.token}" target="_blank" title="Открыть">Открыть</a>
-        <button class="btn-link" onclick="copyText('${linkUrl(l.token)}')" title="Копировать ссылку">Копировать</button>
-        <button class="btn-link" onclick="openLinkEdit(${l.id})" title="Редактировать">✎</button>
-        <button class="btn-link" style="color:var(--muted)" onclick="delLink(${l.id})" title="Удалить">&times;</button>
-      </div>
-    </div>
-  `).join('');
-}
-
-function fmtDate(d) { const [y, m, day] = (d || '').split('-'); return d ? `${day}.${m}.${y}` : ''; }
-
-async function openLinkModal() {
-  editingId = null;
-  document.getElementById('linkModalTitle').textContent = 'Новая ссылка';
-  document.getElementById('linkName').value = '';
-  document.getElementById('linkDateFrom').value = '';
-  document.getElementById('linkDateTo').value = '';
-  document.getElementById('linkExpiresDays').value = '7';
-  document.getElementById('linkAnonymizeNames').checked = false;
-  document.getElementById('linkPassword').value = '';
-  if (!groups.length) {
-    const res = await fetch(`${API}/api/groups`, { headers: hdr() });
-    groups = await res.json();
-    document.getElementById('linkGroup').innerHTML = '<option value="">— без группы —</option>' +
-      groups.map(g => `<option value="${g.id}">${esc(g.name)}</option>`).join('');
-  }
-  if (!studentsLoaded) {
-    const res = await fetch(`${API}/api/students/names`, { headers: hdr() });
-    const names = await res.json();
-    const dl = document.getElementById('linkStudentList');
-    dl.innerHTML = names.map(n => `<option value="${esc(n)}">`).join('');
-    studentsLoaded = true;
-  }
-  document.getElementById('linkModal').classList.add('open');
-}
-
-async function openLinkEdit(id) {
-  const l = links.find(x => x.id === id);
-  if (!l) return;
-  editingId = id;
-  document.getElementById('linkModalTitle').textContent = 'Редактирование ссылки';
-  document.getElementById('linkName').value = l.name;
-  document.getElementById('linkDateFrom').value = l.date_from || '';
-  document.getElementById('linkDateTo').value = l.date_to || '';
-  document.getElementById('linkExpiresDays').value = l.expires_at ? Math.ceil((new Date(l.expires_at) - new Date()) / (1000 * 60 * 60 * 24)) : '7';
-  document.getElementById('linkAnonymizeNames').checked = l.anonymize_names || false;
-  document.getElementById('linkPassword').value = ''; // Never show existing password
-  if (!groups.length) {
-    const res = await fetch(`${API}/api/groups`, { headers: hdr() });
-    groups = await res.json();
-    document.getElementById('linkGroup').innerHTML = '<option value="">— без группы —</option>' +
-      groups.map(g => `<option value="${g.id}">${esc(g.name)}</option>`).join('');
-  }
-  document.getElementById('linkGroup').value = l.group_id || '';
-  if (!studentsLoaded) {
-    const res = await fetch(`${API}/api/students/names`, { headers: hdr() });
-    const names = await res.json();
-    const dl = document.getElementById('linkStudentList');
-    dl.innerHTML = names.map(n => `<option value="${esc(n)}">`).join('');
-    studentsLoaded = true;
-  }
-  document.getElementById('linkStudent').value = l.student_name || '';
-  document.getElementById('linkModal').classList.add('open');
-}
-
-function closeLinkModal() {
-  document.getElementById('linkModal').classList.remove('open');
-  editingId = null;
-}
-
-async function saveLink() {
-  const name = document.getElementById('linkName').value.trim();
-  const group_id = document.getElementById('linkGroup').value;
-  const student_name = document.getElementById('linkStudent').value;
-  const date_from = document.getElementById('linkDateFrom').value;
-  const date_to = document.getElementById('linkDateTo').value;
-  const expires_days = parseInt(document.getElementById('linkExpiresDays').value, 10);
-  const anonymize_names = document.getElementById('linkAnonymizeNames').checked;
-  const access_password = document.getElementById('linkPassword').value;
-  if (!name) { alert('Введите название'); return; }
-  if (expires_days < 1 || expires_days > 365) { alert('Дней истечения: 1-365'); return; }
-  const expires_at = new Date(Date.now() + expires_days * 24 * 60 * 60 * 1000).toISOString();
-  const body = JSON.stringify({ name, group_id: group_id || null, student_name: student_name || null, date_from: date_from || null, date_to: date_to || null, anonymize_names, expires_at, access_password: access_password || null });
-  const res = await fetch(editingId ? `${API}/api/links/${editingId}` : `${API}/api/links`, {
-    method: editingId ? 'PUT' : 'POST',
-    headers: hdrJson(),
-    body
-  });
-  if (res.ok) {
-    closeLinkModal();
-    loadLinks();
-    showToast(editingId ? 'Ссылка обновлена' : 'Ссылка создана');
-  } else {
-    const err = await res.json();
-    alert(err.error || 'Ошибка');
-  }
-}
-
-async function delLink(id) {
-  if (!confirm('Удалить ссылку?')) return;
-  await fetch(`${API}/api/links/${id}`, { method: 'DELETE', headers: hdr() });
-  loadLinks();
-  showToast('Ссылка удалена');
-}
-
-(async () => {
-  if (await checkAuth()) {
-    buildSidebar(document.body.dataset.page);
-    loadLinks();
-  }
-})();
-</script>
+<script src="js/links.js"></script>
 </body>
 </html>