marcandClaude Sonnet 4.6
5d9a9e62ec
Backend: - SMB config parser/writer (_parse_smb_conf, _write_smb_conf) for safe whole-file rewrites instead of append-only - NFS exports parser/writer (_parse_exports, _write_exports) with support for disabled (commented-out) exports - DELETE/PATCH/toggle endpoints for SMB and NFS shares - parse_smb() now returns enabled field (reads available = no) - get_nfs_shares() uses the new parser and returns enabled field - Replace HTTP Basic Auth with Flask session auth (secret key derived from MICRONAS_PASS so sessions survive restarts) - /login GET/POST, /logout routes Frontend: - Login page (templates/login.html) with same dark theme - Sign out button in header - Edit modal pre-filled with current share values - Delete buttons wired up (with confirm dialog) - Enable/Disable toggle per share (green/grey dot status indicator) - Disabled shares shown at reduced opacity Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
235 lines
11 KiB
HTML
235 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>MicroNAS</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/app.css') }}">
|
|
</head>
|
|
<body>
|
|
|
|
<div id="toastContainer"></div>
|
|
|
|
<!-- Password modal -->
|
|
<div class="modal fade" id="pwModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Change Password</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<input type="text" id="pwUsername" class="form-control mb-3" readonly style="color:var(--muted)">
|
|
<input type="password" id="pwNew" class="form-control mb-2" placeholder="New password (min 8 chars)">
|
|
<input type="password" id="pwConfirm" class="form-control" placeholder="Confirm password">
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary" onclick="submitPassword()">Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quota modal -->
|
|
<div class="modal fade" id="quotaModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="quotaModalTitle">Set Quota</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body" id="quotaModalBody"></div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary" onclick="submitQuota()">Apply</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit Share modal -->
|
|
<div class="modal fade" id="editModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="editModalTitle">Edit Share</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body" id="editModalBody"></div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary" onclick="submitEdit()">Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Header -->
|
|
<div class="topbar d-flex justify-content-between align-items-center">
|
|
<span class="fw-semibold fs-5">MicroNAS</span>
|
|
<div class="d-flex align-items-center gap-3">
|
|
<span id="lastRefresh" class="small" style="color:var(--muted)"></span>
|
|
<a href="/logout" class="btn btn-sm" style="border:1px solid var(--border); color:var(--muted)">Sign out</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container-lg py-4">
|
|
|
|
<ul class="nav nav-tabs mb-0" role="tablist">
|
|
<li class="nav-item">
|
|
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#dashboard" type="button">Dashboard</button>
|
|
</li>
|
|
<li class="nav-item">
|
|
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#smb" type="button">SMB Shares</button>
|
|
</li>
|
|
<li class="nav-item">
|
|
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#nfs" type="button">NFS Exports</button>
|
|
</li>
|
|
<li class="nav-item">
|
|
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#users" type="button">Users</button>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="tab-content" style="border:1px solid var(--border); border-top:none; border-radius:0 0 8px 8px; padding:1.5rem; background:var(--bg);">
|
|
|
|
<!-- DASHBOARD -->
|
|
<div class="tab-pane fade show active" id="dashboard">
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-6 col-md-2">
|
|
<div class="card h-100">
|
|
<div class="card-body py-3 px-3">
|
|
<div class="card-label">smbd</div>
|
|
<div class="d-flex align-items-center mt-1" id="statusSmbd">
|
|
<span class="dot dot-red"></span><span class="small">…</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-md-2">
|
|
<div class="card h-100">
|
|
<div class="card-body py-3 px-3">
|
|
<div class="card-label">nfsd</div>
|
|
<div class="d-flex align-items-center mt-1" id="statusNfsd">
|
|
<span class="dot dot-red"></span><span class="small">…</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-8">
|
|
<div class="card h-100">
|
|
<div class="card-body py-3 px-3">
|
|
<div class="d-flex justify-content-between align-items-baseline mb-2">
|
|
<div class="card-label">/srv disk</div>
|
|
<span id="diskLabel" class="small" style="color:var(--muted)">…</span>
|
|
</div>
|
|
<div class="progress" style="height:10px">
|
|
<div id="diskBar" class="progress-bar" style="width:0%; transition:width .6s ease"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<span class="fw-semibold">Shares</span>
|
|
<button class="btn btn-sm" style="color:var(--muted); border:1px solid var(--border);" onclick="loadDashboard()">↻ Refresh</button>
|
|
</div>
|
|
<div class="table-responsive mb-4">
|
|
<table class="table table-striped mb-0">
|
|
<thead><tr><th>Type</th><th>Name</th><th>Path</th><th>Access</th><th class="text-end">Size</th></tr></thead>
|
|
<tbody id="dashSharesBody">
|
|
<tr><td colspan="5" style="color:var(--muted)">Loading…</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="fw-semibold mb-2">Quota Usage</div>
|
|
<div class="table-responsive">
|
|
<table class="table table-striped mb-0">
|
|
<thead><tr><th>User</th><th>Used</th><th>Soft limit</th><th style="min-width:200px">Usage</th></tr></thead>
|
|
<tbody id="dashQuotasBody">
|
|
<tr><td colspan="4" style="color:var(--muted)">Loading…</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SMB -->
|
|
<div class="tab-pane fade" id="smb">
|
|
<div class="fw-semibold mb-3">Add SMB Share</div>
|
|
<div class="row g-2 mb-4">
|
|
<div class="col-md-3"><input type="text" id="smbName" class="form-control" placeholder="Share name"></div>
|
|
<div class="col-md-4"><input type="text" id="smbPath" class="form-control" placeholder="/srv/samba/…"></div>
|
|
<div class="col-md-3"><input type="text" id="smbUsers" class="form-control" placeholder="user1,user2"></div>
|
|
<div class="col-md-2"><button type="button" class="btn btn-success w-100" onclick="addSMBShare()">Add</button></div>
|
|
</div>
|
|
<div class="fw-semibold mb-2">Shares</div>
|
|
<div class="table-responsive">
|
|
<table class="table table-striped mb-0">
|
|
<thead><tr><th>Name</th><th>Path</th><th>Valid Users</th><th></th><th>Actions</th></tr></thead>
|
|
<tbody id="smbTableBody">
|
|
<tr><td colspan="4" style="color:var(--muted)">Loading…</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- NFS -->
|
|
<div class="tab-pane fade" id="nfs">
|
|
<div class="fw-semibold mb-3">Add NFS Export</div>
|
|
<div class="row g-2 mb-4">
|
|
<div class="col-md-4"><input type="text" id="nfsPath" class="form-control" placeholder="/srv/data"></div>
|
|
<div class="col-md-3"><input type="text" id="nfsClients" class="form-control" placeholder="192.168.1.0/24 or *"></div>
|
|
<div class="col-md-2 d-flex align-items-center">
|
|
<div class="form-check ms-1">
|
|
<input type="checkbox" id="nfsReadOnly" class="form-check-input">
|
|
<label class="form-check-label" for="nfsReadOnly" style="color:var(--muted)">Read only</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3"><button type="button" class="btn btn-success w-100" onclick="addNFSShare()">Add</button></div>
|
|
</div>
|
|
<div class="fw-semibold mb-2">Exports</div>
|
|
<div class="table-responsive">
|
|
<table class="table table-striped mb-0">
|
|
<thead><tr><th>Path</th><th>Clients</th><th></th><th>Actions</th></tr></thead>
|
|
<tbody id="nfsTableBody">
|
|
<tr><td colspan="3" style="color:var(--muted)">Loading…</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- USERS -->
|
|
<div class="tab-pane fade" id="users">
|
|
<div class="fw-semibold mb-3">Create User</div>
|
|
<div class="row g-2 mb-4">
|
|
<div class="col-md-3"><input type="text" id="newUsername" class="form-control" placeholder="Username"></div>
|
|
<div class="col-md-4"><input type="password" id="newPassword" class="form-control" placeholder="Password (min 8 chars)"></div>
|
|
<div class="col-md-2"><button type="button" class="btn btn-success w-100" onclick="createUser()">Create</button></div>
|
|
</div>
|
|
<div class="fw-semibold mb-2">Users</div>
|
|
<div class="table-responsive">
|
|
<table class="table table-striped mb-0">
|
|
<thead><tr><th>Username</th><th>UID</th><th>SMB Account</th><th>Actions</th></tr></thead>
|
|
<tbody id="usersTableBody">
|
|
<tr><td colspan="4" style="color:var(--muted)">Loading…</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="{{ url_for('static', filename='js/utils.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/dashboard.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/shares.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/quotas.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/users.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
|
|
|
|
</body>
|
|
</html>
|