Reserve icons

server/server.go

@@ -38,11 +38,13 @@ import (
 TODO
 --
 
-- Rate limiting: Sensitive endpoints (account/login/change-password/...)
+- HIGH Rate limiting: Sensitive endpoints (account/login/change-password/...)
+- HIGH Rate limiting: dailyLimitToRate is wrong? + TESTS
+- HIGH Rate limiting: Bandwidth limit must be in tier + TESTS
+- HIGH Sync problems with "deleteAfter=0" and "displayName="
 - Reservation (UI): Show "This topic is reserved" error message when trying to reserve a reserved topic (Thorben)
 - Reservation (UI): Ask for confirmation when removing reservation (deadcade)
-- Reservation icons (UI)
+- Reservation table delete button: dialog "keep or delete messages?"
-- reservation table delete button: dialog "keep or delete messages?"
 - UI: Flickering upgrade banner when logging in
 - JS constants
 
@@ -56,22 +58,14 @@ delete messages + reserved topics on ResetTier delete attachments in access.go
 
 
 Limits & rate limiting:
-	rate limiting weirdness. wth is going on?
-	bandwidth limit must be in tier
 	users without tier: should the stats be persisted? are they meaningful? -> test that the visitor is based on the IP address!
 	when ResetStats() is run, reset messagesLimiter (and others)?
 	Delete visitor when tier is changed to refresh rate limiters
 
 Make sure account endpoints make sense for admins
 
-
-Sync:
-	- sync problems with "deleteAfter=0" and "displayName="
-
 Tests:
 - Payment endpoints (make mocks)
-- Message rate limiting and reset tests
-- Bandwidth limit test
 - test that the visitor is based on the IP address when a user has no tier
 */
 

web/src/components/Navigation.js

@@ -11,6 +11,7 @@ import Divider from "@mui/material/Divider";
 import List from "@mui/material/List";
 import SettingsIcon from "@mui/icons-material/Settings";
 import AddIcon from "@mui/icons-material/Add";
+import VisibilityIcon from '@mui/icons-material/Visibility';
 import SubscribeDialog from "./SubscribeDialog";
 import {Alert, AlertTitle, Badge, CircularProgress, Link, ListSubheader, Tooltip} from "@mui/material";
 import Button from "@mui/material/Button";
@@ -31,6 +32,7 @@ import accountApi from "../app/AccountApi";
 import CelebrationIcon from '@mui/icons-material/Celebration';
 import UpgradeDialog from "./UpgradeDialog";
 import {AccountContext} from "./App";
+import {PermissionDenyAll, PermissionRead, PermissionReadWrite, PermissionWrite} from "./ReserveIcons";
 
 const navWidth = 280;
 
@@ -263,16 +265,16 @@ const SubscriptionItem = (props) => {
             {subscription.reservation?.everyone &&
                 <ListItemIcon edge="end" sx={{ minWidth: "26px" }}>
                     {subscription.reservation?.everyone === "read-write" &&
-                        <Tooltip title={t("prefs_reservations_table_everyone_read_write")}><Public fontSize="small"/></Tooltip>
+                        <Tooltip title={t("prefs_reservations_table_everyone_read_write")}><PermissionReadWrite size="small"/></Tooltip>
                     }
                     {subscription.reservation?.everyone === "read-only" &&
-                        <Tooltip title={t("prefs_reservations_table_everyone_read_only")}><PublicOff fontSize="small"/></Tooltip>
+                        <Tooltip title={t("prefs_reservations_table_everyone_read_only")}><PermissionRead size="small"/></Tooltip>
                     }
                     {subscription.reservation?.everyone === "write-only" &&
-                        <Tooltip title={t("prefs_reservations_table_everyone_write_only")}><PublicOff fontSize="small"/></Tooltip>
+                        <Tooltip title={t("prefs_reservations_table_everyone_write_only")}><PermissionWrite size="small"/></Tooltip>
                     }
                     {subscription.reservation?.everyone === "deny-all" &&
-                        <Tooltip title={t("prefs_reservations_table_everyone_deny_all")}><Lock fontSize="small"/></Tooltip>
+                        <Tooltip title={t("prefs_reservations_table_everyone_deny_all")}><PermissionDenyAll size="small"/></Tooltip>
                     }
                 </ListItemIcon>
             }

web/src/components/ReserveIcons.js

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import {Lock, Public} from "@mui/icons-material";
+import Box from "@mui/material/Box";
+
+
+export const PermissionReadWrite = React.forwardRef((props, ref) => {
+    const size = props.size ?? "medium";
+    return <Public fontSize={size} ref={ref} {...props}/>;
+});
+
+export const PermissionDenyAll = React.forwardRef((props, ref) => {
+    const size = props.size ?? "medium";
+    return <Lock fontSize={size} ref={ref} {...props}/>;
+});
+
+export const PermissionRead = React.forwardRef((props, ref) => {
+    return <PermissionReadOrWrite text="R" ref={ref} {...props}/>;
+});
+
+export const PermissionWrite = React.forwardRef((props, ref) => {
+    return <PermissionReadOrWrite text="W" ref={ref} {...props}/>;
+});
+
+const PermissionReadOrWrite = React.forwardRef((props, ref) => {
+    const size = props.size ?? "medium";
+    return (
+        <div ref={ref} {...props} style={{position: "relative", display: "inline-flex", verticalAlign: "middle", height: "24px"}}>
+            <Public fontSize={size}/>
+            <Box
+                sx={{
+                    position: "absolute",
+                    right: "-6px",
+                    bottom: "5px",
+                    fontSize: 10,
+                    fontWeight: 600,
+                    color: "gray",
+                    width: "8px",
+                    height: "8px",
+                    marginTop: "3px"
+                }}
+            >
+                {props.text}
+            </Box>
+        </div>
+    );
+});

web/src/components/ReserveTopicSelect.js

@@ -19,6 +19,7 @@ import ListItemIcon from "@mui/material/ListItemIcon";
 import LockIcon from "@mui/icons-material/Lock";
 import ListItemText from "@mui/material/ListItemText";
 import {Public, PublicOff} from "@mui/icons-material";
+import {PermissionDenyAll, PermissionRead, PermissionReadWrite, PermissionWrite} from "./ReserveIcons";
 
 const ReserveTopicSelect = (props) => {
     const { t } = useTranslation();
@@ -39,19 +40,19 @@ const ReserveTopicSelect = (props) => {
                 }}
             >
                 <MenuItem value="deny-all">
-                    <ListItemIcon><LockIcon/></ListItemIcon>
+                    <ListItemIcon><PermissionDenyAll/></ListItemIcon>
                     <ListItemText primary={t("prefs_reservations_table_everyone_deny_all")}/>
                 </MenuItem>
                 <MenuItem value="read-only">
-                    <ListItemIcon><PublicOff/></ListItemIcon>
+                    <ListItemIcon><PermissionRead/></ListItemIcon>
                     <ListItemText primary={t("prefs_reservations_table_everyone_read_only")}/>
                 </MenuItem>
                 <MenuItem value="write-only">
-                    <ListItemIcon><PublicOff/></ListItemIcon>
+                    <ListItemIcon><PermissionWrite/></ListItemIcon>
                     <ListItemText primary={t("prefs_reservations_table_everyone_write_only")}/>
                 </MenuItem>
                 <MenuItem value="read-write">
-                    <ListItemIcon><Public/></ListItemIcon>
+                    <ListItemIcon><PermissionReadWrite/></ListItemIcon>
                     <ListItemText primary={t("prefs_reservations_table_everyone_read_write")}/>
                 </MenuItem>
             </Select>