From 9f37206d71bd8f6d83e6c647156adc22b5f11ae6 Mon Sep 17 00:00:00 2001
From: sbourdon <sara.bourdon@sg.social.gouv.fr>
Date: Tue, 5 Dec 2023 13:49:27 +0100
Subject: [PATCH 1/4] feat: add realm display name as meta title on login

---
 src/login/pages/Login.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/login/pages/Login.tsx b/src/login/pages/Login.tsx
index 93ce730f..2b7059b3 100644
--- a/src/login/pages/Login.tsx
+++ b/src/login/pages/Login.tsx
@@ -1,4 +1,4 @@
-import { useState, type FormEventHandler } from "react";
+import { useState, type FormEventHandler, useEffect } from "react";
 import { useConstCallback } from "keycloakify/tools/useConstCallback";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import { tss } from "tss-react/dsfr";
@@ -47,6 +47,10 @@ export default function Login(
         formElement.submit();
     });
 
+    useEffect(() => {
+        if (realm.displayName) document.title = realm.displayName;
+    }, []);
+
     return (
         <Template
             {...{ kcContext, i18n, doUseDefaultCss, "classes": classes_props }}

From af23ed8125f303e09878a7336c6c0004429e3b8e Mon Sep 17 00:00:00 2001
From: sbourdon <sara.bourdon@sg.social.gouv.fr>
Date: Tue, 5 Dec 2023 13:57:05 +0100
Subject: [PATCH 2/4] feat: add margin to socal provider button

---
 src/login/pages/Login.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/login/pages/Login.tsx b/src/login/pages/Login.tsx
index 2b7059b3..566e5316 100644
--- a/src/login/pages/Login.tsx
+++ b/src/login/pages/Login.tsx
@@ -137,6 +137,9 @@ export default function Login(
                                                     />
                                                 ) : (
                                                     <Button
+                                                        className={
+                                                            classes.btnSocialProvider
+                                                        }
                                                         linkProps={{
                                                             "href": p.loginUrl
                                                         }}
@@ -267,6 +270,9 @@ const useStyles = tss.withName({ Login }).create({
             "borderRight": "none"
         }
     },
+    "btnSocialProvider": {
+        "marginBottom": fr.spacing("6v")
+    },
     "forgotPassword": {
         "marginRight": fr.spacing("6v")
     },

From 8b9bebd800b33c6cc680b5cca7afbdd72e4843d3 Mon Sep 17 00:00:00 2001
From: sbourdon <sara.bourdon@sg.social.gouv.fr>
Date: Tue, 5 Dec 2023 13:58:18 +0100
Subject: [PATCH 3/4] feat: add custom html at the bottom of login page

---
 package.json              | 3 ++-
 src/Properties.ts         | 1 +
 src/login/pages/Login.tsx | 7 +++++++
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 56cb183f..88a277d0 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,8 @@
             "serviceTitle=${env.DSFR_THEME_SERVICE_TITLE:}",
             "brandTop=${env.DSFR_THEME_BRAND_TOP:}",
             "tosUrl=${env.DSFR_THEME_TOS_URL:}",
-            "contactEmail=${env.DSFR_THEME_CONTACT_EMAIL:}"
+            "contactEmail=${env.DSFR_THEME_CONTACT_EMAIL:}",
+            "loginHtml=${env.DSFR_THEME_LOGIN_HTML:}"
         ]
     },
     "scripts": {
diff --git a/src/Properties.ts b/src/Properties.ts
index 8fbc6a14..1eefd7e4 100644
--- a/src/Properties.ts
+++ b/src/Properties.ts
@@ -5,4 +5,5 @@ export type Properties = {
     brandTop: string;
     tosUrl: string;
     contactEmail: string;
+    loginHtml: string;
 };
diff --git a/src/login/pages/Login.tsx b/src/login/pages/Login.tsx
index 566e5316..fa70d6bf 100644
--- a/src/login/pages/Login.tsx
+++ b/src/login/pages/Login.tsx
@@ -250,6 +250,13 @@ export default function Login(
                     )}
                 </div>
             </div>
