Add modal for prompting t&c consent

This is a really basic consent modal, that is only
closeable by agreeing to the configured terms and
conditions. Users are prompted when first visiting
Tobira.
The consent is saved in local storage, meaning it is
done on a per-device basis rather than per-user.
It gets away with using a simple hashing function
since it does not contain any sensible information.
Users are re-prompted once anything in the T&Cs changes.

Author: owi92

frontend/src/layout/Root.tsx

@@ -15,6 +15,8 @@ import { OperationType } from "relay-runtime";
 import { UserData$key } from "../__generated__/UserData.graphql";
 import { useNoindexTag } from "../util";
 import { screenWidthAtMost } from "@opencast/appkit";
+import { InitialConsent } from "../ui/InitialConsent";
+import CONFIG from "../config";
 
 
 export const MAIN_PADDING = 16;
@@ -31,6 +33,7 @@ export const Root: React.FC<Props> = ({ nav, children }) => {
 
     return (
         <Outer disableScrolling={menu.state === "burger"}>
+            {CONFIG.initialConsent && <InitialConsent />}
             <Header hideNavIcon={!navExists} />
             {menu.state === "burger" && navExists && (
                 <BurgerMenu items={navElements} hide={() => menu.close()} />

frontend/src/ui/InitialConsent.tsx

@@ -0,0 +1,42 @@
+import { useRef } from "react";
+import CONFIG from "../config";
+import { currentRef, useTranslatedConfig } from "../util";
+import { Modal, ModalHandle } from "./Modal";
+import { Button } from "./Button";
+import { TextBlock } from "./Blocks/Text";
+
+
+export const InitialConsent: React.FC = () => {
+    const modalRef = useRef<ModalHandle>(null);
+    const userConsent = localStorage.getItem("userConsent") ?? "";
+    const { title, text, button } = CONFIG.initialConsent;
+
+    // Since this doesn't store any critical information, a simple, insecure hash
+    // should suffice.
+    // Source: https://gist.github.com/jlevy/c246006675becc446360a798e2b2d781
+    const simpleHash = (str: string) => {
+        let hash = 0;
+        for (let i = 0; i < str.length; i++) {
+            hash = ((hash << 5) - hash + str.charCodeAt(i)) | 0;
+        }
+        return (hash >>> 0).toString(36);
+    };
+
+    const hash = simpleHash(CONFIG.initialConsent.toString());
+
+    return userConsent !== hash ? (
+        <Modal
+            open
+            ref={modalRef}
+            title={useTranslatedConfig(title)}
+            closable={false}
+        >
+            <TextBlock content={useTranslatedConfig(text)} />
+            <Button autoFocus css={{ marginTop: 20 }} onClick={() => {
+                localStorage.setItem("userConsent", hash);
+                currentRef(modalRef).close?.();
+            }}>{useTranslatedConfig(button)}</Button>
+        </Modal>
+    ) : null;
+};
+

frontend/src/ui/Modal.tsx

@@ -27,6 +27,7 @@ type ModalProps = {
     closable?: boolean;
     className?: string;
     closeOnOutsideClick?: boolean;
+    open?: boolean;
 };
 
 export type ModalHandle = {
@@ -41,16 +42,17 @@ export const Modal = forwardRef<ModalHandle, PropsWithChildren<ModalProps>>(({
     children,
     className,
     closeOnOutsideClick = false,
+    open = false,
 }, ref) => {
     const { t } = useTranslation();
-    const [isOpen, setOpen] = useState(false);
+    const [isOpen, setOpen] = useState(open);
     const isDark = useColorScheme().scheme === "dark";
 
     useImperativeHandle(ref, () => ({
         isOpen: () => isOpen,
         open: () => setOpen(true),
-        close: closable ? (() => setOpen(false)) : undefined,
-    }), [isOpen, closable]);
+        close: () => setOpen(false),
+    }), [isOpen]);
 
     useEffect(() => {
         const handleEscape = (event: KeyboardEvent) => {