Tria/emaui
1
0
Fork 0
mirror of https://github.com/Tria-plc/emaui.git synced 2026-08-26 19:12:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement person name utility functions and update related components for name handling

Browse Source
This commit is contained in:
Nati
2026-08-19 05:52:26 +00:00
parent d44977cbf3
commit 629b02fd26
6 changed files with 169 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
libs/auth/src/lib/pages/SignupPage.tsx
View File

@@ -27,7 +27,7 @@ import { useNavigate, Link } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { useTranslation } from 'react-i18next';
import { useApiMutation } from '@ema-platform/api';
import { useErrorHandler, passwordSchema, PasswordRequirements } from '@ema-platform/ui';
import { useErrorHandler, passwordSchema, PasswordRequirements, joinPersonName } from '@ema-platform/ui';
import { AuthShell } from '../components/AuthShell';
import { loginSuccess, setUser } from '../store/auth.slice';
import type { AuthUser } from '../types/auth.types';
@@ -80,7 +80,9 @@ export function SignupPage() {
username: z.string().min(3, { message: t('signup.usernameMinLength', 'Username must be at least 3 characters') }),
phoneNumber: z.string().min(1, { message: t('signup.phoneRequired', 'Phone number is required') }),
userType: z.literal('individual'),
nameEn: z.string().min(1, { message: t('signup.nameEnRequired', 'Name (English) is required') }),
firstName: z.string().min(1, { message: t('signup.firstNameRequired', 'First name is required') }),
middleName: z.string().optional(),
lastName: z.string().min(1, { message: t('signup.lastNameRequired', 'Last name is required') }),
nameAm: z.string().optional(),
password: passwordSchema(8, passwordRuleLabels),
confirmPassword: z.string().min(1, { message: t('signup.confirmPasswordRequired', 'Confirm your password') }),
@@ -109,7 +111,7 @@ export function SignupPage() {
username: values.username,
phoneNumber: values.phoneNumber,
userType: values.userType,
name: { en: values.nameEn, am: values.nameAm ?? '' },
name: { en: joinPersonName(values), am: values.nameAm ?? '' },
password: values.password,
confirmPassword: values.confirmPassword,
};
@@ -172,23 +174,38 @@ export function SignupPage() {
<form onSubmit={handleSubmit(onSubmit)}>
<Stack gap="md">
<SimpleGrid cols={{ base: 1, xs: 2 }} spacing="md">
<SimpleGrid cols={{ base: 1, sm: 3 }} spacing="md">
<TextInput
label={t('signup.nameEnLabel', 'Name (English)')}
placeholder={t('signup.nameEnPlaceholder', 'Abebe Bekele')}
label={t('signup.firstNameLabel', 'First name')}
placeholder={t('signup.firstNamePlaceholder', 'Abebe')}
leftSection={<IconUser size={18} />}
error={errors.nameEn?.message}
{...register('nameEn')}
error={errors.firstName?.message}
{...register('firstName')}
/>
<TextInput
label={t('signup.nameAmLabel', 'Name (Amharic)')}
placeholder={t('signup.nameAmPlaceholder', 'ስም')}
label={t('signup.middleNameLabel', 'Middle name')}
placeholder={t('signup.middleNamePlaceholder', 'Kebede')}
leftSection={<IconUser size={18} />}
error={errors.nameAm?.message}
{...register('nameAm')}
error={errors.middleName?.message}
{...register('middleName')}
/>
<TextInput
label={t('signup.lastNameLabel', 'Last name')}
placeholder={t('signup.lastNamePlaceholder', 'Bekele')}
leftSection={<IconUser size={18} />}
error={errors.lastName?.message}
{...register('lastName')}
/>
</SimpleGrid>
<TextInput
label={t('signup.nameAmLabel', 'Name (Amharic)')}
placeholder={t('signup.nameAmPlaceholder', 'ስም')}
leftSection={<IconUser size={18} />}
error={errors.nameAm?.message}
{...register('nameAm')}
/>
<SimpleGrid cols={{ base: 1, xs: 2 }} spacing="md">
<TextInput
label={t('signup.emailLabel', 'Email address')}