diff --git a/react/admin-panel/src/views/route/route-edit.js b/react/admin-panel/src/views/route/route-edit.js
new file mode 100644
index 0000000..df94b88
--- /dev/null
+++ b/react/admin-panel/src/views/route/route-edit.js
@@ -0,0 +1,153 @@
+import {Link, useNavigate, useParams} from "react-router-dom";
+import {useCallback, useContext, useEffect, useState} from "react";
+import {LocaleContext} from "shared/locale";
+import {
+ Box,
+ Button,
+ CircularProgress, styled,
+} from "@material-ui/core";
+import * as React from "react";
+import RouteForm from "./route-form";
+import {KeyboardArrowLeft, Save} from "@material-ui/icons";
+import {TextField} from "@mui/material";
+
+const ButtonBar = styled(Box)((props) => ({
+ "& > button": {
+ marginRight: props.theme.spacing(1)
+ }
+}));
+
+export default function RouteEditView(props) {
+
+ const {api, showDialog} = props;
+ const {routeId} = useParams();
+ const navigate = useNavigate();
+ const isNewRoute = routeId === "new";
+ const {translate: L, requestModules, currentLocale} = useContext(LocaleContext);
+
+ // data
+ const [routeTest, setRouteTest] = useState("");
+ const [fetchRoute, setFetchRoute] = useState(!isNewRoute);
+ const [route, setRoute] = useState(isNewRoute ? {
+ pattern: "",
+ type: "",
+ target: "",
+ extra: "",
+ exact: true,
+ active: true
+ } : null);
+
+ // ui
+ const [routeTestResult, setRouteTestResult] = useState(false);
+ const [isSaving, setSaving] = useState(false);
+
+ useEffect(() => {
+ requestModules(props.api, ["general"], currentLocale).then(data => {
+ if (!data.success) {
+ props.showDialog("Error fetching translations: " + data.msg);
+ }
+ });
+ }, [currentLocale]);
+
+ useEffect(() => {
+ if (routeTest?.trim()) {
+ props.api.testRoute(route.pattern, routeTest, route.exact).then(data => {
+ if (!data.success) {
+ props.showDialog("Error testing route: " + data.msg);
+ } else {
+ setRouteTestResult(data.match);
+ }
+ });
+ } else {
+ setRouteTestResult(false);
+ }
+ }, [routeTest]);
+
+ const onFetchRoute = useCallback((force = false) => {
+ if (!isNewRoute && (force || fetchRoute)) {
+ setFetchRoute(false);
+ api.getRoute(routeId).then((res) => {
+ if (!res.success) {
+ showDialog(res.msg, L("Error fetching route"));
+ navigate("/admin/routes");
+ } else {
+ setRoute(res.route);
+ }
+ });
+ }
+ }, [api, showDialog, fetchRoute, isNewRoute, routeId, route]);
+
+ const onSave = useCallback(() => {
+ if (!isSaving) {
+ setSaving(true);
+ let args = [route.pattern, route.type, route.target, route.extra, route.exact, route.active];
+ if (isNewRoute) {
+ api.addRoute(...args).then(res => {
+ setSaving(false);
+ if (res.success) {
+ navigate("/admin/routes/" + res.routeId);
+ } else {
+ showDialog(res.msg, L("Error saving route"));
+ }
+ });
+ } else {
+ args = [routeId, ...args];
+ api.updateRoute(...args).then(res => {
+ setSaving(false);
+ if (!res.success) {
+ showDialog(res.msg, L("Error saving route"));
+ }
+ });
+ }
+ }
+ }, [api, route, isSaving, isNewRoute, routeId]);
+
+ useEffect(() => {
+ if (!isNewRoute) {
+ onFetchRoute(true);
+ }
+ }, []);
+
+ if (route === null) {
+ return
+ }
+
+ return
+
+
+ - Home
+ - Routes
+ - {isNewRoute ? "New" : "Edit"}
+
+
+
+
+
{L(isNewRoute ? "Create new Route" : "Edit Route")}
+
+
+
+
+
+
+ }
+ variant={"outlined"}
+ onClick={() => navigate("/admin/routes")}>
+ {L("general.cancel")}
+
+ } color={"primary"}
+ variant={"outlined"} disabled={isSaving}
+ onClick={onSave}>
+ {isSaving ? L("general.saving") + "…" : L("general.save")}
+
+
+
+ {L("Validate Route")}
+ setRouteTest(e.target.value)}
+ variant={"outlined"} size={"small"} fullWidth={true}
+ placeholder={L("Enter a path to test the route…")} />
+
+ Match: {JSON.stringify(routeTestResult)}
+
+
+
+}
\ No newline at end of file
diff --git a/react/admin-panel/src/views/route/route-form.js b/react/admin-panel/src/views/route/route-form.js
new file mode 100644
index 0000000..5187f2d
--- /dev/null
+++ b/react/admin-panel/src/views/route/route-form.js
@@ -0,0 +1,105 @@
+import {Box, Checkbox, FormControl, FormControlLabel, FormGroup, Select, styled, TextField} from "@material-ui/core";
+import * as React from "react";
+import {useCallback, useContext} from "react";
+import {LocaleContext} from "shared/locale";
+
+const RouteFormControl = styled(FormControl)((props) => ({
+ "& > label": {
+ marginTop: 5
+ },
+ "& input, & textarea": {
+ fontFamily: "monospace",
+ }
+}));
+
+export default function RouteForm(props) {
+
+ const {route, setRoute} = props;
+ const {translate: L} = useContext(LocaleContext);
+
+ const onChangeRouteType = useCallback((type) => {
+ let newRoute = {...route, type: type };
+ if (newRoute.type === "dynamic" && !newRoute.extra) {
+ newRoute.extra = "[]";
+ } else if (newRoute.type === "static" && !newRoute.extra) {
+ newRoute.extra = 200;
+ }
+
+ setRoute(newRoute);
+ }, [route]);
+
+ const elements = [
+
+
+ setRoute({...route, pattern: e.target.value})} />
+ ,
+
+ setRoute({...route, exact: e.target.checked})} />} />
+ ,
+
+ setRoute({...route, active: e.target.checked})} />} />
+ ,
+
+
+
+ ,
+ ];
+
+ if (route.type) {
+ elements.push(
+
+
+ setRoute({...route, target: e.target.value})}/>
+
+ );
+
+ if (route.type === "dynamic") {
+ let extraArgs;
+ try {
+ extraArgs = JSON.parse(route.extra)
+ } catch (e) {
+ extraArgs = null
+ }
+ elements.push(
+
+
+