From af4ef8b3a72c8eba899b7d26c8df2bf93043762c Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Sat, 1 Aug 2026 06:27:59 +0000
Subject: [PATCH] feat: implement password requirements validation and UI
 component

---
 .../features/profile/pages/ProfilePage.tsx    | 23 ++++----
 .../features/profile/pages/ProfilePage.tsx    | 21 ++++---
 .../pages/VesselOwnerRegisterPage.tsx         | 25 +++++----
 libs/auth/src/lib/pages/SignupPage.tsx        | 24 ++++----
 libs/ui/src/index.ts                          |  2 +
 .../ui/src/lib/input/PasswordRequirements.tsx | 56 +++++++++++++++++++
 6 files changed, 110 insertions(+), 41 deletions(-)
 create mode 100644 libs/ui/src/lib/input/PasswordRequirements.tsx

diff --git a/apps/backoffice/src/app/features/profile/pages/ProfilePage.tsx b/apps/backoffice/src/app/features/profile/pages/ProfilePage.tsx
index 63435484b..b40a053da 100644
--- a/apps/backoffice/src/app/features/profile/pages/ProfilePage.tsx
+++ b/apps/backoffice/src/app/features/profile/pages/ProfilePage.tsx
@@ -42,7 +42,7 @@ import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import { useTranslation } from 'react-i18next';
-import { notify, PageHeader, useErrorHandler } from '@ema-platform/ui';
+import { notify, PageHeader, useErrorHandler, passwordSchema as strongPasswordSchema, PasswordRequirements } from '@ema-platform/ui';
 import { useApiMutation } from '@ema-platform/api';
 import { setUser } from '@ema-platform/auth';
 import type { AuthUser } from '@ema-platform/auth';
