🔧(homepage) let people use a simple login button instead of proconnect

This is done to have people self-hosting meet be able to show a simple
"login" button instead of having the ProConnect branding

docs/installation.md

@@ -282,6 +282,7 @@ These are the environmental options available on meet backend.
 | FRONTEND_IS_SILENT_LOGIN_ENABLED                | Enable silent login feature             | true                                                                                                                                                          |
 | FRONTEND_FEEDBACK                               | Frontend feedback configuration          | {}                                                                                                                                                            |
 | FRONTEND_USE_FRENCH_GOV_FOOTER                  | Show the French government footer in the homepage | false |
+| FRONTEND_USE_PROCONNECT_BUTTON                  | Show a "Login with ProConnect" button in the homepage instead of a "Login" button | false |
 | DJANGO_EMAIL_BACKEND                            | Email backend library                    | django.core.mail.backends.smtp.EmailBackend                                                                                                                   |
 | DJANGO_EMAIL_HOST                               | Host of the email server                 |                                                                                                                                                               |
 | DJANGO_EMAIL_HOST_USER                          | User to connect to the email server      |                                                                                                                                                               |

env.d/development/common.dist

@@ -59,3 +59,4 @@ SCREEN_RECORDING_BASE_URL=http://localhost:3000/recordings
 ROOM_TELEPHONY_ENABLED=True
 
 FRONTEND_USE_FRENCH_GOV_FOOTER=False
+FRONTEND_USE_PROCONNECT_BUTTON=False

src/backend/meet/settings.py

@@ -327,6 +327,9 @@ class Base(Configuration):
         "use_french_gov_footer": values.BooleanValue(
             False, environ_name="FRONTEND_USE_FRENCH_GOV_FOOTER", environ_prefix=None
         ),
+        "use_proconnect_button": values.BooleanValue(
+            False, environ_name="FRONTEND_USE_PROCONNECT_BUTTON", environ_prefix=None
+        ),
     }
 
     # Mail

src/frontend/src/api/useConfig.ts

@@ -18,6 +18,7 @@ export interface ApiConfig {
   is_silent_login_enabled?: boolean
   custom_css_url?: string
   use_french_gov_footer?: boolean
+  use_proconnect_button?: boolean
   recording?: {
     is_enabled?: boolean
     available_modes?: RecordingMode[]

src/frontend/src/components/LoginButton.tsx

@@ -0,0 +1,12 @@
+import { LinkButton } from '@/primitives'
+import { authUrl } from '@/features/auth'
+import { useTranslation } from 'react-i18next'
+
+export const LoginButton = () => {
+  const { t } = useTranslation('global', { keyPrefix: 'login' })
+  return (
+    <LinkButton href={authUrl()} data-attr="login" variant="primary">
+      {t('buttonLabel')}
+    </LinkButton>
+  )
+}

src/frontend/src/components/ProConnectButton.tsx

@@ -34,7 +34,7 @@ export const ProConnectButton = ({ hint = true }: ProConnectButtonProps) => {
     <VStack alignItems="start">
       <Link
         className={proConnectButtonRecipe()}
-        aria-label={t('buttonLabel')}
+        aria-label={t('proconnectButtonLabel')}
         href={authUrl()}
         data-attr="login"
       />

src/frontend/src/features/home/routes/Home.tsx

@@ -18,6 +18,8 @@ import { ReactNode, useState } from 'react'
 import { css } from '@/styled-system/css'
 import { menuRecipe } from '@/primitives/menuRecipe.ts'
 import { usePersistentUserChoices } from '@/features/rooms/livekit/hooks/usePersistentUserChoices'
+import { useConfig } from '@/api/useConfig'
+import { LoginButton } from '@/components/LoginButton'
 
 const Columns = ({ children }: { children?: ReactNode }) => {
   return (
@@ -155,6 +157,8 @@ export const Home = () => {
   const { mutateAsync: createRoom } = useCreateRoom()
   const [laterRoomId, setLaterRoomId] = useState<null | string>(null)
 
+  const { data } = useConfig()
+
   return (
     <UserAware>
       <Screen>
@@ -210,14 +214,19 @@ export const Home = () => {
                     </MenuItem>
                   </RACMenu>
                 </Menu>
-              ) : (
+              ) : data?.use_proconnect_button ? (
                 <ProConnectButton hint={false} />
+              ) : (
+                <LoginButton />
               )}
               <DialogTrigger>
                 <Button
                   variant="secondary"
                   style={{
-                    height: !isLoggedIn ? '56px' : undefined, // Temporary, Align with ProConnect Button fixed height
+                    height:
+                      !isLoggedIn && data?.use_proconnect_button
+                        ? '56px'
+                        : undefined, // Temporary, Align with ProConnect Button fixed height
                   }}
                 >
                   {t('joinMeeting')}

src/frontend/src/locales/en/global.json

@@ -16,7 +16,8 @@
   "loading": "Loading…",
   "loggedInUserTooltip": "Logged in as…",
   "login": {
-    "buttonLabel": "Login with ProConnect",
+    "proconnectButtonLabel": "Login with ProConnect",
+    "buttonLabel": "Login",
     "linkLabel": "What is ProConnect? - new tab",
     "link": "What is ProConnect?"
   },