From 08a3b909423c9cd957bc4445b025e68c6da0c65f Mon Sep 17 00:00:00 2001
From: Quentin Gliech <quenting@element.io>
Date: Fri, 29 Mar 2024 16:18:43 +0100
Subject: [PATCH] Load the branding from the API instead of hardcoding in the
 config

---
 frontend/index.html                           |   2 +-
 frontend/src/components/ErrorBoundary.tsx     |   2 +-
 .../src/components/Footer/Footer.stories.tsx  |  34 +++++-
 frontend/src/components/Footer/Footer.tsx     | 107 +++++++++---------
 frontend/src/components/Layout/Layout.tsx     |  44 +++++--
 frontend/src/config.ts                        |   6 -
 frontend/src/gql/gql.ts                       |  10 ++
 frontend/src/gql/graphql.ts                   |  12 ++
 frontend/src/main.tsx                         |  12 +-
 templates/app.html                            |   5 -
 10 files changed, 150 insertions(+), 84 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 5dc65ea8..97151e62 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -24,7 +24,7 @@ limitations under the License.
     <title>matrix-authentication-service</title>
     <script type="application/javascript">
       window.APP_CONFIG = JSON.parse(
-        '{"root": "/account/", "graphqlEndpoint": "/graphql", "branding": {}}',
+        '{"root": "/account/", "graphqlEndpoint": "/graphql"}',
       );
       (function () {
         const query = window.matchMedia("(prefers-color-scheme: dark)");
diff --git a/frontend/src/components/ErrorBoundary.tsx b/frontend/src/components/ErrorBoundary.tsx
index 1a8a8ba6..901aa194 100644
--- a/frontend/src/components/ErrorBoundary.tsx
+++ b/frontend/src/components/ErrorBoundary.tsx
@@ -54,7 +54,7 @@ export default class ErrorBoundary extends PureComponent<Props, IState> {
     if (this.state.error) {
       // We ask the child components not to suspend, as this error boundary won't be in a Suspense boundary.
       return (
-        <Layout dontSuspend>
+        <Layout>
           <GenericError dontSuspend error={this.state.error} />
         </Layout>
       );
diff --git a/frontend/src/components/Footer/Footer.stories.tsx b/frontend/src/components/Footer/Footer.stories.tsx
index 318f33ba..82b81827 100644
--- a/frontend/src/components/Footer/Footer.stories.tsx
+++ b/frontend/src/components/Footer/Footer.stories.tsx
@@ -14,16 +14,42 @@
 
 import type { Meta, StoryObj } from "@storybook/react";
 
-import Footer from "./Footer";
+import { makeFragmentData } from "../../gql";
+
+import Footer, { FRAGMENT } from "./Footer";
+
+const Template: React.FC<{
+  tosUri?: string;
+  policyUri?: string;
+  imprint?: string;
+}> = ({ tosUri, policyUri, imprint }) => (
+  <Footer
+    siteConfig={makeFragmentData(
+      { id: "1234", tosUri, policyUri, imprint },
+      FRAGMENT,
+    )}
+  />
+);
 
 const meta = {
   title: "UI/Footer",
-  component: Footer,
+  component: Template,
+  argTypes: {
+    tosUri: {
+      control: "text",
+    },
+    policyUri: {
+      control: "text",
+    },
+    imprint: {
+      control: "text",
+    },
+  },
   tags: ["autodocs"],
-} satisfies Meta<typeof Footer>;
+} satisfies Meta<typeof Template>;
 
 export default meta;
-type Story = StoryObj<typeof Footer>;
+type Story = StoryObj<typeof Template>;
 
 export const Basic: Story = {
   args: {
diff --git a/frontend/src/components/Footer/Footer.tsx b/frontend/src/components/Footer/Footer.tsx
index b92d1cbb..8085a8b3 100644
--- a/frontend/src/components/Footer/Footer.tsx
+++ b/frontend/src/components/Footer/Footer.tsx
@@ -13,66 +13,69 @@
 // limitations under the License.
 
 import { Link } from "@vector-im/compound-web";
-import { Translation } from "react-i18next";
+import { useTranslation } from "react-i18next";
+
+import { FragmentType, graphql, useFragment } from "../../gql";
 
 import styles from "./Footer.module.css";
 
+export const FRAGMENT = graphql(/* GraphQL */ `
+  fragment Footer_siteConfig on SiteConfig {
+    id
+    imprint
+    tosUri
+    policyUri
+  }
+`);
+
 type Props = {
-  policyUri?: string;
-  tosUri?: string;
-  imprint?: string;
-  dontSuspend?: boolean;
+  siteConfig: FragmentType<typeof FRAGMENT>;
 };
 
-const Footer: React.FC<Props> = ({
-  policyUri,
-  tosUri,
-  imprint,
-  dontSuspend,
-}) => (
-  <Translation useSuspense={!dontSuspend}>
-    {(t) => (
-      <footer className={styles.legalFooter}>
-        {(policyUri || tosUri) && (
-          <nav>
-            {policyUri && (
-              <Link
-                href={policyUri}
-                title={t("branding.privacy_policy.alt", {
-                  defaultValue: "Link to the service privacy policy",
-                })}
-              >
-                {t("branding.privacy_policy.link", {
-                  defaultValue: "Privacy policy",
-                })}
-              </Link>
-            )}
+const Footer: React.FC<Props> = ({ siteConfig }) => {
+  const data = useFragment(FRAGMENT, siteConfig);
+  const { t } = useTranslation();
+  return (
+    <footer className={styles.legalFooter}>
+      {(data.policyUri || data.tosUri) && (
+        <nav>
+          {data.policyUri && (
+            <Link
+              href={data.policyUri}
+              title={t("branding.privacy_policy.alt", {
+                defaultValue: "Link to the service privacy policy",
+              })}
+            >
+              {t("branding.privacy_policy.link", {
+                defaultValue: "Privacy policy",
+              })}
+            </Link>
+          )}
 
-            {policyUri && tosUri && (
-              <div className={styles.separator} aria-hidden="true">
-                •
-              </div>
-            )}
+          {data.policyUri && data.tosUri && (
+            <div className={styles.separator} aria-hidden="true">
+              •
+            </div>
+          )}
 
-            {tosUri && (
-              <Link
-                href={tosUri}
-                title={t("branding.terms_and_conditions.alt", {
-                  defaultValue: "Link to the service terms and conditions",
-                })}
-              >
-                {t("branding.terms_and_conditions.link", {
-                  defaultValue: "Terms and conditions",
-                })}
-              </Link>
-            )}
-          </nav>
-        )}
+          {data.tosUri && (
+            <Link
+              href={data.tosUri}
+              title={t("branding.terms_and_conditions.alt", {
+                defaultValue: "Link to the service terms and conditions",
+              })}
+            >
+              {t("branding.terms_and_conditions.link", {
+                defaultValue: "Terms and conditions",
+              })}
+            </Link>
+          )}
+        </nav>
+      )}
 
-        {imprint && <p className={styles.imprint}>{imprint}</p>}
-      </footer>
-    )}
-  </Translation>
-);
+      {data.imprint && <p className={styles.imprint}>{data.imprint}</p>}
+    </footer>
+  );
+};
 
 export default Footer;
diff --git a/frontend/src/components/Layout/Layout.tsx b/frontend/src/components/Layout/Layout.tsx
index a68c9952..3c52f876 100644
--- a/frontend/src/components/Layout/Layout.tsx
+++ b/frontend/src/components/Layout/Layout.tsx
@@ -13,26 +13,52 @@
 // limitations under the License.
 
 import cx from "classnames";
+import { Suspense } from "react";
+import { useQuery } from "urql";
 
-import appConfig from "../../config";
+import { graphql } from "../../gql";
 import Footer from "../Footer";
 
 import styles from "./Layout.module.css";
 
+const QUERY = graphql(/* GraphQL */ `
+  query FooterQuery {
+    siteConfig {
+      id
+      ...Footer_siteConfig
+    }
+  }
+`);
+
+const AsyncFooter: React.FC = () => {
+  const [result] = useQuery({
+    query: QUERY,
+  });
+
+  if (result.error) {
+    // We probably prefer to render an empty footer in case of an error
+    return null;
+  }
+
+  const siteConfig = result.data?.siteConfig;
+  if (!siteConfig) {
+    // We checked for errors, this should never happen
+    throw new Error();
+  }
+
+  return <Footer siteConfig={siteConfig} />;
+};
+
 const Layout: React.FC<{
   children?: React.ReactNode;
-  dontSuspend?: boolean;
   wide?: boolean;
-}> = ({ children, dontSuspend, wide }) => (
+}> = ({ children, wide }) => (
   <div className={cx(styles.layoutContainer, wide && styles.wide)}>
     {children}
 
-    <Footer
-      dontSuspend={dontSuspend}
-      imprint={appConfig.branding?.imprint}
-      tosUri={appConfig.branding?.tosUri}
-      policyUri={appConfig.branding?.policyUri}
-    />
+    <Suspense fallback={null}>
+      <AsyncFooter />
+    </Suspense>
   </div>
 );
 
diff --git a/frontend/src/config.ts b/frontend/src/config.ts
index 4ab5b915..f505387b 100644
--- a/frontend/src/config.ts
+++ b/frontend/src/config.ts
@@ -15,11 +15,6 @@
 export type AppConfig = {
   root: string;
   graphqlEndpoint: string;
-  branding?: {
-    tosUri?: string;
-    policyUri?: string;
-    imprint?: string;
-  };
 };
 
 interface IWindow {
@@ -30,7 +25,6 @@ const config: AppConfig = (typeof window !== "undefined" &&
   (window as IWindow).APP_CONFIG) || {
   root: "/",
   graphqlEndpoint: "/graphql",
-  branding: {},
 };
 
 export default config;
diff --git a/frontend/src/gql/gql.ts b/frontend/src/gql/gql.ts
index 1ffec824..d386d6ee 100644
--- a/frontend/src/gql/gql.ts
+++ b/frontend/src/gql/gql.ts
@@ -18,6 +18,8 @@ const documents = {
     "\n  fragment OAuth2Client_detail on Oauth2Client {\n    id\n    clientId\n    clientName\n    clientUri\n    logoUri\n    tosUri\n    policyUri\n    redirectUris\n  }\n": types.OAuth2Client_DetailFragmentDoc,
     "\n  fragment CompatSession_session on CompatSession {\n    id\n    createdAt\n    deviceId\n    finishedAt\n    lastActiveIp\n    lastActiveAt\n    userAgent {\n      name\n      os\n      model\n      deviceType\n    }\n    ssoLogin {\n      id\n      redirectUri\n    }\n  }\n": types.CompatSession_SessionFragmentDoc,
     "\n  mutation EndCompatSession($id: ID!) {\n    endCompatSession(input: { compatSessionId: $id }) {\n      status\n      compatSession {\n        id\n        finishedAt\n      }\n    }\n  }\n": types.EndCompatSessionDocument,
+    "\n  fragment Footer_siteConfig on SiteConfig {\n    id\n    imprint\n    tosUri\n    policyUri\n  }\n": types.Footer_SiteConfigFragmentDoc,
+    "\n  query FooterQuery {\n    siteConfig {\n      id\n      ...Footer_siteConfig\n    }\n  }\n": types.FooterQueryDocument,
     "\n  fragment OAuth2Session_session on Oauth2Session {\n    id\n    scope\n    createdAt\n    finishedAt\n    lastActiveIp\n    lastActiveAt\n\n    userAgent {\n      name\n      model\n      os\n      deviceType\n    }\n\n    client {\n      id\n      clientId\n      clientName\n      applicationType\n      logoUri\n    }\n  }\n": types.OAuth2Session_SessionFragmentDoc,
     "\n  mutation EndOAuth2Session($id: ID!) {\n    endOauth2Session(input: { oauth2SessionId: $id }) {\n      status\n      oauth2Session {\n        id\n        ...OAuth2Session_session\n      }\n    }\n  }\n": types.EndOAuth2SessionDocument,
     "\n  fragment BrowserSession_detail on BrowserSession {\n    id\n    createdAt\n    finishedAt\n    userAgent {\n      name\n      model\n      os\n    }\n    lastActiveIp\n    lastActiveAt\n    lastAuthentication {\n      id\n      createdAt\n    }\n    user {\n      id\n      username\n    }\n  }\n": types.BrowserSession_DetailFragmentDoc,
@@ -83,6 +85,14 @@ export function graphql(source: "\n  fragment CompatSession_session on CompatSes
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(source: "\n  mutation EndCompatSession($id: ID!) {\n    endCompatSession(input: { compatSessionId: $id }) {\n      status\n      compatSession {\n        id\n        finishedAt\n      }\n    }\n  }\n"): (typeof documents)["\n  mutation EndCompatSession($id: ID!) {\n    endCompatSession(input: { compatSessionId: $id }) {\n      status\n      compatSession {\n        id\n        finishedAt\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  fragment Footer_siteConfig on SiteConfig {\n    id\n    imprint\n    tosUri\n    policyUri\n  }\n"): (typeof documents)["\n  fragment Footer_siteConfig on SiteConfig {\n    id\n    imprint\n    tosUri\n    policyUri\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  query FooterQuery {\n    siteConfig {\n      id\n      ...Footer_siteConfig\n    }\n  }\n"): (typeof documents)["\n  query FooterQuery {\n    siteConfig {\n      id\n      ...Footer_siteConfig\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
diff --git a/frontend/src/gql/graphql.ts b/frontend/src/gql/graphql.ts
index 67d41fdb..dcabeacb 100644
--- a/frontend/src/gql/graphql.ts
+++ b/frontend/src/gql/graphql.ts
@@ -1241,6 +1241,16 @@ export type EndCompatSessionMutationVariables = Exact<{
 
 export type EndCompatSessionMutation = { __typename?: 'Mutation', endCompatSession: { __typename?: 'EndCompatSessionPayload', status: EndCompatSessionStatus, compatSession?: { __typename?: 'CompatSession', id: string, finishedAt?: string | null } | null } };
 
+export type Footer_SiteConfigFragment = { __typename?: 'SiteConfig', id: string, imprint?: string | null, tosUri?: string | null, policyUri?: string | null } & { ' $fragmentName'?: 'Footer_SiteConfigFragment' };
+
+export type FooterQueryQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type FooterQueryQuery = { __typename?: 'Query', siteConfig: (
+    { __typename?: 'SiteConfig', id: string }
+    & { ' $fragmentRefs'?: { 'Footer_SiteConfigFragment': Footer_SiteConfigFragment } }
+  ) };
+
 export type OAuth2Session_SessionFragment = { __typename?: 'Oauth2Session', id: string, scope: string, createdAt: string, finishedAt?: string | null, lastActiveIp?: string | null, lastActiveAt?: string | null, userAgent?: { __typename?: 'UserAgent', name?: string | null, model?: string | null, os?: string | null, deviceType: DeviceType } | null, client: { __typename?: 'Oauth2Client', id: string, clientId: string, clientName?: string | null, applicationType?: Oauth2ApplicationType | null, logoUri?: string | null } } & { ' $fragmentName'?: 'OAuth2Session_SessionFragment' };
 
 export type EndOAuth2SessionMutationVariables = Exact<{
@@ -1451,6 +1461,7 @@ export type AllowCrossSigningResetMutation = { __typename?: 'Mutation', allowUse
 export const BrowserSession_SessionFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"BrowserSession_session"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"BrowserSession"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"finishedAt"}},{"kind":"Field","name":{"kind":"Name","value":"userAgent"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"raw"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"os"}},{"kind":"Field","name":{"kind":"Name","value":"model"}},{"kind":"Field","name":{"kind":"Name","value":"deviceType"}}]}},{"kind":"Field","name":{"kind":"Name","value":"lastActiveIp"}},{"kind":"Field","name":{"kind":"Name","value":"lastActiveAt"}},{"kind":"Field","name":{"kind":"Name","value":"lastAuthentication"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}}]}}]}}]} as unknown as DocumentNode<BrowserSession_SessionFragment, unknown>;
 export const OAuth2Client_DetailFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"OAuth2Client_detail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Oauth2Client"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"clientId"}},{"kind":"Field","name":{"kind":"Name","value":"clientName"}},{"kind":"Field","name":{"kind":"Name","value":"clientUri"}},{"kind":"Field","name":{"kind":"Name","value":"logoUri"}},{"kind":"Field","name":{"kind":"Name","value":"tosUri"}},{"kind":"Field","name":{"kind":"Name","value":"policyUri"}},{"kind":"Field","name":{"kind":"Name","value":"redirectUris"}}]}}]} as unknown as DocumentNode<OAuth2Client_DetailFragment, unknown>;
 export const CompatSession_SessionFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"CompatSession_session"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CompatSession"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"deviceId"}},{"kind":"Field","name":{"kind":"Name","value":"finishedAt"}},{"kind":"Field","name":{"kind":"Name","value":"lastActiveIp"}},{"kind":"Field","name":{"kind":"Name","value":"lastActiveAt"}},{"kind":"Field","name":{"kind":"Name","value":"userAgent"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"os"}},{"kind":"Field","name":{"kind":"Name","value":"model"}},{"kind":"Field","name":{"kind":"Name","value":"deviceType"}}]}},{"kind":"Field","name":{"kind":"Name","value":"ssoLogin"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"redirectUri"}}]}}]}}]} as unknown as DocumentNode<CompatSession_SessionFragment, unknown>;
