lexton-it/NextWks
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: CSV import loading spinner, error display, modal close

Browse source
This commit is contained in:
Claus Lohmar 2026-07-15 23:03:03 +01:00
parent 6dedc6d432
commit 9364b4af81
4 changed files with 86 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
CHANGELOG.md
View file

@ -1,5 +1,12 @@
# Changelog # Changelog
## 0.1.0.0048 — 2026-07-15
### Fixed
- CSV import: loading spinner with "Importing..." message during upload
- CSV import: better error display and proper modal close after completion
- Admin panel: Import modal shows results and allows closing on success/failure
## 0.1.0.0046 — 2026-07-11 ## 0.1.0.0046 — 2026-07-11
### Added ### Added

2
VERSION
View file

@ -1 +1 @@
0.1.0.0045 0.1.0.0048

9
config/authelia/configuration.yml
View file

@ -35,6 +35,12 @@ access_control:
- "group:admins" - "group:admins"
policy: one_factor policy: one_factor
# Users with TFA enforcement — two-factor required
- domain: "app.{DOMAIN}"
subject:
- "group:tfa_required"
policy: two_factor
# Everything else — any authenticated user # Everything else — any authenticated user
- domain: "app.{DOMAIN}" - domain: "app.{DOMAIN}"
policy: one_factor policy: one_factor
@ -65,7 +71,8 @@ storage:
notifier: notifier:
smtp: smtp:
address: "submission://{SMTP_HOST}:{SMTP_PORT}" host: "{SMTP_HOST}"
port: {SMTP_PORT}
username: "{SMTP_USER}" username: "{SMTP_USER}"
password: "{SMTP_PASS}" password: "{SMTP_PASS}"
sender: "{SMTP_USER}" sender: "{SMTP_USER}"

82
main.go
View file

