Add password requirements and guidelines to SignUpForm

- Introduced password requirements in auth.json for better user guidance
- Added PasswordGuidelines component to SignUpForm for real-time validation feedback
- Updated validation schema to enforce password complexity rules (min length, uppercase, number, special character)
- Adjusted styles for password guidelines to improve layout and visibility

Author: jkestering-modus

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

@@ -39,6 +39,7 @@
   "submit": "Submit",
   "confirm": "Confirm",
   "resend-code": "Resend Code",
+  "password-requirements": "Password Requirements:",
   "email-verification": {
     "title": "Email Verification",
     "message": "We've sent a verification code to your email. Please enter it below to verify your account.",
@@ -59,6 +60,9 @@
     "email": "Please enter a valid email address",
     "required": "This field is required",
     "min-length": "Must be at least {{length}} characters",
-    "max-length": "Must be at most {{length}} characters"
+    "max-length": "Must be at most {{length}} characters",
+    "uppercase": "Must contain at least one uppercase letter",
+    "number": "Must contain at least one number",
+    "special-char": "Must contain at least one special character"
   }
 }

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

@@ -2,10 +2,39 @@
   padding: 1rem;
 
   .ls-signup-form__input {
-    margin-bottom: 1rem;
+    margin-bottom: 16px;
   }
 
   .ls-signup-form__button {
-    margin-top: 1.5rem;
+    margin-top: 16px;
+  }
+
+  &__password-guidelines {
+    margin-top: -8px;
+    margin-bottom: 16px;
+    font-size: 0.85rem;
+    
+    &-header {
+      margin-bottom: 4px;
+      font-weight: 500;
+    }
+    
+    &-item {
+      display: flex;
+      align-items: center;
+      margin-bottom: 2px;
+      
+      &-icon {
+        margin-right: 6px;
+      }
+      
+      &-valid {
+        color: var(--ion-color-success);
+      }
+      
+      &-invalid {
+        color: var(--ion-color-medium);
+      }
+    }
   }
 } 

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

@@ -6,12 +6,14 @@ import {
   IonText,
   IonRow,
   IonCol,
+  IonIcon,
 } from '@ionic/react';
 import { useRef, useState } from 'react';
 import classNames from 'classnames';
-import { Form, Formik } from 'formik';
+import { Form, Formik, useFormikContext } from 'formik';
 import { object, string, ref } from 'yup';
 import { useTranslation } from 'react-i18next';
+import { checkmarkCircle, closeCircle } from 'ionicons/icons';
 
 import './SignUpForm.scss';
 import { BaseComponentProps } from 'common/components/types';
@@ -40,6 +42,44 @@ interface SignUpFormValues {
   confirmPassword: string;
 }
 
+/**
+ * Password guidelines component
+ */
+const PasswordGuidelines = () => {
+  const { values } = useFormikContext<SignUpFormValues>();
+  const password = values.password || '';
+  const { t } = useTranslation();
+
+  const hasMinLength = password.length >= 8;
+  const hasUppercase = /[A-Z]/.test(password);
+  const hasNumber = /[0-9]/.test(password);
+  const hasSpecialChar = /[^A-Za-z0-9]/.test(password);
+
+  const renderGuideline = (isValid: boolean, text: string) => {
+    return (
+      <div className={`ls-signup-form__password-guidelines-item ls-signup-form__password-guidelines-item-${isValid ? 'valid' : 'invalid'}`}>
+        <IonIcon 
+          icon={isValid ? checkmarkCircle : closeCircle} 
+          className="ls-signup-form__password-guidelines-item-icon" 
+        />
+        <span>{text}</span>
+      </div>
+    );
+  };
+
+  return (
+    <div className="ls-signup-form__password-guidelines">
+      <div className="ls-signup-form__password-guidelines-header">
+        {t('password-requirements', { ns: 'auth' })}
+      </div>
+      {renderGuideline(hasMinLength, t('validation.min-length', { length: 8, ns: 'auth' }))}
+      {renderGuideline(hasUppercase, t('validation.uppercase', { ns: 'auth' }))}
+      {renderGuideline(hasNumber, t('validation.number', { ns: 'auth' }))}
+      {renderGuideline(hasSpecialChar, t('validation.special-char', { ns: 'auth' }))}
+    </div>
+  );
+};
+
 /**
  * The `SignUpForm` component renders a form for user registration.
  * @param {SignUpFormProps} props - Component properties.
@@ -71,6 +111,9 @@ const SignUpForm = ({ className, testid = 'form-signup' }: SignUpFormProps): JSX
       .required(t('validation.required', { ns: 'auth' })),
     password: string()
       .min(8, t('validation.min-length', { length: 8, ns: 'auth' }))
+      .matches(/[A-Z]/, t('validation.uppercase', { ns: 'auth' }))
+      .matches(/[0-9]/, t('validation.number', { ns: 'auth' }))
+      .matches(/[^A-Za-z0-9]/, t('validation.special-char', { ns: 'auth' }))
       .required(t('validation.required', { ns: 'auth' })),
     confirmPassword: string()
       .oneOf([ref('password')], t('validation.passwords-match', { ns: 'auth' }))
@@ -180,6 +223,8 @@ const SignUpForm = ({ className, testid = 'form-signup' }: SignUpFormProps): JSX
               <IonInputPasswordToggle slot="end"></IonInputPasswordToggle>
             </Input>
 
+            <PasswordGuidelines />
+
             <Input
               type="password"
               name="confirmPassword"