57575d58ce
- Migration 20: user_servers association table (User ↔ ProxmoxServer)
- API: GET/PUT /api/users/{id}/servers — assign servers to users with workspace-conflict validation
- API: GET /api/users/{id}/server-assignments — enriched server list (assigned + compatible flags)
- Non-admin server filter: intersection of assigned_servers and workspace servers
- Migration 21: dashboard:view = false for user role (new key format)
- Migration 22: proxmox.cluster.manage → cluster:manage for admin role
- API: GET/PUT /api/{server_id}/vm/{vmid}/owner — VM/LXC owner assignment (admin-only)
- Login: smart redirect based on user permissions after authentication
- Login: returnUrl param support for post-login redirect
- Roles API: user_count field per role in GET /api/roles
- node_uptime added to server detail API response
- Remove redundant PermissionChecker from GET /users HTML route
315 lines
12 KiB
HTML
315 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="{{ lang }}">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>{{ t('login') }} - {{ t('app_name') }}</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, viewport-fit=cover">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="theme-color" content="#f4f5f7">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
|
|
<style>
|
|
* {
|
|
box-sizing: border-box;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
body {
|
|
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
background: #f4f5f7;
|
|
color: #1a1d23;
|
|
min-height: 100vh;
|
|
min-height: -webkit-fill-available;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
|
|
}
|
|
html {
|
|
height: -webkit-fill-available;
|
|
}
|
|
.login-container {
|
|
width: 100%;
|
|
max-width: 400px;
|
|
padding: 1.5rem;
|
|
}
|
|
.login-card {
|
|
background: #ffffff;
|
|
border-radius: 6px;
|
|
padding: 2.25rem 2rem;
|
|
border: 1px solid #dde1e9;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
|
}
|
|
.login-header {
|
|
text-align: center;
|
|
margin-bottom: 2rem;
|
|
}
|
|
.login-header h1 {
|
|
margin: 0 0 0.5rem 0;
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: #1a1d23;
|
|
}
|
|
.login-header p {
|
|
margin: 0;
|
|
color: #6b7280;
|
|
font-size: 0.875rem;
|
|
}
|
|
.form-group {
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 0.375rem;
|
|
color: #374151;
|
|
font-weight: 500;
|
|
font-size: 0.875rem;
|
|
}
|
|
.form-group input {
|
|
width: 100%;
|
|
padding: 0.625rem 0.875rem;
|
|
background: #ffffff;
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 4px;
|
|
color: #1a1d23;
|
|
font-size: 16px;
|
|
font-family: inherit;
|
|
transition: all 0.15s;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
}
|
|
.form-group input::placeholder {
|
|
color: #9ca3af;
|
|
}
|
|
.form-group input:focus {
|
|
outline: none;
|
|
border-color: #0ea5e9;
|
|
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
|
|
}
|
|
.btn {
|
|
width: 100%;
|
|
padding: 0.75rem 1rem;
|
|
background: #0ea5e9;
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 4px;
|
|
font-size: 0.9375rem;
|
|
font-weight: 600;
|
|
font-family: inherit;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
min-height: 44px;
|
|
touch-action: manipulation;
|
|
margin-top: 0.25rem;
|
|
}
|
|
.btn:hover {
|
|
background: #0284c7;
|
|
}
|
|
.btn:active {
|
|
background: #0369a1;
|
|
}
|
|
.btn:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
.error-message {
|
|
background: #fef2f2;
|
|
border: 1px solid #fca5a5;
|
|
color: #b91c1c;
|
|
padding: 0.75rem 1rem;
|
|
border-radius: 4px;
|
|
margin-bottom: 1rem;
|
|
font-size: 0.875rem;
|
|
display: none;
|
|
}
|
|
.error-message.show {
|
|
display: block;
|
|
}
|
|
.loading {
|
|
display: inline-block;
|
|
width: 15px;
|
|
height: 15px;
|
|
border: 2px solid rgba(255,255,255,0.4);
|
|
border-radius: 50%;
|
|
border-top-color: #fff;
|
|
animation: spin 0.6s linear infinite;
|
|
vertical-align: middle;
|
|
}
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
.footer {
|
|
text-align: center;
|
|
margin-top: 1.5rem;
|
|
color: #9ca3af;
|
|
font-size: 0.8125rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="login-container">
|
|
<div class="login-card">
|
|
<div class="login-header">
|
|
{% if custom_logo_exists %}
|
|
<img src="/settings/api/logo.png" alt="{{ panel_name }}" style="height: 128px; width: auto; object-fit: contain; margin-bottom: 0.5rem;">
|
|
{% endif %}
|
|
<p>{{ t('login_to_continue') }}</p>
|
|
</div> <div id="errorMessage" class="error-message"></div>
|
|
|
|
<form id="loginForm">
|
|
<div class="form-group">
|
|
<label for="username">{{ t('username') }}</label>
|
|
<input
|
|
type="text"
|
|
id="username"
|
|
name="username"
|
|
required
|
|
autocomplete="username"
|
|
placeholder="{{ t('enter_username') }}"
|
|
>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="password">{{ t('password') }}</label>
|
|
<input
|
|
type="password"
|
|
id="password"
|
|
name="password"
|
|
required
|
|
autocomplete="current-password"
|
|
placeholder="{{ t('enter_password') }}"
|
|
>
|
|
</div>
|
|
|
|
<button type="submit" class="btn" id="loginBtn">
|
|
{{ t('login') }}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<p>{{ panel_name }} v{{ version }} © 2025</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const loginForm = document.getElementById('loginForm');
|
|
const loginBtn = document.getElementById('loginBtn');
|
|
const errorMessage = document.getElementById('errorMessage');
|
|
|
|
loginForm.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
const username = document.getElementById('username').value;
|
|
const password = document.getElementById('password').value;
|
|
|
|
// Disable button and show loading
|
|
loginBtn.disabled = true;
|
|
loginBtn.innerHTML = '<span class="loading"></span> ' + '{{ t('logging_in') }}';
|
|
errorMessage.classList.remove('show');
|
|
|
|
try {
|
|
const response = await fetch('/api/auth/login', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ username, password })
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (response.ok) {
|
|
// Save token to localStorage
|
|
localStorage.setItem('access_token', data.access_token);
|
|
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
if (urlParams.get('returnUrl')) {
|
|
window.location.href = decodeURIComponent(urlParams.get('returnUrl'));
|
|
} else {
|
|
// Fetch profile to decide landing page based on actual permissions
|
|
try {
|
|
const meResp = await fetch('/api/auth/me', { headers: { 'Authorization': `Bearer ${data.access_token}` } });
|
|
const me = meResp.ok ? await meResp.json() : {};
|
|
const perms = me.permissions || {};
|
|
const isAdmin = me.is_admin === true || me.role?.name === 'admin';
|
|
if (isAdmin || perms['dashboard:view'] || perms['dashboard.view']) {
|
|
window.location.href = '/dashboard';
|
|
} else if (perms['vm:view'] || perms['vms.view']) {
|
|
window.location.href = '/virtual-machines';
|
|
} else if (perms['server:view'] || perms['proxmox.view']) {
|
|
window.location.href = '/vms';
|
|
} else if (perms['backup:view'] || perms['backups.view']) {
|
|
window.location.href = '/backups';
|
|
} else if (perms['ipam:view'] || perms['ipam.view']) {
|
|
window.location.href = '/ipam';
|
|
} else if (perms['log:view'] || perms['logs.view']) {
|
|
window.location.href = '/logs';
|
|
} else {
|
|
window.location.href = '/settings';
|
|
}
|
|
} catch { window.location.href = '/settings'; }
|
|
}
|
|
} else {
|
|
// Show error
|
|
errorMessage.textContent = data.detail || '{{ t('login_error_check_credentials') }}';
|
|
errorMessage.classList.add('show');
|
|
|
|
loginBtn.disabled = false;
|
|
loginBtn.textContent = '{{ t('login') }}';
|
|
}
|
|
} catch (error) {
|
|
errorMessage.textContent = '{{ t('server_connection_error') }}';
|
|
errorMessage.classList.add('show');
|
|
|
|
loginBtn.disabled = false;
|
|
loginBtn.textContent = '{{ t('login') }}';
|
|
}
|
|
});
|
|
|
|
// Check if already logged in
|
|
const token = localStorage.getItem('access_token');
|
|
if (token) {
|
|
// Verify token
|
|
fetch('/api/auth/me', {
|
|
headers: {
|
|
'Authorization': `Bearer ${token}`
|
|
}
|
|
}).then(async response => {
|
|
if (response.ok) {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
if (urlParams.get('returnUrl')) {
|
|
window.location.href = decodeURIComponent(urlParams.get('returnUrl'));
|
|
} else {
|
|
try {
|
|
const meResp = await fetch('/api/auth/me', { headers: { 'Authorization': `Bearer ${token}` } });
|
|
const me = meResp.ok ? await meResp.json() : {};
|
|
const perms = me.permissions || {};
|
|
const isAdmin = me.is_admin === true || me.role?.name === 'admin';
|
|
if (isAdmin || perms['dashboard:view'] || perms['dashboard.view']) {
|
|
window.location.href = '/dashboard';
|
|
} else if (perms['vm:view'] || perms['vms.view']) {
|
|
window.location.href = '/virtual-machines';
|
|
} else if (perms['server:view'] || perms['proxmox.view']) {
|
|
window.location.href = '/vms';
|
|
} else if (perms['backup:view'] || perms['backups.view']) {
|
|
window.location.href = '/backups';
|
|
} else if (perms['ipam:view'] || perms['ipam.view']) {
|
|
window.location.href = '/ipam';
|
|
} else if (perms['log:view'] || perms['logs.view']) {
|
|
window.location.href = '/logs';
|
|
} else {
|
|
window.location.href = '/settings';
|
|
}
|
|
} catch { window.location.href = '/settings'; }
|
|
}
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|