Merge pull request #28 from ModusCreateOrg/ADE-137

[ADE-137] - Update auth error messages for clarity and improve email validation prompt

Author: jkestering-modus

frontend/src/common/utils/auth-errors.ts

@@ -5,13 +5,13 @@ import { AuthError } from '../models/auth';
  */
 export const AUTH_ERROR_MESSAGES: Record<string, string> = {
   // Sign In errors
-  'UserNotFoundException': 'The email address or password you entered is incorrect.',
-  'NotAuthorizedException': 'The email address or password you entered is incorrect.',
+  'UserNotFoundException': 'Incorrect email or password.',
+  'NotAuthorizedException': 'Incorrect email or password.',
   'UserNotConfirmedException': 'Please check your email to verify your account.',
   'PasswordResetRequiredException': 'You need to reset your password. Please check your email.',
 
   // Sign Up errors
-  'UsernameExistsException': 'This email address is already associated with an account. Please sign in or reset your password.',
+  'UsernameExistsException': 'This email is already linked to an account. Please sign in or reset your password.',
   'InvalidPasswordException': 'Password does not meet the requirements. Please use a stronger password.',
   'InvalidParameterException': 'Please check your input and try again.',
 

frontend/src/common/utils/i18n/resources/en/auth.json

@@ -70,7 +70,7 @@
     "numeric": "Must contain only numbers",
     "exact-length": "Must be exactly {{length}} characters",
     "passwords-match": "Passwords must match",
-    "email": "Please enter a valid email address",
+    "email": "Please provide a valid email address (e.g., [email protected]).",
     "required": "This field is required",
     "min-length": "Must be at least {{length}} characters",
     "max-length": "Must be at most {{length}} characters",

frontend/src/pages/Auth/SignUp/SignUpPage.scss

@@ -4,7 +4,7 @@
     height: 100%;
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    padding-top: 1rem;
   }
 
   .ls-signup-page__form {

frontend/src/pages/Auth/SignUp/SignUpPage.tsx

@@ -26,7 +26,7 @@ const SignUpPage = ({ testid = 'page-signup' }: SignUpPageProps): JSX.Element =>
       <ProgressProvider>
         <Header title={t('signup', { ns: 'auth' })} />
 
-        <IonContent fullscreen className="ion-padding">
+        <IonContent fullscreen className="ion-padding" scrollY={true}>
           <Container className="ls-signup-page__container" fixed>
             <SignUpForm className="ls-signup-page__form" />
           </Container>

frontend/src/pages/Auth/SignUp/components/SignUpForm.scss

@@ -2,30 +2,30 @@
   padding: 1rem;
 
   .ls-signup-form__input {
-    margin-bottom: 16px;
+    margin-bottom: 1rem;
   }
 
   .ls-signup-form__button {
-    margin-top: 16px;
+    margin-top: 1rem;
   }
 
   &__password-guidelines {
-    margin-top: -8px;
-    margin-bottom: 16px;
+    margin-top: -0.5rem;
+    margin-bottom: 1rem;
     font-size: 0.85rem;
 
     &-header {
-      margin-bottom: 4px;
+      margin-bottom: 0.25rem;
       font-weight: 500;
     }
 
     &-item {
       display: flex;
       align-items: center;
-      margin-bottom: 2px;
+      margin-bottom: 0.125rem;
 
       &-icon {
-        margin-right: 6px;
+        margin-right: 0.375rem;
       }
 
       &-valid {

frontend/src/pages/Auth/SignUp/components/SignUpForm.tsx

@@ -129,7 +129,7 @@ const SignUpForm = ({ className, testid = 'form-signup' }: SignUpFormProps): JSX
       <AuthErrorDisplay 
         error={error} 
         showDetails={true}
-        className="ion-margin-bottom"
+        className="ion-margin-bottom ion-margin-top"
         testid={`${testid}-error`}
       />