fix(signup): add a route to login when the email already has an account

frontend/e2e/tests/invite-test.pw.ts

@@ -39,13 +39,15 @@ test.describe('Invite Tests', () => {
     await page.goto(inviteLink)
     // Wait for the form to load
     await waitForElementVisible(byId('firstName'))
+    // Invitees who already have an account can only get in by logging in.
+    await expect(page.getByRole('link', { name: 'Log in', exact: true })).toBeVisible()
     await setText(byId('firstName'), 'Bullet')
     await setText(byId('lastName'), 'Train')
     await setText(byId('email'), inviteEmail)
     await setText(byId('password'), PASSWORD)
-    await waitForElementVisible(byId('signup-btn'))
-    // Wait for form validation to complete before clicking
-    await page.waitForTimeout(500)
+    // Enabled, not just visible: the button stays disabled until the password
+    // requirements pass.
+    await expect(page.locator(byId('signup-btn'))).toBeEnabled()
     await click(byId('signup-btn'))
     log('Change email')
     await gotoAccountSettings()
@@ -62,4 +64,28 @@ test.describe('Invite Tests', () => {
     await setText("[name='currentPassword']", PASSWORD)
     await click(byId('delete-account'))
   });
+
+  test('Signup points users at login when their email already has an account @oss', async ({ page }) => {
+    const { click, setText, waitForElementVisible } = createHelpers(page);
+
+    log('Open signup')
+    await page.goto('/signup')
+    await waitForElementVisible(byId('firstName'))
+    await expect(page.getByRole('link', { name: 'Log in', exact: true })).toBeVisible()
+
+    log('Sign up with an email that already has an account')
+    await setText(byId('firstName'), 'Existing')
+    await setText(byId('lastName'), 'User')
+    await setText(byId('email'), E2E_USER)
+    await setText(byId('password'), PASSWORD)
+    // Enabled, not just visible: the button stays disabled until the password
+    // requirements pass.
+    await expect(page.locator(byId('signup-btn'))).toBeEnabled()
+    await click(byId('signup-btn'))
+
+    log('Error explains why, and the way out is still on the page')
+    await expect(page.getByText('Email already exists')).toBeVisible()
+    await expect(page.getByText('Please check your details and try again')).toHaveCount(0)
+    await expect(page.getByRole('link', { name: 'Log in', exact: true })).toBeVisible()
+  });
 });

frontend/web/components/base/forms/Input.tsx

@@ -24,6 +24,10 @@ export interface InputProps
   autoValidate?: boolean
   centered?: boolean
   inputClassName?: string
+  // Already known to be wrong, e.g. the API rejected it. Shows immediately,
+  // unlike isValid, which waits until the field has been touched so a pristine
+  // form is not red before anyone has typed.
+  isInvalid?: boolean
   isValid?: boolean
   ref?: Ref<InputMethods>
   search?: boolean
