Add technician login and dashboard pages
- Add /login page with dark theme matching portal - Add /dashboard with 4 tabs: Support, Access, Build, Settings - Add clean URL routes (/login, /dashboard) to server - Add "Technician Login" link to portal footer - Dashboard shows active support codes with generate/cancel - Build tab has installer builder form (placeholder for agent) - Access tab has 3-panel layout for machine management 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -82,6 +82,10 @@ async fn main() -> Result<()> {
|
|||||||
.route("/api/sessions", get(list_sessions))
|
.route("/api/sessions", get(list_sessions))
|
||||||
.route("/api/sessions/:id", get(get_session))
|
.route("/api/sessions/:id", get(get_session))
|
||||||
|
|
||||||
|
// HTML page routes (clean URLs)
|
||||||
|
.route("/login", get(serve_login))
|
||||||
|
.route("/dashboard", get(serve_dashboard))
|
||||||
|
|
||||||
// State
|
// State
|
||||||
.with_state(state)
|
.with_state(state)
|
||||||
|
|
||||||
@@ -173,3 +177,18 @@ async fn get_session(
|
|||||||
|
|
||||||
Ok(Json(api::SessionInfo::from(session)))
|
Ok(Json(api::SessionInfo::from(session)))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Static page handlers
|
||||||
|
async fn serve_login() -> impl IntoResponse {
|
||||||
|
match tokio::fs::read_to_string("static/login.html").await {
|
||||||
|
Ok(content) => Html(content).into_response(),
|
||||||
|
Err(_) => (StatusCode::NOT_FOUND, "Page not found").into_response(),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async fn serve_dashboard() -> impl IntoResponse {
|
||||||
|
match tokio::fs::read_to_string("static/dashboard.html").await {
|
||||||
|
Ok(content) => Html(content).into_response(),
|
||||||
|
Err(_) => (StatusCode::NOT_FOUND, "Page not found").into_response(),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
481
server/static/dashboard.html
Normal file
481
server/static/dashboard.html
Normal file
@@ -0,0 +1,481 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>GuruConnect - Dashboard</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--background: 222.2 84% 4.9%;
|
||||||
|
--foreground: 210 40% 98%;
|
||||||
|
--card: 222.2 84% 4.9%;
|
||||||
|
--card-foreground: 210 40% 98%;
|
||||||
|
--primary: 217.2 91.2% 59.8%;
|
||||||
|
--primary-foreground: 222.2 47.4% 11.2%;
|
||||||
|
--muted: 217.2 32.6% 17.5%;
|
||||||
|
--muted-foreground: 215 20.2% 65.1%;
|
||||||
|
--border: 217.2 32.6% 17.5%;
|
||||||
|
--input: 217.2 32.6% 17.5%;
|
||||||
|
--ring: 224.3 76.3% 48%;
|
||||||
|
--accent: 217.2 32.6% 17.5%;
|
||||||
|
--destructive: 0 62.8% 30.6%;
|
||||||
|
}
|
||||||
|
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
|
||||||
|
background-color: hsl(var(--background));
|
||||||
|
color: hsl(var(--foreground));
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 16px 24px;
|
||||||
|
border-bottom: 1px solid hsl(var(--border));
|
||||||
|
background: hsl(var(--card));
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-left { display: flex; align-items: center; gap: 24px; }
|
||||||
|
|
||||||
|
.logo { font-size: 20px; font-weight: 700; color: hsl(var(--foreground)); }
|
||||||
|
|
||||||
|
.header-right { display: flex; align-items: center; gap: 16px; }
|
||||||
|
|
||||||
|
.user-info { font-size: 14px; color: hsl(var(--muted-foreground)); }
|
||||||
|
|
||||||
|
.logout-btn {
|
||||||
|
padding: 8px 16px;
|
||||||
|
font-size: 14px;
|
||||||
|
background: transparent;
|
||||||
|
color: hsl(var(--muted-foreground));
|
||||||
|
border: 1px solid hsl(var(--border));
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logout-btn:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)); }
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
gap: 4px;
|
||||||
|
padding: 0 24px;
|
||||||
|
border-bottom: 1px solid hsl(var(--border));
|
||||||
|
background: hsl(var(--card));
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
padding: 12px 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: hsl(var(--muted-foreground));
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
border-bottom: 2px solid transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
margin-bottom: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab:hover { color: hsl(var(--foreground)); }
|
||||||
|
.tab.active { color: hsl(var(--primary)); border-bottom-color: hsl(var(--primary)); }
|
||||||
|
|
||||||
|
.content { padding: 24px; max-width: 1400px; margin: 0 auto; }
|
||||||
|
|
||||||
|
.tab-panel { display: none; }
|
||||||
|
.tab-panel.active { display: block; }
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background: hsl(var(--card));
|
||||||
|
border: 1px solid hsl(var(--border));
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 24px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title { font-size: 18px; font-weight: 600; }
|
||||||
|
.card-description { color: hsl(var(--muted-foreground)); font-size: 14px; margin-top: 4px; }
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
padding: 10px 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
|
||||||
|
.btn-primary:hover { opacity: 0.9; }
|
||||||
|
.btn-outline { background: transparent; color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); }
|
||||||
|
.btn-outline:hover { background: hsl(var(--accent)); }
|
||||||
|
|
||||||
|
.table-container { overflow-x: auto; }
|
||||||
|
|
||||||
|
table { width: 100%; border-collapse: collapse; }
|
||||||
|
|
||||||
|
th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid hsl(var(--border)); }
|
||||||
|
|
||||||
|
th { font-size: 12px; font-weight: 600; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
|
||||||
|
td { font-size: 14px; }
|
||||||
|
tr:hover { background: hsla(var(--muted), 0.3); }
|
||||||
|
|
||||||
|
.empty-state { text-align: center; padding: 48px 24px; color: hsl(var(--muted-foreground)); }
|
||||||
|
.empty-state h3 { font-size: 16px; margin-bottom: 8px; color: hsl(var(--foreground)); }
|
||||||
|
|
||||||
|
.badge { display: inline-block; padding: 4px 10px; font-size: 12px; font-weight: 500; border-radius: 9999px; }
|
||||||
|
.badge-success { background: hsla(142, 76%, 36%, 0.2); color: hsl(142, 76%, 50%); }
|
||||||
|
.badge-warning { background: hsla(45, 93%, 47%, 0.2); color: hsl(45, 93%, 55%); }
|
||||||
|
.badge-muted { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
|
||||||
|
|
||||||
|
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
|
||||||
|
|
||||||
|
.form-group { display: flex; flex-direction: column; gap: 8px; }
|
||||||
|
.form-group label { font-size: 14px; font-weight: 500; }
|
||||||
|
|
||||||
|
.form-group input, .form-group select {
|
||||||
|
padding: 10px 14px;
|
||||||
|
font-size: 14px;
|
||||||
|
background: hsl(var(--input));
|
||||||
|
border: 1px solid hsl(var(--border));
|
||||||
|
border-radius: 6px;
|
||||||
|
color: hsl(var(--foreground));
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input:focus, .form-group select:focus {
|
||||||
|
border-color: hsl(var(--ring));
|
||||||
|
box-shadow: 0 0 0 3px hsla(var(--ring), 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.access-layout {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 250px 1fr 350px;
|
||||||
|
gap: 16px;
|
||||||
|
height: calc(100vh - 180px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-panel {
|
||||||
|
background: hsl(var(--card));
|
||||||
|
border: 1px solid hsl(var(--border));
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-section { padding: 12px 16px; border-bottom: 1px solid hsl(var(--border)); }
|
||||||
|
.sidebar-section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; color: hsl(var(--muted-foreground)); margin-bottom: 8px; }
|
||||||
|
|
||||||
|
.sidebar-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 8px 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: hsl(var(--foreground));
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-item:hover { background: hsl(var(--accent)); }
|
||||||
|
.sidebar-item.active { background: hsl(var(--accent)); color: hsl(var(--primary)); }
|
||||||
|
.sidebar-count { font-size: 12px; color: hsl(var(--muted-foreground)); }
|
||||||
|
|
||||||
|
.main-panel, .detail-panel {
|
||||||
|
background: hsl(var(--card));
|
||||||
|
border: 1px solid hsl(var(--border));
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-panel { padding: 20px; }
|
||||||
|
.detail-section { margin-bottom: 20px; }
|
||||||
|
.detail-section-title { font-size: 12px; font-weight: 600; text-transform: uppercase; color: hsl(var(--muted-foreground)); margin-bottom: 12px; }
|
||||||
|
.detail-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; border-bottom: 1px solid hsl(var(--border)); }
|
||||||
|
.detail-label { color: hsl(var(--muted-foreground)); }
|
||||||
|
.detail-value { color: hsl(var(--foreground)); text-align: right; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="header">
|
||||||
|
<div class="header-left">
|
||||||
|
<div class="logo">GuruConnect</div>
|
||||||
|
</div>
|
||||||
|
<div class="header-right">
|
||||||
|
<span class="user-info" id="userInfo">Loading...</span>
|
||||||
|
<button class="logout-btn" id="logoutBtn">Sign Out</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav class="tabs">
|
||||||
|
<button class="tab active" data-tab="support">Support</button>
|
||||||
|
<button class="tab" data-tab="access">Access</button>
|
||||||
|
<button class="tab" data-tab="build">Build</button>
|
||||||
|
<button class="tab" data-tab="settings">Settings</button>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main class="content">
|
||||||
|
<!-- Support Tab -->
|
||||||
|
<div class="tab-panel active" id="support-panel">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<div>
|
||||||
|
<h2 class="card-title">Active Support Sessions</h2>
|
||||||
|
<p class="card-description">Temporary sessions initiated by support codes</p>
|
||||||
|
</div>
|
||||||
|
<button class="btn btn-primary" id="generateCodeBtn">Generate Code</button>
|
||||||
|
</div>
|
||||||
|
<div class="table-container">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Code</th>
|
||||||
|
<th>Status</th>
|
||||||
|
<th>Created</th>
|
||||||
|
<th>Technician</th>
|
||||||
|
<th>Actions</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="sessionsTable">
|
||||||
|
<tr>
|
||||||
|
<td colspan="5">
|
||||||
|
<div class="empty-state">
|
||||||
|
<h3>No active sessions</h3>
|
||||||
|
<p>Generate a code to start a support session</p>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Access Tab -->
|
||||||
|
<div class="tab-panel" id="access-panel">
|
||||||
|
<div class="access-layout">
|
||||||
|
<div class="sidebar-panel">
|
||||||
|
<div class="sidebar-section">
|
||||||
|
<div class="sidebar-section-title">Status</div>
|
||||||
|
<div class="sidebar-item active">
|
||||||
|
<span>All Machines</span>
|
||||||
|
<span class="sidebar-count">0</span>
|
||||||
|
</div>
|
||||||
|
<div class="sidebar-item">
|
||||||
|
<span>Online</span>
|
||||||
|
<span class="sidebar-count">0</span>
|
||||||
|
</div>
|
||||||
|
<div class="sidebar-item">
|
||||||
|
<span>Offline</span>
|
||||||
|
<span class="sidebar-count">0</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sidebar-section">
|
||||||
|
<div class="sidebar-section-title">By Company</div>
|
||||||
|
<div class="empty-state" style="padding: 16px;">
|
||||||
|
<p style="font-size: 12px;">No machines installed</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="main-panel">
|
||||||
|
<div class="empty-state">
|
||||||
|
<h3>No machines</h3>
|
||||||
|
<p>Install the agent on a machine to see it here</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="detail-panel">
|
||||||
|
<div class="empty-state">
|
||||||
|
<h3>Select a machine</h3>
|
||||||
|
<p>Click a machine to view details</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Build Tab -->
|
||||||
|
<div class="tab-panel" id="build-panel">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<div>
|
||||||
|
<h2 class="card-title">Installer Builder</h2>
|
||||||
|
<p class="card-description">Create customized agent installers for unattended access</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-grid">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="buildName">Name</label>
|
||||||
|
<input type="text" id="buildName" placeholder="Machine name (auto if blank)">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="buildCompany">Company</label>
|
||||||
|
<input type="text" id="buildCompany" placeholder="Client organization">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="buildSite">Site</label>
|
||||||
|
<input type="text" id="buildSite" placeholder="Physical location">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="buildDepartment">Department</label>
|
||||||
|
<input type="text" id="buildDepartment" placeholder="Business unit">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="buildDeviceType">Device Type</label>
|
||||||
|
<select id="buildDeviceType">
|
||||||
|
<option value="workstation">Workstation</option>
|
||||||
|
<option value="laptop">Laptop</option>
|
||||||
|
<option value="server">Server</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="buildTag">Tag</label>
|
||||||
|
<input type="text" id="buildTag" placeholder="Custom label">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="margin-top: 24px; display: flex; gap: 12px;">
|
||||||
|
<button class="btn btn-primary" disabled>Build EXE (64-bit)</button>
|
||||||
|
<button class="btn btn-outline" disabled>Build EXE (32-bit)</button>
|
||||||
|
<button class="btn btn-outline" disabled>Build MSI</button>
|
||||||
|
</div>
|
||||||
|
<p style="margin-top: 16px; font-size: 13px; color: hsl(var(--muted-foreground));">
|
||||||
|
Agent builds will be available once the agent is compiled.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Settings Tab -->
|
||||||
|
<div class="tab-panel" id="settings-panel">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<div>
|
||||||
|
<h2 class="card-title">Settings</h2>
|
||||||
|
<p class="card-description">Configure your GuruConnect preferences</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-grid">
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Theme</label>
|
||||||
|
<select disabled>
|
||||||
|
<option>Dark (Default)</option>
|
||||||
|
<option>Light</option>
|
||||||
|
<option>System</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Notifications</label>
|
||||||
|
<select disabled>
|
||||||
|
<option>All notifications</option>
|
||||||
|
<option>Important only</option>
|
||||||
|
<option>None</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p style="margin-top: 24px; font-size: 13px; color: hsl(var(--muted-foreground));">
|
||||||
|
Additional settings coming soon.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Tab switching
|
||||||
|
document.querySelectorAll(".tab").forEach(tab => {
|
||||||
|
tab.addEventListener("click", () => {
|
||||||
|
document.querySelectorAll(".tab").forEach(t => t.classList.remove("active"));
|
||||||
|
document.querySelectorAll(".tab-panel").forEach(p => p.classList.remove("active"));
|
||||||
|
tab.classList.add("active");
|
||||||
|
document.getElementById(tab.dataset.tab + "-panel").classList.add("active");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Check auth
|
||||||
|
const token = localStorage.getItem("token");
|
||||||
|
const user = JSON.parse(localStorage.getItem("user") || "null");
|
||||||
|
|
||||||
|
if (!token) {
|
||||||
|
document.getElementById("userInfo").textContent = "Demo Mode";
|
||||||
|
} else if (user) {
|
||||||
|
document.getElementById("userInfo").textContent = user.email || user.name || "Technician";
|
||||||
|
}
|
||||||
|
|
||||||
|
// Logout
|
||||||
|
document.getElementById("logoutBtn").addEventListener("click", () => {
|
||||||
|
localStorage.removeItem("token");
|
||||||
|
localStorage.removeItem("user");
|
||||||
|
window.location.href = "/login";
|
||||||
|
});
|
||||||
|
|
||||||
|
// Generate code
|
||||||
|
document.getElementById("generateCodeBtn").addEventListener("click", async () => {
|
||||||
|
try {
|
||||||
|
const response = await fetch("/api/codes", {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify({ technician_name: user?.name || "Technician" })
|
||||||
|
});
|
||||||
|
const data = await response.json();
|
||||||
|
if (response.ok) {
|
||||||
|
alert("Support Code Generated: " + data.code + "\n\nShare this with the customer.");
|
||||||
|
loadSessions();
|
||||||
|
} else {
|
||||||
|
alert("Error: " + (data.error || "Failed to generate code"));
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
alert("Connection error");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Load sessions
|
||||||
|
async function loadSessions() {
|
||||||
|
try {
|
||||||
|
const response = await fetch("/api/codes");
|
||||||
|
const codes = await response.json();
|
||||||
|
const tbody = document.getElementById("sessionsTable");
|
||||||
|
|
||||||
|
if (codes.length === 0) {
|
||||||
|
tbody.innerHTML = '<tr><td colspan="5"><div class="empty-state"><h3>No active sessions</h3><p>Generate a code to start a support session</p></div></td></tr>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody.innerHTML = codes.map(code => {
|
||||||
|
const created = new Date(code.created_at).toLocaleString();
|
||||||
|
const statusClass = code.status === "pending" ? "badge-warning" :
|
||||||
|
code.status === "connected" ? "badge-success" : "badge-muted";
|
||||||
|
return '<tr>' +
|
||||||
|
'<td><strong>' + code.code + '</strong></td>' +
|
||||||
|
'<td><span class="badge ' + statusClass + '">' + code.status + '</span></td>' +
|
||||||
|
'<td>' + created + '</td>' +
|
||||||
|
'<td>' + (code.created_by || "Unknown") + '</td>' +
|
||||||
|
'<td><button class="btn btn-outline" onclick="cancelCode(\'' + code.code + '\')">Cancel</button></td>' +
|
||||||
|
'</tr>';
|
||||||
|
}).join("");
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Failed to load sessions:", err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function cancelCode(code) {
|
||||||
|
if (!confirm("Cancel code " + code + "?")) return;
|
||||||
|
try {
|
||||||
|
await fetch("/api/codes/" + code + "/cancel", { method: "POST" });
|
||||||
|
loadSessions();
|
||||||
|
} catch (err) {
|
||||||
|
alert("Error cancelling code");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
loadSessions();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -254,6 +254,7 @@
|
|||||||
|
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
<p>Need help? Contact <a href="mailto:support@azcomputerguru.com">support@azcomputerguru.com</a></p>
|
<p>Need help? Contact <a href="mailto:support@azcomputerguru.com">support@azcomputerguru.com</a></p>
|
||||||
|
<p style="margin-top: 12px;"><a href="/login" style="color: hsl(var(--muted-foreground)); font-size: 11px;">Technician Login</a></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
230
server/static/login.html
Normal file
230
server/static/login.html
Normal file
@@ -0,0 +1,230 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>GuruConnect - Technician Login</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--background: 222.2 84% 4.9%;
|
||||||
|
--foreground: 210 40% 98%;
|
||||||
|
--card: 222.2 84% 4.9%;
|
||||||
|
--card-foreground: 210 40% 98%;
|
||||||
|
--primary: 217.2 91.2% 59.8%;
|
||||||
|
--primary-foreground: 222.2 47.4% 11.2%;
|
||||||
|
--muted: 217.2 32.6% 17.5%;
|
||||||
|
--muted-foreground: 215 20.2% 65.1%;
|
||||||
|
--border: 217.2 32.6% 17.5%;
|
||||||
|
--input: 217.2 32.6% 17.5%;
|
||||||
|
--ring: 224.3 76.3% 48%;
|
||||||
|
}
|
||||||
|
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
|
||||||
|
background-color: hsl(var(--background));
|
||||||
|
color: hsl(var(--foreground));
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 400px;
|
||||||
|
background: hsl(var(--card));
|
||||||
|
border: 1px solid hsl(var(--border));
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 40px;
|
||||||
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo { text-align: center; margin-bottom: 32px; }
|
||||||
|
.logo h1 { font-size: 28px; font-weight: 700; color: hsl(var(--foreground)); }
|
||||||
|
.logo p { color: hsl(var(--muted-foreground)); margin-top: 8px; font-size: 14px; }
|
||||||
|
|
||||||
|
.login-form { display: flex; flex-direction: column; gap: 20px; }
|
||||||
|
|
||||||
|
.form-group { display: flex; flex-direction: column; gap: 8px; }
|
||||||
|
|
||||||
|
label { font-size: 14px; font-weight: 500; color: hsl(var(--foreground)); }
|
||||||
|
|
||||||
|
input[type="email"], input[type="password"] {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px 16px;
|
||||||
|
font-size: 14px;
|
||||||
|
background: hsl(var(--input));
|
||||||
|
border: 1px solid hsl(var(--border));
|
||||||
|
border-radius: 8px;
|
||||||
|
color: hsl(var(--foreground));
|
||||||
|
outline: none;
|
||||||
|
transition: border-color 0.2s, box-shadow 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus {
|
||||||
|
border-color: hsl(var(--ring));
|
||||||
|
box-shadow: 0 0 0 3px hsla(var(--ring), 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
input::placeholder { color: hsl(var(--muted-foreground)); }
|
||||||
|
|
||||||
|
.login-btn {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px 24px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
background: hsl(var(--primary));
|
||||||
|
color: hsl(var(--primary-foreground));
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: opacity 0.2s, transform 0.1s;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-btn:hover { opacity: 0.9; }
|
||||||
|
.login-btn:active { transform: scale(0.98); }
|
||||||
|
.login-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||||
|
|
||||||
|
.error-message {
|
||||||
|
background: hsla(0, 70%, 50%, 0.1);
|
||||||
|
border: 1px solid hsla(0, 70%, 50%, 0.3);
|
||||||
|
color: hsl(0, 70%, 70%);
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-message.visible { display: block; }
|
||||||
|
|
||||||
|
.footer { margin-top: 24px; text-align: center; color: hsl(var(--muted-foreground)); font-size: 12px; }
|
||||||
|
.footer a { color: hsl(var(--primary)); text-decoration: none; }
|
||||||
|
|
||||||
|
.spinner {
|
||||||
|
display: none;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
border-top-color: currentColor;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: spin 0.8s linear infinite;
|
||||||
|
margin-right: 8px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin { to { transform: rotate(360deg); } }
|
||||||
|
.loading .spinner { display: inline-block; }
|
||||||
|
|
||||||
|
.demo-hint {
|
||||||
|
margin-top: 16px;
|
||||||
|
padding: 12px;
|
||||||
|
background: hsla(var(--primary), 0.1);
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: hsl(var(--muted-foreground));
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-hint a {
|
||||||
|
color: hsl(var(--primary));
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="logo">
|
||||||
|
<h1>GuruConnect</h1>
|
||||||
|
<p>Technician Login</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form class="login-form" id="loginForm">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="email">Email</label>
|
||||||
|
<input type="email" id="email" placeholder="you@company.com" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="password">Password</label>
|
||||||
|
<input type="password" id="password" placeholder="Enter your password" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="error-message" id="errorMessage"></div>
|
||||||
|
|
||||||
|
<button type="submit" class="login-btn" id="loginBtn">
|
||||||
|
<span class="spinner"></span>
|
||||||
|
<span class="btn-text">Sign In</span>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="demo-hint">
|
||||||
|
<p>Auth not yet configured. <a href="/dashboard">Skip to Dashboard</a></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer">
|
||||||
|
<p><a href="/">Back to Support Portal</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const form = document.getElementById("loginForm");
|
||||||
|
const loginBtn = document.getElementById("loginBtn");
|
||||||
|
const errorMessage = document.getElementById("errorMessage");
|
||||||
|
|
||||||
|
form.addEventListener("submit", async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const email = document.getElementById("email").value;
|
||||||
|
const password = document.getElementById("password").value;
|
||||||
|
|
||||||
|
setLoading(true);
|
||||||
|
errorMessage.classList.remove("visible");
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch("/api/auth/login", {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify({ email, password })
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
showError(data.error || "Login failed");
|
||||||
|
setLoading(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
localStorage.setItem("token", data.token);
|
||||||
|
localStorage.setItem("user", JSON.stringify(data.user));
|
||||||
|
window.location.href = "/dashboard";
|
||||||
|
|
||||||
|
} catch (err) {
|
||||||
|
showError("Auth not configured yet. Use the demo link below.");
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function showError(message) {
|
||||||
|
errorMessage.textContent = message;
|
||||||
|
errorMessage.classList.add("visible");
|
||||||
|
}
|
||||||
|
|
||||||
|
function setLoading(loading) {
|
||||||
|
loginBtn.disabled = loading;
|
||||||
|
loginBtn.classList.toggle("loading", loading);
|
||||||
|
loginBtn.querySelector(".btn-text").textContent = loading ? "Signing in..." : "Sign In";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (localStorage.getItem("token")) {
|
||||||
|
window.location.href = "/dashboard";
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user