feat(sso): add email domain precheck sso flow

tchapgouv · Sep 26, 2024 · 8e9bc0f · 8e9bc0f
1 parent e5cdce6
commit 8e9bc0f
Show file tree

Hide file tree

Showing 9 changed files with 389 additions and 4 deletions.
diff --git a/linked-dependencies/matrix-react-sdk/src/Views.ts b/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;
diff --git a/linked-dependencies/matrix-react-sdk/src/components/structures/MatrixChat.tsx b/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;

diff --git a/linked-dependencies/matrix-react-sdk/src/dispatcher/actions.ts b/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"
 }
diff --git a/modules/tchap-translations/tchap_translations.json b/modules/tchap-translations/tchap_translations.json
@@ -837,5 +837,37 @@
     "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"
     }
 }
diff --git a/patches/subtree-modifications.json b/patches/subtree-modifications.json
@@ -78,5 +78,11 @@
         "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"  
+        ]
     }
 }
diff --git a/res/css/views/sso/TchapSSO.pcss b/res/css/views/sso/TchapSSO.pcss
@@ -0,0 +1,44 @@
+form {
+    .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;
+        width: 100%;
+    }
+
+    .tc_ButtonProconnect {
+        background-color: #000091;
+        color: white !important;
+        margin-bottom: 40px;
+    }
+
+    .tc_Button_iconPC {
+        background-image: url("../../../welcome/images/proconnect.svg");   
+    }
+
+    .tc_bottomButton {
+        display: flex;
+        justify-content: center;
+    }
+}
diff --git a/res/welcome.html b/res/welcome.html
@@ -105,7 +105,7 @@
     }
 
     .mx_ButtonLabel {
-        margin-left: 20px;
+        margin-left: 30px;
     }
 
     .mx_Header_title {
@@ -203,6 +203,69 @@
             margin: 0 0 10px 0;
         }
     }
+
+    /* :TCHAP: sso-agentconnect-flow*/
+
+    .tc_ButtonCol {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .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;
+        width: 175px;
+        background-repeat: no-repeat;
+        background-position: 10px center;
+        text-decoration: none;
+        color: #2e2f32 !important;
+    }
+
+    .tc_ButtonProconnect {
+        background-color: #000091;
+        color: white !important;
+        margin-bottom: 10px;
+    }
+
+    .tc_Button {
+        color: #000091 !important;
+        font-weight: bold;
+    }
+
+    .tc_ButtonBorder {
+        outline: 1px solid #000091;
+        outline-offset: -2px;
+        margin-top: 20px;
+        margin-bottom: 10px;
+    }
+    .tc_ButtonProconnect_explanation {
+
+    }
+
+    .tc_Button_iconPC {
+        background-image: url("welcome/images/proconnect.svg");   
+    }
+
+    /* end :TCHAP: */
 </style>
 
 <div class="mx_Parent">
@@ -228,14 +291,30 @@ <h1 class="mx_Header_title">_t("Welcome to Tchap")<br />
                 <div>_t("action|learn_more")</div>
             </a>
         </div>
-        <div class="mx_ButtonRow">
+        <!-- :TCHAP: sso-agentconnect-flow -->
+        <!-- <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">