169 lines
6.4 KiB
PHP
169 lines
6.4 KiB
PHP
<?php
|
|
/**
|
|
* Login page for ZitiNexus Router Enrollment UI
|
|
* Universal version that works with any IP address/domain
|
|
*/
|
|
|
|
require_once 'includes/auth.php';
|
|
|
|
// Redirect if already authenticated
|
|
if (isAuthenticated() && isSessionValid()) {
|
|
header('Location: dashboard.php');
|
|
exit;
|
|
}
|
|
|
|
// Handle messages
|
|
$message = '';
|
|
$messageType = '';
|
|
|
|
if (isset($_GET['error'])) {
|
|
switch ($_GET['error']) {
|
|
case 'session_expired':
|
|
$message = 'Your session has expired. Please log in again.';
|
|
$messageType = 'warning';
|
|
break;
|
|
default:
|
|
$message = 'An error occurred. Please try again.';
|
|
$messageType = 'error';
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (isset($_GET['message'])) {
|
|
switch ($_GET['message']) {
|
|
case 'logged_out':
|
|
$message = 'You have been logged out successfully.';
|
|
$messageType = 'info';
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (isset($loginError)) {
|
|
$message = $loginError;
|
|
$messageType = 'error';
|
|
}
|
|
|
|
// Get base path for assets (works with any domain/IP)
|
|
$basePath = dirname($_SERVER['SCRIPT_NAME']);
|
|
if ($basePath === '/') {
|
|
$basePath = '';
|
|
}
|
|
$assetBase = $basePath . '/assets';
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title><?php echo APP_NAME; ?> - Login</title>
|
|
<link rel="stylesheet" href="<?php echo $assetBase; ?>/css/style.css">
|
|
<link rel="icon" type="image/x-icon" href="<?php echo $assetBase; ?>/images/favicon.ico">
|
|
<style>
|
|
/* Inline critical CSS to ensure basic styling loads */
|
|
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; margin: 0; padding: 0; background: #f5f5f5; }
|
|
.login-container { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem; }
|
|
.login-card { background: #fff; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 2rem; width: 100%; max-width: 400px; }
|
|
.login-header { text-align: center; margin-bottom: 2rem; }
|
|
.login-header h1 { margin: 0 0 0.5rem 0; color: #333; }
|
|
.form-group { margin-bottom: 1rem; }
|
|
.form-label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: #333; }
|
|
.form-input { width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem; }
|
|
.btn { padding: 0.75rem 1.5rem; border: none; border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-block; font-size: 1rem; }
|
|
.btn-primary { background: #007bff; color: white; width: 100%; }
|
|
.btn-full { width: 100%; }
|
|
.alert { padding: 1rem; border-radius: 4px; margin-bottom: 1rem; }
|
|
.alert-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
|
|
.alert-warning { background: #fff3cd; color: #856404; border: 1px solid #ffeaa7; }
|
|
.alert-info { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
|
|
.text-sm { font-size: 0.875rem; }
|
|
.text-xs { font-size: 0.75rem; }
|
|
.text-secondary { color: #6c757d; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="login-container">
|
|
<div class="login-card">
|
|
<div class="login-header">
|
|
<h1><?php echo APP_NAME; ?></h1>
|
|
<p>Router Enrollment Management Interface</p>
|
|
<p class="text-sm text-secondary">Version <?php echo APP_VERSION; ?></p>
|
|
</div>
|
|
|
|
<?php if ($message): ?>
|
|
<div class="alert alert-<?php echo $messageType; ?>">
|
|
<?php echo htmlspecialchars($message); ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<form method="POST" action="index.php">
|
|
<input type="hidden" name="action" value="login">
|
|
|
|
<div class="form-group">
|
|
<label for="username" class="form-label">Username</label>
|
|
<input
|
|
type="text"
|
|
id="username"
|
|
name="username"
|
|
class="form-input"
|
|
required
|
|
autocomplete="username"
|
|
value="<?php echo isset($_POST['username']) ? htmlspecialchars($_POST['username']) : ''; ?>"
|
|
>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="password" class="form-label">Password</label>
|
|
<input
|
|
type="password"
|
|
id="password"
|
|
name="password"
|
|
class="form-input"
|
|
required
|
|
autocomplete="current-password"
|
|
>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary btn-full">
|
|
Sign In
|
|
</button>
|
|
</form>
|
|
|
|
<div style="margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #e0e0e0; text-align: center;">
|
|
<p class="text-sm text-secondary">
|
|
Default credentials: <strong>admin</strong> / <strong>admin123</strong>
|
|
</p>
|
|
<p class="text-xs text-secondary" style="margin-top: 0.5rem;">
|
|
Please change the default password in production
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Auto-focus on username field
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const usernameField = document.getElementById('username');
|
|
if (usernameField && !usernameField.value) {
|
|
usernameField.focus();
|
|
} else {
|
|
const passwordField = document.getElementById('password');
|
|
if (passwordField) {
|
|
passwordField.focus();
|
|
}
|
|
}
|
|
});
|
|
|
|
// Handle form submission
|
|
document.querySelector('form').addEventListener('submit', function(e) {
|
|
const submitBtn = this.querySelector('button[type="submit"]');
|
|
submitBtn.disabled = true;
|
|
submitBtn.innerHTML = '<span class="spinner"></span>Signing In...';
|
|
});
|
|
|
|
// Debug info for troubleshooting
|
|
console.log('Asset base path:', '<?php echo $assetBase; ?>');
|
|
console.log('CSS should load from:', '<?php echo $assetBase; ?>/css/style.css');
|
|
</script>
|
|
</body>
|
|
</html>
|