feat: implement user authentication and license management system
- 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:
89
src/pages/Home.jsx
Normal file
89
src/pages/Home.jsx
Normal 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
476
src/pages/LicenseManager.jsx
Normal 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
125
src/pages/PluginDetail.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user