@@ -170,12 +170,10 @@ export function ProfilePage() {
       oldPassword: z
         .string()
         .min(1, { message: t('profile.validation.passwordMin') }),
-      newPassword: z
-        .string()
-        .min(8, { message: t('profile.validation.passwordMin') }),
+      newPassword: strongPasswordSchema(12),
       confirmPassword: z
         .string()
-        .min(8, { message: t('profile.validation.passwordMin') }),
+        .min(1, { message: t('profile.validation.passwordMin') }),
     })
     .refine((data) => data.newPassword === data.confirmPassword, {
       message: t('profile.validation.passwordMismatch'),
@@ -414,12 +412,15 @@ export function ProfilePage() {
                       {...registerPassword('oldPassword')}
                     />
                     <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
-                      <PasswordInput
-                        label={t('profile.fields.newPassword')}
-                        leftSection={<IconLock size={18} />}
-                        error={passwordErrors.newPassword?.message}
-                        {...registerPassword('newPassword')}
-                      />
+                      <div>
+                        <PasswordInput
+                          label={t('profile.fields.newPassword')}
+                          leftSection={<IconLock size={18} />}
+                          error={passwordErrors.newPassword?.message}
+                          {...registerPassword('newPassword')}
+                        />
+                        <PasswordRequirements password={watchPassword('newPassword')} minLength={12} />
+                      </div>
                       <PasswordInput
                         label={t('profile.fields.confirmPassword')}
                         leftSection={<IconLock size={18} />}
diff --git a/apps/portal/src/app/features/profile/pages/ProfilePage.tsx b/apps/portal/src/app/features/profile/pages/ProfilePage.tsx
index 460d73c69..023e677cd 100644
--- a/apps/portal/src/app/features/profile/pages/ProfilePage.tsx
+++ b/apps/portal/src/app/features/profile/pages/ProfilePage.tsx
@@ -43,7 +43,7 @@ import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import { useTranslation } from 'react-i18next';
-import { notify, PageHeader, useErrorHandler } from '@ema-platform/ui';
+import { notify, PageHeader, useErrorHandler, passwordSchema as strongPasswordSchema, PasswordRequirements } from '@ema-platform/ui';
 import { useApiMutation } from '@ema-platform/api';
 import { authStorage, setUser, setCurrentProfile } from '@ema-platform/auth';
 import type { CurrentProfile } from '@ema-platform/auth';
@@ -331,8 +331,8 @@ export function ProfilePage() {
   const passwordSchema = z
     .object({
       oldPassword: z.string().min(1, { message: t('profile.validation.passwordMin') }),
-      newPassword: z.string().min(8, { message: t('profile.validation.passwordMin') }),
-      confirmPassword: z.string().min(8, { message: t('profile.validation.passwordMin') }),
+      newPassword: strongPasswordSchema(8),
+      confirmPassword: z.string().min(1, { message: t('profile.validation.passwordMin') }),
     })
     .refine((data) => data.newPassword === data.confirmPassword, {
       message: t('profile.validation.passwordMismatch'),
@@ -654,12 +654,15 @@ export function ProfilePage() {
                       {...registerPassword('oldPassword')}
                     />
                     <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
-                      <PasswordInput
-                        label={t('profile.fields.newPassword')}
-                        leftSection={<IconLock size={18} />}
-                        error={passwordErrors.newPassword?.message}
-                        {...registerPassword('newPassword')}
-                      />
+                      <div>
+                        <PasswordInput
+                          label={t('profile.fields.newPassword')}
+                          leftSection={<IconLock size={18} />}
+                          error={passwordErrors.newPassword?.message}
+                          {...registerPassword('newPassword')}
+                        />
+                        <PasswordRequirements password={watchPassword('newPassword')} minLength={8} />
+                      </div>
                       <PasswordInput
                         label={t('profile.fields.confirmPassword')}
                         leftSection={<IconLock size={18} />}
diff --git a/apps/portal/src/app/features/vessel-owner/pages/VesselOwnerRegisterPage.tsx b/apps/portal/src/app/features/vessel-owner/pages/VesselOwnerRegisterPage.tsx
index 75d216232..72e0f2d01 100644
--- a/apps/portal/src/app/features/vessel-owner/pages/VesselOwnerRegisterPage.tsx
+++ b/apps/portal/src/app/features/vessel-owner/pages/VesselOwnerRegisterPage.tsx
@@ -28,7 +28,7 @@ import {
   IconUser,
 } from '@tabler/icons-react';
 import { useApiMutation } from '@ema-platform/api';
-import { notify } from '@ema-platform/ui';
+import { notify, passwordMeetsAll, PasswordRequirements } from '@ema-platform/ui';
 
 const OWNER_TYPES = [
   'Individual (Private Owner)',
@@ -52,11 +52,11 @@ export function VesselOwnerRegisterPage() {
   const [success, setSuccess] = useState(false);
   const [registerTrigger] = useApiMutation<{ id: string }>();
 
-  const canSubmit = !!fullName.trim() && !!email.trim() && !!phone.trim() && !!ownerType && !!nationalIdOrTin.trim() && !!password && password === confirmPassword;
+  const canSubmit = !!fullName.trim() && !!email.trim() && !!phone.trim() && !!ownerType && !!nationalIdOrTin.trim() && passwordMeetsAll(password, 8) && password === confirmPassword;
 
   const handleRegister = async () => {
     if (!canSubmit) {
-      setError('Please fill in all required fields. Passwords must match.');
+      setError('Please fill in all required fields. Password must meet all requirements and match.');
       return;
     }
     setError('');
@@ -164,14 +164,17 @@ export function VesselOwnerRegisterPage() {
             <Divider label="Set Password" labelPosition="center" />
 
             <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
-              <PasswordInput
-                label="Password"
-                placeholder="Min. 8 characters"
-                leftSection={<IconLock size={16} />}
-                required
-                value={password}
-                onChange={(e) => setPassword(e.currentTarget.value)}
-              />
+              <div>
+                <PasswordInput
+                  label="Password"
+                  placeholder="Min. 8 characters"
+                  leftSection={<IconLock size={16} />}
+                  required
+                  value={password}
+                  onChange={(e) => setPassword(e.currentTarget.value)}
+                />
+                <PasswordRequirements password={password} minLength={8} />
+              </div>
               <PasswordInput
                 label="Confirm Password"
                 placeholder="Repeat password"
diff --git a/libs/auth/src/lib/pages/SignupPage.tsx b/libs/auth/src/lib/pages/SignupPage.tsx
index fd7231989..afe560490 100644
--- a/libs/auth/src/lib/pages/SignupPage.tsx
+++ b/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"
diff --git a/libs/ui/src/index.ts b/libs/ui/src/index.ts
index ae512fe36..dc7648e9c 100644
--- a/libs/ui/src/index.ts
+++ b/libs/ui/src/index.ts
@@ -1,5 +1,6 @@
 export * from "./lib/input/BilingualInput";
 export * from "./lib/input/CountrySelect";
+export * from "./lib/input/PasswordRequirements";
 export * from "./lib/feedback/ConfirmModal";
 export * from "./lib/feedback/ApiErrorAlert";
 export * from "./lib/feedback/notify";
@@ -13,3 +14,4 @@ export * from "./lib/layout/PageHeader";
 export * from "./lib/data/AdvancedTable";
 export * from "./lib/data/useServerTable";
 export * from "./lib/components/MaritimeLoader"
+
diff --git a/libs/ui/src/lib/input/PasswordRequirements.tsx b/libs/ui/src/lib/input/PasswordRequirements.tsx
new file mode 100644
index 000000000..7d1e35406
--- /dev/null
+++ b/libs/ui/src/lib/input/PasswordRequirements.tsx
@@ -0,0 +1,56 @@
+import { Stack, Text, Group } from '@mantine/core';
+import { IconCheck, IconX } from '@tabler/icons-react';
+import { z } from 'zod';
+
+export function passwordRules(minLength: number) {
+  return [
+    { label: `At least ${minLength} characters`, test: (p: string) => p.length >= minLength },
+    { label: 'One lowercase letter', test: (p: string) => /[a-z]/.test(p) },
+    { label: 'One uppercase letter', test: (p: string) => /[A-Z]/.test(p) },
+    { label: 'One number', test: (p: string) => /\d/.test(p) },
+    { label: 'One special character', test: (p: string) => /[^A-Za-z0-9]/.test(p) },
+  ];
+}
+
+/** Zod field schema enforcing every rule; unmet rules surface as separate issues. */
+export const passwordSchema = (minLength: number) =>
+  z.string().superRefine((val, ctx) => {
+    for (const rule of passwordRules(minLength)) {
+      if (!rule.test(val)) {
+        ctx.addIssue({ code: 'custom', message: rule.label });
+      }
+    }
+  });
+
+export const passwordMeetsAll = (password: string, minLength: number) =>
+  passwordRules(minLength).every((rule) => rule.test(password));
+
+interface PasswordRequirementsProps {
+  password: string;
+  minLength: number;
+  labels?: string[];
+}
+
+/** Live checklist of password requirements, ticking off as the user types. */
+export function PasswordRequirements({ password, minLength, labels }: PasswordRequirementsProps) {
+  const rules = passwordRules(minLength);
+  return (
+    <Stack gap={6} mt={6}>
+      {rules.map((rule, i) => {
+        const met = rule.test(password);
+        return (
+          <Group key={rule.label} gap={6} wrap="nowrap">
+            {met ? (
+              <IconCheck size={14} color="var(--mantine-color-teal-6)" />
+            ) : (
+              <IconX size={14} color="var(--mantine-color-gray-5)" />
+            )}
+            <Text fz="xs" c={met ? 'teal' : 'dimmed'}>
+              {labels?.[i] ?? rule.label}
+            </Text>
+          </Group>
+        );
+      })}
+    </Stack>
+  );
+}