feat(sso): add feature flag to active sso flow

tchapgouv · Sep 30, 2024 · 7d3952d · 7d3952d
1 parent 4d32167
commit 7d3952d
Show file tree

Hide file tree

Showing 15 changed files with 441 additions and 61 deletions.
diff --git a/config.dev.json b/config.dev.json
@@ -125,6 +125,9 @@
         ],
         "feature_screenshare_call": ["*"]
     },
+    "tchap_sso_flow": {
+        "isActive": false
+    },
     "map_style_url": "https://openmaptiles.geo.data.gouv.fr/styles/osm-bright/style.json",
     "element_call": {
         "url": "https://element-call.tchap.incubateur.net/"

diff --git a/config.preprod.json b/config.preprod.json
@@ -109,7 +109,11 @@
         "feature_space": ["*"],
         "feature_audio_call": ["i.tchap.gouv.fr", "e.tchap.gouv.fr"],
         "feature_video_call": ["i.tchap.gouv.fr", "e.tchap.gouv.fr"],
-        "feature_screenshare_call": ["*"]
+        "feature_screenshare_call": ["*"],
+        "feature_sso_flow": []
+    },
+    "tchap_sso_flow": {
+        "isActive": false
     },
     "map_style_url": "https://openmaptiles.geo.data.gouv.fr/styles/osm-bright/style.json"
 }
diff --git a/config.prod.json b/config.prod.json
@@ -196,7 +196,11 @@
         "feature_space": ["*"],
         "feature_audio_call": ["*"],
         "feature_video_call": ["agent.dinum.tchap.gouv.fr"],
-        "feature_screenshare_call": ["*"]
+        "feature_screenshare_call": ["*"],
+        "feature_sso_flow": []
+    },
+    "tchap_sso_flow": {
+        "isActive": false
     },
     "map_style_url": "https://openmaptiles.geo.data.gouv.fr/styles/osm-bright/style.json"
 }
diff --git a/config.prod.lab.json b/config.prod.lab.json
@@ -198,5 +198,8 @@
         "feature_video_call": ["agent.dinum.tchap.gouv.fr", "education.tchap.gouv.fr"],
         "feature_screenshare_call": ["*"]
     },
+    "tchap_sso_flow": {
+        "isActive": false
+    },
     "map_style_url": "https://openmaptiles.geo.data.gouv.fr/styles/osm-bright/style.json"
 }
diff --git a/linked-dependencies/matrix-react-sdk/src/components/structures/auth/Registration.tsx b/linked-dependencies/matrix-react-sdk/src/components/structures/auth/Registration.tsx
@@ -57,7 +57,8 @@ import { Features } from "../../../settings/Settings";
 import { startOidcLogin } from "../../../utils/oidc/authorize";
 
 import TchapUtils from '../../../../../../src/tchap/util/TchapUtils'; // :TCHAP: registration-for-mainlining
