Allow non-ASCII email domains in Chrome

package.json

@@ -64,6 +64,7 @@
  "mui-language-picker": "^1.2.7",
  "notistack": "^3.0.1",
  "nspell": "^2.1.5",
+ "punycode": "^2.3.0",
  "react": "^17.0.2",
  "react-beautiful-dnd": "^13.1.1",
  "react-chartjs-2": "^5.2.0",

src/components/Login/SignUpPage/SignUpComponent.tsx

@@ -18,6 +18,10 @@ import {
  meetsUsernameRequirements,
 } from "utilities/utilities";
 
+// Chrome silently converts non-ASCII characters in a Textfield of type="email".
+// Use punycode.toUnicode() to convert them from punycode back to Unicode.
+const punycode = require("punycode/");
+
 const idAffix = "signUp";
 
 interface SignUpDispatchProps {
@@ -111,9 +115,8 @@ export class SignUp extends React.Component<SignUpProps, SignUpState> {
  }
  }
 
- async checkEmail(username: string) {
- const emailTaken = await isEmailTaken(username);
- if (emailTaken) {
+ async checkEmail(email: string) {
+ if (await isEmailTaken(punycode.toUnicode(email))) {
  this.setState((prevState) => ({
  error: { ...prevState.error, email: true },
  }));
@@ -124,7 +127,7 @@ export class SignUp extends React.Component<SignUpProps, SignUpState> {
  e.preventDefault();
  const name = this.state.name.trim();
  const username = this.state.username.trim();
- const email = this.state.email.trim();
+ const email = punycode.toUnicode(this.state.email.trim());
  const password = this.state.password.trim();
  const confirmPassword = this.state.confirmPassword.trim();
 

src/components/PasswordReset/tests/ResetPage.test.tsx

@@ -1,18 +1,13 @@
 import "@testing-library/jest-dom";
-import {
- act,
- cleanup,
- render,
- RenderOptions,
- screen,
-} from "@testing-library/react";
+import { act, cleanup, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { ReactElement } from "react";
+import { ReactElement, ReactNode } from "react";
 import { Provider } from "react-redux";
 import { MemoryRouter, Route, Routes } from "react-router-dom";
 import configureMockStore from "redux-mock-store";
 
 import "tests/reactI18nextMock";
+
 import PasswordReset, {
  PasswordResetTestIds,
 } from "components/PasswordReset/ResetPage";
@@ -43,7 +38,7 @@ afterEach(cleanup);
 const ResetPageProviders = ({
  children,
 }: {
- children: React.ReactNode;
+ children: ReactNode;
 }): ReactElement => {
  return (
  <Provider store={mockStore}>
@@ -56,12 +51,9 @@ const ResetPageProviders = ({
  );
 };
 
-const customRender = async (
- ui: ReactElement,
- options?: Omit<RenderOptions, "wrapper">
-): Promise<void> => {
+const customRender = async (ui: ReactElement): Promise<void> => {
  await act(async () => {
- render(ui, { wrapper: ResetPageProviders, ...options });
+ render(ui, { wrapper: ResetPageProviders });
  });
 };