Merge pull request #1111 from tchapgouv/386-sso-agentconnect-flow

feat(sso): add email domain precheck sso flow

config.dev.json

@@ -125,6 +125,9 @@
         ],
         "feature_screenshare_call": ["*"]
     },
+    "tchap_sso_flow": {
+        "isActive": true
+    },
     "map_style_url": "https://openmaptiles.geo.data.gouv.fr/styles/osm-bright/style.json",
     "element_call": {
         "url": "https://element-call.tchap.incubateur.net/"

config.preprod.json

@@ -111,5 +111,8 @@
         "feature_video_call": ["i.tchap.gouv.fr", "e.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"
 }

config.prod.json

@@ -198,5 +198,8 @@
         "feature_video_call": ["agent.dinum.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"
 }

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"
 }

linked-dependencies/matrix-react-sdk/src/Views.ts

@@ -54,6 +54,9 @@ enum Views {
 
     // Another instance of the application has started up. We just show an error page.
     LOCK_STOLEN,
+
+    // :TCHAP: screen before launching sso
+    EMAIL_PRECHECK_SSO
 }
 
 export default Views;

linked-dependencies/matrix-react-sdk/src/components/structures/MatrixChat.tsx

@@ -143,9 +143,11 @@ import { checkSessionLockFree, getSessionLock } from "../../utils/SessionLock";
 import { SessionLockStolenView } from "./auth/SessionLockStolenView";
 import { ConfirmSessionLockTheftView } from "./auth/ConfirmSessionLockTheftView";
 import { LoginSplashView } from "./auth/LoginSplashView";
-import TchapUrls from "../../../../../src/tchap/util/TchapUrls"; // :TCHAP: activate-cross-signing-and-secure-storage-react
 import { cleanUpDraftsIfRequired } from "../../DraftCleaner";
 
+import TchapUrls from "../../../../../src/tchap/util/TchapUrls"; // :TCHAP: activate-cross-signing-and-secure-storage-react
+import EmailVerificationPage from "../../../../../src/tchap/components/views/sso/EmailVerificationPage"; // :TCHAP: sso-agentconnect-flow
+
 // legacy export
 export { default as Views } from "../../Views";
 
@@ -946,6 +948,15 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                     true,
                 );
                 break;
+            // :TCHAP: sso-agentconnect-flow
+            case Action.EmailPrecheckSSO:
+                if (Lifecycle.isSoftLogout()) {
+                    this.onSoftLogout();
+                    break;
+                }
+                this.viewEmailPrecheckSSO();
+                break;
+            // end :TCHAP:
         }
     };
 
@@ -1104,6 +1115,17 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         this.themeWatcher.recheck();
     }
 
+    // :TCHAP: sso-agentconnect-flow
+    private viewEmailPrecheckSSO() {
+        this.setStateForNewView({
+            view: Views.EMAIL_PRECHECK_SSO
+        });
+        this.notifyNewScreen("email-precheck-sso");
+        ThemeController.isLogin = true;
+        this.themeWatcher.recheck();
+    }
+    // end :TCHAP:
+
     private viewHome(justRegistered = false): void {
         // The home page requires the "logged in" view, so we'll set that.
         this.setStateForNewView({
@@ -1875,6 +1897,13 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 userId: userId,
                 subAction: params?.action,
             });
+        // :TCHAP: sso-agentconnect-flow
+        } else if (screen = "email-precheck-sso") {
+            dis.dispatch({
+                action: "email_precheck_sso",
+                params
+            });
+        // end :TCHAP:
         } else {
             logger.info(`Ignoring showScreen for '${screen}'`);
         }
@@ -2017,7 +2046,9 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         if (
             initialScreenAfterLogin &&
             // XXX: workaround for https://github.com/vector-im/element-web/issues/11643 causing a login-loop
-            !["welcome", "login", "register", "start_sso", "start_cas"].includes(initialScreenAfterLogin.screen)
+            // :TCHAP: sso-agentconnect-flow !["welcome", "login", "register", "start_sso", "start_cas"].includes(initialScreenAfterLogin.screen)
+            !["welcome", "login", "register", "start_sso", "start_cas", "email-precheck-sso"].includes(initialScreenAfterLogin.screen)
+            // end :TCHAP:
         ) {
             fragmentAfterLogin = `/${initialScreenAfterLogin.screen}`;
         }
