agin...

Client-Registration/src/auth/AuthProvider.jsx

@@ -41,12 +41,17 @@ export function useAuth() {
 
 // ── Map ID token claims → user object ─────────────────────────────────────
 function claimsToUser(claims, provider) {
+    const firstName = claims.given_name ?? null;
+    const surname   = claims.family_name ?? null;
+    const displayName = claims.name
+        ?? [firstName, surname].filter(Boolean).join(' ')
+        ?? null;
     return {
         entraSubjectId: claims.oid ?? claims.sub ?? null,
         email:          claims.email ?? claims.preferred_username ?? null,
-        displayName:    claims.name ?? null,
+        displayName,
-        firstName:      claims.given_name ?? null,
+        firstName,
-        surname:        claims.family_name ?? null,
+        surname,
         provider:       provider ?? 'unknown',
     };
 }

Client-Registration/src/components/steps/ContactStep.jsx

@@ -6,11 +6,12 @@ export default function ContactStep() {
     const { user } = useAuth();
     const { contactData, setContactData, saveContact, goBack, loading, error } = useRegistration();
 
-    // Pre-fill from auth claims on mount
+    // Pre-fill from CIAM claims on mount
     useEffect(() => {
         if (user) {
             setContactData(prev => ({
-                contactName: prev.contactName || user.displayName || '',
+                firstName:    prev.firstName    || user.firstName    || '',
+                lastName:     prev.lastName     || user.surname      || '',
                 contactEmail: prev.contactEmail || user.email        || '',
                 contactPhone: prev.contactPhone || '',
             }));
@@ -39,7 +40,9 @@ export default function ContactStep() {
 
             {user && (
                 <div className="info-card">
-                    <div className="info-card-primary">{user.displayName}</div>
+                    <div className="info-card-primary">
+                        {[user.firstName, user.surname].filter(Boolean).join(' ') || user.displayName || user.email}
+                    </div>
                     <div className="info-card-secondary">{user.email}</div>
                 </div>
             )}
@@ -47,26 +50,41 @@ export default function ContactStep() {
             {error && <div className="error-message">{error}</div>}
 
             <form onSubmit={handleSubmit}>
+                <div className="form-row">
                     <div className="form-group">
-                    <label htmlFor="contactName">Full Name <span className="required">*</span></label>
+                        <label htmlFor="firstName">First Name <span className="required">*</span></label>
                         <input
                             type="text"
-                        id="contactName"
+                            id="firstName"
-                        name="contactName"
+                            name="firstName"
-                        value={contactData.contactName}
+                            value={contactData.firstName || ''}
                             onChange={handleChange}
-                        placeholder="Jane Smith"
+                            placeholder="Jane"
                             required
                         />
                     </div>
 
+                    <div className="form-group">
+                        <label htmlFor="lastName">Last Name <span className="required">*</span></label>
+                        <input
+                            type="text"
+                            id="lastName"
+                            name="lastName"
+                            value={contactData.lastName || ''}
+                            onChange={handleChange}
+                            placeholder="Smith"
+                            required
+                        />
+                    </div>
+                </div>
+
                 <div className="form-group">
                     <label htmlFor="contactEmail">Email <span className="required">*</span></label>
                     <input
                         type="email"
                         id="contactEmail"
                         name="contactEmail"
-                        value={contactData.contactEmail}
+                        value={contactData.contactEmail || ''}
                         onChange={handleChange}
                         placeholder="jane@example.com"
                         required
@@ -79,7 +97,7 @@ export default function ContactStep() {
                         type="tel"
                         id="contactPhone"
                         name="contactPhone"
-                        value={contactData.contactPhone}
+                        value={contactData.contactPhone || ''}
                         onChange={handleChange}
                         placeholder="(555) 123-4567"
                     />

Client-Registration/src/context/RegistrationContext.jsx

@@ -53,7 +53,8 @@ export function RegistrationProvider({ children }) {
 
     // Form data — maps to RegisterRequest model fields (minus entraSubjectId)
     const [contactData, setContactData] = useState({
-        contactName:  '',
+        firstName:    '',
+        lastName:     '',
         contactEmail: '',
         contactPhone: '',
     });
@@ -83,8 +84,9 @@ export function RegistrationProvider({ children }) {
     // ─── Validation ─────────────────────────────────────────────────────
 
     const validateContact = useCallback(() => {
-        if (!contactData.contactName.trim())  return 'Contact name is required';
+        if (!contactData.firstName?.trim())   return 'First name is required';
-        if (!contactData.contactEmail.trim()) return 'Email is required';
+        if (!contactData.lastName?.trim())    return 'Last name is required';
+        if (!contactData.contactEmail?.trim()) return 'Email is required';
         return null;
     }, [contactData]);
 
@@ -132,6 +134,8 @@ export function RegistrationProvider({ children }) {
             const request = {
                 ...contactData,
                 ...businessData,
+                // Combine for server-side contactName field
+                contactName: [contactData.firstName, contactData.lastName].filter(Boolean).join(' '),
             };
 
             // Pre-fill email from auth if the user left it blank

Client-Registration/src/styles/app.css

@@ -326,6 +326,16 @@ body {
    Forms
    ============================================================ */
 
+.form-row {
+    display: flex;
+    gap: 12px;
+}
+
+.form-row .form-group {
+    flex: 1;
+    margin-bottom: 0;
+}
+
 .form-group {
     margin-bottom: 16px;
 }