feat: implement password requirements validation and UI component

libs/auth/src/lib/pages/SignupPage.tsx

@@ -26,7 +26,7 @@ import { z } from 'zod';
 import { useNavigate, Link } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 import { useApiMutation } from '@ema-platform/api';
-import { useErrorHandler } from '@ema-platform/ui';
+import { useErrorHandler, passwordSchema, PasswordRequirements } from '@ema-platform/ui';
 import { AuthShell } from '../components/AuthShell';
 import { loginSuccess, setUser } from '../store/auth.slice';
 import type { AuthUser } from '../types/auth.types';
@@ -40,8 +40,8 @@ const schema = z
     userType: z.literal('individual'),
     nameEn: z.string().min(1, { message: 'Name (English) is required' }),
     nameAm: z.string().optional(),
-    password: z.string().min(8, { message: 'Password must be at least 8 characters' }),
-    confirmPassword: z.string().min(8, { message: 'Confirm your password' }),
+    password: passwordSchema(8),
+    confirmPassword: z.string().min(1, { message: 'Confirm your password' }),
   })
   .refine((data) => data.password === data.confirmPassword, {
     message: 'Passwords do not match',
@@ -80,6 +80,7 @@ export function SignupPage() {
   const {
     register,
     handleSubmit,
+    watch,
     formState: { errors },
   } = useForm<FormValues>({
     resolver: zodResolver(schema),
@@ -197,13 +198,16 @@ export function SignupPage() {
             />
 
             <SimpleGrid cols={{ base: 1, xs: 2 }} spacing="md">
-              <PasswordInput
-                label="Password"
-                placeholder="At least 8 characters"
-                leftSection={<IconLock size={18} />}
-                error={errors.password?.message}
-                {...register('password')}
-              />
+              <div>
+                <PasswordInput
+                  label="Password"
+                  placeholder="At least 8 characters"
+                  leftSection={<IconLock size={18} />}
+                  error={errors.password?.message}
+                  {...register('password')}
+                />
+                <PasswordRequirements password={watch('password') ?? ''} minLength={8} />
+              </div>
               <PasswordInput
                 label="Confirm password"
                 placeholder="Re-enter password"