Add email spellchecker suggestions to login (#73)

### What are the relevant tickets?
<!--- If it fixes an open issue, please link to the issue here. -->
<!--- Closes # --->
<!--- Fixes # --->
<!--- N/A --->

- mitodl/hq#9336


### Description (What does it do?)
<!--- Describe your changes in detail -->

The aim is to prevent profile registrations in Keycloak for MIT users
that are not linked to the organization indentity provider.

#70 added email
spellchecker suggestions to the registration page. This PR adds it on
the login page.

On the registration page, blocks sign ups for MIT emails
([these](https://github.com/mitodl/ol-infrastructure/blob/a0d3000743e198c6a8c91d5a8c87d64de553e15e/src/ol_infrastructure/substructure/keycloak/olapps.py#L672-L688))
by disabling the submit button. The login page ensures the email is
valid and provides suggestions for misspellings, so it should be unusual
for MIT users to reach the registration screen, however this ensures
that MIT users cannot create an account that is not linked to the org
identity. Displays message: "Please return to login to be directed to
MIT Touchstone."

Updates to a more robust email validation regex on the login page.

**Extra care should be taken when testing on RC as this impacts login
and registration.**



### Screenshots (if appropriate):
<!--- optional - delete if empty --->


<img width="647" height="557" alt="image"
src="https://github.com/user-attachments/assets/135cb0aa-42f8-4d8c-9fca-51e16fbf54e0"
/>

<img width="744" height="1007" alt="image"
src="https://github.com/user-attachments/assets/7c018bea-469a-486b-ab44-707333150fe2"
/>


### How can this be tested?
<!---
Please describe in detail how your changes have been tested.
Include details of your testing environment, any set-up required
(e.g. data entry required for validation) and the tests you ran to
see how your change affects other areas of the code, etc.
Please also include instructions for how your reviewer can validate your
changes.
--->

### Additional Context
<!--- optional - delete if empty --->
<!--- Please add any reviewer questions, details worth noting, etc. that
will help in
assessing this change.  --->

Run `yarn start` to fire up Keycloak. Navigate to the dummy client at
https://my-theme.keycloakify.dev/.

On the login screen:

- Suggestions should appear as you type misspellings (on blur will often
only happen as the user submits the form).
- Check suggestion is not provided if the email is not yet valid.
- Check suggestions are not provided while correctly typing an MIT
email.
- Check suggestion is provided for close match typos for MIT emails.
These are:
    - mit.edu
    - broad.mit.edu
    - cag.csail.mit.edu
    - csail.mit.edu
    - education.mit.edu
    - ll.mit.edu
    - math.mit.edu
    - med.mit.edu
    - media.mit.edu
    - mitimco.mit.edu
    - mtl.mit.edu
    - professional.mit.edu
    - sloan.mit.edu
    - smart.mit.edu
    - solve.mit.edu
    - wi.mit.edu
- Check suggestions are not provided while correctly typing a common
email domain.
- Check suggestion is provided for close match typos for common email
domains, e.g.:
   - gmail.com
   - yahoo.com
   - outlook.com
   - hotmail.com
   - live.com

- The email validation should disallow:
  - `a@b.c` - TLD is only 1 letter
  - `user@abc..com` - consecutive dots
  - `user@sub..domain.com` - consecutive dots
  - `user@-abc.com` leading hyphen
  - `user@abc-.com` trailing hyphen
  - `user@-sub-domain.com` - leading hyphen
  - `a b@example.com` - space in local part
  - `user@exa mple.com` - space in domain
  - `user@@example.com` - double @
  - `user@.example.com` - empty subdomain
  - `user@example.` - empty TLD
  - `user@example.c1` - TLD must be letters only

On the registration screen:

- If your local Keycloak config doesn't take you to the registration
page, log `kcContext.url.registrationUrl` and open at that path.

- Check that the registration page disables submit for any of the MIT
emails above.
- Message should read "Please return to login to be directed to MIT
Touchstone." on blur.

<!--- Uncomment and add steps to be completed before merging this PR if
necessary
### Checklist:
- [ ] e.g. Update secret values in Vault before merging
--->

Author: jonkafton

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ol-keycloakify",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "description": "Keycloakify theme for Open Learning",
   "repository": {
     "type": "git",

src/login/UserProfileFormFields.tsx

@@ -14,9 +14,24 @@ import type { KcContext } from "./KcContext"
 import type { I18n } from "./i18n"
 import { Label, ValidationMessage, RevealPasswordButton, HelperText, Suggestion } from "./components/Elements"
 import { StyledTextField } from "./components/Elements"
+import { ORG_EMAIL_DOMAINS } from "./constants"
+
+const isOrgEmail = (email: string): boolean => {
+  if (!email || !email.trim()) return false
+  const emailParts = email.trim().split("@")
+  if (emailParts.length !== 2) return false
+  const domain = emailParts[1].toLowerCase()
+  return ORG_EMAIL_DOMAINS.some(
+    (orgEmailDomain: string) => domain === orgEmailDomain.toLowerCase() || domain.endsWith(`.${orgEmailDomain.toLowerCase()}`)
+  )
+}
 
-export default function UserProfileFormFields(props: Omit<UserProfileFormFieldsProps<KcContext, I18n>, "kcClsx">) {
-  const { kcContext, i18n, onIsFormSubmittableValueChange, doMakeUserConfirmPassword, BeforeField, AfterField } = props
+export default function UserProfileFormFields(
+  props: Omit<UserProfileFormFieldsProps<KcContext, I18n>, "kcClsx"> & {
+    onEmailValueChange?: (email: string) => void
+  }
+) {
+  const { kcContext, i18n, onIsFormSubmittableValueChange, doMakeUserConfirmPassword, BeforeField, AfterField, onEmailValueChange } = props
 
   const { advancedMsg } = i18n
 
@@ -31,7 +46,15 @@ export default function UserProfileFormFields(props: Omit<UserProfileFormFieldsP
 
   useEffect(() => {
     onIsFormSubmittableValueChange(isFormSubmittable)
-  }, [isFormSubmittable])
+  }, [isFormSubmittable, onIsFormSubmittableValueChange])
+
+  const emailValue = formFieldStates.find(state => state.attribute.name === "email")?.valueOrValues
+
+  useEffect(() => {
+    if (typeof emailValue === "string") {
+      onEmailValueChange?.(emailValue)
+    }
+  }, [emailValue, onEmailValueChange])
 
   const groupNameRef = { current: "" }
 
@@ -235,9 +258,22 @@ function BaseInputTag(
     transformValue?: (value: string) => string
     onBeforeChange?: () => void
     onBlur?: () => void
+    onFocus?: () => void
   }
 ) {
-  const { attribute, fieldIndex, dispatchFormAction, valueOrValues, i18n, displayableErrors, label, transformValue, onBeforeChange, onBlur } = props
+  const {
+    attribute,
+    fieldIndex,
+    dispatchFormAction,
+    valueOrValues,
+    i18n,
+    displayableErrors,
+    label,
+    transformValue,
+    onBeforeChange,
+    onBlur,
+    onFocus
+  } = props
 
   const { advancedMsgStr } = i18n
 
@@ -318,6 +354,11 @@ function BaseInputTag(
           "aria-invalid": displayableErrors.length !== 0,
           autoComplete: attribute.autocomplete
         }}
+        inputProps={{
+          onFocus: () => {
+            onFocus?.()
+          }
+        }}
         fullWidth
         endAdornment={
           attribute.name === "password" || attribute.name === "password-confirm" ? (
@@ -353,31 +394,18 @@ function BaseInputTag(
 
 const EMAIL_SUGGESTION_DOMAINS = [
   ...emailSpellChecker.POPULAR_DOMAINS,
-  // https://github.com/mitodl/ol-infrastructure/blob/a0d3000743e198c6a8c91d5a8c87d64de553e15e/src/ol_infrastructure/substructure/keycloak/olapps.py#L672-L688
-  "mit.edu",
-  "broad.mit.edu",
-  "cag.csail.mit.edu",
-  "csail.mit.edu",
-  "education.mit.edu",
-  "ll.mit.edu",
-  "math.mit.edu",
-  "med.mit.edu",
-  "media.mit.edu",
-  "mit.edu",
-  "mitimco.mit.edu",
-  "mtl.mit.edu",
-  "professional.mit.edu",
-  "sloan.mit.edu",
-  "smart.mit.edu",
-  "solve.mit.edu",
-  "wi.mit.edu"
+  // Users with MIT addresses should have been directed to Touchstone on login. We might prevent some mistyped registrations here, though correct organization addresses will be show a validation error prompting to return to login.
+  ...ORG_EMAIL_DOMAINS
 ]
 
 function EmailTag(props: InputFieldByTypeProps & { fieldIndex: number | undefined }) {
-  const { attribute, fieldIndex, dispatchFormAction, valueOrValues } = props
+  const { attribute, fieldIndex, dispatchFormAction, valueOrValues, i18n } = props
+
+  const { advancedMsgStr } = i18n
 
   const [touched, setTouched] = useState(false)
   const [suggestion, setSuggestion] = useState<string | null>(null)
+  const [hasBeenBlurred, setHasBeenBlurred] = useState(false)
 
   const [initialValue, setInitialValue] = useState<string | null>(() => {
     if (fieldIndex === undefined) {
@@ -390,13 +418,16 @@ function EmailTag(props: InputFieldByTypeProps & { fieldIndex: number | undefine
     if (typeof valueOrValues !== "string" || !valueOrValues) {
       return
     }
+    setHasBeenBlurred(true)
     const suggestion = emailSpellChecker.run({
       email: valueOrValues,
       domains: EMAIL_SUGGESTION_DOMAINS
     })
     setSuggestion(suggestion?.full || null)
   }
 
+  const orgEmailDetected = typeof valueOrValues === "string" && valueOrValues.trim() && isOrgEmail(valueOrValues)
+
   useEffect(() => {
     if (initialValue && !touched) {
       dispatchFormAction({
@@ -428,7 +459,15 @@ function EmailTag(props: InputFieldByTypeProps & { fieldIndex: number | undefine
           }
         }}
         onBlur={checkEmailForSuggestion}
+        onFocus={() => {
+          setHasBeenBlurred(false)
+        }}
       />
+      {orgEmailDetected && hasBeenBlurred ? (
+        <ValidationMessage id="form-help-text-mit-email" aria-live="polite">
+          {advancedMsgStr("orgEmailRegistrationMessage")}
+        </ValidationMessage>
+      ) : null}
       {suggestion ? (
         <Suggestion
           onClick={() => {

src/login/constants.ts

@@ -0,0 +1,46 @@
+import emailSpellChecker from "@zootools/email-spell-checker"
+
+/* Users logging in with MIT email addresses should be directed to Touchstone.
+ * On the login screen, emails that closely match are shown a suggestion for typo corrections.
+ * On the registration screen, users attempting to register with MIT email addresses are shown a message to return to login.
+ */
+export const ORG_EMAIL_DOMAINS = [
+  // https://github.com/mitodl/ol-infrastructure/blob/a0d3000743e198c6a8c91d5a8c87d64de553e15e/src/ol_infrastructure/substructure/keycloak/olapps.py#L672-L688
+  "mit.edu",
+  "broad.mit.edu",
+  "cag.csail.mit.edu",
+  "csail.mit.edu",
+  "education.mit.edu",
+  "ll.mit.edu",
+  "math.mit.edu",
+  "med.mit.edu",
+  "media.mit.edu",
+  "mitimco.mit.edu",
+  "mtl.mit.edu",
+  "professional.mit.edu",
+  "sloan.mit.edu",
+  "smart.mit.edu",
+  "solve.mit.edu",
+  "wi.mit.edu"
+]
+
+export const EMAIL_SUGGESTION_DOMAINS = [
+  ...ORG_EMAIL_DOMAINS,
+  ...emailSpellChecker.POPULAR_DOMAINS,
+  // Adding common email providers to the suggestion list. The email-spell-checker lists these as second-level domains,
+  // but adding them here prevents them being suggested as they are being typed correctly.
+  "yahoo.com",
+  "outlook.com",
+  "hotmail.com",
+  "live.com",
+  "hotmail.co.uk",
+  "hotmail.fr",
+  "msn.com",
+  "icloud.com"
+]
+
+export const EMAIL_SPELLCHECKER_CONFIG = {
+  domains: EMAIL_SUGGESTION_DOMAINS,
+  // Empty the TLD list to avoid false positives for domains we can't reliably suggest for.
+  topLevelDomains: []
+}

src/login/i18n.ts

@@ -67,6 +67,8 @@ const { useI18n, ofTypeI18n } = i18nBuilder
       invalidUsernameOrEmailMessage:
         " We do not have an account for that email on record. Please try another email or sign up for free.",
       invalidEmailMessage: "Invalid email address.",
+      orgEmailRegistrationMessage:
+        "Please return to login to be directed to your identity provider.",
       invalidPasswordMessage:
         "The password you have entered is incorrect. Please try again or select Reset Password below.",
       expiredCodeMessage: "Sign in timeout. Please sign in again.",

src/login/pages/LoginUsername.tsx

@@ -3,12 +3,14 @@ import { clsx } from "keycloakify/tools/clsx"
 import type { PageProps } from "keycloakify/login/pages/PageProps"
 import type { KcContext } from "../KcContext"
 import type { I18n } from "../i18n"
-import { Button, Form, SocialProviderButtonLink, OrBar, StyledTextField, ValidationMessage } from "../components/Elements"
+import { Button, Form, SocialProviderButtonLink, OrBar, StyledTextField, ValidationMessage, Suggestion } from "../components/Elements"
 import mitLogo from "../components/mit-logo.svg"
+import emailSpellChecker from "@zootools/email-spell-checker"
+import { EMAIL_SPELLCHECKER_CONFIG, EMAIL_SUGGESTION_DOMAINS } from "../constants"
 
 const isValidEmail = (email: string): boolean => {
   if (!email || !email.trim()) return false
-  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+  const emailRegex = /^[^\s@]+@([A-Za-z0-9](?:[A-Za-z0-9-]*[A-Za-z0-9])?\.)+[A-Za-z]{2,}$/
   return emailRegex.test(email.trim())
 }
 
@@ -25,6 +27,7 @@ export default function LoginUsername(props: PageProps<Extract<KcContext, { page
   const [emailInvalid, setEmailInvalid] = useState(false)
   const [isFocused, setIsFocused] = useState(false)
   const [isEmailValid, setIsEmailValid] = useState(true)
+  const [suggestion, setSuggestion] = useState<string | null>(null)
   const inputRef = useRef<HTMLInputElement | null>(null)
   const isFocusedRef = useRef(isFocused)
   const usernameRef = useRef(username)
@@ -47,6 +50,28 @@ export default function LoginUsername(props: PageProps<Extract<KcContext, { page
     [shouldValidateEmail]
   )
 
+  const checkEmailForSuggestion = useCallback((value: string) => {
+    if (!value.trim()) {
+      return
+    }
+
+    const parts = value.trim().split("@")
+    const domain = parts[1]
+    const startMatch = EMAIL_SUGGESTION_DOMAINS.some(d => d.startsWith(domain))
+    // Don't show a suggestion while the user is typing towards a match
+    if (startMatch) {
+      setSuggestion(null)
+      return
+    }
+
+    const suggestionResult = emailSpellChecker.run({
+      email: value.trim(),
+      ...EMAIL_SPELLCHECKER_CONFIG
+    })
+
+    setSuggestion(suggestionResult?.full || null)
+  }, [])
+
   const isSubmitDisabled = isSubmitting || !username.trim() || (shouldValidateEmail && !isEmailValid)
 
   useEffect(() => {
@@ -104,6 +129,7 @@ export default function LoginUsername(props: PageProps<Extract<KcContext, { page
           {realm.password && (
             <Form
               id="kc-form-login"
+              noValidate
               onSubmit={() => {
                 if (realm.registrationEmailAsUsername && username) {
                   sessionStorage.setItem("email", username.trim())
@@ -134,13 +160,17 @@ export default function LoginUsername(props: PageProps<Extract<KcContext, { page
                       onFocus: () => {
                         setIsFocused(true)
                         setEmailInvalid(false)
+                        setSuggestion(null)
                       },
                       onBlur: () => {
                         setIsFocused(false)
                         const value = inputRef.current?.value ?? ""
                         const isValid = checkValidity(value)
                         if (!isValid && value.trim()) {
                           setEmailInvalid(true)
+                          setSuggestion(null)
+                        } else if (isValid && shouldValidateEmail && value.trim()) {
+                          checkEmailForSuggestion(value.trim())
                         }
                       }
                     }}
@@ -152,6 +182,13 @@ export default function LoginUsername(props: PageProps<Extract<KcContext, { page
                       const isValid = checkValidity(value)
                       if (isValid) {
                         setEmailInvalid(false)
+                        if (shouldValidateEmail && value.trim()) {
+                          checkEmailForSuggestion(value.trim())
+                        } else {
+                          setSuggestion(null)
+                        }
+                      } else {
+                        setSuggestion(null)
                       }
                     }}
                     value={username}
@@ -161,6 +198,18 @@ export default function LoginUsername(props: PageProps<Extract<KcContext, { page
                       {msgStr("invalidEmailMessage")}
                     </ValidationMessage>
                   )}
+                  {suggestion && (
+                    <Suggestion
+                      onClick={() => {
+                        setSuggestion(null)
+                        setUsername(suggestion)
+                        checkValidity(suggestion)
+                        setEmailInvalid(false)
+                      }}
+                    >
+                      Did you mean: {suggestion}?
+                    </Suggestion>
+                  )}
                 </div>
               )}
               <div id="kc-form-buttons">

src/login/pages/Register.tsx

@@ -7,9 +7,22 @@ import type { PageProps } from "keycloakify/login/pages/PageProps"
 import type { KcContext } from "../KcContext"
 import type { I18n } from "../i18n"
 import { Form, ValidationMessage, Button, Link, Info, Subtitle } from "../components/Elements"
+import { ORG_EMAIL_DOMAINS } from "../constants"
+
+const isOrgEmail = (email: string): boolean => {
+  if (!email || !email.trim()) return false
+  const emailParts = email.trim().split("@")
+  if (emailParts.length !== 2) return false
+  const domain = emailParts[1].toLowerCase()
+  return ORG_EMAIL_DOMAINS.some(
+    (orgEmailDomain: string) => domain === orgEmailDomain.toLowerCase() || domain.endsWith(`.${orgEmailDomain.toLowerCase()}`)
+  )
+}
 
 type RegisterProps = PageProps<Extract<KcContext, { pageId: "register.ftl" }>, I18n> & {
-  UserProfileFormFields: LazyOrNot<(props: Omit<UserProfileFormFieldsProps, "kcClsx">) => JSX.Element>
+  UserProfileFormFields: LazyOrNot<
+    (props: Omit<UserProfileFormFieldsProps, "kcClsx"> & { onEmailValueChange?: (email: string) => void }) => JSX.Element
+  >
   doMakeUserConfirmPassword: boolean
 }
 
@@ -32,6 +45,11 @@ export default function Register(props: RegisterProps) {
 
   const [isFormSubmittable, setIsFormSubmittable] = useState(false)
   const [areTermsAccepted, setAreTermsAccepted] = useState(false)
+  const [emailValue, setEmailValue] = useState<string>("")
+
+  // Block form submission if org email is detected
+  const hasOrgEmail = emailValue.trim() && isOrgEmail(emailValue)
+  const isFormSubmittableWithOrgCheck = isFormSubmittable && !hasOrgEmail
 
   return (
     <Template
@@ -54,6 +72,7 @@ export default function Register(props: RegisterProps) {
           kcContext={kcContext}
           i18n={i18n}
           onIsFormSubmittableValueChange={setIsFormSubmittable}
+          onEmailValueChange={setEmailValue}
           doMakeUserConfirmPassword={doMakeUserConfirmPassword}
         />
         {termsAcceptanceRequired && (
@@ -87,7 +106,7 @@ export default function Register(props: RegisterProps) {
             </div>
           ) : (
             <div id="kc-form-buttons">
-              <Button disabled={!isFormSubmittable || (termsAcceptanceRequired && !areTermsAccepted)} type="submit" size="large">
+              <Button disabled={!isFormSubmittableWithOrgCheck || (termsAcceptanceRequired && !areTermsAccepted)} type="submit" size="large">
                 {msg("doRegister")}
               </Button>
             </div>