Make a separate login page and protect assets.

This commit is contained in:
James Pace 2026-08-26 12:06:40 -04:00
parent 01523517d2
commit 28fc4e0f68
5 changed files with 18426 additions and 3 deletions

View File

@ -14,7 +14,7 @@ install(DIRECTORY
# Install launch and param files.
install(DIRECTORY
launch params
launch params assets
DESTINATION share/${PROJECT_NAME}/
)

View File

@ -26,6 +26,8 @@ class Api:
ui_share_directory = get_package_share_directory(self._facts.get_ui_pkg())
ui_static_directory = ui_share_directory + "/dist/assets"
server_static_directory = get_package_share_directory("am_i_up") + "/assets"
app = web.Application(middlewares=[self._authenticator.build_middleware()])
app.add_routes([
web.get('/api/ping', self.ping),
@ -39,9 +41,12 @@ class Api:
web.post("/api/mediamtx/auth", self.mediamtx_auth),
web.get("/api/mediamtx/login", self.mediamtx_login),
web.static("/assets", ui_static_directory),
web.static("/server_assets", server_static_directory),
web.get('/login', self.login_page),
# we're not actually using key anywhere, but doing this allows react router
# to work correctly.
web.get("/{key}", self.index)
web.get("/{key}", self.index),
web.get("/", self.index)
])
url = "0.0.0.0"
@ -58,7 +63,11 @@ class Api:
await runner.cleanup()
def get_open_endpoints(self):
return ["/login", "/api/login", "/assets/(.*)", "/api/mediamtx/auth"]
return ["/login", "/api/login", "/server_assets/(.*)", "/api/mediamtx/auth"]
async def login_page(self, request):
login_page = get_package_share_directory("am_i_up") + "/assets/login.html"
return web.FileResponse(login_page)
async def mediamtx_auth(self, request):
# Take the mediamtx json and figure out if I'm a valid user.

6312
assets/bootstrap.bundle.js vendored Normal file

File diff suppressed because it is too large Load Diff

12048
assets/bootstrap.css vendored Normal file

File diff suppressed because it is too large Load Diff

54
assets/login.html Normal file
View File

@ -0,0 +1,54 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap HTML Example</title>
<link href="server_assets/bootstrap.css" rel="stylesheet">
<style>
.vert-padded {
padding-top: 10px;
padding-bottom: 10px;
}
</style>
</head>
<body>
<div>
<div class="container vert-padded">
<form id="loginForm">
<div class="mb-3">
<label for="passwordForm" class="form-label">Password</label>
<input name="password" type="password" class="form-control" id="passwordForm" />
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
<script>
console.log("Hello");
document.getElementById('loginForm').addEventListener('submit', async (event) => {
console.log("submit");
event.preventDefault();
console.log(event.target);
const formEntries = new FormData(event.target);
const formData = Object.fromEntries(formEntries);
console.log(formData);
const resp = await fetch("/api/login", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(formData),
});
if (resp.redirected) {
window.location.assign("/");
}
});
</script>
<script src="server_assets/bootstrap.bundle.js"</script>
</body>
</html>