feat(sso): add disabled button when email field invalid

tchapgouv · Oct 15, 2024 · df5bf42 · df5bf42
1 parent 645cdab
commit df5bf42
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 18 deletions.
diff --git a/modules/tchap-translations/tchap_translations.json b/modules/tchap-translations/tchap_translations.json
@@ -875,7 +875,7 @@
         "fr": "ou"
     },
     "auth|proconnect|error_sso_inactive": {
-        "en": "ProConnect is not activated for your domain",
-        "fr": "Vous ne pouvez pas vous connecter avec ProConnect avec votre domaine"
+        "en": "ProConnect is disabled for your administration",
+        "fr": "ProConnect est désactivé pour votre administration"
     }
 }
diff --git a/src/tchap/components/views/sso/EmailVerificationPage.tsx b/src/tchap/components/views/sso/EmailVerificationPage.tsx
@@ -31,22 +31,26 @@ import { SSOAction } from "matrix-js-sdk/src/matrix";
 import Login from "matrix-react-sdk/src/Login";
 import TchapUtils from "../../../util/TchapUtils";
 import { ValidatedServerConfig } from "matrix-react-sdk/src/utils/ValidatedServerConfig";
-
+import * as Email from "matrix-react-sdk/src/email";
 import "../../../../../res/css/views/sso/TchapSSO.pcss";
 
 export default function EmailVerificationPage() {
 
     const [loading, setLoading] = useState<boolean>(false);
     const [email, setEmail] = useState<string>("");
+    const [buttonDisabled, setButtonDisabled] = useState<boolean>(true);
     const [errorText, setErrorText] = useState<string>("");
 
     const submitButtonChild = loading ? <Spinner w={16} h={16} /> : _t("auth|proconnect|continue");
 
     const emailFieldRef = useRef<Field>(null);
 
+    const checkEmailField = async (fieldString: string = email) : Promise<boolean> => {
+        const fieldOk = await emailFieldRef.current?.validate({ allowEmpty: false, focused: true });
+        return !!fieldOk && Email.looksValid(fieldString);
+    }
+
     const displayError = (errorString: string): void => {
-        emailFieldRef.current?.focus();
-        emailFieldRef.current?.validate({ allowEmpty: false, focused: true });
         setErrorText(errorString);
         setLoading(false); 
     }
@@ -70,7 +74,7 @@ export default function EmailVerificationPage() {
     const onSubmit = async (event: React.FormEvent): Promise<void> => {
         event.preventDefault();
         setLoading(true);
-        const isFieldCorrect = await emailFieldRef.current?.validate({ allowEmpty: false });
+        const isFieldCorrect = await checkEmailField();
 
         if (!isFieldCorrect) {
             displayError(_t("auth|proconnect|error_email"));
@@ -114,8 +118,11 @@ export default function EmailVerificationPage() {
         }
     }
 
-    const onInputChanged = (event: React.FormEvent<HTMLInputElement>) => {
-        setEmail(event.currentTarget.value);
+    const onInputChanged = async (event: React.FormEvent<HTMLInputElement>) => {
+        const emailString = event.currentTarget.value
+        setEmail(emailString);
+        const isEmailValid = await checkEmailField(emailString);
+        setButtonDisabled(!isEmailValid);
     }
 
     const onLoginByPasswordClick = () => {
@@ -144,9 +151,20 @@ export default function EmailVerificationPage() {
                             />
                         </div>
                         {errorText && <ErrorMessage message={errorText} />}
-                        <button type="submit" data-testid="proconnect-submit" className="tc_ButtonParent tc_ButtonProconnect tc_Button_iconPC">
-                            {submitButtonChild}
-                        </button>
+                        <AccessibleButton
+                                type="submit"
+                                data-testid="proconnect-submit"
+                                title={_t("auth|proconnect|continue")}
+                                className="tc_ButtonParent tc_ButtonProconnect tc_Button_iconPC"
+                                element="button"
+                                kind="link"
+                                disabled={buttonDisabled}
+                                onClick={(e: ButtonEvent) => {
+                                    onSubmit(e);
+                                }}
+                            >
+                                {submitButtonChild}
+                            </AccessibleButton>
                         <div className="mx_AuthBody_button-container tc_bottomButton">
                             <AccessibleButton
                                 className="mx_AuthBody_sign-in-instead-button"

diff --git a/test/unit-tests/tchap/components/views/sso/EmailVerificationPage-test.tsx b/test/unit-tests/tchap/components/views/sso/EmailVerificationPage-test.tsx
@@ -6,7 +6,7 @@ import { MatrixClient } from "matrix-js-sdk/src/matrix";
 import EmailVerificationPage from "~tchap-web/src/tchap/components/views/sso/EmailVerificationPage";
 import TchapUtils from "~tchap-web/src/tchap/util/TchapUtils";
 import { ValidatedServerConfig } from "~matrix-react-sdk/src/utils/ValidatedServerConfig";
-import { mockPlatformPeg, stubClient } from "~matrix-react-sdk/test/test-utils";
+import { flushPromises, mockPlatformPeg, stubClient } from "~matrix-react-sdk/test/test-utils";
 import BasePlatform from "~matrix-react-sdk/src/BasePlatform";
 import Login from "~matrix-react-sdk/src/Login";
 
@@ -76,7 +76,7 @@ describe("<EmailVerificationPage />", () => {
     });
 
     it("returns error when empty email", async () => {
-        const { container } = renderEmailVerificationPage();
+        renderEmailVerificationPage();
 
         // Put text in email field
         const emailField = screen.getByRole("textbox");
@@ -85,16 +85,17 @@ describe("<EmailVerificationPage />", () => {
 
         // click on proconnect button
         const proconnectButton = screen.getByTestId("proconnect-submit");
+
         await act(async () => {
             await fireEvent.click(proconnectButton);
         });
 
-        // Error classes should not appear
-        expect(container.getElementsByClassName("mx_ErrorMessage").length).toBe(1);
+        // Submit button should be disabled
+        expect(proconnectButton).toHaveAttribute("disabled");
     });
 
     it("returns inccorrect email", async () => {
-        const { container } = renderEmailVerificationPage();
+        renderEmailVerificationPage();
 
         // Put text in email field
         const emailField = screen.getByRole("textbox");
@@ -107,8 +108,8 @@ describe("<EmailVerificationPage />", () => {
             await fireEvent.click(proconnectButton);
         });
 
-        // Error classes should not appear
-        expect(container.getElementsByClassName("mx_ErrorMessage").length).toBe(1);
+        // Submit button should be disabled
+        expect(proconnectButton).toHaveAttribute("disabled");
     });
 
     it("should throw error when homeserver catch an error", async () => {
@@ -123,6 +124,7 @@ describe("<EmailVerificationPage />", () => {
         fireEvent.focus(emailField);
         fireEvent.change(emailField, { target: { value: userEmail } });
 
+        await flushPromises();
         // click on proconnect button
         const proconnectButton = screen.getByTestId("proconnect-submit");
         await act(async () => {
@@ -145,6 +147,8 @@ describe("<EmailVerificationPage />", () => {
         fireEvent.focus(emailField);
         fireEvent.change(emailField, { target: { value: userEmail } });
 
+        await flushPromises();
+
         // click on proconnect button
         const proconnectButton = screen.getByTestId("proconnect-submit");
         await act(async () => {
@@ -168,6 +172,8 @@ describe("<EmailVerificationPage />", () => {
         fireEvent.focus(emailField);
         fireEvent.change(emailField, { target: { value: userEmail } });
 
+        await flushPromises();
+
         // click on proconnect button
         const proconnectButton = screen.getByTestId("proconnect-submit");
         await act(async () => {
@@ -194,6 +200,8 @@ describe("<EmailVerificationPage />", () => {
         fireEvent.focus(emailField);
         fireEvent.change(emailField, { target: { value: userEmail } });
 
+        await flushPromises();
+
         // click on proconnect button
         const proconnectButton = screen.getByTestId("proconnect-submit");
         await act(async () => {
@@ -225,6 +233,8 @@ describe("<EmailVerificationPage />", () => {
         fireEvent.focus(emailField);
         fireEvent.change(emailField, { target: { value: userEmail } });
 
+        await flushPromises();
+
         // click on proconnect button
         const proconnectButton = screen.getByTestId("proconnect-submit");
         await act(async () => {