@ -916,6 +916,44 @@ func enforceTOTP(w http.ResponseWriter, r *http.Request) {
exec.Command("sqlite3", "/opt/nextworkspace/data/authelia/db.sqlite", exec.Command("sqlite3", "/opt/nextworkspace/data/authelia/db.sqlite",
"INSERT OR REPLACE INTO user_preferences (username, method) VALUES ('"+user+"', 'totp')").Run() "INSERT OR REPLACE INTO user_preferences (username, method) VALUES ('"+user+"', 'totp')").Run()
// Add user to tfa_required group (enforces two_factor via access_control)
token = os.Getenv("AUTHELIA_SECRET")
userReq, _ := http.NewRequest("GET", "http://authelia:8080/api/users/"+user, nil)
userReq.Header.Set("Authorization", "Bearer "+token)
if userResp, err := http.DefaultClient.Do(userReq); err == nil && userResp.StatusCode == 200 {
var ud struct {
Username string `json:"username"`
DisplayName string `json:"display_name"`
Email string `json:"email"`
Groups []string `json:"groups"`
}
json.NewDecoder(userResp.Body).Decode(&ud)
userResp.Body.Close()
hasTFA := false
for _, g := range ud.Groups {
if g == "tfa_required" {
hasTFA = true
break
}
}
if !hasTFA {
ud.Groups = append(ud.Groups, "tfa_required")
body, _ := json.Marshal(map[string]interface{}{"users": []interface{}{ud}})
delR, _ := http.NewRequest("DELETE", "http://authelia:8080/api/users/"+user, nil)
delR.Header.Set("Authorization", "Bearer "+token)
http.DefaultClient.Do(delR)
time.Sleep(1500 * time.Millisecond)
crR, _ := http.NewRequest("POST", "http://authelia:8080/api/users/bulk", bytes.NewReader(body))
crR.Header.Set("Authorization", "Bearer "+token)
crR.Header.Set("Content-Type", "application/json")
http.DefaultClient.Do(crR)
}
}
if apiOk { if apiOk {
json.NewEncoder(w).Encode(map[string]interface{}{ json.NewEncoder(w).Encode(map[string]interface{}{
"status": "enforced", "status": "enforced",
@ -1714,21 +1752,28 @@ const adminHTML = `<!DOCTYPE html>
<!-- Import CSV Modal --> <!-- Import CSV Modal -->
<div id="import-csv-modal" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1000;"> <div id="import-csv-modal" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1000;">
<div style="background:#fff;border-radius:12px;padding:2rem;width:550px;max-width:90%;margin:5vh auto;"> <div style="background:#fff;border-radius:12px;padding:2rem;width:550px;max-width:90%;margin:5vh auto;position:relative;">
<h3 style="margin-bottom:1.5rem;">Import Users from CSV</h3> <div id="import-loading" style="display:none;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0.85);border-radius:12px;z-index:10;align-items:center;justify-content:center;flex-direction:column;">
<div style="background:#f7fafc;padding:1rem;border-radius:8px;margin-bottom:1rem;"> <div style="width:40px;height:40px;border:4px solid #e2e8f0;border-top-color:#1a1a2e;border-radius:50%;animation:spin 0.8s linear infinite;margin-bottom:1rem;"></div>
<p style="font-weight:600;color:#1a1a2e;">{{t .Lang "importing"}}</p>
</div>
<style>@keyframes spin{to{transform:rotate(360deg)}}</style>
<h3 style="margin-bottom:1.5rem;">{{t .Lang "nav_access"}} — CSV Import</h3>
<div id="import-step1" style="background:#f7fafc;padding:1rem;border-radius:8px;margin-bottom:1rem;">
<p style="margin:0.25rem 0;font-size:0.9rem;"><strong>1.</strong> <a href="/api/templates/users.csv" download style="color:#3182ce;">Download CSV template</a></p> <p style="margin:0.25rem 0;font-size:0.9rem;"><strong>1.</strong> <a href="/api/templates/users.csv" download style="color:#3182ce;">Download CSV template</a></p>
<p style="margin:0.25rem 0;font-size:0.9rem;"><strong>2.</strong> Fill in user data (Excel, LibreOffice, or text editor)</p> <p style="margin:0.25rem 0;font-size:0.9rem;"><strong>2.</strong> Fill in user data (Excel, LibreOffice, or text editor)</p>
<p style="margin:0.25rem 0;font-size:0.9rem;"><strong>3.</strong> Upload the completed file</p> <p style="margin:0.25rem 0;font-size:0.9rem;"><strong>3.</strong> Upload the completed file</p>
</div> </div>
<form id="csv-import-form" onsubmit="return importCSV(event)"> <form id="csv-import-form" onsubmit="return importCSV(event)">
<div class="field"><label>CSV File</label><input type="file" name="csv_file" accept=".csv" required style="width:100%;"></div> <div id="import-form-fields">
<div style="display:flex;gap:0.75rem;margin-top:1.5rem;"> <div class="field"><label>CSV File</label><input type="file" name="csv_file" accept=".csv" required style="width:100%;"></div>
<button type="submit" class="btn btn-primary">Import</button> <div style="display:flex;gap:0.75rem;margin-top:1.5rem;">
<button type="button" class="btn btn-ghost" onclick="closeImportModal()">Cancel</button> <button type="submit" class="btn btn-primary" id="import-btn">{{t .Lang "import"}}</button>
<button type="button" class="btn btn-ghost" onclick="closeImportModal()">{{t .Lang "cancel"}}</button>
</div>
</div> </div>
<div id="import-results" style="display:none;margin-top:1rem;"></div>
</form> </form>
<div id="import-results" style="display:none;margin-top:1rem;"></div>
</div> </div>
</div> </div>
@ -1922,31 +1967,44 @@ const adminHTML = `<!DOCTYPE html>
async function importCSV(event) { async function importCSV(event) {
event.preventDefault(); event.preventDefault();
// Show loading spinner
document.getElementById('import-form-fields').style.display = 'none';
document.getElementById('import-step1').style.display = 'none';
document.getElementById('import-loading').style.display = 'flex';
document.querySelector('#import-csv-modal h3').textContent = 'Importing...';
const form = document.getElementById('csv-import-form'); const form = document.getElementById('csv-import-form');
const formData = new FormData(form); const formData = new FormData(form);
const resp = await fetch('/api/users/import', { method: 'POST', body: formData }); const resp = await fetch('/api/users/import', { method: 'POST', body: formData });
const result = await resp.json(); const result = await resp.json();
const resultsDiv = document.getElementById('import-results'); const resultsDiv = document.getElementById('import-results');
// Hide loading
document.getElementById('import-loading').style.display = 'none';
resultsDiv.style.display = 'block'; resultsDiv.style.display = 'block';
if (result.api_result && result.api_result.success) { if (result.api_result && result.api_result.success) {
const created = result.api_result.created || 0; const created = result.api_result.created || 0;
let html = '<div style="background:#f0fff4;color:#276749;padding:1rem;border-radius:8px;margin-bottom:0.5rem;">✅ ' + created + ' users created successfully.</div>'; let html = '<div style="background:#f0fff4;color:#276749;padding:1rem;border-radius:8px;margin-bottom:0.5rem;">✅ ' + created + ' users created successfully.</div>';
if (result.api_result.users) { if (result.api_result.users && result.api_result.users.length > 0) {
html += '<table style="width:100%;border-collapse:collapse;"><tr style="background:#f7fafc;"><th style="padding:6px 12px;border:1px solid #e2e8f0;text-align:left;">User</th><th style="padding:6px 12px;border:1px solid #e2e8f0;text-align:left;">Password</th></tr>'; html += '<table style="width:100%;border-collapse:collapse;"><tr style="background:#f7fafc;"><th style="padding:6px 12px;border:1px solid #e2e8f0;text-align:left;">User</th><th style="padding:6px 12px;border:1px solid #e2e8f0;text-align:left;">Password</th></tr>';
result.api_result.users.forEach(u => { result.api_result.users.forEach(u => {
html += '<tr><td style="padding:6px 12px;border:1px solid #e2e8f0;">' + u.username + '</td><td style="padding:6px 12px;border:1px solid #e2e8f0;"><code style="background:#edf2f7;padding:2px 6px;border-radius:4px;font-size:0.85rem;">' + (u.placeholder_password || '—') + '</code></td></tr>'; html += '<tr><td style="padding:6px 12px;border:1px solid #e2e8f0;">' + u.username + '</td><td style="padding:6px 12px;border:1px solid #e2e8f0;"><code style="background:#edf2f7;padding:2px 6px;border-radius:4px;font-size:0.85rem;">' + (u.placeholder_password || '—') + '</code></td></tr>';
}); });
html += '</table>'; html += '</table>';
} }
html += '<div style="margin-top:1rem;"><button class="btn btn-primary" onclick="closeImportModal(); loadUsers();">Done</button></div>';
resultsDiv.innerHTML = html; resultsDiv.innerHTML = html;
closeImportModal();
loadUsers();
} else { } else {
let html = '<div style="background:#fff5f5;color:#9b2c2c;padding:1rem;border-radius:8px;margin-bottom:0.5rem;">❌ Import failed: ' + (result.error || 'Unknown error') + '</div>'; let errorMsg = result.error || 'Unknown error';
if (result.api_result && result.api_result.error) errorMsg = result.api_result.error;
let html = '<div style="background:#fff5f5;color:#9b2c2c;padding:1rem;border-radius:8px;margin-bottom:0.5rem;">❌ Import failed: ' + errorMsg + '</div>';
if (result.parse_errors && result.parse_errors.length) { if (result.parse_errors && result.parse_errors.length) {
html += '<ul style="color:#9b2c2c;font-size:0.88rem;">' + result.parse_errors.map(e => '<li>' + e + '</li>').join('') + '</ul>'; html += '<ul style="color:#9b2c2c;font-size:0.88rem;">' + result.parse_errors.map(e => '<li>' + e + '</li>').join('') + '</ul>';
} }
html += '<div style="margin-top:1rem;"><button class="btn btn-ghost" onclick="closeImportModal()">Close</button></div>';
resultsDiv.innerHTML = html; resultsDiv.innerHTML = html;
} }
return false; return false;