tietokonepaja/klapi
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

User roles

Browse Source
This commit is contained in:
Veikko Lintujärvi
2026-03-10 23:29:13 +02:00
parent b361f46afa
commit e89d971f41
16 changed files with 325 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
ui/src/api/index.ts
View File

@@ -4,7 +4,7 @@ type AuthTokenResponse = {
accessToken: string;
username: string;
displayName: string;
isAdmin: boolean;
roles: string[];
tokenType: string;
expiresIn: number;
};
@@ -63,21 +63,21 @@ export type User = {
username: string;
added: string;
lastUpdated: string;
isAdmin: boolean;
displayName: string;
roles: string[];
};
export type CreateUserInput = {
username: string;
password: string;
isAdmin: boolean;
displayName: string;
roles: string[];
};
export type UpdateUserInput = {
password?: string;
isAdmin: boolean;
displayName: string;
roles: string[];
};
export async function queryApiVersion(): Promise<string> {

2
ui/src/app.css
View File

@@ -14,7 +14,7 @@ main {
}
h1 {
@apply uppercase text-6xl text-[#8E4F24] font-thin;
@apply uppercase text-3xl sm:text-6xl text-[#8E4F24] font-thin;
}
button {

10
ui/src/app.tsx
View File

@@ -24,9 +24,9 @@ function AppShell() {
useEffect(() => {
const storedUsername = localStorage.getItem("session-username");
const storedDisplayName = localStorage.getItem("session-display-name");
const storedIsAdmin = localStorage.getItem("session-is-admin");
const storedRoles = localStorage.getItem("session-roles");
const storedToken = localStorage.getItem("session-token");
if (!storedUsername || !storedDisplayName || !storedToken || !storedIsAdmin) {
if (!storedUsername || !storedDisplayName || !storedToken) {
setSession(null);
return;
}
@@ -34,7 +34,7 @@ function AppShell() {
setSession({
username: storedUsername,
displayName: storedDisplayName,
isAdmin: storedIsAdmin === "true",
roles: (storedRoles ?? "").split(",").filter(Boolean),
token: storedToken,
});
}, [setSession]);
@@ -52,7 +52,7 @@ function AppShell() {
<Route path="/login" element={<Login />} />
<Route
path="/management"
element={session?.isAdmin ? <Management /> : <Navigate to="/" replace />}
element={session?.roles.includes("admin") ? <Management /> : <Navigate to="/" replace />}
/>
<Route path="*" element={<NotFound />} />
<Route path="/index.html" element={<Navigate to="/" replace />} />
@@ -64,7 +64,7 @@ function AppShell() {
export default function App() {
return (
<BrowserRouter>
<BrowserRouter future={{ v7_relativeSplatPath: true }}>
<AppShell />
</BrowserRouter>
);

98
ui/src/components/Nav.tsx
View File

@@ -26,54 +26,60 @@ export default function Nav() {
}`;
return (
<nav className="fixed top-0 left-0 z-50 flex w-full items-center justify-between bg-[#70421E] px-4 py-3 text-sm font-medium shadow-sm">
<Link to="/" className={linkClass("/")}>{t("nav.home")}</Link>
<Link to="/about" className={linkClass("/about")}>{t("nav.about")}</Link>
{session?.isAdmin ? (
<Link to="/management" className={linkClass("/management")}>{t("nav.management")}</Link>
) : null}
<div className="ml-auto flex items-center gap-2">
<b className="text-[#F5D1A9]">{session?.displayName ?? ""}</b>
<div className="flex items-center gap-1 rounded-md border border-[#8E4F24] bg-[#8E4F24]/45 p-1">
<button
type="button"
onClick={() => setLanguage("fi")}
className={`rounded px-2 py-1 text-xs ${language === "fi"
? "bg-[#E3A977] text-[#4C250E]"
: "text-[#F5D1A9] hover:text-[#FFF7EE]"
}`}
>
{t("nav.language.fi")}
</button>
<button
type="button"
onClick={() => setLanguage("en")}
className={`rounded px-2 py-1 text-xs ${language === "en"
? "bg-[#E3A977] text-[#4C250E]"
: "text-[#F5D1A9] hover:text-[#FFF7EE]"
}`}
>
{t("nav.language.en")}
</button>
<nav className="fixed top-0 left-0 z-50 w-full bg-[#70421E] shadow-sm">
<div className="flex flex-col sm:flex-row sm:items-center px-4 py-2 text-sm font-medium">
{/* Links — bottom on mobile (order-2), left on desktop (sm:order-1) */}
<div className="order-2 sm:order-1 flex items-center justify-center sm:justify-start">
<Link to="/" className={linkClass("/")}>{t("nav.home")}</Link>
<Link to="/about" className={linkClass("/about")}>{t("nav.about")}</Link>
{session?.roles.includes("admin") ? (
<Link to="/management" className={linkClass("/management")}>{t("nav.management")}</Link>
) : null}
</div>
{session ? (
<button
type="button"
onClick={signOut}
className="rounded-md border border-[#A56C38] bg-[#8E4F24] px-4 py-2 text-[#F5D1A9] transition-colors duration-200 hover:bg-[#A56C38] hover:text-[#FFF7EE]"
>
{t("nav.signOut")}
</button>
) : (
<Link
to="/login"
className="rounded-md border border-[#A56C38] bg-[#8E4F24] px-4 py-2 text-[#F5D1A9] transition-colors duration-200 hover:bg-[#A56C38] hover:text-[#FFF7EE]"
>
{t("nav.login")}
</Link>
)}
{/* Controls — top on mobile (order-1), right on desktop (sm:order-2 sm:ml-auto) */}
<div className="order-1 sm:order-2 sm:ml-auto flex items-center justify-center gap-2">
<b className="hidden sm:block text-[#F5D1A9]">{session?.displayName ?? ""}</b>
<div className="flex items-center gap-1 rounded-md border border-[#8E4F24] bg-[#8E4F24]/45 p-1">
<button
type="button"
onClick={() => setLanguage("fi")}
className={`rounded px-2 py-1 text-xs ${language === "fi"
? "bg-[#E3A977] text-[#4C250E]"
: "text-[#F5D1A9] hover:text-[#FFF7EE]"
}`}
>
{t("nav.language.fi")}
</button>
<button
type="button"
onClick={() => setLanguage("en")}
className={`rounded px-2 py-1 text-xs ${language === "en"
? "bg-[#E3A977] text-[#4C250E]"
: "text-[#F5D1A9] hover:text-[#FFF7EE]"
}`}
>
{t("nav.language.en")}
</button>
</div>
{session ? (
<button
type="button"
onClick={signOut}
className="rounded-md border border-[#A56C38] bg-[#8E4F24] px-4 py-2 text-[#F5D1A9] transition-colors duration-200 hover:bg-[#A56C38] hover:text-[#FFF7EE]"
>
{t("nav.signOut")}
</button>
) : (
<Link
to="/login"
className="rounded-md border border-[#A56C38] bg-[#8E4F24] px-4 py-2 text-[#F5D1A9] transition-colors duration-200 hover:bg-[#A56C38] hover:text-[#FFF7EE]"
>
{t("nav.login")}
</Link>
)}
</div>
</div>
</nav>
);

12
ui/src/i18n.ts
View File

@@ -66,17 +66,17 @@ const translations = {
"management.username": "Username",
"management.password": "Password",
"management.displayName": "Display name",
"management.isAdmin": "Is admin",
"management.added": "Added",
"management.updated": "Last updated",
"management.admin": "Admin",
"management.user": "User",
"management.loading": "Loading users...",
"management.requiredFields":
"Username, display name and password are required",
"management.loadError": "Failed to load users",
"management.saveError": "Failed to save user",
"management.deleteError": "Failed to delete user",
"management.roles": "Roles",
"management.rolesAssign": "Assign roles",
"management.rolesNone": "No roles assigned",
"notFound.title": "Page Not Found",
"notFound.heading": "Not Found",
"notFound.message": "Sorry, the page you’re looking for doesn't exist",
@@ -146,17 +146,17 @@ const translations = {
"management.username": "Käyttäjätunnus",
"management.password": "Salasana",
"management.displayName": "Näyttönimi",
"management.isAdmin": "Ylläpitäjä",
"management.added": "Lisätty",
"management.updated": "Viimeksi päivitetty",
"management.admin": "Ylläpitäjä",
"management.user": "Käyttäjä",
"management.loading": "Ladataan käyttäjiä...",
"management.requiredFields":
"Käyttäjätunnus, näyttönimi ja salasana vaaditaan",
"management.loadError": "Käyttäjien haku epäonnistui",
"management.saveError": "Käyttäjän tallennus epäonnistui",
"management.deleteError": "Käyttäjän poisto epäonnistui",
"management.roles": "Roolit",
"management.rolesAssign": "Määritä roolit",
"management.rolesNone": "Ei rooleja",
"notFound.title": "Sivua ei löytynyt",
"notFound.heading": "Ei löytynyt",
"notFound.message": "Valitettavasti etsimääsi sivua ei ole olemassa",

4
ui/src/routes/login.tsx
View File

@@ -38,13 +38,13 @@ export default function Login() {
setSession({
username: auth.username,
displayName: auth.displayName,
isAdmin: auth.isAdmin,
roles: auth.roles,
token: auth.accessToken,
});
localStorage.setItem("session-username", auth.username);
localStorage.setItem("session-display-name", auth.displayName);
localStorage.setItem("session-is-admin", auth.isAdmin ? "true" : "false");
localStorage.setItem("session-roles", auth.roles.join(","));
localStorage.setItem("session-token", auth.accessToken);
setError("");
navigate("/");

59
ui/src/routes/management.tsx
View File

@@ -1,7 +1,9 @@
import { FormEvent, useEffect, useState } from "react";
import { type FormEvent, useEffect, useState } from "react";
import { createUser, deleteUser, queryUsers, updateUser, type User } from "~/api";
import { useT } from "~/i18n";
const AVAILABLE_ROLES = ["lok", "admin"];
type Mode = "create" | "edit";
export default function Management() {
@@ -11,7 +13,7 @@ export default function Management() {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [displayName, setDisplayName] = useState("");
const [isAdmin, setIsAdmin] = useState(false);
const [selectedRoles, setSelectedRoles] = useState<Set<string>>(new Set());
const [selectedUsername, setSelectedUsername] = useState("");
const [error, setError] = useState("");
const [loading, setLoading] = useState(false);
@@ -42,7 +44,7 @@ export default function Management() {
setUsername("");
setPassword("");
setDisplayName("");
setIsAdmin(false);
setSelectedRoles(new Set());
setSelectedUsername("");
};
@@ -51,11 +53,20 @@ export default function Management() {
setUsername(user.username);
setPassword("");
setDisplayName(user.displayName);
setIsAdmin(user.isAdmin);
setSelectedRoles(new Set(user.roles));
setSelectedUsername(user.username);
setError("");
};
const toggleRole = (role: string) => {
setSelectedRoles((prev) => {
const next = new Set(prev);
if (next.has(role)) next.delete(role);
else next.add(role);
return next;
});
};
const onSubmit = async (event: FormEvent) => {
event.preventDefault();
@@ -70,13 +81,13 @@ export default function Management() {
username: username.trim(),
password: password,
displayName: displayName.trim(),
isAdmin,
roles: [...selectedRoles],
});
} else {
await updateUser(selectedUsername, {
password: password.trim() ? password : undefined,
displayName: displayName.trim(),
isAdmin,
roles: [...selectedRoles],
});
}
@@ -100,7 +111,7 @@ export default function Management() {
};
return (
<main className="w-full px-4">
<main className="w-full px-4 !justify-start pt-28 sm:pt-20">
<h1>{t("management.heading")}</h1>
<form onSubmit={onSubmit} className="mx-auto mt-4 w-full max-w-2xl space-y-3 rounded-md border border-[#C99763] bg-[#FFF7EE] p-4">
@@ -142,15 +153,21 @@ export default function Management() {
/>
</label>
<label htmlFor="management-is-admin" className="flex items-center gap-2 text-left">
<input
id="management-is-admin"
type="checkbox"
checked={isAdmin}
onChange={(event) => setIsAdmin(event.target.checked)}
/>
{t("management.isAdmin")}
</label>
<div className="block text-left">
<span className="block">{t("management.rolesAssign")}</span>
<div className="mt-1 flex flex-wrap gap-3">
{AVAILABLE_ROLES.map((role) => (
<label key={role} className="flex items-center gap-1.5 text-sm">
<input
type="checkbox"
checked={selectedRoles.has(role)}
onChange={() => toggleRole(role)}
/>
{role}
</label>
))}
</div>
</div>
<div className="flex gap-2">
<button
@@ -193,9 +210,13 @@ export default function Management() {
<div className="text-xs text-[#8E4F24]">
{t("management.updated")}: {new Date(user.lastUpdated).toLocaleString()}
</div>
<div className="text-xs text-[#8E4F24]">
{user.isAdmin ? t("management.admin") : t("management.user")}
</div>
{user.roles.length > 0 ? (
<div className="mt-1 flex flex-wrap gap-1">
{user.roles.map((role) => (
<span key={role} className="rounded bg-[#E3A977] px-1.5 py-0.5 text-xs text-[#4C250E]">{role}</span>
))}
</div>
) : null}
</div>
<div className="flex gap-2">

2
ui/src/state/appState.ts
View File

@@ -6,7 +6,7 @@ export type Language = "fi" | "en";
export type Session = {
username: string;
displayName: string;
isAdmin: boolean;
roles: string[];
token: string;
};