Start to build routes to create, view and edit API token
All checks were successful
continuous-integration/drone/push Build is passing
continuous-integration/drone/pr Build is passing

This commit is contained in:
Pierre HUBERT 2024-04-18 19:38:25 +02:00
parent 6ebff3ac0c
commit 84e293bddb
8 changed files with 515 additions and 25 deletions

View File

@ -9,30 +9,35 @@ import "./App.css";
import { AuthApi } from "./api/AuthApi";
import { ServerApi } from "./api/ServerApi";
import {
CreateNetworkRoute,
EditNetworkRoute,
} from "./routes/EditNetworkRoute";
import { CreateVMRoute, EditVMRoute } from "./routes/EditVMRoute";
import { IsoFilesRoute } from "./routes/IsoFilesRoute";
import { NetworksListRoute } from "./routes/NetworksListRoute";
import { NotFoundRoute } from "./routes/NotFound";
import { SysInfoRoute } from "./routes/SysInfoRoute";
import { VMListRoute } from "./routes/VMListRoute";
import { VMRoute } from "./routes/VMRoute";
import { VNCRoute } from "./routes/VNCRoute";
import { LoginRoute } from "./routes/auth/LoginRoute";
import { OIDCCbRoute } from "./routes/auth/OIDCCbRoute";
import { BaseAuthenticatedPage } from "./widgets/BaseAuthenticatedPage";
import { BaseLoginPage } from "./widgets/BaseLoginPage";
import { ViewNetworkRoute } from "./routes/ViewNetworkRoute";
import { HomeRoute } from "./routes/HomeRoute";
import { NetworkFiltersListRoute } from "./routes/NetworkFiltersListRoute";
import { ViewNWFilterRoute } from "./routes/ViewNWFilterRoute";
CreateApiTokenRoute,
EditApiTokenRoute,
} from "./routes/EditAPITokenRoute";
import {
CreateNWFilterRoute,
EditNWFilterRoute,
} from "./routes/EditNWFilterRoute";
import {
CreateNetworkRoute,
EditNetworkRoute,
} from "./routes/EditNetworkRoute";
import { CreateVMRoute, EditVMRoute } from "./routes/EditVMRoute";
import { HomeRoute } from "./routes/HomeRoute";
import { IsoFilesRoute } from "./routes/IsoFilesRoute";
import { NetworkFiltersListRoute } from "./routes/NetworkFiltersListRoute";
import { NetworksListRoute } from "./routes/NetworksListRoute";
import { NotFoundRoute } from "./routes/NotFound";
import { SysInfoRoute } from "./routes/SysInfoRoute";
import { TokensListRoute } from "./routes/TokensListRoute";
import { VMListRoute } from "./routes/VMListRoute";
import { VMRoute } from "./routes/VMRoute";
import { VNCRoute } from "./routes/VNCRoute";
import { ViewApiTokenRoute } from "./routes/ViewApiTokenRoute";
import { ViewNWFilterRoute } from "./routes/ViewNWFilterRoute";
import { ViewNetworkRoute } from "./routes/ViewNetworkRoute";
import { LoginRoute } from "./routes/auth/LoginRoute";
import { OIDCCbRoute } from "./routes/auth/OIDCCbRoute";
import { BaseAuthenticatedPage } from "./widgets/BaseAuthenticatedPage";
import { BaseLoginPage } from "./widgets/BaseLoginPage";
interface AuthContext {
signedIn: boolean;
@ -74,6 +79,9 @@ export function App() {
<Route path="nwfilter/:uuid/edit" element={<EditNWFilterRoute />} />
<Route path="tokens" element={<TokensListRoute />} />
<Route path="tokens/new" element={<CreateApiTokenRoute />} />
<Route path="tokens/:id" element={<ViewApiTokenRoute />} />
<Route path="tokens/:id/edit" element={<EditApiTokenRoute />} />
<Route path="sysinfo" element={<SysInfoRoute />} />
<Route path="*" element={<NotFoundRoute />} />

View File

@ -27,6 +27,8 @@ export interface ServerConstraints {
nwfilter_comment_size: LenConstraint;
nwfilter_priority: LenConstraint;
nwfilter_selectors_count: LenConstraint;
api_token_name_size: LenConstraint;
api_token_description_size: LenConstraint;
}
export interface LenConstraint {

View File

@ -21,7 +21,30 @@ export function APITokenURL(t: APIToken, edit: boolean = false): string {
return `/tokens/${t.id}${edit ? "/edit" : ""}`;
}
export interface APITokenPrivateKey {
alg: string;
priv: string;
}
export interface CreatedAPIToken {
token: APIToken;
priv_key: APITokenPrivateKey;
}
export class TokensApi {
/**
* Create a new API token
*/
static async Create(n: APIToken): Promise<CreatedAPIToken> {
return (
await APIClient.exec({
method: "POST",
uri: "/tokens/create",
jsonData: n,
})
).data;
}
/**
* Get the full list of tokens
*/
@ -33,4 +56,39 @@ export class TokensApi {
})
).data;
}
/**
* Get the information about a single token
*/
static async GetSingle(uuid: string): Promise<APIToken> {
return (
await APIClient.exec({
method: "GET",
uri: `/tokens/${uuid}`,
})
).data;
}
/**
* Update an existing API token information
*/
static async Update(n: APIToken): Promise<void> {
return (
await APIClient.exec({
method: "PATCH",
uri: `/tokens/${n.id}`,
jsonData: n,
})
).data;
}
/**
* Delete an API token
*/
static async Delete(n: APIToken): Promise<void> {
await APIClient.exec({
method: "DELETE",
uri: `/tokens/${n.id}`,
});
}
}

