From 8b101ce613c16add3bc96f7e890cf7347ce06d16 Mon Sep 17 00:00:00 2001 From: unteem Date: Mon, 26 Oct 2026 12:00:36 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20allow=20replacing=20the?= =?UTF-8?q?=20ProConnect=20button=20on=20the=20home=20page?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Some deployments may not authenticate through ProConnect. Set `with_proconnect` in `FRONTEND_THEME_CONFIG` to replace the ProConnect button with a generic "Sign in" button instead. It defaults to true so existing deployments keep the ProConnect button. --- CHANGELOG.md | 2 ++ docs/env.md | 2 +- docs/theme-customization.md | 9 +++++++++ src/backend/core/api/openapi.json | 2 +- src/backend/core/api/viewsets/config.py | 2 +- src/frontend/public/locales/common/en-US.json | 1 + src/frontend/public/locales/common/fr-FR.json | 1 + .../features/api/gen/models/config_retrieve200.ts | 2 +- .../config_retrieve200_frontendthemeconfi_g.ts | 2 +- src/frontend/src/features/config/resolve.ts | 2 ++ src/frontend/src/routes/index.tsx | 12 ++++++++++-- 11 files changed, 30 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d68dce104..f175df2b4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,8 @@ and this project adheres to from the site configuration in the Django admin - Warn that an auto-reply is active for the selected mailbox with a banner instead of a header icon +- `with_proconnect` in `FRONTEND_THEME_CONFIG` replaces the ProConnect button + of the home page with a generic "Sign in" button ### Changed diff --git a/docs/env.md b/docs/env.md index 6c90af861..04df23d58 100644 --- a/docs/env.md +++ b/docs/env.md @@ -646,7 +646,7 @@ These settings are unset by default: an unset setting is omitted from the `/conf | Variable | Default | Description | Required | |----------|---------|-------------|----------| | `FRONTEND_SILENT_LOGIN_ENABLED` | `False` | Whether silent login is enabled | Optional | -| `FRONTEND_THEME_CONFIG` | None (frontend defaults to `{"theme": "white-label"}`) | Theme configuration served to the frontend (`theme`, `terms_of_service_url`, `footer`), as JSON | Optional | +| `FRONTEND_THEME_CONFIG` | None (frontend defaults to `{"theme": "white-label"}`) | Theme configuration served to the frontend (`theme`, `terms_of_service_url`, `footer`, `with_proconnect`), as JSON | Optional | | `FRONTEND_FORCED_DEFAULT_LANGUAGE` | None (frontend defaults to `False`) | When `True`, the frontend default language fallback is `LANGUAGE_CODE` instead of the browser language | Optional | | `FRONTEND_MULTIPART_UPLOAD_CHUNK_SIZE_MB` | None (frontend defaults to `100`) | Chunk size in MB for frontend multipart uploads | Optional | | `FRONTEND_HELP_CENTER_URL` | None | Help center URL | Optional | diff --git a/docs/theme-customization.md b/docs/theme-customization.md index 34cd29c1f..c6d67a515 100644 --- a/docs/theme-customization.md +++ b/docs/theme-customization.md @@ -8,6 +8,15 @@ The theme configuration is a JSON object that contains the following properties: Each theme are available in two variants: `light` and `dark`. - `terms_of_service_url`: The terms of service URL that will be displayed in the user menu. - `footer`: Customize logo and links in the footer. +- `with_proconnect`: Show the ProConnect button on the home page (default: `true`). +Set it to `false` to display a generic "Sign in" button instead, e.g. when your +OIDC provider is not ProConnect. + +Example: + +```json +{"theme": "white-label", "with_proconnect": false} +``` ## About the footer diff --git a/src/backend/core/api/openapi.json b/src/backend/core/api/openapi.json index 177321382..e9fc9dec9 100644 --- a/src/backend/core/api/openapi.json +++ b/src/backend/core/api/openapi.json @@ -344,7 +344,7 @@ }, "FRONTEND_THEME_CONFIG": { "type": "object", - "description": "Theme configuration for the frontend (theme, terms_of_service_url, footer)", + "description": "Theme configuration for the frontend (theme, terms_of_service_url, footer, with_proconnect)", "readOnly": true }, "FRONTEND_FORCED_DEFAULT_LANGUAGE": { diff --git a/src/backend/core/api/viewsets/config.py b/src/backend/core/api/viewsets/config.py index 8e271a7c1..80e758199 100644 --- a/src/backend/core/api/viewsets/config.py +++ b/src/backend/core/api/viewsets/config.py @@ -192,7 +192,7 @@ def resolve(self): "type": "object", "description": ( "Theme configuration for the frontend " - "(theme, terms_of_service_url, footer)" + "(theme, terms_of_service_url, footer, with_proconnect)" ), }, required=False, diff --git a/src/frontend/public/locales/common/en-US.json b/src/frontend/public/locales/common/en-US.json index 0f335606f..e1c72dde0 100644 --- a/src/frontend/public/locales/common/en-US.json +++ b/src/frontend/public/locales/common/en-US.json @@ -815,6 +815,7 @@ "Show logs": "Show logs", "Show more": "Show more", "Show window": "Show window", + "Sign in": "Sign in", "Sign in with another address": "Sign in with another address", "Sign out": "Sign out", "Sign out \"{{name}}\"": "Sign out \"{{name}}\"", diff --git a/src/frontend/public/locales/common/fr-FR.json b/src/frontend/public/locales/common/fr-FR.json index e1ab954ca..07cbc7144 100644 --- a/src/frontend/public/locales/common/fr-FR.json +++ b/src/frontend/public/locales/common/fr-FR.json @@ -815,6 +815,7 @@ "Show logs": "En savoir plus", "Show more": "Afficher plus", "Show window": "Afficher la fenêtre", + "Sign in": "Se connecter", "Sign in with another address": "Se connecter avec une autre adresse", "Sign out": "Déconnecter", "Sign out \"{{name}}\"": "Déconnecter « {{name}} »", diff --git a/src/frontend/src/features/api/gen/models/config_retrieve200.ts b/src/frontend/src/features/api/gen/models/config_retrieve200.ts index 29712ddc4..6edef6099 100644 --- a/src/frontend/src/features/api/gen/models/config_retrieve200.ts +++ b/src/frontend/src/features/api/gen/models/config_retrieve200.ts @@ -49,7 +49,7 @@ export type ConfigRetrieve200 = { readonly FRONTEND_SILENT_LOGIN_ENABLED: boolean; /** Sentry DSN shared with the frontend */ readonly SENTRY_DSN?: string; - /** Theme configuration for the frontend (theme, terms_of_service_url, footer) */ + /** Theme configuration for the frontend (theme, terms_of_service_url, footer, with_proconnect) */ readonly FRONTEND_THEME_CONFIG?: ConfigRetrieve200FRONTENDTHEMECONFIG; /** Whether the frontend should fall back to LANGUAGE_CODE instead of the browser language */ readonly FRONTEND_FORCED_DEFAULT_LANGUAGE?: boolean; diff --git a/src/frontend/src/features/api/gen/models/config_retrieve200_frontendthemeconfi_g.ts b/src/frontend/src/features/api/gen/models/config_retrieve200_frontendthemeconfi_g.ts index 3c5b956b1..cb98991c2 100644 --- a/src/frontend/src/features/api/gen/models/config_retrieve200_frontendthemeconfi_g.ts +++ b/src/frontend/src/features/api/gen/models/config_retrieve200_frontendthemeconfi_g.ts @@ -7,6 +7,6 @@ */ /** - * Theme configuration for the frontend (theme, terms_of_service_url, footer) + * Theme configuration for the frontend (theme, terms_of_service_url, footer, with_proconnect) */ export type ConfigRetrieve200FRONTENDTHEMECONFIG = { [key: string]: unknown }; diff --git a/src/frontend/src/features/config/resolve.ts b/src/frontend/src/features/config/resolve.ts index 86ca2ffed..9fe04b975 100644 --- a/src/frontend/src/features/config/resolve.ts +++ b/src/frontend/src/features/config/resolve.ts @@ -5,6 +5,8 @@ export type ThemeConfig = { theme: "white-label" | "anct" | "dsfr"; terms_of_service_url?: string; footer?: FooterProps; + /** Show the ProConnect button on the home page. Defaults to `true`. */ + with_proconnect?: boolean; }; export type FeedbackWidgetConfig = { diff --git a/src/frontend/src/routes/index.tsx b/src/frontend/src/routes/index.tsx index 991144cd4..555919304 100644 --- a/src/frontend/src/routes/index.tsx +++ b/src/frontend/src/routes/index.tsx @@ -1,6 +1,6 @@ import { createFileRoute, useSearch } from "@tanstack/react-router"; import { useTranslation } from "react-i18next"; -import { Hero, HomeGutter, Footer, ProConnectButton, useResponsive } from "@gouvfr-lasuite/ui-components"; +import { Button, Hero, HomeGutter, Footer, ProConnectButton, useResponsive } from "@gouvfr-lasuite/ui-components"; import { login, useAuth } from "@/features/auth"; import { MainLayout } from "@/features/layouts/components/main"; @@ -48,7 +48,15 @@ const HomePage = () => { title={t("Simple and intuitive messaging")} banner={`/images/banner-${variant}.webp`} subtitle={t("Send and receive your messages in an instant.")} - mainButton={} + mainButton={ + themeConfig.with_proconnect === false ? ( + + ) : ( + + ) + } /> {themeConfig.footer && (