235 lines
8.6 KiB
HTML
235 lines
8.6 KiB
HTML
{% extends "base.html" %}
|
||
{% load static %}
|
||
|
||
{# Leave body_class empty so Classic gradient is controlled by base.html logic #}
|
||
{% block body_class %}{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="container">
|
||
<h1 class="page-title">Settings</h1>
|
||
|
||
<!-- Intro / placeholder -->
|
||
<div class="card" style="padding:20px; margin-bottom:20px;">
|
||
<p class="muted small">Add your settings here when you’re ready.</p>
|
||
</div>
|
||
|
||
<!-- Privacy: Clear History -->
|
||
<div class="card" style="margin-top:18px; padding:20px;">
|
||
<h2 class="page-title">Privacy · Clear My History</h2>
|
||
<p class="muted" style="margin:-6px 0 12px;">
|
||
Remove your Recent Searches and Recently Viewed illustrations from the Search page.
|
||
</p>
|
||
<button id="clear-history-btn" class="btn btn-danger">Clear History</button>
|
||
</div>
|
||
|
||
<!-- Theme chooser -->
|
||
<div class="card" style="padding:20px; margin-top:18px;">
|
||
<h2 class="page-title">Appearance · Theme</h2>
|
||
<form method="post" action="{% url 'set_theme' %}" style="margin-top:10px;">
|
||
{% csrf_token %}
|
||
<label for="theme" class="small muted" style="display:block; margin-bottom:6px;">Choose site theme</label>
|
||
<select id="theme" name="theme" class="form-control" style="max-width: 320px;">
|
||
{% for t in available_themes %}
|
||
<option value="{{ t }}" {% if request.session.theme|default:'classic' == t %}selected{% endif %}>
|
||
{{ t|capfirst }}
|
||
</option>
|
||
{% endfor %}
|
||
</select>
|
||
<button class="btn btn-primary" style="margin-top:10px;">Save</button>
|
||
<small class="text-muted" style="display:block;margin-top:6px;">Changes apply immediately across the site.</small>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- Highlight search hits -->
|
||
<div class="card" style="padding:20px; margin-top:18px;">
|
||
<h2 class="page-title">Reading · Highlight Search Hits</h2>
|
||
<label style="display:flex;gap:10px;align-items:center; margin-top:8px;">
|
||
<input id="highlightHitsToggle" type="checkbox">
|
||
<span>Highlight search hits on entry page</span>
|
||
</label>
|
||
<p class="small muted" style="margin-top:6px;">When on, your last search terms are lightly highlighted on result pages—but only in the fields you searched.</p>
|
||
</div>
|
||
|
||
{% if user.is_authenticated and user.is_superuser %}
|
||
<h1 class="page-title" style="margin-top:22px;">Tools</h1>
|
||
|
||
<!-- Release Announcement -->
|
||
<div class="card" style="margin-top:18px; padding:20px;">
|
||
<h2 class="page-title">Release Announcement</h2>
|
||
<p class="muted" style="margin:-6px 0 12px;">
|
||
Publish a message to show once to each user on their next search page load.
|
||
</p>
|
||
|
||
<form method="post" action="{% url 'announcement_tools' %}" class="vertical-stack" style="gap:10px;">
|
||
{% csrf_token %}
|
||
{% if announcement_form %}
|
||
{{ announcement_form.as_p }}
|
||
{% else %}
|
||
<label class="small muted" style="display:block; margin-bottom:4px;">Title (optional)</label>
|
||
<input type="text" name="title" class="tool-input">
|
||
|
||
<label class="small muted" style="display:block; margin:10px 0 4px;">Message</label>
|
||
<textarea name="message" rows="6" class="tool-input" placeholder="What’s new in this release…"></textarea>
|
||
|
||
<label style="display:flex; gap:6px; align-items:center; margin-top:8px;">
|
||
<input type="checkbox" name="is_active" checked> Active
|
||
</label>
|
||
{% endif %}
|
||
|
||
<button class="btn btn-primary">Publish</button>
|
||
</form>
|
||
|
||
{% if announcements_recent %}
|
||
<h3 style="margin-top:16px;">Recent</h3>
|
||
<table class="table">
|
||
<thead>
|
||
<tr><th>ID</th><th>Title</th><th>Active?</th><th>Window</th><th>Created</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
{% for a in announcements_recent %}
|
||
<tr>
|
||
<td>#{{ a.id }}</td>
|
||
<td>{{ a.title|default:"(untitled)" }}</td>
|
||
<td>{{ a.is_current|yesno:"✅,—" }}</td>
|
||
<td>
|
||
{{ a.start_at|date:"Y-m-d H:i" }}
|
||
{% if a.end_at %} → {{ a.end_at|date:"Y-m-d H:i" }}{% endif %}
|
||
</td>
|
||
<td>{{ a.created_at|date:"Y-m-d H:i" }}</td>
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<!-- Security tools -->
|
||
<div class="card" style="margin-top:18px; padding:20px;">
|
||
<h2 class="page-title">Security · Login Attempts (7 days)</h2>
|
||
<p class="muted" style="margin:-6px 0 12px;">
|
||
View successful and failed login attempts from the last week.
|
||
</p>
|
||
<a class="btn btn-secondary" href="{% url 'login_attempts' %}">Open Login Attempts</a>
|
||
</div>
|
||
|
||
<div class="card" style="margin-top:18px; padding:20px;">
|
||
<h2 class="page-title">Security · Audit Log</h2>
|
||
<p class="muted" style="margin:-6px 0 12px;">Track adds, edits (with per-field changes), and deletes. Newest first, latest 100 entries.</p>
|
||
<a class="btn btn-secondary" href="{% url 'audit_log' %}">Open Audit Log</a>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<!-- Toast for Clear History -->
|
||
<div id="toast-clear-history"
|
||
style="position:fixed; right:16px; bottom:16px; padding:10px 14px; border-radius:10px;
|
||
background:#111827; color:#fff; box-shadow:0 6px 20px rgba(0,0,0,.25);
|
||
opacity:0; pointer-events:none; transition:opacity .25s;">
|
||
History cleared.
|
||
</div>
|
||
|
||
<style>
|
||
.tool-input {
|
||
border:1px solid var(--border, #d1d5db);
|
||
border-radius:8px;
|
||
padding:6px 8px;
|
||
font-size:14px;
|
||
width:100%;
|
||
max-width:640px;
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
(function(){
|
||
// Simple CSRF helper
|
||
function getCookie(name) {
|
||
var value = "; " + document.cookie;
|
||
var parts = value.split("; " + name + "=");
|
||
if (parts.length === 2) return parts.pop().split(";").shift();
|
||
return "";
|
||
}
|
||
|
||
// Clear history
|
||
var btn = document.getElementById("clear-history-btn");
|
||
var toast = document.getElementById("toast-clear-history");
|
||
if (btn) {
|
||
btn.addEventListener("click", function(){
|
||
fetch("{% url 'clear_history' %}", {
|
||
method: "POST",
|
||
headers: { "X-CSRFToken": getCookie("csrftoken") }
|
||
})
|
||
.then(function(r){ return r.ok ? r.json() : Promise.reject(); })
|
||
.then(function(data){
|
||
// Clear likely client-side copies too (harmless if not present)
|
||
var keys = ["recent_searches","recent_entries","recent_viewed","recently_viewed","recent_results","recentSearches","recentEntries"];
|
||
try {
|
||
keys.forEach(function(k){
|
||
localStorage.removeItem(k);
|
||
sessionStorage.removeItem(k);
|
||
document.cookie = k + "=; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/";
|
||
});
|
||
} catch(e) {}
|
||
|
||
if (toast){
|
||
toast.textContent = "History cleared.";
|
||
toast.style.opacity = "1";
|
||
setTimeout(function(){ toast.style.opacity = "0"; }, 1500);
|
||
}
|
||
if (data && data.cleared) { console.log("Cleared server keys:", data.cleared); }
|
||
})
|
||
.catch(function(){ /* silent */ });
|
||
});
|
||
}
|
||
|
||
// Theme live preview (without saving)
|
||
var themeSel = document.getElementById('theme');
|
||
if (themeSel) {
|
||
themeSel.addEventListener('change', function(e){
|
||
var name = e.target.value;
|
||
var link = document.getElementById('theme-css');
|
||
if (link) link.href = '{% static "themes/" %}' + name + '.css';
|
||
try {
|
||
localStorage.setItem('theme', name);
|
||
// Toggle the classic gradient body class in case user previews Classic
|
||
if (name === 'classic') {
|
||
document.body.classList.add('themed-bg');
|
||
} else {
|
||
document.body.classList.remove('themed-bg');
|
||
}
|
||
document.documentElement.setAttribute('data-theme', name);
|
||
} catch(e){}
|
||
});
|
||
}
|
||
|
||
// Highlight search hits toggle
|
||
(async function(){
|
||
const toggle = document.getElementById("highlightHitsToggle");
|
||
if (!toggle) return;
|
||
|
||
// Load current prefs
|
||
try {
|
||
const res = await fetch("{% url 'api_get_prefs' %}");
|
||
const data = await res.json();
|
||
if (data && typeof data.highlight_search_hits !== "undefined") {
|
||
toggle.checked = !!data.highlight_search_hits;
|
||
}
|
||
} catch (e) { /* ignore */ }
|
||
|
||
// Save on change
|
||
toggle.addEventListener("change", async () => {
|
||
const form = new FormData();
|
||
form.append("enabled", toggle.checked ? "true" : "false");
|
||
try {
|
||
await fetch("{% url 'api_set_highlight_hits' %}", {
|
||
method: "POST",
|
||
body: form,
|
||
headers: { "X-CSRFToken": getCookie("csrftoken") }
|
||
});
|
||
} catch (e) {
|
||
alert("Could not save the setting. Please try again.");
|
||
}
|
||
});
|
||
})();
|
||
})();
|
||
</script>
|
||
{% endblock %} |