+            {kcContext.properties.loginHtml && (
+                <div
+                    dangerouslySetInnerHTML={{
+                        "__html": kcContext.properties.loginHtml
+                    }}
+                />
+            )}
         </Template>
     );
 }

From 0a5b94f52f6ff0d12615dcdd08eb2002c7d5af71 Mon Sep 17 00:00:00 2001
From: sbourdon <sara.bourdon@sg.social.gouv.fr>
Date: Tue, 5 Dec 2023 13:59:38 +0100
Subject: [PATCH 4/4] feat: add extra theme without login form

---
 package.json              |   3 +
 src/login/pages/Login.tsx | 198 +++++++++++++++++++++-----------------
 2 files changed, 111 insertions(+), 90 deletions(-)

diff --git a/package.json b/package.json
index 88a277d0..e5892137 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,9 @@
     "license": "MIT",
     "keycloakify": {
         "themeName": "dsfr",
+        "extraThemeNames": [
+            "dsfr-no-login-form"
+        ],
         "extraThemeProperties": [
             "homeUrl=${env.DSFR_THEME_HOME_URL:}",
             "serviceTitle=${env.DSFR_THEME_SERVICE_TITLE:}",
diff --git a/src/login/pages/Login.tsx b/src/login/pages/Login.tsx
index fa70d6bf..1c8875a5 100644
--- a/src/login/pages/Login.tsx
+++ b/src/login/pages/Login.tsx
@@ -23,8 +23,16 @@ export default function Login(
         "classes": classes_props
     });
 
-    const { social, realm, url, usernameHidden, login, auth, registrationDisabled } =
-        kcContext;
+    const {
+        social,
+        realm,
+        url,
+        usernameHidden,
+        login,
+        auth,
+        registrationDisabled,
+        themeName
+    } = kcContext;
 
     const { msg, msgStr } = i18n;
     const { classes, cx } = useStyles();
@@ -152,100 +160,110 @@ export default function Login(
                                     </div>
                                 </div>
                             )}
