From 0d537c8a24d0b99081b93921442aa02b088c8002 Mon Sep 17 00:00:00 2001
From: binwiederhier <pheckel@datto.com>
Date: Mon, 23 Jan 2023 20:04:04 -0500
Subject: [PATCH] Reserve icons

---
 server/server.go                         | 16 +++------
 web/src/components/Navigation.js         | 10 +++---
 web/src/components/ReserveIcons.js       | 46 ++++++++++++++++++++++++
 web/src/components/ReserveTopicSelect.js |  9 ++---
 4 files changed, 62 insertions(+), 19 deletions(-)
 create mode 100644 web/src/components/ReserveIcons.js

diff --git a/server/server.go b/server/server.go
index 03bb9c25..b8761db3 100644
--- a/server/server.go
+++ b/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
 */
 
diff --git a/web/src/components/Navigation.js b/web/src/components/Navigation.js
index 81dbb476..a9e2072f 100644
--- a/web/src/components/Navigation.js
+++ b/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>
             }
diff --git a/web/src/components/ReserveIcons.js b/web/src/components/ReserveIcons.js
new file mode 100644
index 00000000..b5821f58
--- /dev/null
+++ b/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>
+    );
+});
diff --git a/web/src/components/ReserveTopicSelect.js b/web/src/components/ReserveTopicSelect.js
index e9ca91d0..59fa4c8f 100644
--- a/web/src/components/ReserveTopicSelect.js
+++ b/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>