waylon/learn-nginx-auth
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

wip

Browse source
This commit is contained in:
Waylon Walker 2025-11-21 13:09:03 -06:00
parent 1e11c8ca5e
commit 13b6d1b78a
9 changed files with 108 additions and 232 deletions
Download patch file Download diff file Expand all files Collapse all files

72
site/403.html
View file

@ -1,72 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>403 - Access Forbidden</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f8f9fa;
margin: 0;
padding: 50px;
}
.error-container {
max-width: 600px;
margin: 0 auto;
background: white;
padding: 40px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.error-code {
font-size: 72px;
font-weight: bold;
color: #dc3545;
margin: 0;
}
.error-message {
font-size: 24px;
color: #6c757d;
margin: 20px 0;
}
.error-description {
font-size: 16px;
color: #495057;
margin: 20px 0;
}
.nav-links {
margin-top: 30px;
}
.nav-links a {
display: inline-block;
margin: 0 10px;
padding: 10px 20px;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s;
}
.nav-links a:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="error-container">
<h1 class="error-code">403</h1>
<h2 class="error-message">Access Forbidden</h2>
<p class="error-description">
You don't have permission to access this resource.
You may need to log in with appropriate credentials or your current user role doesn't have access to this page.
</p>
<div class="nav-links">
<a href="/">Go Home</a>
<a href="/login.html">Login</a>
<a href="/logout">Logout</a>
</div>
</div>
</body>
</html>

83
site/404.html
View file

@ -1,83 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>404 - Page Not Found</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f8f9fa;
margin: 0;
padding: 50px;
}
.error-container {
max-width: 600px;
margin: 0 auto;
background: white;
padding: 40px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.error-code {
font-size: 72px;
font-weight: bold;
color: #ffc107;
margin: 0;
}
.error-message {
font-size: 24px;
color: #6c757d;
margin: 20px 0;
}
.error-description {
font-size: 16px;
color: #495057;
margin: 20px 0;
}
.nav-links {
margin-top: 30px;
}
.nav-links a {
display: inline-block;
margin: 0 10px;
padding: 10px 20px;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s;
}
.nav-links a:hover {
background-color: #0056b3;
}
.search-suggestion {
margin: 20px 0;
padding: 15px;
background-color: #e9ecef;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="error-container">
<h1 class="error-code">404</h1>
<h2 class="error-message">Page Not Found</h2>
<p class="error-description">
The page you are looking for might have been removed, had its name changed,
or is temporarily unavailable.
</p>
<div class="search-suggestion">
<strong>Available pages:</strong><br>
<a href="/">Home</a> |
<a href="/admin.html">Admin Page</a> |
<a href="/login.html">Login</a>
</div>
<div class="nav-links">
<a href="/">Go Home</a>
<a href="/login.html">Login</a>
</div>
</div>
</body>
</html>

2
site/admin.html
View file

@ -1,2 +0,0 @@
<h1>Admin page</h1>
<p>Only admins can see this page!</p>

63
site/login.html
View file

@ -1,63 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<style>
body { font-family: sans-serif; margin: 2em; }
form { max-width: 300px; margin: 2em auto; padding: 1.5em; border: 1px solid #ccc; background: #fafafa; border-radius: 8px;}
label { display: block; margin-top: 1em; }
input[type="text"], input[type="password"] {
width: 100%; padding: 0.5em; box-sizing: border-box;
}
.error { color: red; margin-top: 1em;}
button { margin-top: 1.2em; width: 100%; padding: 0.7em; background: #007bff; color: #fff; border: none; border-radius: 4px;}
</style>
</head>
<body>
<h2>Login</h2>
<form id="login-form">
<label>
Username:
<input type="text" name="username" id="username" autocomplete="username" required autofocus />
</label>
<label>
Password:
<input type="password" name="password" id="password" autocomplete="current-password" required />
</label>
<button type="submit">Log In</button>
<div class="error" id="error" style="display:none;"></div>
</form>
<script>
document.getElementById('login-form').onsubmit = async function(e) {
e.preventDefault();
const username = document.getElementById('username').value.trim();
const password = document.getElementById('password').value.trim();
const errorDiv = document.getElementById('error');
errorDiv.style.display = "none";
const headers = new Headers();
headers.set('Authorization', 'Basic ' + btoa(username + ":" + password));
try {
const resp = await fetch('/login', {
method: 'POST',
headers,
});
if (resp.ok) {
window.location.href = '/';
} else if (resp.status === 401) {
errorDiv.textContent = "Invalid username or password.";
errorDiv.style.display = "block";
} else {
errorDiv.textContent = "Unknown error (" + resp.status + ").";
errorDiv.style.display = "block";
}
} catch (err) {
errorDiv.textContent = "Network error.";
errorDiv.style.display = "block";
}
};
</script>
</body>
</html>