SitiWeb/siti-plugin-repo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement user authentication and license management system

Browse Source 
- Added schema for users, licenses, and license hostnames in the database.
- Created storage utility for reading and writing JSON files.
- Developed user service for user registration, authentication, and retrieval.
- Implemented authentication middleware to protect routes.
- Built LicenseCard component to display license details.
- Created SiteNav component for navigation with user authentication status.
- Established AuthContext for managing authentication state and actions.
- Developed Home page to display available plugins.
- Created LicenseManager page for managing licenses with forms for creation and verification.
- Implemented PluginDetail page to show detailed information about a specific plugin.
- Added utility functions for date formatting.
This commit is contained in:
Roberto Guagliardo
2026-02-01 02:20:28 +00:00
parent f4411ffd88
commit 7b0ca40c4f
27 changed files with 2344 additions and 428 deletions
Download Patch File Download Diff File Expand all files Collapse all files

305
src/App.css
View File

@@ -10,6 +10,59 @@
padding: 48px 8vw 64px;
}
.site-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 32px;
flex-wrap: wrap;
}
.nav-logo {
font-weight: 700;
color: inherit;
text-decoration: none;
font-size: 1.1rem;
}
.nav-links {
display: flex;
gap: 12px;
}
.nav-user {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
color: #475569;
}
.nav-user-name {
font-weight: 600;
}
.nav-user-guest {
color: #94a3b8;
font-size: 0.85rem;
}
.nav-link {
padding: 8px 16px;
border-radius: 999px;
border: 1px solid transparent;
text-decoration: none;
color: #475569;
font-weight: 600;
}
.nav-link.active {
background: #eef2ff;
color: #4338ca;
border-color: #c7d2fe;
}
.page {
display: flex;
flex-direction: column;
@@ -46,6 +99,12 @@
max-width: 520px;
}
.hint {
margin: 8px 0 0;
font-size: 0.9rem;
color: #64748b;
}
.cta {
background: #4f46e5;
color: #fff;
@@ -55,6 +114,11 @@
font-weight: 600;
box-shadow: 0 8px 24px rgba(79, 70, 229, 0.2);
transition: transform 0.2s ease, box-shadow 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
}
.cta:hover {
@@ -62,6 +126,26 @@
box-shadow: 0 12px 30px rgba(79, 70, 229, 0.3);
}
.ghost {
border: 1px solid #c7d2fe;
color: #4338ca;
padding: 8px 14px;
border-radius: 999px;
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: transparent;
cursor: pointer;
}
.ghost-small {
padding: 6px 12px;
font-size: 0.85rem;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
@@ -139,15 +223,6 @@
text-decoration: none;
}
.ghost {
border: 1px solid #c7d2fe;
color: #4338ca;
padding: 8px 14px;
border-radius: 999px;
text-decoration: none;
font-weight: 600;
}
.state {
background: #fff;
border-radius: 16px;
@@ -161,6 +236,16 @@
color: #b91c1c;
}
.state.success {
background: #dcfce7;
color: #166534;
}
.state.inline {
margin-top: 16px;
padding: 16px;
}
.footer {
margin-top: 48px;
color: #94a3b8;
@@ -225,6 +310,144 @@
font-weight: 600;
}
.license-meta-bar {
display: flex;
gap: 24px;
flex-wrap: wrap;
color: #64748b;
font-size: 0.95rem;
}
.license-forms {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
.form-grid {
display: flex;
flex-direction: column;
gap: 16px;
}
.field {
display: flex;
flex-direction: column;
gap: 8px;
font-size: 0.9rem;
color: #475569;
}
.field input,
.field select,
.field textarea {
border-radius: 12px;
border: 1px solid #e2e8f0;
padding: 10px 14px;
font-size: 1rem;
font-family: inherit;
background: #fff;
color: inherit;
}
.license-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
.license-card-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.license-card h3 {
margin: 0;
}
.license-subtitle {
margin: 4px 0 0;
color: #94a3b8;
font-size: 0.9rem;
}
.license-note {
margin-top: 4px;
font-size: 0.95rem;
color: #475569;
}
.license-detail-list {
margin-top: 0;
}
.host-list ul {
list-style: none;
padding: 0;
margin: 8px 0 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.host-list li {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
font-size: 0.9rem;
color: #64748b;
}
.host-list li strong {
color: inherit;
}
.license-links {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-top: auto;
}
.ghost-pill {
border: 1px solid #cbd5f5;
border-radius: 999px;
padding: 4px 10px;
font-size: 0.85rem;
color: #475569;
}
.auth-card {
gap: 16px;
}
.auth-tabs {
display: flex;
gap: 8px;
}
.auth-tab {
flex: 1;
border-radius: 999px;
border: 1px solid #e2e8f0;
background: #f8fafc;
padding: 8px 12px;
font-weight: 600;
cursor: pointer;
color: #475569;
}
.auth-tab.active {
background: #eef2ff;
border-color: #c7d2fe;
color: #4338ca;
}
@media (max-width: 600px) {
.app {
padding: 40px 6vw 56px;
@@ -241,6 +464,28 @@
color: #e2e8f0;
}
.site-nav {
border-color: rgba(99, 102, 241, 0.4);
}
.nav-link {
color: #cbd5f5;
}
.nav-link.active {
background: rgba(79, 70, 229, 0.2);
border-color: rgba(79, 70, 229, 0.4);
color: #faf5ff;
}
.nav-user {
color: #cbd5f5;
}
.nav-user-guest {
color: #94a3b8;
}
.subtitle {
color: #cbd5f5;
}
@@ -277,6 +522,36 @@
color: #e0e7ff;
}
.auth-tab {
border-color: #312e81;
background: #1e1b4b;
color: #cbd5f5;
}
.auth-tab.active {
background: rgba(79, 70, 229, 0.2);
border-color: rgba(79, 70, 229, 0.6);
color: #faf5ff;
}
.hint,
.license-meta-bar,
.license-note {
color: #cbd5f5;
}
.field input,
.field select,
.field textarea {
background: #1e1b4b;
border-color: #312e81;
color: #e2e8f0;
}
.host-list li {
color: #cbd5f5;
}
.detail-list div {
color: #cbd5f5;
}
@@ -300,7 +575,17 @@
color: #fee2e2;
}
.state.success {
background: #14532d;
color: #bbf7d0;
}
.ghost-pill {
border-color: #4f46e5;
color: #cbd5f5;
}
.footer {
color: #94a3b8;
}
}
}