-import TchapUrls from "../../../../../../src/tchap/util/TchapUrls";
+import TchapUIFeature from "../../../../../../src/tchap/util/TchapUIFeature"; // :TCHAP: sso-agentconnect-flow
+import ProconnectButton from "../../../../../../src/tchap/components/views/sso/ProconnectButton"; // :TCHAP: sso-agentconnect-flow
 
 const debuglog = (...args: any[]): void => {
     if (SettingsStore.getValue("debug_registration")) {
@@ -592,45 +593,51 @@ export default class Registration extends React.Component<IProps, IState> {
             );
         } else if (this.state.matrixClient && this.state.flows.length) {
             let ssoSection: JSX.Element | undefined;
-            if (this.state.ssoFlow) {
-                let continueWithSection;
-                const providers = this.state.ssoFlow.identity_providers || [];
-                // when there is only a single (or 0) providers we show a wide button with `Continue with X` text
-                if (providers.length > 1) {
-                    // i18n: ssoButtons is a placeholder to help translators understand context
-                    continueWithSection = (
-                        <h2 className="mx_AuthBody_centered">
-                            {_t("auth|continue_with_sso", { ssoButtons: "" }).trim()}
-                        </h2>
-                    );
-                }
-
-                // i18n: ssoButtons & usernamePassword are placeholders to help translators understand context
-                ssoSection = (
-                    <React.Fragment>
-                        {continueWithSection}
-                        <SSOButtons
-                            matrixClient={this.loginLogic.createTemporaryClient()}
-                            flow={this.state.ssoFlow}
-                            loginType={this.state.ssoFlow.type === "m.login.sso" ? "sso" : "cas"}
-                            fragmentAfterLogin={this.props.fragmentAfterLogin}
-                            action={SSOAction.REGISTER}
-                        />
-                        <h2 className="mx_AuthBody_centered">
-                            {_t("auth|sso_or_username_password", {
-                                ssoButtons: "",
-                                usernamePassword: "",
-                            }).trim()}
-                        </h2>
-                    </React.Fragment>
-                );
+            // :TCHAP: sso-agentconnect-flow
+            // if (this.state.ssoFlow) {
+            //     let continueWithSection;
+            //     const providers = this.state.ssoFlow.identity_providers || [];
+            //     // when there is only a single (or 0) providers we show a wide button with `Continue with X` text
+            //     if (providers.length > 1) {
+            //         // i18n: ssoButtons is a placeholder to help translators understand context
+            //         continueWithSection = (
+            //             <h2 className="mx_AuthBody_centered">
+            //                 {_t("auth|continue_with_sso", { ssoButtons: "" }).trim()}
+            //             </h2>
+            //         );
+            //     }
+
+            //     // i18n: ssoButtons & usernamePassword are placeholders to help translators understand context
+            //     ssoSection = (
+            //         <React.Fragment>
+            //             {continueWithSection}
+            //             <SSOButtons
+            //                 matrixClient={this.loginLogic.createTemporaryClient()}
+            //                 flow={this.state.ssoFlow}
+            //                 loginType={this.state.ssoFlow.type === "m.login.sso" ? "sso" : "cas"}
+            //                 fragmentAfterLogin={this.props.fragmentAfterLogin}
+            //                 action={SSOAction.REGISTER}
+            //             />
+            //             <h2 className="mx_AuthBody_centered">
+            //                 {_t("auth|sso_or_username_password", {
+            //                     ssoButtons: "",
+            //                     usernamePassword: "",
+            //                 }).trim()}
+            //             </h2>
+            //         </React.Fragment>
+            //     );
+            if (this.state.ssoFlow && TchapUIFeature.isSSOFlowActive()) {
+                ssoSection = <>
+                    <ProconnectButton/>
+                    <p style={{textAlign: "center", fontWeight: "bold"}}>{_t("auth|sso|or")}</p>
+                </>
             }
+            // }
+            // end :TCHAP:
 
             return (
                 <React.Fragment>
-                     {/* :TCHAP: sso-agentconnect-flow */}
-                    {/* {ssoSection} */}
-                    {/* end :TCHAP: */}
+                    {ssoSection}
                     <RegistrationForm
                         defaultUsername={this.state.formVals.username}
                         defaultEmail={this.state.formVals.email}

diff --git a/linked-dependencies/matrix-react-sdk/src/components/views/auth/Welcome.tsx b/linked-dependencies/matrix-react-sdk/src/components/views/auth/Welcome.tsx
@@ -24,6 +24,7 @@ import { UIFeature } from "../../../settings/UIFeature";
 import LanguageSelector from "./LanguageSelector";
 import EmbeddedPage from "../../structures/EmbeddedPage";
 import { MATRIX_LOGO_HTML } from "../../structures/static-page-vars";
+import TchapUIFeature from "../../../../../../src/tchap/util/TchapUIFeature";
 
 interface IProps {}
 
@@ -47,7 +48,8 @@ export default class Welcome extends React.PureComponent<IProps> {
             const brandingConfig = SdkConfig.getObject("branding");
             const logoUrl = brandingConfig?.get("auth_header_logo_url") ?? "themes/element/img/logos/element-logo.svg";
             replaceMap["$logoUrl"] = logoUrl;
-            pageUrl = "welcome.html";
+            // :TCHAP: sso-agentconnect-flow - pageUrl = "welcome.html"; 
+            pageUrl = TchapUIFeature.isSSOFlowActive() ? "welcome_sso.html" : "welcome.html";
         }
 
         return (

diff --git a/modules/tchap-translations/tchap_translations.json b/modules/tchap-translations/tchap_translations.json
@@ -869,5 +869,9 @@
     "auth|sso|error_email": {
         "en": "You need to enter your professional email",
         "fr": "Vous devez entrer votre adresse professionelle"
+    },
+    "auth|sso|or": {
+        "en": "or",
+        "fr": "ou"
     }
 }
diff --git a/res/css/views/sso/TchapSSO.pcss b/res/css/views/sso/TchapSSO.pcss
@@ -1,4 +1,4 @@
-form {
+.tc_pronnect {
     .tc_ButtonParent {
         display: -webkit-box;
         display: -webkit-flex;
@@ -24,13 +24,11 @@ form {
         background-position: 30px center;
         text-decoration: none;
         color: #2e2f32 !important;
-        width: 100%;
     }
 
     .tc_ButtonProconnect {
         background-color: #000091;
         color: white !important;
-        margin-bottom: 40px;
     }
 
     .tc_Button_iconPC {
@@ -41,4 +39,14 @@ form {
         display: flex;
         justify-content: center;
     }
+
+    .tc_login {
+        .tc_ButtonParent {
+            width: 100%;
+        }
+
+        .tc_ButtonProconnect {
+            margin-bottom: 40px;
+        }
+    }
 }
diff --git a/res/welcome.html b/res/welcome.html
@@ -292,30 +292,20 @@ <h1 class="mx_Header_title">_t("Welcome to Tchap")<br />
         </a>
     </div>
     <div class="mx_ButtonGroup">
-        <!-- :TCHAP: sso-agentconnect-flow -->
-        <!-- <div class="mx_ButtonRow">
+        <div class="mx_ButtonRow mx_Center_content">
+            <a href="https://tchap.beta.gouv.fr?mtm_campaign=TchapWebConnectLogo"
+                class="mx_ButtonParent mx_SecondaryButton ">
+                <div>_t("action|learn_more")</div>
+            </a>
+        </div>
+        <div class="mx_ButtonRow">
             <a href="#/login" class="mx_ButtonParent mx_ButtonSignIn mx_Button_iconSignIn">
                 <div class="mx_ButtonLabel">_t("action|sign_in")</div>
             </a>
             <a href="#/register" class="mx_ButtonParent mx_ButtonCreateAccount mx_Button_iconCreateAccount">
                 <div class="mx_ButtonLabel">_t("action|create_account")</div>
             </a>
-        </div> -->
-        <div class="tc_ButtonCol">
-            <a href="#/email-precheck-sso" class="tc_ButtonParent tc_ButtonProconnect tc_Button_iconPC">
-                <div class="mx_ButtonLabel">_t("auth|sso|email_title")</div>
-            </a>
-            <a href="https://www.proconnect.gouv.fr/" class="tc_ButtonProconnect_explanation ">
-                <div>_t("welcome|sso|proconnect_explanation")</div>
-            </a>
-            <a href="#/login" class="tc_ButtonParent tc_Button tc_ButtonBorder">
-                <div>_t("auth|sso|sign_in_password_instead")</div>
-            </a>
-            <a href="#/register" class="tc_Button">
-                <div>_t("action|create_account")</div>
-            </a>
         </div>
-        <!-- end :TCHAP:  -->
         <div class="mx_ButtonRow mx_WelcomePage_guestFunctions">
             <div>
                 <a href="#/directory" class="mx_ButtonParent mx_SecondaryButton mx_Button_iconRoomDirectory">