View File

@ -0,0 +1,148 @@
import { Button } from "@mui/material";
import React from "react";
import { useNavigate, useParams } from "react-router-dom";
import { APIToken, APITokenURL, TokensApi } from "../api/TokensApi";
import { useAlert } from "../hooks/providers/AlertDialogProvider";
import { useLoadingMessage } from "../hooks/providers/LoadingMessageProvider";
import { useSnackbar } from "../hooks/providers/SnackbarProvider";
import { time } from "../utils/DateUtils";
import { AsyncWidget } from "../widgets/AsyncWidget";
import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
import {
APITokenDetails,
TokenWidgetStatus,
} from "../widgets/tokens/APITokenDetails";
export function CreateApiTokenRoute(): React.ReactElement {
const alert = useAlert();
const snackbar = useSnackbar();
const navigate = useNavigate();
const [token] = React.useState<APIToken>({
id: "",
name: "",
description: "",
created: time(),
updated: time(),
last_used: time(),
rights: [],
});
const createApiToken = async (n: APIToken) => {
try {
const res = await TokensApi.Create(n);
snackbar("The api token was successfully created!");
// TODO : show a modal to give token information
navigate(APITokenURL(res.token));
} catch (e) {
console.error(e);
alert(`Failed to create API token!\n${e}`);
}
};
return (
<EditApiTokenRouteInner
token={token}
creating={true}
onCancel={() => navigate("/tokens")}
onSave={createApiToken}
/>
);
}
export function EditApiTokenRoute(): React.ReactElement {
const alert = useAlert();
const snackbar = useSnackbar();
const { id } = useParams();
const navigate = useNavigate();
const [token, setToken] = React.useState<APIToken | undefined>();
const load = async () => {
setToken(await TokensApi.GetSingle(id!));
};
const updateApiToken = async (n: APIToken) => {
try {
await TokensApi.Update(n);
snackbar("The token was successfully updated!");
navigate(APITokenURL(token!));
} catch (e) {
console.error(e);
alert(`Failed to update token!\n${e}`);
}
};
return (
<AsyncWidget
loadKey={id}
ready={token !== undefined}
errMsg="Failed to fetch API token informations!"
load={load}
build={() => (
<EditApiTokenRouteInner
token={token!}
creating={false}
onCancel={() => navigate(`/token/${id}`)}
onSave={updateApiToken}
/>
)}
/>
);
}
function EditApiTokenRouteInner(p: {
token: APIToken;
creating: boolean;
onCancel: () => void;
onSave: (token: APIToken) => Promise<void>;
}): React.ReactElement {
const loadingMessage = useLoadingMessage();
const [changed, setChanged] = React.useState(false);
const [, updateState] = React.useState<any>();
const forceUpdate = React.useCallback(() => updateState({}), []);
const valueChanged = () => {
setChanged(true);
forceUpdate();
};
const save = async () => {
loadingMessage.show("Saving API token configuration...");
await p.onSave(p.token);
loadingMessage.hide();
};
return (
<VirtWebRouteContainer
label={p.creating ? "Create an API Token" : "Edit API Token"}
actions={
<span>
{changed && (
<Button
variant="contained"
onClick={save}
style={{ marginRight: "10px" }}
>
{p.creating ? "Create" : "Save"}
</Button>
)}
<Button onClick={p.onCancel} variant="outlined">
Cancel
</Button>
</span>
}
>
<APITokenDetails
token={p.token}
status={
p.creating ? TokenWidgetStatus.Create : TokenWidgetStatus.Update
}
onChange={valueChanged}
/>
</VirtWebRouteContainer>
);
}

View File