217
src/App.jsx
View File

@@ -1,221 +1,18 @@
import { useEffect, useMemo, useState } from "react";
import { Link, Route, Routes, useParams } from "react-router-dom";
import { Route, Routes } from "react-router-dom";
import SiteNav from "./components/SiteNav.jsx";
import Home from "./pages/Home.jsx";
import PluginDetail from "./pages/PluginDetail.jsx";
import LicenseManager from "./pages/LicenseManager.jsx";
import "./App.css";
function Home() {
const [plugins, setPlugins] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [lastSync, setLastSync] = useState(null);
useEffect(() => {
async function loadPlugins() {
try {
const response = await fetch("/api/plugins");
if (!response.ok) {
throw new Error("Kon plugins niet laden");
}
const data = await response.json();
setPlugins(data.items || []);
setLastSync(data.updatedAt);
} catch (err) {
setError("Laden van GitHub data is mislukt.");
} finally {
setLoading(false);
}
}
loadPlugins();
}, []);
return (
<div className="page">
<header className="hero">
<div>
<p className="eyebrow">WordPress plugin overzicht</p>
<h1>Siti Plugin Repo</h1>
<p className="subtitle">Al je publieke WordPress plugins op één plek.</p>
</div>
<a className="cta" href="https://github.com/SitiWeb" target="_blank" rel="noreferrer">
GitHub SitiWeb
</a>
</header>
<section className="grid">
{loading && <div className="state">Bezig met laden…</div>}
{error && <div className="state error">{error}</div>}
{!loading && !error && plugins.length === 0 && (
<div className="state">Geen repositories gevonden.</div>
)}
{plugins.map((plugin) => {
const displayName = plugin.manifest?.plugin_name || plugin.name;
const description = plugin.manifest?.description || plugin.description;
return (
<article className="card" key={plugin.fullName}>
<div className="card-header">
<h2>{displayName}</h2>
<span className="pill">{plugin.fullName}</span>
</div>
<p>{description}</p>
<div className="meta">
<span>★ {plugin.stars}</span>
<span>Forks {plugin.forks}</span>
<span>Issues {plugin.issues}</span>
</div>
{plugin.topics.length > 0 && (
<div className="topics">
{plugin.topics.slice(0, 4).map((topic) => (
<span className="topic" key={topic}>{topic}</span>
))}
</div>
)}
<div className="actions">
<Link className="link" to={`/plugin/${plugin.fullName}`}>
Bekijk details →
</Link>
<a className="ghost" href={plugin.repoUrl} target="_blank" rel="noreferrer">
GitHub
</a>
</div>
</article>
);
})}
</section>
<footer className="footer">
<span>
Laatste sync: {lastSync ? new Date(lastSync).toLocaleString("nl-NL") : "-"}
</span>
</footer>
</div>
);
}
function PluginDetail() {
const { owner, repo } = useParams();
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
async function loadDetail() {
try {
const response = await fetch(`/api/plugins/${owner}/${repo}`);
if (!response.ok) {
throw new Error("Kon details niet laden");
}
const detail = await response.json();
setData(detail);
} catch (err) {
setError("Laden van plugin details is mislukt.");
} finally {
setLoading(false);
}
}
loadDetail();
}, [owner, repo]);
const manifest = data?.manifest;
const displayName = manifest?.plugin_name || data?.name || repo;
const description = manifest?.description || data?.description;
const author = manifest?.author || "-";
const version = manifest?.version || "-";
const releases = useMemo(() => data?.releases || [], [data]);
const commits = useMemo(() => data?.commits || [], [data]);
return (
<div className="page">
<header className="detail-hero">
<div>
<p className="eyebrow">Plugin details</p>
<h1>{displayName}</h1>
<p className="subtitle">{description}</p>
</div>
<div className="detail-actions">
<Link className="ghost" to="/">← Terug</Link>
{data?.repoUrl && (
<a className="cta" href={data.repoUrl} target="_blank" rel="noreferrer">
GitHub
</a>
)}
</div>
</header>
{loading && <div className="state">Bezig met laden…</div>}
{error && <div className="state error">{error}</div>}
{!loading && !error && data && (
<section className="detail-grid">
<div className="card">
<h2>Manifest</h2>
<div className="detail-list">
<div>
<span>Naam</span>
<strong>{displayName}</strong>
</div>
<div>
<span>Versie</span>
<strong>{version}</strong>
</div>
<div>
<span>Auteur</span>
<strong>{author}</strong>
</div>
<div>
<span>Repository</span>
<strong>{data.fullName}</strong>
</div>
</div>
{manifest?.author_url && (
<a className="link" href={manifest.author_url} target="_blank" rel="noreferrer">
Auteur website →
</a>
)}
</div>
<div className="card">
<h2>Releases</h2>
{releases.length === 0 && <p>Geen releases gevonden.</p>}
<ul className="list">
{releases.map((release) => (
<li key={release.tag}>
<a href={release.url} target="_blank" rel="noreferrer">
{release.name}
</a>
<span>{release.publishedAt ? new Date(release.publishedAt).toLocaleDateString("nl-NL") : "-"}</span>
</li>
))}
</ul>
</div>
<div className="card">
<h2>Recente commits</h2>
{commits.length === 0 && <p>Geen commits gevonden.</p>}
<ul className="list">
{commits.map((commit) => (
<li key={commit.sha}>
<a href={commit.url} target="_blank" rel="noreferrer">
{commit.message?.split("\n")[0] || commit.sha.slice(0, 7)}
</a>
<span>{commit.author || "-"}</span>
</li>
))}
</ul>
</div>
</section>
)}
</div>
);
}
export default function App() {
return (
<div className="app">
<SiteNav />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/plugin/:owner/:repo" element={<PluginDetail />} />
<Route path="/licenses" element={<LicenseManager />} />
</Routes>
</div>
);

65
src/components/LicenseCard.jsx Normal file
View File

@@ -0,0 +1,65 @@
import { formatDate, formatDateTime } from "../utils/dates.js";
export default function LicenseCard({ license }) {
const hostnames = license.hostnames || [];
const primaryHostname = license.primaryHostname || "Nog niet gekoppeld";
return (
<article className="card license-card">
<div className="license-card-header">
<div>
<h3>{license.pluginName || license.label || "Licentie"}</h3>
<p className="license-subtitle">{license.repoFullName || "-"}</p>
</div>
<span className="pill">{license.key}</span>
</div>
<div className="detail-list license-detail-list">
<div>
<span>Versie</span>
<strong>{license.pluginVersion || "-"}</strong>
</div>
<div>
<span>Hostname</span>
<strong>{primaryHostname}</strong>
</div>
<div>
<span>Aangemaakt</span>
<strong>{formatDate(license.createdAt)}</strong>
</div>
<div>
<span>Laatste check</span>
<strong>{formatDateTime(license.lastVersionCheckAt)}</strong>
</div>
</div>
{license.note && <p className="license-note">Notitie: {license.note}</p>}
{hostnames.length > 0 && (
<div className="host-list">
<p className="hint">Hostnames</p>
<ul>
{hostnames.map((host) => (
<li key={`${host.hostname}-${host.firstSeenAt || host.lastSeenAt}`}>
<div>
<strong>{host.hostname}</strong>
<span>{host.hits || 0} checks</span>
</div>
<span>{formatDateTime(host.lastSeenAt)}</span>
</li>
))}
</ul>
</div>
)}
<div className="license-links">
{license.repoUrl && (
<a className="link" href={license.repoUrl} target="_blank" rel="noreferrer">
Repository →
</a>
)}
{license.pluginName && <span className="ghost-pill">{license.pluginName}</span>}
</div>
</article>
);
}

29
src/components/SiteNav.jsx Normal file
View File

@@ -0,0 +1,29 @@
import { Link, NavLink } from "react-router-dom";
import { useAuth } from "../context/AuthContext.jsx";
export default function SiteNav() {
const linkClass = ({ isActive }) => (isActive ? "nav-link active" : "nav-link");
const { user, logout } = useAuth();
return (
<nav className="site-nav">
<Link className="nav-logo" to="/">Siti Plugin Repo</Link>
<div className="nav-links">
<NavLink to="/" end className={linkClass}>Plugins</NavLink>
<NavLink to="/licenses" className={linkClass}>Licenties</NavLink>
</div>
<div className="nav-user">
{user ? (
<>
<span className="nav-user-name">Hallo, {user.name}</span>
<button className="ghost ghost-small" type="button" onClick={logout}>
Uitloggen
</button>
</>
) : (
<span className="nav-user-guest">Niet ingelogd</span>
)}
</div>
</nav>
);
}

140
src/context/AuthContext.jsx Normal file
View File

@@ -0,0 +1,140 @@
import { createContext, useContext, useEffect, useMemo, useState } from "react";
const AuthContext = createContext(null);
function getStoredToken() {
try {
return localStorage.getItem("authToken") || "";
} catch {
return "";
}
}
function persistToken(token) {
try {
if (token) {
localStorage.setItem("authToken", token);
} else {
localStorage.removeItem("authToken");
}
} catch {
// ignore storage issues
}
}
export function AuthProvider({ children }) {
const [token, setToken] = useState(getStoredToken);
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(Boolean(getStoredToken()));
const [error, setError] = useState(null);
useEffect(() => {
if (!token) {
setUser(null);
setLoading(false);
setError(null);
return;
}
let cancelled = false;
setLoading(true);
fetch("/api/auth/me", {
headers: { Authorization: `Bearer ${token}` }
})
.then(async (response) => {
const data = await response.json().catch(() => ({}));
if (!response.ok) {
throw new Error(data.error || "Kon sessie niet verifiëren.");
}
if (!cancelled) {
setUser(data.user || null);
setError(null);
}
})
.catch(() => {
if (!cancelled) {
setUser(null);
setToken("");
persistToken("");
}
})
.finally(() => {
if (!cancelled) {
setLoading(false);
}
});
return () => {
cancelled = true;
};
}, [token]);
async function login(credentials) {
setError(null);
const response = await fetch("/api/auth/login", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(credentials)
});
const data = await response.json().catch(() => ({}));
if (!response.ok) {
throw new Error(data.error || "Login mislukt.");
}
setToken(data.token);
persistToken(data.token);
setUser(data.user);
return data.user;
}
async function register(credentials) {
setError(null);
const response = await fetch("/api/auth/register", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(credentials)
});
const data = await response.json().catch(() => ({}));
if (!response.ok) {
throw new Error(data.error || "Registratie mislukt.");
}
setToken(data.token);
persistToken(data.token);
setUser(data.user);
return data.user;
}
function logout() {
setToken("");
persistToken("");
setUser(null);
}
const authFetch = useMemo(() => {
return (url, options = {}) => {
const headers = {
...(options.headers || {}),
...(token ? { Authorization: `Bearer ${token}` } : {})
};
return fetch(url, { ...options, headers });
};
}, [token]);
const value = {
user,
token,
loading,
error,
login,
register,
logout,
authFetch
};
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}
export function useAuth() {
const ctx = useContext(AuthContext);
if (!ctx) {
throw new Error("useAuth moet binnen een AuthProvider gebruikt worden");
}
return ctx;
}

