diff --git a/packages/web/src/components/AdminSettingsLayout/Footer/index.jsx b/packages/web/src/components/AdminSettingsLayout/Footer/index.jsx index 8bfe8bc7..4022ba53 100644 --- a/packages/web/src/components/AdminSettingsLayout/Footer/index.jsx +++ b/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' && ( - + { ); }; -export default Footer; +export default AdminSettingsLayoutFooter; diff --git a/packages/web/src/locales/en.json b/packages/web/src/locales/en.json index 8ad1bca7..5279a00a 100644 --- a/packages/web/src/locales/en.json +++ b/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" } diff --git a/packages/web/src/pages/UserInterface/index.jsx b/packages/web/src/pages/UserInterface/index.jsx index 7222d481..8121e452 100644 --- a/packages/web/src/pages/UserInterface/index.jsx +++ b/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, - palettePrimaryMain: getPrimaryMainColor(uiData.palettePrimaryMain), + enableFooter: uiData.enableFooter, + 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} > + + {formatMessage('userInterfacePage.generalTitle')} + + + + {formatMessage('userInterfacePage.footerTitle')} + + + + + + + + + + + + + + + + + + + +