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.
Users are re-prompted once anything in the T&Cs changes.

Author: owi92

frontend/src/layout/Root.tsx

@@ -15,6 +15,7 @@ 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";
 
 
 export const MAIN_PADDING = 16;
@@ -31,6 +32,7 @@ export const Root: React.FC<Props> = ({ nav, children }) => {
 
     return (
         <Outer disableScrolling={menu.state === "burger"}>
+            <InitialConsent />
             <Header hideNavIcon={!navExists} />
             {menu.state === "burger" && navExists && (
                 <BurgerMenu items={navElements} hide={() => menu.close()} />

frontend/src/ui/InitialConsent.tsx

@@ -0,0 +1,53 @@
+import { useEffect, useRef, useState } 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";
+
+
+const USER_CONSENT = "tobiraUserConsent";
+
+export const InitialConsent: React.FC = () => {
+    if (!CONFIG.initialConsent) {
+        return null;
+    }
+    const [hash, setHash] = useState("");
+    const userConsent = localStorage.getItem(USER_CONSENT);
+    const modalRef = useRef<ModalHandle>(null);
+    const title = useTranslatedConfig(CONFIG.initialConsent.title);
+    const text = useTranslatedConfig(CONFIG.initialConsent.text);
+    const buttonLabel = useTranslatedConfig(CONFIG.initialConsent.button);
+
+    useEffect(() => {
+        const makeHash = async () => {
+            const msgUint8 = new TextEncoder().encode(JSON.stringify(CONFIG.initialConsent));
+            const hashBuffer = await crypto.subtle.digest("SHA-256", msgUint8);
+            const hashArray = Array.from(new Uint8Array(hashBuffer));
+            const hashHex = hashArray
+                .map(b => b.toString(16).padStart(2, "0"))
+                .join("");
+            setHash(hashHex);
+        };
+        makeHash();
+    }, []);
+
+    return hash === userConsent ? null : (
+        <Modal
+            open
+            ref={modalRef}
+            title={title}
+            closable={false}
+            initialFocus={false}
+        >
+            <TextBlock content={text} />
+            <div css={{ display: "flex" }}>
+                <Button css={{ marginTop: 20, marginLeft: "auto" }} onClick={() => {
+                    localStorage.setItem(USER_CONSENT, hash);
+                    currentRef(modalRef).close?.();
+                }}>{buttonLabel}</Button>
+            </div>
+        </Modal>
+    );
+};
+

frontend/src/ui/Modal.tsx

@@ -27,6 +27,15 @@ type ModalProps = {
     closable?: boolean;
     className?: string;
     closeOnOutsideClick?: boolean;
+    open?: boolean;
+    /**
+     * Determines if an element in the modal should be initially focused.
+     * Instead of passing this an HTMLElement, it is probably easier to use
+     * react's `autoFocus` prop on the element that should be focused.
+     * Default is the first element in tab order.
+     * Use `false` if no element should be focused.
+     */
+    initialFocus?: HTMLElement | false;
 };
 
 export type ModalHandle = {
@@ -41,16 +50,18 @@ export const Modal = forwardRef<ModalHandle, PropsWithChildren<ModalProps>>(({
     children,
     className,
     closeOnOutsideClick = false,
+    open = false,
+    initialFocus,
 }, 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) => {
@@ -63,7 +74,7 @@ export const Modal = forwardRef<ModalHandle, PropsWithChildren<ModalProps>>(({
     }, [closable]);
 
     return ReactDOM.createPortal(
-        isOpen && <FocusTrap>
+        isOpen && <FocusTrap focusTrapOptions={{ initialFocus }}>
             <div
                 {...(closable && closeOnOutsideClick && { onClick: e => {
                     if (e.target === e.currentTarget) {