1 files changed, 54 insertions, 0 deletions
diff --git a/web/src/components/PrivacyPolicyDrawer.tsx b/web/src/components/PrivacyPolicyDrawer.tsx
new file mode 100644
index 000000000..dcdb363b5
--- /dev/null
+++ b/web/src/components/PrivacyPolicyDrawer.tsx
@@ -0,0 +1,54 @@
+import { Button, Drawer, DrawerProps, Grid, Typography } from "@mui/material";
+import { Trans, useTranslation } from "react-i18next";
+
+import PrivacyPolicyLink from "@components/PrivacyPolicyLink";
+import { usePersistentStorageValue } from "@hooks/PersistentStorage";
+import { getPrivacyPolicyEnabled, getPrivacyPolicyRequireAccept } from "@utils/Configuration";
+
+const PrivacyPolicyDrawer = function (props: DrawerProps) {
+    const privacyEnabled = getPrivacyPolicyEnabled();
+    const privacyRequireAccept = getPrivacyPolicyRequireAccept();
+    const [accepted, setAccepted] = usePersistentStorageValue<boolean>("privacy-policy-accepted", false);
+    const { t: translate } = useTranslation();
+
+    return privacyEnabled && privacyRequireAccept && !accepted ? (
+        <Drawer {...props} anchor="bottom" open={!accepted}>
+            <Grid
+                container
+                alignItems="center"
+                justifyContent="center"
+                textAlign="center"
+                aria-labelledby="privacy-policy-drawer-title"
+                aria-describedby="privacy-policy-drawer-description"
+            >
+                <Grid container item xs={12} paddingY={2}>
+                    <Grid item xs={12}>
+                        <Typography id="privacy-policy-drawer-title" variant="h6" component="h2">
+                            {translate("Privacy Policy")}
+                        </Typography>
+                    </Grid>
+                </Grid>
+                <Grid item xs={12}>
+                    <Typography id="privacy-policy-drawer-description">
+                        <Trans
+                            i18nKey="You must view and accept the Privacy Policy before using"
+                            components={[<PrivacyPolicyLink />]}
+                        />{" "}
+                        Authelia.
+                    </Typography>
+                </Grid>
+                <Grid item xs={12} paddingY={2}>
+                    <Button
+                        onClick={() => {
+                            setAccepted(true);
+                        }}
+                    >
+                        {translate("Accept")}
+                    </Button>
+                </Grid>
+            </Grid>
+        </Drawer>
+    ) : null;
+};
+
+export default PrivacyPolicyDrawer;