From df5bf426317aae82051087ca7f36910bfb9da813 Mon Sep 17 00:00:00 2001 From: "marc.sirisak" Date: Mon, 14 Oct 2024 19:30:51 +0200 Subject: [PATCH] feat(sso): add disabled button when email field invalid --- .../tchap_translations.json | 4 +-- .../views/sso/EmailVerificationPage.tsx | 36 ++++++++++++++----- .../views/sso/EmailVerificationPage-test.tsx | 24 +++++++++---- 3 files changed, 46 insertions(+), 18 deletions(-) diff --git a/modules/tchap-translations/tchap_translations.json b/modules/tchap-translations/tchap_translations.json index 9049b593e3..80de8a5d4f 100644 --- 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 index 3527f77d40..71f8eb91f3 100644 --- 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(false); const [email, setEmail] = useState(""); + const [buttonDisabled, setButtonDisabled] = useState(true); const [errorText, setErrorText] = useState(""); const submitButtonChild = loading ? : _t("auth|proconnect|continue"); const emailFieldRef = useRef(null); + const checkEmailField = async (fieldString: string = email) : Promise => { + 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 => { 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) => { - setEmail(event.currentTarget.value); + const onInputChanged = async (event: React.FormEvent) => { + const emailString = event.currentTarget.value + setEmail(emailString); + const isEmailValid = await checkEmailField(emailString); + setButtonDisabled(!isEmailValid); } const onLoginByPasswordClick = () => { @@ -144,9 +151,20 @@ export default function EmailVerificationPage() { /> {errorText && } - + { + onSubmit(e); + }} + > + {submitButtonChild} +
", () => { }); 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("", () => { // 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("", () => { 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("", () => { 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("", () => { 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("", () => { 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("", () => { 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("", () => { fireEvent.focus(emailField); fireEvent.change(emailField, { target: { value: userEmail } }); + await flushPromises(); + // click on proconnect button const proconnectButton = screen.getByTestId("proconnect-submit"); await act(async () => {