@@ -53,6 +57,7 @@ const Input: React.FC<InputProps> = ({
   className = '',
   disabled,
   inputClassName,
+  isInvalid = false,
   isValid = true,
   onBlur: onBlurProp,
   onChange,
@@ -101,8 +106,8 @@ const Input: React.FC<InputProps> = ({
     onKeyDownProp?.(e)
   }
 
-  const invalid = shouldValidate && !isValid
-  const success = isValid && showSuccess
+  const invalid = isInvalid || (shouldValidate && !isValid)
+  const success = isValid && !invalid && showSuccess
   const sizeClassName = size ? sizeClassNames[size] : ''
   const containerClassName = cn(
     {

frontend/web/components/base/forms/InputGroup.tsx

@@ -152,6 +152,10 @@ const InputGroup: FC<InputGroupProps> = ({
                   inputRef.current = c
                 }}
                 {...restInputProps}
+                // Forwarded so the control can be coloured immediately, without
+                // waiting for the field to be touched. Only reached the wrapper
+                // before, where no styling picks it up.
+                isInvalid={!!isInvalid}
                 isValid={
                   isValid === null || isValid === undefined
                     ? undefined

frontend/web/components/pages/home-page/HomePage.scss

@@ -0,0 +1,30 @@
+// Draws the eye to the way out once the form knows the address already has an
+// account. Finite on purpose: something that blinks until you act on it cannot
+// be dismissed, which is what WCAG 2.2.2 asks for.
+@keyframes login-prompt-highlight {
+  0%,
+  100% {
+    background-color: transparent;
+  }
+  50% {
+    background-color: var(--color-surface-action-subtle);
+  }
+}
+
+.login-prompt {
+  padding: 8px 12px;
+  border-radius: var(--radius-md);
+
+  &--highlight {
+    animation: login-prompt-highlight 0.7s ease-in-out 2;
+  }
+}
+
+// The signal still needs to land, so it stays as a static tint rather than
+// disappearing along with the motion.
+@media (prefers-reduced-motion: reduce) {
+  .login-prompt--highlight {
+    animation: none;
+    background-color: var(--color-surface-action-subtle);
+  }
+}

frontend/web/components/pages/HomePage.tsx → frontend/web/components/pages/home-page/HomePage.tsx

@@ -9,12 +9,10 @@ import Constants from 'common/constants'
 import ErrorMessage from 'components/ErrorMessage'
 import Button from 'components/base/forms/Button'
 import PasswordRequirements from 'components/PasswordRequirements'
-import { informationCircleOutline } from 'ionicons/icons'
-import { IonIcon } from '@ionic/react'
 import { Icon } from 'components/icons'
 import classNames from 'classnames'
 import InfoMessage from 'components/InfoMessage'
-import OnboardingPage from './OnboardingPage'
+import OnboardingPage from 'components/pages/OnboardingPage'
 import isFreeEmailDomain from 'common/utils/isFreeEmailDomain'
 import InputGroup from 'components/base/forms/InputGroup'
 import { Link } from 'react-router-dom'
@@ -32,6 +30,38 @@ import { LoginRequest, RegisterRequest } from 'common/types/requests'
 import { useGetBuildVersionQuery } from 'common/services/useBuildVersion'
 import { useUTMs } from 'common/useUTMs'
 import useSignupExperiment from 'common/useSignupExperiment'
+import './HomePage.scss'
+
+type EmailFieldError = string | string[]
+type EmailError = { email?: EmailFieldError } | undefined
+
+// The error object never clears itself, and it describes the address that was
+// submitted, so it stops applying the moment the field holds something else.
+const currentEmailError = (
+  error: EmailError,
+  email: string,
+  submittedEmail: string,
+) => (email === submittedEmail ? error?.email : undefined)
+
+// Matched on the message because the API sends no error code for this. Raised
+// by CustomUserCreateSerializer.validate.
+const isEmailTaken = (
+  error: EmailError,
+  email: string,
+  submittedEmail: string,
+) => {
+  const current = currentEmailError(error, email, submittedEmail)
+  const messages = Array.isArray(current) ? current : [current]
+  return messages.some((message) =>
+    message?.toLowerCase().includes('already exists'),
+  )
+}
+
+// The banner is for errors with no field to attach to. Anything belonging to a
+// field is shown under that field instead, so one failure gives one message.
+const SIGNUP_FIELDS = ['email', 'first_name', 'last_name', 'password']
+const hasFieldError = (error?: Record<string, unknown>) =>
+  SIGNUP_FIELDS.some((field) => !!error?.[field])
 
 const HomePage: React.FC = () => {
   const history = useHistory()
@@ -42,6 +72,9 @@ const HomePage: React.FC = () => {
   const [lastName, setLastName] = useState('')
   const [marketingConsentGiven] = useState(true)
   const [password, setPassword] = useState('')
+  // The error object never clears on its own, so remember which address it was
+  // about.
+  const [submittedEmail, setSubmittedEmail] = useState('')
 
   const [samlError, setLocalError] = useState(false)
   const [samlLoading, setSamlLoading] = useState(false)
@@ -386,13 +419,11 @@ const HomePage: React.FC = () => {
                                 }}
                               >
                                 {isInvite && (
-                                  <div className='notification flex-row'>
-                                    <span className='notification__icon mb-2'>
-                                      <IonIcon
-                                        icon={informationCircleOutline}
-                                      />
+                                  <div className='notification d-flex align-items-center justify-content-center gap-2 mb-3'>
+                                    <span className='notification__icon d-flex'>
+                                      <Icon name='info-outlined' width={20} />
                                     </span>
-                                    <p className='notification__text pl-3'>
+                                    <p className='notification__text mb-0'>
                                       Log in to accept your invite
                                     </p>
                                   </div>
@@ -521,6 +552,7 @@ const HomePage: React.FC = () => {
                                 const isInvite =
                                   document.location.href.indexOf('invite') !==
                                   -1
+                                setSubmittedEmail(email)
                                 register(
                                   {
                                     email,
@@ -535,7 +567,7 @@ const HomePage: React.FC = () => {
                                 )
                               }}
                             >
-                              {error && (
+                              {error && !hasFieldError(error) && (
                                 <Row>
                                   <div
                                     id='error-alert'
@@ -553,29 +585,13 @@ const HomePage: React.FC = () => {
                                 </Row>
                               )}
                               {isInvite && (
-                                <div>
-                                  <div className='notification flex-row'>
-                                    <span className='notification__icon mb-2'>
-                                      <IonIcon
-                                        icon={informationCircleOutline}
-                                      />
-                                    </span>
-                                    <p className='notification__text pl-3'>
-                                      Create an account to accept your invite
-                                    </p>
-                                  </div>
-                                  <Row className='justify-content-center'>
-                                    Have an account?{' '}
-                                    <Button
-                                      theme='text'
-                                      className='ml-1 fw-bold'
-                                      onClick={() => {
-                                        window.location.href = `/login${redirect}`
-                                      }}
-                                    >
-                                      Log in
-                                    </Button>
-                                  </Row>
+                                <div className='notification d-flex align-items-center justify-content-center gap-2 mb-3'>
+                                  <span className='notification__icon d-flex'>
+                                    <Icon name='info-outlined' width={20} />
+                                  </span>
+                                  <p className='notification__text mb-0'>
+                                    Create an account to accept your invite
+                                  </p>
                                 </div>
                               )}
                               <fieldset id='details'>
@@ -616,10 +632,21 @@ const HomePage: React.FC = () => {
                                 <InputGroup
                                   title='Email Address'
                                   data-test='email'
+                                  isInvalid={
+                                    !!currentEmailError(
+                                      error,
+                                      email,
+                                      submittedEmail,
+                                    )
+                                  }
                                   inputProps={{
                                     autoComplete: 'on',
                                     className: 'full-width',
-                                    error: error && error.email,
+                                    error: currentEmailError(
+                                      error,
+                                      email,
+                                      submittedEmail,
+                                    ),
                                     name: 'email',
                                   }}
                                   onChange={(
@@ -671,7 +698,8 @@ const HomePage: React.FC = () => {
                                       !allRequirementsMet ||
                                       !firstName.trim() ||
                                       !lastName.trim() ||
-                                      blockGenericEmailDomain
+                                      blockGenericEmailDomain ||
+                                      isEmailTaken(error, email, submittedEmail)
                                     }
                                     className='px-4 mt-3 full-width'
                                     type='submit'
@@ -683,6 +711,29 @@ const HomePage: React.FC = () => {
                             </form>
                           )}
                         </Card>
+                        <Row
+                          className={classNames(
+                            'login-prompt justify-content-center',
+                            {
+                              'login-prompt--highlight': isEmailTaken(
+                                error,
+                                email,
+                                submittedEmail,
+                              ),
+                            },
+                          )}
+                        >
+                          {isEmailTaken(error, email, submittedEmail)
+                            ? 'You already have an account.'
+                            : 'Have an account?'}{' '}
+                          <Button
+                            theme='text'
+                            className='ml-1 fw-bold'
+                            href={`/login${redirect}`}
+                          >
+                            Log in
+                          </Button>
+                        </Row>
                       </>
                     )}
                   </div>

frontend/web/components/pages/home-page/index.ts

@@ -0,0 +1 @@
+export { default } from './HomePage'

frontend/web/routes.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { Route, Switch } from 'react-router-dom'
 
 import App from './components/App' // App Wrapper
-import HomePage from './components/pages/HomePage'
+import HomePage from './components/pages/home-page'
 import Maintenance from './components/Maintenance'
 import CreateOrganisationPage from './components/pages/CreateOrganisationPage'
 import CreateEnvironmentPage from './components/pages/CreateEnvironmentPage'

frontend/web/styles/project/_forms.scss

@@ -171,7 +171,6 @@ label {
     align-self: center;
     &__icon {
         color: $success;
-        font-size: 2em;
     }
     &__text {
         color: $success;