Mike Swanson
3f1fd8f20d
- 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>
231 lines
7.4 KiB
HTML
231 lines
7.4 KiB
HTML
<!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>
|