diff --git a/web/public/static/langs/en.json b/web/public/static/langs/en.json
index b9d261a3..e4982fe7 100644
--- a/web/public/static/langs/en.json
+++ b/web/public/static/langs/en.json
@@ -250,6 +250,10 @@
"prefs_access_table_perms_private": "Only I can publish and subscribe",
"prefs_access_table_perms_public_read": "I can publish, everyone can subscribe",
"prefs_access_table_perms_public": "Everyone can publish and subscribe",
+ "prefs_access_dialog_title_add": "Reserve topic",
+ "prefs_access_dialog_title_edit": "Edit reserved topic",
+ "prefs_access_dialog_topic_label": "Topic",
+ "prefs_access_dialog_access_label": "Access",
"priority_min": "min",
"priority_low": "low",
"priority_default": "default",
diff --git a/web/src/components/Preferences.js b/web/src/components/Preferences.js
index 54628fcd..49d54889 100644
--- a/web/src/components/Preferences.js
+++ b/web/src/components/Preferences.js
@@ -5,7 +5,7 @@ import {
CardContent,
FormControl,
Select,
- Stack,
+ Stack, styled,
Table,
TableBody,
TableCell,
@@ -41,6 +41,9 @@ import accountApi, {UnauthorizedError} from "../app/AccountApi";
import {Pref, PrefGroup} from "./Pref";
import {useOutletContext} from "react-router-dom";
import LockIcon from "@mui/icons-material/Lock";
+import {Public, PublicOff} from "@mui/icons-material";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
const Preferences = () => {
return (
@@ -515,14 +518,14 @@ const Access = () => {
- {/**/}
+
);
@@ -532,11 +535,11 @@ const AccessTable = (props) => {
const { t } = useTranslation();
const [dialogKey, setDialogKey] = useState(0);
const [dialogOpen, setDialogOpen] = useState(false);
- const [dialogUser, setDialogUser] = useState(null);
+ const [dialogEntry, setDialogEntry] = useState(null);
- const handleEditClick = (user) => {
+ const handleEditClick = (entry) => {
setDialogKey(prev => prev+1);
- setDialogUser(user);
+ setDialogEntry(entry);
setDialogOpen(true);
};
@@ -584,18 +587,91 @@ const AccessTable = (props) => {
))}
- {/**/}
+ />
);
};
+const AccessDialog = (props) => {
+ const { t } = useTranslation();
+ const [topic, setTopic] = useState("");
+ const [access, setAccess] = useState("private");
+ const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
+ const editMode = props.entry !== null;
+ const addButtonEnabled = (() => {
+ // FIXME
+ })();
+ const handleSubmit = async () => {
+ props.onSubmit({
+ topic: topic,
+ // FIXME
+ })
+ };
+ useEffect(() => {
+ if (editMode) {
+ setTopic(props.topic);
+ //setAccess(props.access);
+ }
+ }, [editMode, props]);
+ return (
+
+ );
+};
+
const maybeUpdateAccountSettings = async (payload) => {
if (!session.exists()) {
return;