feat: add legal page with configuration options (#724)

* Addconfig entries for legal notice

* Add legal route handling to middleware

* Make legal notice public

* Add legal category to config sidebar

* Add legal notice page

* Add German translations for legal notice and configuration options

* Replace legal page with separate imprint and privacy pages

* Update middleware

* Add footer component

* Update legal text descriptions to indicate Markdown support again

* Refactor footer layout

* Add zIndex to footer component

* improve mobile layout

* run formatter

---------

Co-authored-by: Elias Schneider <login@eliasschneider.com>

frontend/src/components/admin/configuration/ConfigurationNavBar.tsx

@@ -19,6 +19,7 @@ import {
   TbBucket,
   TbBinaryTree,
   TbSettings,
+  TbScale,
 } from "react-icons/tb";
 import { FormattedMessage } from "react-intl";
 
@@ -30,6 +31,7 @@ const categories = [
   { name: "OAuth", icon: <TbSocial /> },
   { name: "LDAP", icon: <TbBinaryTree /> },
   { name: "S3", icon: <TbBucket /> },
+  { name: "Legal", icon: <TbScale /> },
 ];
 
 const useStyles = createStyles((theme) => ({

frontend/src/components/core/FileSizeInput.tsx

@@ -11,12 +11,16 @@ const multipliers = {
   GiB: 1024 ** 3,
   TB: 1000 ** 4,
   TiB: 1024 ** 4,
-}
+};
 
-const units = (["B", "KB", "KiB", "MB", "MiB", "GB", "GiB", "TB", "TiB"] as const).map(unit => ({ label: unit, value: unit }));
+const units = (
+  ["B", "KB", "KiB", "MB", "MiB", "GB", "GiB", "TB", "TiB"] as const
+).map((unit) => ({ label: unit, value: unit }));
 
 function getLargestApplicableUnit(value: number) {
-  return units.findLast(unit => value % multipliers[unit.value] === 0) || units[0];
+  return (
+    units.findLast((unit) => value % multipliers[unit.value] === 0) || units[0]
+  );
 }
 
 const FileSizeInput = ({
@@ -46,8 +50,9 @@ const FileSizeInput = ({
           marginRight: -2,
         },
       }}
-      onChange={event => {
-        const unit = event.currentTarget.value as typeof units[number]["value"];
+      onChange={(event) => {
+        const unit = event.currentTarget
+          .value as (typeof units)[number]["value"];
         setUnit(unit);
         onChange(multipliers[unit] * inputValue);
       }}
@@ -63,7 +68,7 @@ const FileSizeInput = ({
       precision={0}
       rightSection={unitSelect}
       rightSectionWidth={76}
-      onChange={value => {
+      onChange={(value) => {
         const inputVal = value || 0;
         setInputValue(inputVal);
         onChange(multipliers[unit] * inputVal);

frontend/src/components/footer/Footer.tsx

@@ -0,0 +1,62 @@
+import { Anchor, Footer as MFooter, SimpleGrid, Text } from "@mantine/core";
+import { useMediaQuery } from "@mantine/hooks";
+import useConfig from "../../hooks/config.hook";
+import useTranslate from "../../hooks/useTranslate.hook";
+
+const Footer = () => {
+  const t = useTranslate();
+  const config = useConfig();
+  const hasImprint = !!(
+    config.get("legal.imprintUrl") || config.get("legal.imprintText")
+  );
+  const hasPrivacy = !!(
+    config.get("legal.privacyPolicyUrl") ||
+    config.get("legal.privacyPolicyText")
+  );
+  const imprintUrl =
+    (!config.get("legal.imprintText") && config.get("legal.imprintUrl")) ||
+    "/imprint";
+  const privacyUrl =
+    (!config.get("legal.privacyPolicyText") &&
+      config.get("legal.privacyPolicyUrl")) ||
+    "/privacy";
+
+  const isMobile = useMediaQuery("(max-width: 700px)");
+
+  return (
+    <MFooter height="auto" py={6} px="xl" zIndex={100}>
+      <SimpleGrid cols={isMobile ? 2 : 3} m={0}>
+        {!isMobile && <div></div>}
+        <Text size="xs" color="dimmed" align={isMobile ? "left" : "center"}>
+          Powered by{" "}
+          <Anchor
+            size="xs"
+            href="https://github.com/stonith404/pingvin-share"
+            target="_blank"
+          >
+            Pingvin Share
+          </Anchor>
+        </Text>
+        <div>
+          {config.get("legal.enabled") && (
+            <Text size="xs" color="dimmed" align="right">
+              {hasImprint && (
+                <Anchor size="xs" href={imprintUrl}>
+                  {t("imprint.title")}
+                </Anchor>
+              )}
+              {hasImprint && hasPrivacy && " • "}
+              {hasPrivacy && (
+                <Anchor size="xs" href={privacyUrl}>
+                  {t("privacy.title")}
+                </Anchor>
+              )}
+            </Text>
+          )}
+        </div>
+      </SimpleGrid>
+    </MFooter>
+  );
+};
+
+export default Footer;