+export const Footer_SiteConfigFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"Footer_siteConfig"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"SiteConfig"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"imprint"}},{"kind":"Field","name":{"kind":"Name","value":"tosUri"}},{"kind":"Field","name":{"kind":"Name","value":"policyUri"}}]}}]} as unknown as DocumentNode<Footer_SiteConfigFragment, unknown>;
 export const OAuth2Session_SessionFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"OAuth2Session_session"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Oauth2Session"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"scope"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"finishedAt"}},{"kind":"Field","name":{"kind":"Name","value":"lastActiveIp"}},{"kind":"Field","name":{"kind":"Name","value":"lastActiveAt"}},{"kind":"Field","name":{"kind":"Name","value":"userAgent"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"model"}},{"kind":"Field","name":{"kind":"Name","value":"os"}},{"kind":"Field","name":{"kind":"Name","value":"deviceType"}}]}},{"kind":"Field","name":{"kind":"Name","value":"client"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"clientId"}},{"kind":"Field","name":{"kind":"Name","value":"clientName"}},{"kind":"Field","name":{"kind":"Name","value":"applicationType"}},{"kind":"Field","name":{"kind":"Name","value":"logoUri"}}]}}]}}]} as unknown as DocumentNode<OAuth2Session_SessionFragment, unknown>;
 export const BrowserSession_DetailFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"BrowserSession_detail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"BrowserSession"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"finishedAt"}},{"kind":"Field","name":{"kind":"Name","value":"userAgent"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"model"}},{"kind":"Field","name":{"kind":"Name","value":"os"}}]}},{"kind":"Field","name":{"kind":"Name","value":"lastActiveIp"}},{"kind":"Field","name":{"kind":"Name","value":"lastActiveAt"}},{"kind":"Field","name":{"kind":"Name","value":"lastAuthentication"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}}]}},{"kind":"Field","name":{"kind":"Name","value":"user"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"username"}}]}}]}}]} as unknown as DocumentNode<BrowserSession_DetailFragment, unknown>;
 export const CompatSession_DetailFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"CompatSession_detail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CompatSession"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"deviceId"}},{"kind":"Field","name":{"kind":"Name","value":"finishedAt"}},{"kind":"Field","name":{"kind":"Name","value":"lastActiveIp"}},{"kind":"Field","name":{"kind":"Name","value":"lastActiveAt"}},{"kind":"Field","name":{"kind":"Name","value":"userAgent"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"os"}},{"kind":"Field","name":{"kind":"Name","value":"model"}}]}},{"kind":"Field","name":{"kind":"Name","value":"ssoLogin"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"redirectUri"}}]}}]}}]} as unknown as DocumentNode<CompatSession_DetailFragment, unknown>;
