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

tchapgouv · Oct 15, 2024 · 5625952 · 5625952
1 parent 09a943b
commit 5625952
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 19 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
@@ -1,12 +1,12 @@
 import React from "react";
-import { render, cleanup, fireEvent, screen, act } from "@testing-library/react";
+import { render, cleanup, fireEvent, screen, act, logRoles, waitFor } from "@testing-library/react";
 import { mocked, MockedObject } from "jest-mock";
 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 () => {