-                            <h5>{msgStr("selfCredentials")}</h5>
-                            <div className={classes.inputs}>
-                                {(() => {
-                                    const label = !realm.loginWithEmailAllowed
-                                        ? "username"
-                                        : realm.registrationEmailAsUsername
-                                        ? "email"
-                                        : "usernameOrEmail";
 
-                                    const autoCompleteHelper: typeof label =
-                                        label === "usernameOrEmail" ? "username" : label;
+                            {themeName !== "dsfr-dnum-no-login-form" && (
+                                <>
+                                    <h5>{msgStr("selfCredentials")}</h5>
+                                    <div className={classes.inputs}>
+                                        {(() => {
+                                            const label = !realm.loginWithEmailAllowed
+                                                ? "username"
+                                                : realm.registrationEmailAsUsername
+                                                ? "email"
+                                                : "usernameOrEmail";
 
-                                    return (
-                                        <Input
+                                            const autoCompleteHelper: typeof label =
+                                                label === "usernameOrEmail"
+                                                    ? "username"
+                                                    : label;
+
+                                            return (
+                                                <Input
+                                                    nativeInputProps={{
+                                                        "tabIndex": 1,
+                                                        "id": autoCompleteHelper,
+                                                        "name": autoCompleteHelper,
+                                                        "type": "email",
+                                                        "defaultValue":
+                                                            login.username ?? "",
+                                                        ...(usernameHidden
+                                                            ? { "disabled": true }
+                                                            : {
+                                                                  "autoFocus": true,
+                                                                  "autoComplete": "off"
+                                                              })
+                                                    }}
+                                                    label={msgStr("email")}
+                                                    hintText={msgStr("email hint")}
+                                                />
+                                            );
+                                        })()}
+                                        <PasswordInput
+                                            label={msgStr("password")}
                                             nativeInputProps={{
-                                                "tabIndex": 1,
-                                                "id": autoCompleteHelper,
-                                                "name": autoCompleteHelper,
-                                                "type": "email",
-                                                "defaultValue": login.username ?? "",
-                                                ...(usernameHidden
-                                                    ? { "disabled": true }
-                                                    : {
-                                                          "autoFocus": true,
-                                                          "autoComplete": "off"
-                                                      })
+                                                "tabIndex": 2,
+                                                "id": "password",
+                                                "name": "password",
+                                                "autoComplete": "off"
                                             }}
-                                            label={msgStr("email")}
-                                            hintText={msgStr("email hint")}
                                         />
-                                    );
-                                })()}
-                                <PasswordInput
-                                    label={msgStr("password")}
-                                    nativeInputProps={{
-                                        "tabIndex": 2,
-                                        "id": "password",
-                                        "name": "password",
-                                        "autoComplete": "off"
-                                    }}
-                                />
-                                <div
-                                    className={cx(
-                                        getClassName("kcFormGroupClass"),
-                                        getClassName("kcFormSettingClass")
-                                    )}
-                                >
-                                    <div id="kc-form-options">
-                                        {realm.rememberMe && !usernameHidden && (
-                                            <Checkbox
-                                                className={classes.rememberMe}
-                                                options={[
-                                                    {
-                                                        "label": msg("rememberMe"),
-                                                        "nativeInputProps": {
-                                                            "tabIndex": 3,
-                                                            "name": "rememberMe",
-                                                            ...(login.rememberMe
-                                                                ? {
-                                                                      "checked": true
-                                                                  }
-                                                                : {})
-                                                        }
-                                                    }
-                                                ]}
-                                            />
-                                        )}
+                                        <div
+                                            className={cx(
+                                                getClassName("kcFormGroupClass"),
+                                                getClassName("kcFormSettingClass")
+                                            )}
+                                        >
+                                            <div id="kc-form-options">
+                                                {realm.rememberMe && !usernameHidden && (
+                                                    <Checkbox
+                                                        className={classes.rememberMe}
+                                                        options={[
+                                                            {
+                                                                "label":
+                                                                    msg("rememberMe"),
+                                                                "nativeInputProps": {
+                                                                    "tabIndex": 3,
+                                                                    "name": "rememberMe",
+                                                                    ...(login.rememberMe
+                                                                        ? {
+                                                                              "checked":
+                                                                                  true
+                                                                          }
+                                                                        : {})
+                                                                }
+                                                            }
+                                                        ]}
+                                                    />
+                                                )}
+                                            </div>
+                                        </div>
                                     </div>
-                                </div>
-                            </div>
-                            <div
-                                id="kc-form-buttons"
-                                className={getClassName("kcFormGroupClass")}
-                            >
-                                <input
-                                    type="hidden"
-                                    id="id-hidden-input"
-                                    name="credentialId"
-                                    {...(auth?.selectedCredential !== undefined
-                                        ? {
-                                              "value": auth.selectedCredential
-                                          }
-                                        : {})}
-                                />
-                                <input
-                                    tabIndex={4}
-                                    className={fr.cx("fr-btn")}
-                                    name="login"
-                                    id="kc-login"
-                                    type="submit"
-                                    value={msgStr("connect")}
-                                    disabled={isLoginButtonDisabled}
-                                />
-                            </div>
+                                    <div
+                                        id="kc-form-buttons"
+                                        className={getClassName("kcFormGroupClass")}
+                                    >
+                                        <input
+                                            type="hidden"
+                                            id="id-hidden-input"
+                                            name="credentialId"
+                                            {...(auth?.selectedCredential !== undefined
+                                                ? {
+                                                      "value": auth.selectedCredential
+                                                  }
+                                                : {})}
+                                        />
+                                        <input
+                                            tabIndex={4}
+                                            className={fr.cx("fr-btn")}
+                                            name="login"
+                                            id="kc-login"
+                                            type="submit"
+                                            value={msgStr("connect")}
+                                            disabled={isLoginButtonDisabled}
+                                        />
+                                    </div>
+                                </>
+                            )}
                         </form>
                     )}
                 </div>