5
src/main.jsx
View File

@@ -2,12 +2,15 @@ import React from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App.jsx";
import { AuthProvider } from "./context/AuthContext.jsx";
import "./index.css";
createRoot(document.getElementById("root")).render(
<React.StrictMode>
<BrowserRouter>
<App />
<AuthProvider>
<App />
</AuthProvider>
</BrowserRouter>
</React.StrictMode>
);

89
src/pages/Home.jsx Normal file
View File

@@ -0,0 +1,89 @@
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
export default function Home() {
const [plugins, setPlugins] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [lastSync, setLastSync] = useState(null);
useEffect(() => {
async function loadPlugins() {
try {
const response = await fetch("/api/plugins");
if (!response.ok) {
throw new Error("Kon plugins niet laden");
}
const data = await response.json();
setPlugins(data.items || []);
setLastSync(data.updatedAt);
} catch (err) {
setError("Laden van GitHub data is mislukt.");
} finally {
setLoading(false);
}
}
loadPlugins();
}, []);
return (
<div className="page">
<header className="hero">
<div>
<p className="eyebrow">WordPress plugin overzicht</p>
<h1>Siti Plugin Repo</h1>
<p className="subtitle">Al je publieke WordPress plugins op één plek.</p>
</div>
<a className="cta" href="https://github.com/SitiWeb" target="_blank" rel="noreferrer">
GitHub SitiWeb
</a>
</header>
<section className="grid">
{loading && <div className="state">Bezig met laden…</div>}
{error && <div className="state error">{error}</div>}
{!loading && !error && plugins.length === 0 && (
<div className="state">Geen repositories gevonden.</div>
)}
{plugins.map((plugin) => {
const displayName = plugin.manifest?.plugin_name || plugin.name;
const description = plugin.manifest?.description || plugin.description;
return (
<article className="card" key={plugin.fullName}>
<div className="card-header">
<h2>{displayName}</h2>
<span className="pill">{plugin.fullName}</span>
</div>
<p>{description}</p>
<div className="meta">
<span>★ {plugin.stars}</span>
<span>Forks {plugin.forks}</span>
<span>Issues {plugin.issues}</span>
</div>
{plugin.topics.length > 0 && (
<div className="topics">
{plugin.topics.slice(0, 4).map((topic) => (
<span className="topic" key={topic}>{topic}</span>
))}
</div>
)}
<div className="actions">
<Link className="link" to={`/plugin/${plugin.fullName}`}>
Bekijk details →
</Link>
<a className="ghost" href={plugin.repoUrl} target="_blank" rel="noreferrer">
GitHub
</a>
</div>
</article>
);
})}
</section>
<footer className="footer">
<span>Laatste sync: {lastSync ? new Date(lastSync).toLocaleString("nl-NL") : "-"}</span>
</footer>
</div>
);
}

