feat(UserInterface): add footer fields for customization

packages/web/src/components/AdminSettingsLayout/Footer/index.jsx

@@ -5,13 +5,13 @@ import Typography from '@mui/material/Typography';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useVersion from 'hooks/useVersion';
 
-const Footer = () => {
+const AdminSettingsLayoutFooter = () => {
   const version = useVersion();
   const formatMessage = useFormatMessage();
 
   return (
     typeof version?.version === 'string' && (
-      <Box mt="auto" position="sticky" bottom={0}>
+      <Box mt="auto" position="sticky" bottom={0} zIndex={99}>
         <Box bgcolor="common.white" mt={4}>
           <Divider />
           <Typography
@@ -32,4 +32,4 @@ const Footer = () => {
   );
 };
 
-export default Footer;
+export default AdminSettingsLayoutFooter;

packages/web/src/locales/en.json

@@ -273,12 +273,23 @@
   "permissionSettings.title": "Conditions",
   "appOAuthClientsDialog.title": "Choose your authentication client",
   "userInterfacePage.title": "User Interface",
+  "userInterfacePage.generalTitle": "General",
+  "userInterfacePage.footerTitle": "Footer",
   "userInterfacePage.successfullyUpdated": "User interface has been updated.",
   "userInterfacePage.titleFieldLabel": "Title",
   "userInterfacePage.primaryMainColorFieldLabel": "Primary main color",
   "userInterfacePage.primaryDarkColorFieldLabel": "Primary dark color",
   "userInterfacePage.primaryLightColorFieldLabel": "Primary light color",
   "userInterfacePage.svgDataFieldLabel": "Logo SVG code",
+  "userInterfacePage.footerLogoSvgDataFieldLabel": "logo SVG code",
+  "userInterfacePage.footerCopyrightTextFieldLabel": "Copyright text",
+  "userInterfacePage.enableFooterLabel": "Enable footer",
+  "userInterfacePage.footerTextColorLabel": "Text color",
+  "userInterfacePage.footerBackgroundColorLabel": "Background color",
+  "userInterfacePage.footerDocsLinkLabel": "Documentation link",
+  "userInterfacePage.footerTosLinkLabel": "Terms of services link",
+  "userInterfacePage.footerPrivacyPolicyLinkLabel": "Privacy policy link",
+  "userInterfacePage.footerImprintLinkLabel": "Imprint link",
   "userInterfacePage.submit": "Update",
   "authenticationPage.title": "Single Sign-On with SAML",
   "authenticationForm.active": "Active",
@@ -355,5 +366,9 @@
   "flowFolderChangeDialog.confirm": "Move",
   "flowFolderChangeDialog.uncategorizedFolder": "Uncategorized",
   "flowFolderChangeDialog.successfullyUpdatedFolder": "The flow has been successfully moved to the new folder!",
-  "flowFolder.uncategorized": "Uncategorized"
+  "flowFolder.uncategorized": "Uncategorized",
+  "footer.docsLinkText": "Documentation",
+  "footer.tosLinkText": "Terms of Service",
+  "footer.privacyPolicyLinkText": "Privacy",
+  "footer.imprintLinkText": "Imprint"
 }

packages/web/src/pages/UserInterface/index.jsx

@@ -1,10 +1,12 @@
 import LoadingButton from '@mui/lab/LoadingButton';
 import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
 import Skeleton from '@mui/material/Skeleton';
 import Stack from '@mui/material/Stack';
 import mergeWith from 'lodash/mergeWith';
 import * as React from 'react';
 
+import Switch from 'components/Switch';
 import ColorInput from 'components/ColorInput';
 import Container from 'components/Container';
 import Form from 'components/Form';
@@ -29,6 +31,16 @@ const defaultValues = {
   palettePrimaryMain: primaryMainColor,
   palettePrimaryDark: primaryDarkColor,
   palettePrimaryLight: primaryLightColor,
+  logoSvgData: '',
+  enableFooter: false,
+  footerLogoSvgData: '',
+  footerCopyrightText: '',
+  footerBackgroundColor: '#FFFFFF',
+  footerTextColor: '#000000',
+  footerDocsLink: '',
+  footerTosLink: '',
+  footerPrivacyPolicyLink: '',
+  footerImprintLink: '',
 };
 
 const mergeIfGiven = (oldValue, newValue) => {
@@ -51,13 +63,24 @@ export default function UserInterface() {
   const handleUserInterfaceUpdate = async (uiData) => {
     try {
       const input = {
-        title: uiData.title,
+        enableFooter: uiData.enableFooter,
-        palettePrimaryMain: getPrimaryMainColor(uiData.palettePrimaryMain),
+        footerBackgroundColor: uiData.footerBackgroundColor,
+        footerCopyrightText: uiData.footerCopyrightText,
+        footerDocsLink: uiData.footerDocsLink,
+        footerImprintLink: uiData.footerImprintLink,
+        footerLogoSvgData: uiData.footerLogoSvgData,
+        footerPrivacyPolicyLink: uiData.footerPrivacyPolicyLink,
+        footerTextColor: uiData.footerTextColor,
+        footerTosLink: uiData.footerTosLink,
+        logoSvgData: uiData.logoSvgData,
         palettePrimaryDark: getPrimaryDarkColor(uiData.palettePrimaryDark),
         palettePrimaryLight: getPrimaryLightColor(uiData.palettePrimaryLight),
-        logoSvgData: uiData.logoSvgData,
+        palettePrimaryMain: getPrimaryMainColor(uiData.palettePrimaryMain),
+        title: uiData.title,
       };
+
       await updateConfig(input);
+
       enqueueSnackbar(formatMessage('userInterfacePage.successfullyUpdated'), {
         variant: 'success',
         SnackbarProps: {
@@ -92,6 +115,10 @@ export default function UserInterface() {
               defaultValues={configWithDefaults}
             >
               <Stack direction="column" gap={2}>
+                <Typography variant="h4" gutterBottom={true}>
+                  {formatMessage('userInterfacePage.generalTitle')}
+                </Typography>
+
                 <TextField
                   name="title"
                   label={formatMessage('userInterfacePage.titleFieldLabel')}
@@ -133,6 +160,89 @@ export default function UserInterface() {
                   data-test="logo-svg-data-text-field"
                 />
 
+                <Typography variant="h4" gutterBottom={true} mt={3}>
+                  {formatMessage('userInterfacePage.footerTitle')}
+                </Typography>
+
+                <Switch
+                  name="enableFooter"
+                  label={formatMessage('userInterfacePage.enableFooterLabel')}
+                />
+
+                <TextField
+                  name="footerLogoSvgData"
+                  label={formatMessage(
+                    'userInterfacePage.footerLogoSvgDataFieldLabel',
+                  )}
+                  multiline
+                  fullWidth
+                  data-test="logo-svg-data-text-field"
+                />
+
+                <TextField
+                  name="footerCopyrightText"
+                  label={formatMessage(
+                    'userInterfacePage.footerCopyrightTextFieldLabel',
+                  )}
+                  multiline
+                  fullWidth
+                  data-test="logo-svg-data-text-field"
+                />
+
+                <ColorInput
+                  name="footerBackgroundColor"
+                  label={formatMessage(
+                    'userInterfacePage.footerBackgroundColorLabel',
+                  )}
+                  fullWidth
+                  data-test="footer-background-color-input"
+                />
+
+                <ColorInput
+                  name="footerTextColor"
+                  label={formatMessage(
+                    'userInterfacePage.footerTextColorLabel',
+                  )}
+                  fullWidth
+                  data-test="footer-text-color-input"
+                />
+
+                <TextField
+                  name="footerDocsLink"
+                  label={formatMessage('userInterfacePage.footerDocsLinkLabel')}
+                  multiline
+                  fullWidth
+                  data-test="logo-svg-data-text-field"
+                />
+
+                <TextField
+                  name="footerTosLink"
+                  label={formatMessage('userInterfacePage.footerTosLinkLabel')}
+                  multiline
+                  fullWidth
+                  data-test="logo-svg-data-text-field"
+                />
+
+                <TextField
+                  name="footerPrivacyPolicyLink"
+                  label={formatMessage(
+                    'userInterfacePage.footerPrivacyPolicyLinkLabel',
+                  )}
+                  multiline
+                  fullWidth
+                  data-test="logo-svg-data-text-field"
+                />
+
+                <TextField
+                  name="footerImprintLink"
+                  label={formatMessage(
+                    'userInterfacePage.footerImprintLinkLabel',
+                  )}
+                  multiline
+                  fullWidth
+                  data-test="logo-svg-data-text-field"
+                />
+
                 <LoadingButton
                   type="submit"
                   variant="contained"