ASF-Nabd/sso
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature1

Browse Source
This commit is contained in:
mahmamdouh
2026-01-25 21:02:45 +01:00
parent 5b868a6cde
commit 01863c1df0
10 changed files with 399 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/index.html
View File

@@ -38,6 +38,7 @@
<div class="flex gap-4 mb-8">
<button class="btn btn-primary" onclick="showSection('users')">Users</button>
<button class="btn btn-secondary" onclick="showSection('apps')">Applications</button>
<button class="btn btn-secondary" onclick="showSection('requests')">Requests</button>
</div>
<!-- Users Section -->
@@ -88,6 +89,31 @@
</table>
</div>
</section>
<!-- Requests Section -->
<section id="requests-section" class="hidden">
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl">Access Requests</h2>
<button class="btn btn-primary" onclick="loadRequests()">Refresh</button>
</div>
<div class="card">
<table id="requests-table">
<thead>
<tr>
<th>ID</th>
<th>Username</th>
<th>Email</th>
<th>Requested Apps</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<!-- Requests will be populated here -->
</tbody>
</table>
</div>
</section>
</main>
</div>

148
frontend/register.html Normal file
View File

@@ -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>

57
frontend/static/js/app.js
View File

@@ -14,6 +14,8 @@ const usersSection = document.getElementById("users-section");
const appsSection = document.getElementById("apps-section");
const usersTableBody = document.querySelector("#users-table tbody");
const appsTableBody = document.querySelector("#apps-table tbody");
const requestsSection = document.getElementById("requests-section");
const requestsTableBody = document.querySelector("#requests-table tbody");
// Init
function init() {
@@ -40,11 +42,18 @@ function showSection(section) {
if (section === 'users') {
usersSection.classList.remove("hidden");
appsSection.classList.add("hidden");
requestsSection.classList.add("hidden");
loadUsers();
} else {
} else if (section === 'apps') {
usersSection.classList.add("hidden");
appsSection.classList.remove("hidden");
requestsSection.classList.add("hidden");
loadApps();
} else {
usersSection.classList.add("hidden");
appsSection.classList.add("hidden");
requestsSection.classList.remove("hidden");
loadRequests();
}
}
@@ -156,6 +165,52 @@ async function loadApps() {
`).join("");
}
// Requests
async function loadRequests() {
const res = await authFetch(`${API_URL}/requests/`);
const requests = await res.json();
requestsTableBody.innerHTML = requests.map(req => {
const appsList = req.requested_apps.map(app =>
`<span class="badge badge-info">${app.name}</span>`
).join(" ");
return `
<tr>
<td>${req.id}</td>
<td>${req.username}</td>
<td>${req.email}</td>
<td>${appsList}</td>
<td>${req.status}</td>
<td>
<button class="btn btn-primary" onclick="approveRequest(${req.id})">Approve</button>
<button class="btn btn-secondary" onclick="rejectRequest(${req.id})">Reject</button>
</td>
</tr>
`}).join("");
}
window.approveRequest = async (id) => {
if (!confirm("Approve this request?")) return;
try {
const res = await authFetch(`${API_URL}/requests/${id}/approve`, { method: "POST" });
if (!res.ok) throw new Error("Failed to approve");
loadRequests();
} catch (err) {
alert(err.message);
}
};
window.rejectRequest = async (id) => {
if (!confirm("Reject this request?")) return;
try {
const res = await authFetch(`${API_URL}/requests/${id}/reject`, { method: "POST" });
if (!res.ok) throw new Error("Failed to reject");
loadRequests();
} catch (err) {
alert(err.message);
}
};
// Modals
function openModal(id) {
document.getElementById(id).classList.remove("hidden");