476
src/pages/LicenseManager.jsx Normal file
View File

@@ -0,0 +1,476 @@
import { useCallback, useEffect, useMemo, useState } from "react";
import LicenseCard from "../components/LicenseCard.jsx";
import { formatDateTime } from "../utils/dates.js";
import { useAuth } from "../context/AuthContext.jsx";
export default function LicenseManager() {
const { user, token, authFetch, login, register: registerUser, loading: authLoading } = useAuth();
const [licenses, setLicenses] = useState([]);
const [plugins, setPlugins] = useState([]);
const [selectedPluginId, setSelectedPluginId] = useState("");
const [label, setLabel] = useState("");
const [note, setNote] = useState("");
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [creating, setCreating] = useState(false);
const [refreshing, setRefreshing] = useState(false);
const [lastSync, setLastSync] = useState(null);
const [formStatus, setFormStatus] = useState(null);
const [verifyStatus, setVerifyStatus] = useState(null);
const [verifying, setVerifying] = useState(false);
const [verifyKey, setVerifyKey] = useState("");
const [verifyHostname, setVerifyHostname] = useState("");
const isAuthenticated = Boolean(user && token);
useEffect(() => {
let cancelled = false;
async function loadPlugins() {
setLoading(true);
setError(null);
try {
const response = await fetch("/api/plugins");
const data = await response.json().catch(() => ({}));
if (!response.ok) {
throw new Error(data.error || "Kon plugins niet laden.");
}
if (cancelled) return;
setPlugins(data.items || []);
const firstPlugin = data.items?.[0];
if (firstPlugin) {
const defaultId = firstPlugin.ownerRepo || firstPlugin.fullName;
setSelectedPluginId((prev) => prev || defaultId);
}
} catch (err) {
if (!cancelled) {
setError(err.message || "Kon plugins niet laden.");
}
} finally {
if (!cancelled) {
setLoading(false);
}
}
}
loadPlugins();
return () => {
cancelled = true;
};
}, []);
const refreshLicenses = useCallback(
async (showStatus = true) => {
if (!token) {
setLicenses([]);
setLastSync(null);
if (showStatus) {
setFormStatus({ variant: "error", message: "Log in om licenties te beheren." });
}
return;
}
if (showStatus) {
setFormStatus(null);
}
setRefreshing(true);
try {
const response = await authFetch("/api/licenses");
const data = await response.json().catch(() => ({}));
if (response.status === 401) {
throw new Error("Sessie verlopen, log opnieuw in.");
}
if (!response.ok) {
throw new Error(data.error || "Kon licenties niet laden.");
}
setLicenses(data.items || []);
setLastSync(data.updatedAt);
} catch (err) {
if (showStatus) {
setFormStatus({ variant: "error", message: err.message });
}
} finally {
setRefreshing(false);
}
},
[authFetch, token]
);
useEffect(() => {
refreshLicenses(false);
}, [refreshLicenses]);
useEffect(() => {
if (!selectedPluginId && plugins.length > 0) {
const fallback = plugins[0].ownerRepo || plugins[0].fullName;
setSelectedPluginId(fallback);
}
}, [plugins, selectedPluginId]);
const selectedPlugin = useMemo(
() => plugins.find((plugin) => (plugin.ownerRepo || plugin.fullName) === selectedPluginId) || null,
[plugins, selectedPluginId]
);
const sortedLicenses = useMemo(() => {
const getTime = (value) => (value ? new Date(value).getTime() : 0);
return [...licenses].sort((a, b) => getTime(b.createdAt) - getTime(a.createdAt));
}, [licenses]);
async function handleCreateLicense(event) {
event.preventDefault();
setFormStatus(null);
if (!isAuthenticated) {
setFormStatus({ variant: "error", message: "Log in om een licentie aan te maken." });
return;
}
if (!selectedPlugin) {
setFormStatus({ variant: "error", message: "Selecteer een plugin." });
return;
}
setCreating(true);
try {
const payload = {
label:
label.trim() ||
selectedPlugin.manifest?.plugin_name ||
selectedPlugin.name ||
selectedPlugin.fullName,
note: note.trim() || undefined,
repo: {
repo: selectedPlugin.ownerRepo || selectedPlugin.fullName,
provider: selectedPlugin.provider || "github",
baseUrl: selectedPlugin.baseUrl
}
};
const response = await authFetch("/api/licenses", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload)
});
const data = await response.json().catch(() => ({}));
if (response.status === 401) {
throw new Error("Sessie verlopen, log opnieuw in.");
}
if (!response.ok) {
throw new Error(data.error || "Licentie aanmaken mislukt.");
}
setLicenses((prev) => [data, ...prev]);
setFormStatus({ variant: "success", message: "Licentie aangemaakt." });
setLabel("");
setNote("");
} catch (err) {
setFormStatus({ variant: "error", message: err.message });
} finally {
setCreating(false);
}
}
async function handleVerifyLicense(event) {
event.preventDefault();
setVerifyStatus(null);
if (!verifyKey.trim() || !verifyHostname.trim()) {
setVerifyStatus({ ok: false, message: "Vul zowel licentiecode als hostname in." });
return;
}
setVerifying(true);
try {
const response = await fetch("/api/licenses/verify", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
key: verifyKey.trim(),
hostname: verifyHostname.trim()
})
});
const data = await response.json().catch(() => ({}));
if (!response.ok) {
throw new Error(data.error || "Controle mislukt.");
}
setVerifyStatus({ ok: true, data });
if (data.license) {
setLicenses((prev) => prev.map((license) => (license.key === data.license.key ? data.license : license)));
}
} catch (err) {
setVerifyStatus({ ok: false, message: err.message });
} finally {
setVerifying(false);
}
}
const handleLogin = useCallback(
async (credentials) => {
await login(credentials);
await refreshLicenses(false);
},
[login, refreshLicenses]
);
const handleRegister = useCallback(
async (payload) => {
await registerUser(payload);
await refreshLicenses(false);
},
[registerUser, refreshLicenses]
);
const isLoadingState = loading || (authLoading && Boolean(token));
return (
<div className="page">
<header className="hero">
<div>
<p className="eyebrow">Licentiebeheer</p>
<h1>Licenties</h1>
<p className="subtitle">
Maak licenties voor iedere plugin en beheer welke hostname de licentie daadwerkelijk gebruikt.
</p>
<p className="hint">
Een licentie is geldig voor één hostname. De eerste hostname die controleert wordt automatisch gekoppeld als
licentiehouder.
</p>
</div>
<button className="ghost" type="button" onClick={() => refreshLicenses()} disabled={refreshing || !isAuthenticated}>
{refreshing ? "Vernieuwen…" : "Vernieuw lijst"}
</button>
</header>
<div className="license-meta-bar">
<span>Actieve licenties: {licenses.length}</span>
<span>Laatste update: {formatDateTime(lastSync)}</span>
{user && <span>Ingelogd als: {user.email}</span>}
</div>
{isLoadingState && <div className="state">Bezig met laden…</div>}
{error && <div className="state error">{error}</div>}
{!isLoadingState && !error && (
<>
<section className="license-forms">
{isAuthenticated ? (
<article className="card">
<h2>Nieuwe licentie</h2>
<p className="hint">Kies een plugin en genereer direct een licentiesleutel.</p>
<form className="form-grid" onSubmit={handleCreateLicense}>
<label className="field">
<span>Plugin</span>
<select
value={selectedPluginId}
onChange={(event) => setSelectedPluginId(event.target.value)}
disabled={plugins.length === 0}
>
{plugins.map((plugin) => {
const id = plugin.ownerRepo || plugin.fullName;
return (
<option key={id} value={id}>
{plugin.manifest?.plugin_name || plugin.name} ({plugin.fullName})
</option>
);
})}
</select>
</label>
<label className="field">
<span>Label (optioneel)</span>
<input
value={label}
onChange={(event) => setLabel(event.target.value)}
placeholder="Naam of klant"
/>
</label>
<label className="field">
<span>Notitie</span>
<textarea
value={note}
onChange={(event) => setNote(event.target.value)}
placeholder="Bijv. contactpersoon of extra info"
rows={3}
/>
</label>
<button className="cta" type="submit" disabled={creating || !selectedPlugin}>
{creating ? "Aanmaken…" : "Licentie aanmaken"}
</button>
</form>
{formStatus && (
<div className={`state inline ${formStatus.variant === "error" ? "error" : "success"}`}>
{formStatus.message}
</div>
)}
</article>
) : (
<AuthForms onLogin={handleLogin} onRegister={handleRegister} />
)}
<article className="card">
<h2>Test of valideer</h2>
<p className="hint">
Gebruik dit formulier zoals de plugin dat zou doen om de huidige versie en hostname te controleren.
</p>
<form className="form-grid" onSubmit={handleVerifyLicense}>
<label className="field">
<span>Licentiecode</span>
<input
value={verifyKey}
onChange={(event) => setVerifyKey(event.target.value)}
placeholder="SITI-XXXX-XXXX"
/>
</label>
<label className="field">
<span>Hostname</span>
<input
value={verifyHostname}
onChange={(event) => setVerifyHostname(event.target.value)}
placeholder="voorbeeld.nl"
/>
</label>
<button className="ghost" type="submit" disabled={verifying}>
{verifying ? "Controleren…" : "Controleer licentie"}
</button>
</form>
{verifyStatus && verifyStatus.ok && verifyStatus.data?.license && (
<div className="state success inline">
<strong>Licentie geldig</strong>
<p>
{verifyStatus.data.license.pluginName || "Plugin"} — versie {verifyStatus.data.license.pluginVersion || "-"}
</p>
<p>
Gekoppeld aan: <strong>{verifyStatus.data.license.primaryHostname || "Nog niet gekoppeld"}</strong>
</p>
</div>
)}
{verifyStatus && !verifyStatus.ok && (
<div className="state error inline">{verifyStatus.message}</div>
)}
</article>
</section>
{isAuthenticated ? (
<section className="license-grid">
{sortedLicenses.length === 0 ? (
<div className="state">Nog geen licenties aangemaakt.</div>
) : (
sortedLicenses.map((license) => <LicenseCard key={license.id || license.key} license={license} />)
)}
</section>
) : (
<div className="state">Log in of registreer om licenties te bekijken en te beheren.</div>
)}
</>
)}
</div>
);
}
function AuthForms({ onLogin, onRegister }) {
const [mode, setMode] = useState("login");
const [loginForm, setLoginForm] = useState({ identifier: "", password: "" });
const [registerForm, setRegisterForm] = useState({ username: "", name: "", email: "", password: "" });
const [status, setStatus] = useState(null);
const [submitting, setSubmitting] = useState(false);
async function handleSubmit(event) {
event.preventDefault();
setStatus(null);
setSubmitting(true);
try {
if (mode === "login") {
await onLogin(loginForm);
setStatus({ variant: "success", message: "Succesvol ingelogd." });
} else {
await onRegister(registerForm);
setStatus({ variant: "success", message: "Account aangemaakt en ingelogd." });
}
} catch (error) {
setStatus({ variant: "error", message: error.message || "Actie mislukt." });
} finally {
setSubmitting(false);
}
}
return (
<article className="card auth-card">
<div className="auth-tabs">
<button
type="button"
className={mode === "login" ? "auth-tab active" : "auth-tab"}
onClick={() => setMode("login")}
disabled={submitting}
>
Inloggen
</button>
<button
type="button"
className={mode === "register" ? "auth-tab active" : "auth-tab"}
onClick={() => setMode("register")}
disabled={submitting}
>
Registreren
</button>
</div>
<form className="form-grid" onSubmit={handleSubmit}>
{mode === "login" ? (
<>
<label className="field">
<span>Gebruikersnaam of e-mail</span>
<input
value={loginForm.identifier}
onChange={(event) => setLoginForm((prev) => ({ ...prev, identifier: event.target.value }))}
placeholder="jouwnaam of mail"
/>
</label>
<label className="field">
<span>Wachtwoord</span>
<input
type="password"
value={loginForm.password}
onChange={(event) => setLoginForm((prev) => ({ ...prev, password: event.target.value }))}
placeholder="••••••••"
/>
</label>
</>
) : (
<>
<label className="field">
<span>Gebruikersnaam</span>
<input
value={registerForm.username}
onChange={(event) => setRegisterForm((prev) => ({ ...prev, username: event.target.value }))}
placeholder="gebruikersnaam"
/>
</label>
<label className="field">
<span>Naam</span>
<input
value={registerForm.name}
onChange={(event) => setRegisterForm((prev) => ({ ...prev, name: event.target.value }))}
placeholder="Volledige naam"
/>
</label>
<label className="field">
<span>E-mailadres</span>
<input
type="email"
value={registerForm.email}
onChange={(event) => setRegisterForm((prev) => ({ ...prev, email: event.target.value }))}
placeholder="naam@bedrijf.nl"
/>
</label>
<label className="field">
<span>Wachtwoord</span>
<input
type="password"
value={registerForm.password}
onChange={(event) => setRegisterForm((prev) => ({ ...prev, password: event.target.value }))}
placeholder="Minimaal 8 karakters"
/>
</label>
</>
)}
<button className="cta" type="submit" disabled={submitting}>
{submitting ? "Verwerken…" : mode === "login" ? "Inloggen" : "Registreren"}
</button>
</form>
{status && (
<div className={`state inline ${status.variant === "error" ? "error" : "success"}`}>
{status.message}
</div>
)}
</article>
);
}

