feat(user-interface): add title field

packages/web/src/components/MetadataProvider/index.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+import useConfig from 'hooks/useConfig';
+
+type MetadataProviderProps = {
+  children: React.ReactNode;
+};
+
+const MetadataProvider = ({
+  children,
+}: MetadataProviderProps): React.ReactElement => {
+  const { config } = useConfig();
+
+  React.useEffect(() => {
+    document.title = (config?.title as string) || 'Automatisch';
+  }, [config?.title]);
+
+  return <>{children}</>;
+};
+
+export default MetadataProvider;

packages/web/src/index.tsx

@@ -4,6 +4,7 @@ import ThemeProvider from 'components/ThemeProvider';
 import IntlProvider from 'components/IntlProvider';
 import ApolloProvider from 'components/ApolloProvider';
 import SnackbarProvider from 'components/SnackbarProvider';
+import MetadataProvider from 'components/MetadataProvider';
 import { AuthenticationProvider } from 'contexts/Authentication';
 import { AutomatischInfoProvider } from 'contexts/AutomatischInfo';
 import Router from 'components/Router';
@@ -19,9 +20,11 @@ ReactDOM.render(
           <AutomatischInfoProvider>
             <IntlProvider>
               <ThemeProvider>
+                <MetadataProvider>
                   {routes}
 
                   <LiveChat />
+                </MetadataProvider>
               </ThemeProvider>
             </IntlProvider>
           </AutomatischInfoProvider>

packages/web/src/locales/en.json

@@ -220,6 +220,7 @@
   "appAuthClientsDialog.title": "Choose your authentication client",
   "userInterfacePage.title": "User Interface",
   "userInterfacePage.successfullyUpdated": "User interface has been updated.",
+  "userInterfacePage.metadataTitle": "Title",
   "userInterfacePage.mainColor": "Primary main color",
   "userInterfacePage.darkColor": "Primary dark color",
   "userInterfacePage.lightColor": "Primary light color",

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

@@ -24,6 +24,7 @@ type UserInterface = {
       main: string;
     };
   };
+  title: string;
   logo: {
     svgData: string;
   };
@@ -35,6 +36,7 @@ export default function UserInterface(): React.ReactElement {
     refetchQueries: ['GetConfig'],
   });
   const { config, loading: configLoading } = useConfig([
+    'title',
     'palette.primary.main',
     'palette.primary.light',
     'palette.primary.dark',
@@ -47,6 +49,7 @@ export default function UserInterface(): React.ReactElement {
       await updateConfig({
         variables: {
           input: {
+            title: uiData?.title,
             'palette.primary.main': uiData?.palette?.primary.main,
             'palette.primary.dark': uiData?.palette?.primary.dark,
             'palette.primary.light': uiData?.palette?.primary.light,
@@ -86,6 +89,12 @@ export default function UserInterface(): React.ReactElement {
               defaultValues={nestObject<UserInterface>(config)}
             >
               <Stack direction="column" gap={2}>
+                <TextField
+                  name="title"
+                  label={formatMessage('userInterfacePage.metadataTitle')}
+                  fullWidth
+                />
+
                 <ColorInput
                   name="palette.primary.main"
                   label={formatMessage('userInterfacePage.mainColor')}