fix: auth form messages

ONEARMY · Mar 3, 2025 · d41e1ca · d41e1ca
1 parent 1a8d4e9
commit d41e1ca
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 31 deletions.
diff --git a/packages/cypress/src/integration/SignUp.spec.ts b/packages/cypress/src/integration/SignUp.spec.ts
@@ -13,7 +13,9 @@ describe('[User sign-up]', () => {
       cy.get('[data-cy=username]').click()
       cy.get('[data-cy=username]').clear().type('a')
       cy.get('[data-cy=consent]').uncheck().check()
-      cy.contains('Username must be at least 2 characters').should('be.visible')
+      cy.contains(FRIENDLY_MESSAGES['sign-up/username-short']).should(
+        'be.visible',
+      )
 
       cy.step('Email is invalid')
       cy.get('[data-cy=email]').click()
@@ -25,19 +27,19 @@ describe('[User sign-up]', () => {
       cy.get('[data-cy=password]').click()
       cy.get('[data-cy=password]').clear().type('a')
       cy.get('[data-cy=consent]').uncheck().check()
-      cy.contains('Password must be at least 6 characters').should('be.visible')
+      cy.contains(FRIENDLY_MESSAGES['sign-up/password-short']).should(
+        'be.visible',
+      )
 
       cy.step('Password confirmation does not match')
       cy.get('[data-cy=password]').click()
       cy.get('[data-cy=password]').clear().type('a')
       cy.get('[data-cy=confirm-password]').click()
       cy.get('[data-cy=confirm-password]').clear().type('b')
       cy.get('[data-cy=consent]').uncheck().check()
-      cy.contains('Your new password does not match').should('be.visible')
-      cy.step('Using valid inputs')
-      cy.signUpNewUser()
-      cy.contains('Yay! You signed up!')
-      cy.get('[data-cy=user-menu]')
+      cy.contains(FRIENDLY_MESSAGES['sign-up/password-mismatch']).should(
+        'be.visible',
+      )
     })
   })
 
@@ -49,9 +51,10 @@ describe('[User sign-up]', () => {
       cy.signUpNewUser(user)
       cy.logout()
       cy.fillSignupForm(username, email, password)
-      cy.contains(FRIENDLY_MESSAGES['sign-up/username-taken']).should(
-        'be.visible',
-      )
+      cy.get('[data-cy=submit]').click()
+      cy.get('[data-cy="TextNotification: failure"]')
+        .contains(FRIENDLY_MESSAGES['sign-up/username-taken'])
+        .should('be.visible')
     })
 
     it('Prevents duplicate email', () => {
@@ -62,8 +65,8 @@ describe('[User sign-up]', () => {
       cy.logout()
       cy.fillSignupForm(`${username}-new`, email, password)
       cy.get('[data-cy=submit]').click()
-      cy.get('[data-cy=error-msg]')
-        .contains(FRIENDLY_MESSAGES['auth/email-already-in-use'])
+      cy.get('[data-cy="TextNotification: failure"]')
+        .contains(FRIENDLY_MESSAGES['generic-error'])
         .should('be.visible')
     })
   })
@@ -92,7 +95,7 @@ describe('[User sign-up]', () => {
       cy.get('[data-cy="password"]').clear().type(password)
       cy.get('[data-cy="changeEmailSubmit"]').click()
       cy.get('[data-cy="changeEmailContainer"')
-        .contains(`Email changed to ${newEmail}`)
+        .contains(FRIENDLY_MESSAGES['auth/email-changed'])
         .should('be.visible')
 
       cy.step('Update Password')
@@ -102,7 +105,7 @@ describe('[User sign-up]', () => {
       cy.get('[data-cy="repeatNewPassword"]').clear().type(newPassword)
       cy.get('[data-cy="changePasswordSubmit"]').click()
       cy.get('[data-cy="changePasswordContainer"')
-        .contains(`Password changed`)
+        .contains(FRIENDLY_MESSAGES['auth/password-changed'])
         .should('be.visible')
     })
   })

diff --git a/shared/messages.ts b/shared/messages.ts
@@ -9,12 +9,26 @@ export const FRIENDLY_MESSAGES = {
   '': '',
   'auth/argument-error': 'Please provide a valid email',
   'auth/email-already-in-use': 'The email address is already in use',
+  'auth/email-changed':
+    "Roger that. We've sent you an email, please click the confirmation link to make the change happen",
   'auth/invalid-email': `That email address doesn't quite look right`,
+  'auth/password-changed': 'All done. Password changed',
   'auth/user-not-found': 'No account found, typo maybe?',
   'auth/wrong-password': 'Password does not match the user account',
+  'generic-error': 'Oops, something went wrong!',
+  required: 'Required field',
   'reset email sent': 'Reset email sent, check your inbox/spam',
   'profile saved': 'Profile Saved',
-  'sign-up/username-taken': 'Woops sorry, that Username is already taken',
+  'sign-up/email-required': 'Need an email address',
+  'sign-up/password-short': 'Password must be at least 6 characters',
+  'sign-up/password-required': 'A password is required unfortunately',
+  'sign-up/password-mismatch': 'Your new password does not match',
+  'sign-up/password-weak':
+    "Your password isn't strong enough, try something else?",
+  'sign-up/terms': 'Consent is required. Gotta tick that box',
+  'sign-up/username-short': 'Username must be at least 2 characters',
+  'sign-up/username-taken': 'Oh wow, that username is already taken!',
+  'sign-up/username-required': 'Username required, like, who are you?',
   [randomKey]: randomKey,
 }
 