125
src/pages/PluginDetail.jsx Normal file
View File

@@ -0,0 +1,125 @@
import { useEffect, useMemo, useState } from "react";
import { Link, useParams } from "react-router-dom";
export default function PluginDetail() {
const { owner, repo } = useParams();
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
async function loadDetail() {
try {
const response = await fetch(`/api/plugins/${owner}/${repo}`);
if (!response.ok) {
throw new Error("Kon details niet laden");
}
const detail = await response.json();
setData(detail);
} catch (err) {
setError("Laden van plugin details is mislukt.");
} finally {
setLoading(false);
}
}
loadDetail();
}, [owner, repo]);
const manifest = data?.manifest;
const displayName = manifest?.plugin_name || data?.name || repo;
const description = manifest?.description || data?.description;
const author = manifest?.author || "-";
const version = manifest?.version || "-";
const releases = useMemo(() => data?.releases || [], [data]);
const commits = useMemo(() => data?.commits || [], [data]);
return (
<div className="page">
<header className="detail-hero">
<div>
<p className="eyebrow">Plugin details</p>
<h1>{displayName}</h1>
<p className="subtitle">{description}</p>
</div>
<div className="detail-actions">
<Link className="ghost" to="/">← Terug</Link>
{data?.repoUrl && (
<a className="cta" href={data.repoUrl} target="_blank" rel="noreferrer">
GitHub
</a>
)}
</div>
</header>
{loading && <div className="state">Bezig met laden…</div>}
{error && <div className="state error">{error}</div>}
{!loading && !error && data && (
<section className="detail-grid">
<div className="card">
<h2>Manifest</h2>
<div className="detail-list">
<div>
<span>Naam</span>
<strong>{displayName}</strong>
</div>
<div>
<span>Versie</span>
<strong>{version}</strong>
</div>
<div>
<span>Auteur</span>
<strong>{author}</strong>
</div>
<div>
<span>Repository</span>
<strong>{data.fullName}</strong>
</div>
</div>
{manifest?.author_url && (
<a className="link" href={manifest.author_url} target="_blank" rel="noreferrer">
Auteur website →
</a>
)}
</div>
<div className="card">
<h2>Releases</h2>
{releases.length === 0 && <p>Geen releases gevonden.</p>}
<ul className="list">
{releases.map((release) => (
<li key={release.tag}>
<a href={release.url} target="_blank" rel="noreferrer">
{release.name}
</a>
<span>
{release.publishedAt
? new Date(release.publishedAt).toLocaleDateString("nl-NL")
: "-"}
</span>
</li>
))}
</ul>
</div>
<div className="card">
<h2>Recente commits</h2>
{commits.length === 0 && <p>Geen commits gevonden.</p>}
<ul className="list">
{commits.map((commit) => (
<li key={commit.sha}>
<a href={commit.url} target="_blank" rel="noreferrer">
{commit.message?.split("\n")[0] || commit.sha.slice(0, 7)}
</a>
<span>{commit.author || "-"}</span>
</li>
))}
</ul>
</div>
</section>
)}
</div>
);
}

9
src/utils/dates.js Normal file
View File

@@ -0,0 +1,9 @@
export const DEFAULT_LOCALE = "nl-NL";
export function formatDateTime(value, locale = DEFAULT_LOCALE) {
return value ? new Date(value).toLocaleString(locale) : "-";
}
export function formatDate(value, locale = DEFAULT_LOCALE) {
return value ? new Date(value).toLocaleDateString(locale) : "-";
}