feature1

2026-01-25 21:02:45 +01:00
parent 5b868a6cde
commit 01863c1df0
10 changed files with 399 additions and 7 deletions
--- a/frontend/register.html
+++ b/frontend/register.html
@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ASF SSO - Request Access</title>
+    <link rel="stylesheet" href="/static/css/style.css">
+    <style>
+        .checkbox-group {
+            text-align: left;
+            max-height: 200px;
+            overflow-y: auto;
+            border: 1px solid #ddd;
+            padding: 10px;
+            border-radius: 4px;
+            margin-bottom: 1rem;
+        }
+
+        .checkbox-group label {
+            display: block;
+            margin-bottom: 5px;
+            cursor: pointer;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="flex items-center justify-center" style="min-height: 100vh; padding: 2rem;">
+        <div class="card text-center" style="width: 100%; max-width: 500px;">
+            <img src="/static/img/logo.png" alt="ASF Logo" class="logo" style="height: 80px; margin-bottom: 2rem;">
+            <h2 class="text-2xl mb-4">Request Access</h2>
+
+            <form id="register-form">
+                <input type="text" id="reg-username" placeholder="Username" required>
+                <input type="email" id="reg-email" placeholder="Email" required>
+                <input type="password" id="reg-password" placeholder="Password" required>
+
+                <h3 class="text-lg mb-2" style="text-align: left;">Select Applications</h3>
+                <div id="apps-list" class="checkbox-group">
+                    <p>Loading applications...</p>
+                </div>
+
+                <button type="submit" class="btn btn-primary w-full">Submit Request</button>
+            </form>
+
+            <p id="reg-message" class="mt-4 hidden"></p>
+            <p class="mt-4">
+                <a href="/" class="text-accent">Back to Login</a>
+            </p>
+        </div>
+    </div>
+
+    <script>
+        const API_URL = "";
+
+        // Load Apps
+        async function loadApps() {
+            try {
+                // We can use the public /sso/verify endpoint? No, we need a public apps list or just try to fetch apps if allowed?
+                // Actually, listing apps usually requires auth. 
+                // BUT, for registration, we need to know what to ask for.
+                // Let's assume we can fetch apps. If not, we might need a public endpoint for apps.
+                // Wait, the previous implementation of /apps/ required auth?
+                // Let's check backend/routers/apps.py.
+
+                // If /apps/ is protected, we need to make a public one or just hardcode for now?
+                // Better: Modify apps router to allow listing? Or just try.
+                // If it fails, we might need to fix it.
+
+                // Let's try to fetch. If 401, we have a problem.
+                // Assuming for now we might need to make a public endpoint or use a specific one.
+                // Let's check backend/routers/apps.py first.
+
+                const res = await fetch(`${API_URL}/apps/public`); // We might need to create this
+                if (!res.ok) throw new Error("Could not load applications");
+
+                const apps = await res.json();
+                const container = document.getElementById("apps-list");
+
+                if (apps.length === 0) {
+                    container.innerHTML = "<p>No applications available.</p>";
+                    return;
+                }
+
+                container.innerHTML = apps.map(app => `
+                    <label>
+                        <input type="checkbox" name="app" value="${app.id}"> ${app.name}
+                    </label>
+                `).join("");
+            } catch (err) {
+                console.error(err);
+                document.getElementById("apps-list").innerHTML = "<p>Error loading applications.</p>";
+            }
+        }
+
+        // Submit
+        document.getElementById("register-form").addEventListener("submit", async (e) => {
+            e.preventDefault();
+            const username = document.getElementById("reg-username").value;
+            const email = document.getElementById("reg-email").value;
+            const password = document.getElementById("reg-password").value;
+
+            const checkboxes = document.querySelectorAll('input[name="app"]:checked');
+            const appIds = Array.from(checkboxes).map(cb => parseInt(cb.value));
+
+            const btn = e.target.querySelector("button");
+            const msg = document.getElementById("reg-message");
+
+            btn.disabled = true;
+            btn.textContent = "Submitting...";
+            msg.classList.add("hidden");
+
+            try {
+                const res = await fetch(`${API_URL}/requests/`, {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({
+                        username,
+                        email,
+                        password,
+                        app_ids: appIds
+                    })
+                });
+
+                const data = await res.json();
+
+                if (!res.ok) throw new Error(data.detail || "Registration failed");
+
+                msg.className = "mt-4 text-success";
+                msg.textContent = "Request submitted successfully! You will receive an email once approved.";
+                msg.classList.remove("hidden");
+                e.target.reset();
+            } catch (err) {
+                msg.className = "mt-4 text-accent";
+                msg.textContent = err.message;
+                msg.classList.remove("hidden");
+            } finally {
+                btn.disabled = false;
+                btn.textContent = "Submit Request";
+            }
+        });
+
+        loadApps();
+    </script>
+</body>
+
+</html>