@@ -2137,6 +2168,10 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             view = <UseCaseSelection onFinished={(useCase): Promise<void> => this.onShowPostLoginScreen(useCase)} />;
         } else if (this.state.view === Views.LOCK_STOLEN) {
             view = <SessionLockStolenView />;
+        // :TCHAP: sso-agentconnect-flow
+        } else if (this.state.view === Views.EMAIL_PRECHECK_SSO) {
+            view = <EmailVerificationPage />;
+        // end :TCHAP:
         } else {
             logger.error(`Unknown view ${this.state.view}`);
             return null;

linked-dependencies/matrix-react-sdk/src/components/structures/auth/Login.tsx

@@ -138,7 +138,8 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
             // eslint-disable-next-line @typescript-eslint/naming-convention
             "m.login.cas": () => this.renderSsoStep("cas"),
             // eslint-disable-next-line @typescript-eslint/naming-convention
-            "m.login.sso": () => this.renderSsoStep("sso"),
+            // :TCHAP: sso-agentconnect-flow
+            // "m.login.sso": () => this.renderSsoStep("sso"),
             "oidcNativeFlow": () => this.renderOidcNativeStep(),
         };
     }

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,39 +593,47 @@ 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>

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,9 @@ 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";
+            // end :TCHAP:
         }
 
         return (

linked-dependencies/matrix-react-sdk/src/dispatcher/actions.ts

@@ -393,4 +393,9 @@ export enum Action {
      * Opens right panel room summary and focuses the search input
      */
     FocusMessageSearch = "focus_search",
+
+    /**
+     * :TCHAP: Open new page to check email instance before launching SSO
+     */
+    EmailPrecheckSSO = "email_precheck_sso"
 }

modules/tchap-translations/tchap_translations.json

@@ -837,5 +837,41 @@
     "incompatible_browser|continue": {
         "en": "Continue anyway",
         "fr": "Continuer tout de même"
+    },
+    "auth|sso|sign_in_password_instead": {
+        "en": "Login with password",
+        "fr": "Se connecter par mot de passe"
+    },
+    "auth|sso|email_title": {
+        "en": "Login with ProConnect",
+        "fr": "Se connecter avec ProConnect"
+    },
+    "auth|sso|proconnect_continue": {
+        "en": "Continue with ProConnect",
+        "fr": "Continuer avec ProConnect"
+    },
+    "auth|sso|email_placeholder": {
+        "en": "Your professional email",
+        "fr": "Votre adresse mail professionelle"
+    },
+    "welcome|sso|proconnect_explanation": {
+        "en": "-> What is ProConnect ?",
+        "fr": "-> Qu'est-ce que ProConnect ?"
+    },
+    "auth|sso|error": {
+        "en": "An error occured during SSO login",
+        "fr": "Une erreur est survenue lors de la connexion"
+    },
+    "auth|sso|error_homeserver": {
+        "en": "There is an error with the homeserver configuration",
+        "fr": "Il y a une erreur avec la configuration du serveur"
+    },
+    "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"
     }
 }

modules/tchap-translations/tchap_translations_removed.json

@@ -55,5 +55,6 @@
     "create_space|public_heading",
     "common|private",
     "room_list|add_space_label",
-    "spaces|error_no_permission_add_space"
+    "spaces|error_no_permission_add_space",
+    "auth|continue_with_sso"
 ]

patches/subtree-modifications.json

@@ -78,5 +78,14 @@
         "files": [
             "src/components/views/settings/tabs/user/AccountUserSettingsTab.tsx"
         ]
+    }, 
+    "sso-agentconnect-flow": {
+        "issue": "https://github.com/tchapgouv/tchap-web-v4/issues/386",
+        "files": [
+            "src/components/structures/MatrixChat.tsx",
+            "src/components/structures/auth/Registration.tsx",
+            "src/components/structures/auth/Login.tsx",
+            "src/components/views/auth/Welcome.tsx"
+        ]
     }
 }

res/css/views/sso/TchapSSO.pcss

@@ -0,0 +1,52 @@
+.tc_pronnect {
+    .tc_ButtonParent {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        padding: 14px 20px;
+        -webkit-box-orient: horizontal;
+        -webkit-box-direction: normal;
+        -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+        flex-direction: row;
+        -webkit-box-pack: center;
+        -webkit-justify-content: center;
+        -ms-flex-pack: center;
+        justify-content: center;
+        -webkit-box-align: center;
+        -webkit-align-items: center;
+        -ms-flex-align: center;
+        align-items: center;
+        border-radius: 4px;
+        background-origin: content-box;
+        background-repeat: no-repeat;
+        background-position: 30px center;
+        text-decoration: none;
+        color: #2e2f32 !important;
+    }
+
+    .tc_ButtonProconnect {
+        background-color: var(--accent);
+        color: white !important;
+    }
+
+    .tc_Button_iconPC {
+        background-image: url("../../../welcome/images/proconnect.svg");   
+    }
+
+    .tc_bottomButton {
+        display: flex;
+        justify-content: center;
+    }
+
+    .tc_login {
+        .tc_ButtonParent {
+            width: 100%;
+        }
+
+        .tc_ButtonProconnect {
+            margin-bottom: 40px;
+        }
+    }
+}