gitea-admin/gh-christianlouis-docuelevate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add 404.html and new upload page

Browse Source
This commit is contained in:
Christian Krakau-Louis
2025-03-25 21:16:02 +01:00
parent ff12e733ea
commit b95d13df1f
3 changed files with 107 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/frontend.py
+6 -2
View File
@@ -1,5 +1,5 @@
# app/frontend.py (new file or inline in main.py)
from fastapi import APIRouter, Request
from fastapi import APIRouter, Request, status
from fastapi.responses import FileResponse
from fastapi.staticfiles import StaticFiles
from app.auth import require_login
@@ -24,4 +24,8 @@ async def serve_upload(request: Request):
# 3) Serve favicon.ico from the frontend folder
@router.get("/favicon.ico", response_class=FileResponse)
def favicon():
return os.path.join(frontend_folder, "favicon.ico")
return os.path.join(frontend_folder, "favicon.ico")
@app.exception_handler(404)
async def custom_404_handler(request: Request, exc):
return FileResponse("frontend/404.html", status_code=status.HTTP_404_NOT_FOUND)
frontend/404.html
+21
View File
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>404 - Page not found</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="bg-gray-50 h-screen flex flex-col items-center justify-center">
<h1 class="text-4xl font-bold mb-4">404 - Page not found</h1>
<p class="text-gray-700 mb-8">
Sorry, we couldn’t find the page you’re looking for.
</p>
<a
href="/"
class="text-blue-600 underline text-lg hover:text-blue-800"
>
&larr; Back to home
</a>
</body>
</html>
frontend/index.html
+80 -27
View File
@@ -1,45 +1,78 @@
<!-- File: frontend/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Document Processor - Upload</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Tailwind via CDN or your own build -->
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<script>
// Optional: Additional JS for drag-and-drop, or you can keep it inline.
</script>
</head>
<body class="bg-gray-50 h-screen flex flex-col items-center justify-center">
<h1 class="text-3xl font-bold mb-8">Upload a File</h1>
<body class="bg-gray-50 h-screen flex flex-col">
<div
id="dropZone"
class="border-4 border-dashed border-gray-300 rounded-lg p-8 bg-white text-center w-1/2"
ondrop="handleDrop(event)"
ondragover="handleDragOver(event)"
>
<p class="text-gray-500">
Drag & drop a file here, or click to select a file.
</p>
<input
id="fileInput"
type="file"
class="hidden"
onchange="handleFileSelect(event)"
/>
</div>
<!-- Navigation Bar -->
<nav class="bg-white shadow">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between h-16 items-center">
<!-- Brand -->
<div class="flex-shrink-0">
<a href="/" class="text-xl font-bold text-blue-500 hover:text-blue-700">
Document Processor
</a>
</div>
<!-- Menu items on the right -->
<div class="flex space-x-4 items-center">
<!-- Example link to /upload (current page), or other pages -->
<a href="/upload" class="text-gray-700 hover:text-gray-900">
Upload
</a>
<!-- Placeholder for future pages -->
<a href="/some-other" class="text-gray-700 hover:text-gray-900">
Some Page
</a>
<!-- Dynamic login/logout section -->
<div id="authSection" class="text-gray-700 hover:text-gray-900"></div>
</div>
</div>
</nav>
<div id="statusMessage" class="mt-4 text-gray-700"></div>
<!-- Main content area -->
<main class="flex-grow flex flex-col items-center justify-center p-8">
<h1 class="text-3xl font-bold mb-8">Upload a File</h1>
<div
id="dropZone"
class="border-4 border-dashed border-gray-300 rounded-lg p-8 bg-white text-center w-full max-w-lg"
ondrop="handleDrop(event)"
ondragover="handleDragOver(event)"
>
<p class="text-gray-500 mb-4">
Drag & drop a file here, or click to select a file.
</p>
<input
id="fileInput"
type="file"
class="hidden"
onchange="handleFileSelect(event)"
/>
</div>
<div id="statusMessage" class="mt-4 text-gray-700"></div>
</main>
<!-- Footer (optional) -->
<footer class="bg-white shadow mt-auto">
<div class="max-w-7xl mx-auto px-4 py-4 text-center text-gray-600">
&copy; 2025 Document Processor - All rights reserved.
</div>
</footer>
<!-- JavaScript -->
<script>
// 1) Drag-and-drop / file input logic
const dropZone = document.getElementById("dropZone");
const fileInput = document.getElementById("fileInput");
const statusMessage = document.getElementById("statusMessage");
dropZone.addEventListener("click", () => {
fileInput.click();
});
dropZone.addEventListener("click", () => fileInput.click());
function handleDragOver(e) {
e.preventDefault();
@@ -65,7 +98,6 @@
statusMessage.textContent = `Uploading ${file.name}...`;
try {
// We'll POST the file to /upload
let formData = new FormData();
formData.append("file", file);
@@ -84,6 +116,27 @@
statusMessage.textContent = `Error: ${err}`;
}
}
// 2) Example dynamic auth check: if you have an endpoint like /api/whoami
// that returns JSON with { email: "..."} if logged in, or 401 if not.
(async function checkAuth() {
try {
const resp = await fetch("/api/whoami");
if (resp.ok) {
const data = await resp.json();
document.getElementById("authSection").innerHTML =
`Logged in as <strong>${data.email}</strong> <a href="/logout" class="ml-2 text-blue-600">Logout</a>`;
} else {
// If 401 or other non-OK status => show Login link
document.getElementById("authSection").innerHTML =
`<a href="/login" class="text-blue-600">Login</a>`;
}
} catch (error) {
// If fetch fails, also show login
document.getElementById("authSection").innerHTML =
`<a href="/login" class="text-blue-600">Login</a>`;
}
})();
</script>
</body>
</html>