zitinexus-router-script/UI/index.php

137 lines
4.5 KiB
PHP

<?php
/**
* Login page for ZitiNexus Router Enrollment UI
* This is a copy for direct access when document root is set to main UI directory
*/
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';
}
?>
<!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="assets/css/style.css">
<link rel="icon" type="image/x-icon" href="assets/images/favicon.ico">
</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 var(--border-color); 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...';
});
</script>
</body>
</html>