@@ -1463,6 +1474,7 @@ export const BrowserSessionsOverview_UserFragmentDoc = {"kind":"Document","defin
 export const UserEmail_VerifyEmailFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"UserEmail_verifyEmail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"UserEmail"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"email"}}]}}]} as unknown as DocumentNode<UserEmail_VerifyEmailFragment, unknown>;
 export const EndBrowserSessionDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"EndBrowserSession"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"endBrowserSession"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"browserSessionId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"browserSession"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"BrowserSession_session"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"BrowserSession_session"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"BrowserSession"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"finishedAt"}},{"kind":"Field","name":{"kind":"Name","value":"userAgent"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"raw"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"os"}},{"kind":"Field","name":{"kind":"Name","value":"model"}},{"kind":"Field","name":{"kind":"Name","value":"deviceType"}}]}},{"kind":"Field","name":{"kind":"Name","value":"lastActiveIp"}},{"kind":"Field","name":{"kind":"Name","value":"lastActiveAt"}},{"kind":"Field","name":{"kind":"Name","value":"lastAuthentication"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}}]}}]}}]} as unknown as DocumentNode<EndBrowserSessionMutation, EndBrowserSessionMutationVariables>;
 export const EndCompatSessionDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"EndCompatSession"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"endCompatSession"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"compatSessionId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"compatSession"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"finishedAt"}}]}}]}}]}}]} as unknown as DocumentNode<EndCompatSessionMutation, EndCompatSessionMutationVariables>;
+export const FooterQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"FooterQuery"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"siteConfig"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"Footer_siteConfig"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"Footer_siteConfig"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"SiteConfig"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"imprint"}},{"kind":"Field","name":{"kind":"Name","value":"tosUri"}},{"kind":"Field","name":{"kind":"Name","value":"policyUri"}}]}}]} as unknown as DocumentNode<FooterQueryQuery, FooterQueryQueryVariables>;
 export const EndOAuth2SessionDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"EndOAuth2Session"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"endOauth2Session"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"oauth2SessionId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"oauth2Session"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"OAuth2Session_session"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"OAuth2Session_session"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Oauth2Session"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"scope"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"finishedAt"}},{"kind":"Field","name":{"kind":"Name","value":"lastActiveIp"}},{"kind":"Field","name":{"kind":"Name","value":"lastActiveAt"}},{"kind":"Field","name":{"kind":"Name","value":"userAgent"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"model"}},{"kind":"Field","name":{"kind":"Name","value":"os"}},{"kind":"Field","name":{"kind":"Name","value":"deviceType"}}]}},{"kind":"Field","name":{"kind":"Name","value":"client"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"clientId"}},{"kind":"Field","name":{"kind":"Name","value":"clientName"}},{"kind":"Field","name":{"kind":"Name","value":"applicationType"}},{"kind":"Field","name":{"kind":"Name","value":"logoUri"}}]}}]}}]} as unknown as DocumentNode<EndOAuth2SessionMutation, EndOAuth2SessionMutationVariables>;
 export const RemoveEmailDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"RemoveEmail"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"removeEmail"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"userEmailId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"user"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}}]} as unknown as DocumentNode<RemoveEmailMutation, RemoveEmailMutationVariables>;
 export const SetPrimaryEmailDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"SetPrimaryEmail"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"setPrimaryEmail"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"userEmailId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"user"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"primaryEmail"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}}]}}]} as unknown as DocumentNode<SetPrimaryEmailMutation, SetPrimaryEmailMutationVariables>;
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 324ba393..0eb38bf7 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -46,16 +46,16 @@ declare module "@tanstack/react-router" {
 
 createRoot(document.getElementById("root") as HTMLElement).render(
   <StrictMode>
-    <ErrorBoundary>
-      <Suspense fallback={<LoadingScreen />}>
-        <UrqlProvider value={client}>
+    <UrqlProvider value={client}>
+      <ErrorBoundary>
+        <Suspense fallback={<LoadingScreen />}>
           <I18nextProvider i18n={i18n}>
             <TooltipProvider>
               <RouterProvider router={router} context={{ client }} />
             </TooltipProvider>
           </I18nextProvider>
-        </UrqlProvider>
-      </Suspense>
-    </ErrorBoundary>
+        </Suspense>
+      </ErrorBoundary>
+    </UrqlProvider>
   </StrictMode>,
 );
diff --git a/templates/app.html b/templates/app.html
index 14547efa..9654727d 100644
--- a/templates/app.html
+++ b/templates/app.html
@@ -25,11 +25,6 @@ limitations under the License.
     <title>{{ _("app.name") }}</title>
     <script>
       {% set config = {
-        'branding': {
-          'imprint': branding.imprint,
-          'tosUri': branding.tos_uri,
-          'policyUri': branding.policy_uri,
-        },
         'graphqlEndpoint': app_config.graphqlEndpoint,
         'root': app_config.root,
       } -%}