diff --git a/src/pages/UserSettings/content/sections/ChangeEmail.form.tsx b/src/pages/UserSettings/content/sections/ChangeEmail.form.tsx
@@ -1,6 +1,7 @@
 import { useContext, useState } from 'react'
 import { Field, Form } from 'react-final-form'
 import { Accordion, Button, FieldInput } from 'oa-components'
+import { FRIENDLY_MESSAGES } from 'oa-shared'
 import { PasswordField } from 'src/common/Form/PasswordField'
 import { FormFieldWrapper } from 'src/pages/common/FormFieldWrapper'
 import { SessionContext } from 'src/pages/common/SessionContext'
@@ -45,8 +46,7 @@ export const ChangeEmailForm = () => {
 
       setSubmitResults({
         type: 'success',
-        message:
-          "We've sent you an email. Please click the confirmation link to proceed with the change!",
+        message: FRIENDLY_MESSAGES['auth/email-changed'],
       })
     } catch (error) {
       setSubmitResults({ type: 'error', message: error.message })

diff --git a/src/pages/UserSettings/content/sections/ChangePassword.form.tsx b/src/pages/UserSettings/content/sections/ChangePassword.form.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { Form } from 'react-final-form'
 import { Accordion, Button, FieldInput } from 'oa-components'
+import { FRIENDLY_MESSAGES } from 'oa-shared'
 import { PasswordField } from 'src/common/Form/PasswordField'
 import { FormFieldWrapper } from 'src/pages/common/FormFieldWrapper'
 import { UserContactError } from 'src/pages/User/contact/UserContactError'
@@ -48,7 +49,7 @@ export const ChangePasswordForm = () => {
 
       setSubmitResults({
         type: 'success',
-        message: `Password changed.`,
+        message: FRIENDLY_MESSAGES['auth/password-changed'],
       })
     } catch (error) {
       setSubmitResults({ type: 'error', message: error.message })

diff --git a/src/routes/_.sign-up.tsx b/src/routes/_.sign-up.tsx
@@ -1,7 +1,13 @@
 /* eslint-disable unicorn/filename-case */
 import { Field, Form } from 'react-final-form'
 import { Link, redirect, useActionData } from '@remix-run/react'
-import { Button, ExternalLink, FieldInput, HeroBanner } from 'oa-components'
+import {
+  Button,
+  ExternalLink,
+  FieldInput,
+  HeroBanner,
+  TextNotification,
+} from 'oa-components'
 import { FRIENDLY_MESSAGES } from 'oa-shared'
 import { PasswordField } from 'src/common/Form/PasswordField'
 import Main from 'src/pages/common/Layout/Main'
@@ -46,7 +52,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
   const username = formData.get('username') as string
   if (!(await authServiceServer.isUsernameAvailable(username, client))) {
     return Response.json(
-      { error: 'That username is already taken!' },
+      { error: FRIENDLY_MESSAGES['sign-up/username-taken'] },
       { headers },
     )
   }
@@ -65,10 +71,16 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 
   if (error) {
     if (error.code === 'weak_password') {
-      return Response.json({ error: error.message }, { headers })
+      return Response.json(
+        { error: FRIENDLY_MESSAGES['password-weak'] },
+        { headers },
+      )
     }
 
-    return Response.json({ error: 'Oops, something went wrong!' }, { headers })
+    return Response.json(
+      { error: FRIENDLY_MESSAGES['generic-error'] },
+      { headers },
+    )
   }
 
   if (data.user) {
@@ -90,18 +102,21 @@ export default function Index() {
 
   const validationSchema = object({
     username: string()
-      .min(2, 'Username must be at least 2 characters')
+      .min(2, FRIENDLY_MESSAGES['sign-up/username-short'])
       .required('Required'),
     email: string()
       .email(FRIENDLY_MESSAGES['auth/invalid-email'])
       .required('Required'),
     password: string()
-      .min(6, 'Password must be at least 6 characters')
-      .required('Password is required'),
+      .min(6, FRIENDLY_MESSAGES['sign-up/password-short'])
+      .required(FRIENDLY_MESSAGES['sign-up/password-required']),
     'confirm-password': string()
-      .oneOf([ref('password'), ''], 'Your new password does not match')
-      .required('Password confirm is required'),
-    consent: bool().oneOf([true], 'Consent is required'),
+      .oneOf(
+        [ref('password'), ''],
+        FRIENDLY_MESSAGES['sign-up/password-mismatch'],
+      )
+      .required(FRIENDLY_MESSAGES['sign-up/email-required']),
+    consent: bool().oneOf([true], FRIENDLY_MESSAGES['sign-up/terms']),
   })
 
   return (
@@ -161,7 +176,9 @@ export default function Index() {
                       </Flex>
 
                       {actionResponse?.error && pristine && (
-                        <Text color="red">{actionResponse?.error}</Text>
+                        <TextNotification variant="failure" isVisible>
+                          {actionResponse?.error}
+                        </TextNotification>
                       )}
 
                       <Flex

diff --git a/src/routes/api.account.change-email.tsx b/src/routes/api.account.change-email.tsx
@@ -1,3 +1,4 @@
+import { FRIENDLY_MESSAGES } from 'oa-shared'
 import { createSupabaseServerClient } from 'src/repository/supabase.server'
 
 import type { ActionFunctionArgs } from '@remix-run/node'
@@ -41,8 +42,8 @@ export const action = async ({ request }: ActionFunctionArgs) => {
       {
         error:
           result.error.code === 'email_exists'
-            ? 'That email is already taken!'
-            : 'Oops, something went wrong!',
+            ? FRIENDLY_MESSAGES['auth/email-already-in-use']
+            : FRIENDLY_MESSAGES['generic'],
       },
       { headers, status: 400 },
     )