agin...
This commit is contained in:
@@ -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',
|
||||
};
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user