Merged PR 2596: fix build error

fix build error

Related work items: #24648

i18n.js

@@ -88,9 +88,9 @@ module.exports = {
         "/details-about-cookies": ["common", "cookies"],
         "/terms-and-conditions": ["common"],
         "/account/passwordreset": ["common", "home"],
-        "/auth/signin": ["common", "common", "auth"],
+        "/auth/signin": ["common", "account", "auth"],
-        "/auth/verify-request": ["common", "common", "auth"],
+        "/auth/verify-request": ["common", "account", "auth"],
-        "/auth/error": ["common", "common", "auth"],
+        "/auth/error": ["common", "account", "auth"],
         "/admin": ["case"]
     }
 };

pages/auth/signin.js

@@ -14,13 +14,25 @@ const SignIn = (props) => {
     const { footerLinks, pages, csrfToken, callbackUrl } = props;
 
     const [buttonDisabled, setButtonDisabled] = useState(false);
+    const [emailError, setEmailError] = useState("");
+
+    const emailRegex =
+        /^(?!.*(?:.+\.)?(?:burpcollaborator\.net|interactsh\.com|mailinator\.com|10minutemail\.com|yopmail\.com|trashmail\.com)$)(?:[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}|(?:\[(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-zA-Z0-9-]*[a-zA-Z0-9]:.+)])$/;
 
     const handleSubmit = async (event) => {
         event.preventDefault();
+        const email = String(event.target.email.value || "").trim();
+
+        if (!emailRegex.test(email)) {
+            setEmailError(t("account:invalid-email-address-errormsg"));
+            setButtonDisabled(false);
+            return;
+        }
+
+        setEmailError("");
         setButtonDisabled(true);
 
         try {
-            const email = String(event.target.email.value || "").trim();
             const currentLocale = lang === "cy" ? "cy" : "en";
 
             const response = await fetch("/api/auth/resolve-locale", {
@@ -103,7 +115,9 @@ const SignIn = (props) => {
                                                         action="/api/auth/signin/email"
                                                         onSubmit={handleSubmit}
                                                     >
-                                                        <div className="govuk-form-group ">
+                                                        <div
+                                                            className={`govuk-form-group${emailError ? " govuk-form-group--error" : ""}`}
+                                                        >
                                                             <input
                                                                 className="govuk-input"
                                                                 name="csrfToken"
@@ -113,7 +127,6 @@ const SignIn = (props) => {
                                                                 }
                                                             />
                                                             <input
-                                                                className="govuk-input"
                                                                 name="callbackUrl"
                                                                 type="hidden"
                                                                 defaultValue={
@@ -130,7 +143,6 @@ const SignIn = (props) => {
                                                                         : "en"
                                                                 }
                                                             />
-
                                                             <label
                                                                 className="govuk-label"
                                                                 htmlFor="email"
@@ -139,12 +151,28 @@ const SignIn = (props) => {
                                                                     "auth:auth-email-label"
                                                                 )}
                                                             </label>
+                                                            {emailError ? (
+                                                                <span
+                                                                    id="email-error"
+                                                                    className="govuk-error-message"
+                                                                >
+                                                                    <span className="govuk-visually-hidden">
+                                                                        Error:
+                                                                    </span>{" "}
+                                                                    {emailError}
+                                                                </span>
+                                                            ) : null}
 
                                                             <input
-                                                                className="govuk-input govuk-!-width-three-quarters"
+                                                                className={`govuk-input govuk-!-width-three-quarters${emailError ? " govuk-input--error" : ""}`}
                                                                 type="email"
                                                                 id="email"
                                                                 name="email"
+                                                                aria-describedby={
+                                                                    emailError
+                                                                        ? "email-error"
+                                                                        : undefined
+                                                                }
                                                             />
                                                         </div>
                                                         <div className="govuk-form-group">

pages/contactus.js

@@ -307,7 +307,7 @@ let ContactUs = (props) => {
         value ? undefined : t("newappeal:is-required-label");
 
     const emailRegex =
-        /^(?!.*(?:.+\.)?(?:burpcollaborator\.net|interactsh\.com|mailinator\.com|10minutemail\.com|yopmail\.com|trashmail\.com)$)(?:[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}|(?:\[(?:25[0-5]|2[0-4][0-9]|?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|?[0-9][0-9]?|[a-zA-Z0-9-]*[a-zA-Z0-9]:.+)])$/;
+        /^(?!.*(?:.+\.)?(?:burpcollaborator\.net|interactsh\.com|mailinator\.com|10minutemail\.com|yopmail\.com|trashmail\.com)$)(?:[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}|(?:\[(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-zA-Z0-9-]*[a-zA-Z0-9]:.+)])$/;
 
     const email = (value) =>
         value && !emailRegex.test(value)

pages/myportal/contactus.js

@@ -307,7 +307,7 @@ let ContactUs = (props) => {
         value ? undefined : t("newappeal:is-required-label");
 
     const emailRegex =
-        /^(?!.*(?:.+\.)?(?:burpcollaborator\.net|interactsh\.com|mailinator\.com|10minutemail\.com|yopmail\.com|trashmail\.com)$)(?:[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}|(?:\[(?:25[0-5]|2[0-4][0-9]|?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|?[0-9][0-9]?|[a-zA-Z0-9-]*[a-zA-Z0-9]:.+)])$/;
+        /^(?!.*(?:.+\.)?(?:burpcollaborator\.net|interactsh\.com|mailinator\.com|10minutemail\.com|yopmail\.com|trashmail\.com)$)(?:[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}|(?:\[(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-zA-Z0-9-]*[a-zA-Z0-9]:.+)])$/;
 
     const email = (value) =>
         value && !emailRegex.test(value)