This commit is contained in:
Grae Jones
2026-03-23 13:59:56 -07:00
parent 981117629a
commit 541251f065
4 changed files with 60 additions and 23 deletions

View File

@@ -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,
firstName: claims.given_name ?? null,
surname: claims.family_name ?? null,
displayName,
firstName,
surname,
provider: provider ?? 'unknown',
};
}

View File

@@ -6,12 +6,13 @@ 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 || '',
contactEmail: prev.contactEmail || user.email || '',
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,17 +50,32 @@ export default function ContactStep() {
{error && <div className="error-message">{error}</div>}
<form onSubmit={handleSubmit}>
<div className="form-group">
<label htmlFor="contactName">Full Name <span className="required">*</span></label>
<input
type="text"
id="contactName"
name="contactName"
value={contactData.contactName}
onChange={handleChange}
placeholder="Jane Smith"
required
/>
<div className="form-row">
<div className="form-group">
<label htmlFor="firstName">First Name <span className="required">*</span></label>
<input
type="text"
id="firstName"
name="firstName"
value={contactData.firstName || ''}
onChange={handleChange}
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">
@@ -66,7 +84,7 @@ export default function ContactStep() {
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"
/>

View File

@@ -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.contactEmail.trim()) return 'Email is required';
if (!contactData.firstName?.trim()) return 'First name 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

View File

@@ -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;
}