@ -1,4 +1,3 @@
import DeleteIcon from "@mui/icons-material/Delete";
import VisibilityIcon from "@mui/icons-material/Visibility";
import {
Button,
@ -13,13 +12,13 @@ import {
Typography,
} from "@mui/material";
import React from "react";
import { useNavigate } from "react-router-dom";
import { NetworkApi, NetworkInfo, NetworkURL } from "../api/NetworksApi";
import { AsyncWidget } from "../widgets/AsyncWidget";
import { RouterLink } from "../widgets/RouterLink";
import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
import { NetworkStatusWidget } from "../widgets/net/NetworkStatusWidget";
import { useNavigate } from "react-router-dom";
import { NetworkHookStatusWidget } from "../widgets/net/NetworkHookStatusWidget";
import { NetworkStatusWidget } from "../widgets/net/NetworkStatusWidget";
export function NetworksListRoute(): React.ReactElement {
const [list, setList] = React.useState<NetworkInfo[] | undefined>();

View File

@ -0,0 +1,53 @@
import { Button } from "@mui/material";
import React from "react";
import { useNavigate, useParams } from "react-router-dom";
import { APIToken, APITokenURL, TokensApi } from "../api/TokensApi";
import { AsyncWidget } from "../widgets/AsyncWidget";
import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
import {
APITokenDetails,
TokenWidgetStatus,
} from "../widgets/tokens/APITokenDetails";
export function ViewApiTokenRoute() {
const { id } = useParams();
const [token, setToken] = React.useState<APIToken | undefined>();
const load = async () => {
setToken(await TokensApi.GetSingle(id!));
};
return (
<AsyncWidget
loadKey={id}
ready={token !== undefined}
errMsg="Failed to fetch API token information!"
load={load}
build={() => <ViewAPITokenRouteInner token={token!} />}
/>
);
}
function ViewAPITokenRouteInner(p: { token: APIToken }): React.ReactElement {
const navigate = useNavigate();
return (
<VirtWebRouteContainer
label={`API token ${p.token.name}`}
actions={
<span style={{ display: "flex", alignItems: "center" }}>
<Button
variant="contained"
style={{ marginLeft: "15px" }}
onClick={() => navigate(APITokenURL(p.token, true))}
>
Edit
</Button>
</span>
}
>
<APITokenDetails token={p.token} status={TokenWidgetStatus.Read} />
</VirtWebRouteContainer>
);
}

View File

@ -22,14 +22,16 @@ export function IPInput(p: {
export function IPInputWithMask(p: {
label: string;
editable: boolean;
ipAndMask?: string;
ip?: string;
mask?: number;
onValueChange?: (ip?: string, mask?: number) => void;
onValueChange?: (ip?: string, mask?: number, ipAndMask?: string) => void;
version: 4 | 6;
}): React.ReactElement {
const showSlash = React.useRef(!!p.mask);
const currValue =
p.ipAndMask ??
(p.ip ?? "") + (p.mask || showSlash.current ? "/" : "") + (p.mask ?? "");
const { onValueChange, ...props } = p;
@ -38,7 +40,7 @@ export function IPInputWithMask(p: {
onValueChange={(v) => {
showSlash.current = false;
if (!v) {
onValueChange?.(undefined, undefined);
onValueChange?.(undefined, undefined, undefined);
return;
}
@ -52,7 +54,11 @@ export function IPInputWithMask(p: {
mask = sanitizeMask(p.version, split[1]);
}
onValueChange?.(ip, mask);
onValueChange?.(
ip,
mask,
mask || showSlash.current ? `${ip}/${mask ?? ""}` : ip
);
}}
value={currValue}
{...props}

View File

@ -0,0 +1,216 @@
import { Button, Grid } from "@mui/material";
import React from "react";
import { useNavigate } from "react-router-dom";
import { NWFilter, NWFilterApi } from "../../api/NWFilterApi";
import { NetworkApi, NetworkInfo } from "../../api/NetworksApi";
import { ServerApi } from "../../api/ServerApi";
import { APIToken, TokensApi } from "../../api/TokensApi";
import { VMApi, VMInfo } from "../../api/VMApi";
import { useAlert } from "../../hooks/providers/AlertDialogProvider";
import { useConfirm } from "../../hooks/providers/ConfirmDialogProvider";
import { useSnackbar } from "../../hooks/providers/SnackbarProvider";
import { AsyncWidget } from "../AsyncWidget";
import { TabsWidget } from "../TabsWidget";
import { EditSection } from "../forms/EditSection";
import { IPInput, IPInputWithMask } from "../forms/IPInput";
import { ResAutostartInput } from "../forms/ResAutostartInput";
import { SelectInput } from "../forms/SelectInput";
import { TextInput } from "../forms/TextInput";
import { RadioGroupInput } from "../forms/RadioGroupInput";
export enum TokenWidgetStatus {
Create,
Read,
Update,
}
interface DetailsProps {
token: APIToken;
status: TokenWidgetStatus;
onChange?: () => void;
}
export function APITokenDetails(p: DetailsProps): React.ReactElement {
const [vms, setVMs] = React.useState<VMInfo[]>();
const [networks, setNetworks] = React.useState<NetworkInfo[]>();
const [nwFilters, setNetworkFilters] = React.useState<NWFilter[]>();
const [tokens, setTokens] = React.useState<APIToken[]>();
const load = async () => {
setVMs(await VMApi.GetList());
setNetworks(await NetworkApi.GetList());
setNetworkFilters(await NWFilterApi.GetList());
setTokens(await TokensApi.GetList());
};
return (
<AsyncWidget
loadKey={"1"}
load={load}
errMsg="Failed to load some system entities!"
build={() => (
<APITokenDetailsInner
vms={vms!}
networks={networks!}
nwFilters={nwFilters!}
tokens={tokens!}
{...p}
/>
)}
/>
);
}
enum TokenTab {
General = 0,
Rights,
RawRights,
Danger,
}
type DetailsInnerProps = DetailsProps & {
vms: VMInfo[];
networks: NetworkInfo[];
nwFilters: NWFilter[];
tokens: APIToken[];
};
function APITokenDetailsInner(p: DetailsInnerProps): React.ReactElement {
const [currTab, setCurrTab] = React.useState(TokenTab.General);
return (
<>
<TabsWidget
currTab={currTab}
onTabChange={setCurrTab}
options={[
{ label: "General", value: TokenTab.General, visible: true },
{
label: "Rights",
value: TokenTab.Rights,
visible: true,
},
{
label: "Raw rights",
value: TokenTab.RawRights,
visible: true,
},
{
label: "Danger zone",
value: TokenTab.Danger,
color: "red",
visible: p.status === TokenWidgetStatus.Read,
},
]}
/>
{currTab === TokenTab.General && <NetworkDetailsTabGeneral {...p} />}
{/* todo: rights */}
{currTab === TokenTab.Danger && <APITokenTabDanger {...p} />}
</>
);
}
function NetworkDetailsTabGeneral(p: DetailsInnerProps): React.ReactElement {
const [ipVersion, setIpVersion] = React.useState<4 | 6>(
(p.token.ip_restriction ?? "").includes(":") ? 6 : 4
);
return (
<Grid container spacing={2}>
{/* Metadata section */}
<EditSection title="Metadata">
{p.status !== TokenWidgetStatus.Create && (
<TextInput label="UUID" editable={false} value={p.token.id} />
)}
<TextInput
label="Name"
editable={p.status === TokenWidgetStatus.Create}
value={p.token.name}
onValueChange={(v) => {
p.token.name = v ?? "";
p.onChange?.();
}}
size={ServerApi.Config.constraints.api_token_name_size}
/>
<TextInput
label="Description"
editable={p.status === TokenWidgetStatus.Create}
value={p.token.description}
onValueChange={(v) => {
p.token.description = v ?? "";
p.onChange?.();
}}
multiline={true}
size={ServerApi.Config.constraints.api_token_description_size}
/>
</EditSection>
<EditSection title="General settings">
{(p.status === TokenWidgetStatus.Create || p.token.ip_restriction) && (
<RadioGroupInput
{...p}
editable={p.status === TokenWidgetStatus.Create}
options={[
{ label: "IPv4", value: "4" },
{ label: "IPv6", value: "6" },
]}
value={ipVersion.toString()}
onValueChange={(v) => {
setIpVersion(Number(v) as any);
}}
/>
)}
<IPInputWithMask
{...p}
label="Token IP network restriction"
ipAndMask={p.token.ip_restriction}
editable={p.status === TokenWidgetStatus.Create}
version={ipVersion}
onValueChange={(_ip, _mask, ipAndMask) => {
p.token.ip_restriction = ipAndMask;
p.onChange?.();
}}
/>
{/* TODO : remaining */}
</EditSection>
</Grid>
);
}
function APITokenTabDanger(p: DetailsInnerProps): React.ReactElement {
const confirm = useConfirm();
const snackbar = useSnackbar();
const alert = useAlert();
const navigate = useNavigate();
const requestDelete = async () => {
try {
if (
!(await confirm(
"Do you really want to delete this API token?",
`Delete API token ${p.token.name}`,
"Delete"
))
)
return;
await TokensApi.Delete(p.token);
navigate("/tokens");
snackbar("The API token was successfully deleted!");
} catch (e) {
console.error(e);
alert(`Failed to delete the API token!\n${e}`);
}
};
return (
<Button color="error" onClick={requestDelete}>
Delete this API token
</Button>
);
}