fix(signup): show role badge for professional/customer intents, fix role assignment
- Hide role selector tabs when intent is provided via URL - Show role badge for professional/customer roles - Add profession field to API call for backend role assignment - Fixes issue where roles weren't properly assigned after signup
This commit is contained in:
Ashwin Kumar Sivakumar
parent
50a27aaed0
commit
9519337030
1 changed files with 76 additions and 58 deletions
|
|
@ -230,6 +230,7 @@ export default function SignupRoute() {
|
|||
phone: "",
|
||||
intent: role(),
|
||||
role_key: selectedProfessionalRole() || undefined,
|
||||
profession: selectedProfessionalRole() || undefined,
|
||||
...(role() === "company" ? { company_name: companyName().trim() } : {}),
|
||||
...(isTestMode ? { test_mode: true } : {}),
|
||||
}),
|
||||
|
|
@ -492,64 +493,81 @@ export default function SignupRoute() {
|
|||
Sign up first, then go directly to dashboard after email verification.
|
||||
</p>
|
||||
|
||||
{/* Role Selector */}
|
||||
<div class="role-selector" style={{ display: "flex", gap: "8px", marginBottom: "24px" }}>
|
||||
<button
|
||||
type="button"
|
||||
class={`role-tab ${role() === "job_seeker" ? "active" : ""}`}
|
||||
onClick={() => setSelectedRole("job_seeker")}
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: "14px 16px",
|
||||
border: role() === "job_seeker" ? "2px solid #fd6116" : "2px solid #e5e7eb",
|
||||
"border-radius": "8px",
|
||||
background: role() === "job_seeker" ? "#fff5f0" : "#fff",
|
||||
cursor: "pointer",
|
||||
display: "flex",
|
||||
"align-items": "center",
|
||||
"justify-content": "center",
|
||||
gap: "10px",
|
||||
"font-size": "15px",
|
||||
"font-weight": role() === "job_seeker" ? "600" : "500",
|
||||
color: role() === "job_seeker" ? "#fd6116" : "#4b5563",
|
||||
transition: "all 0.2s ease",
|
||||
}}
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
|
||||
<circle cx="12" cy="7" r="4"/>
|
||||
</svg>
|
||||
Job Seeker
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class={`role-tab ${role() === "company" ? "active" : ""}`}
|
||||
onClick={() => setSelectedRole("company")}
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: "14px 16px",
|
||||
border: role() === "company" ? "2px solid #fd6116" : "2px solid #e5e7eb",
|
||||
"border-radius": "8px",
|
||||
background: role() === "company" ? "#fff5f0" : "#fff",
|
||||
cursor: "pointer",
|
||||
display: "flex",
|
||||
"align-items": "center",
|
||||
"justify-content": "center",
|
||||
gap: "10px",
|
||||
"font-size": "15px",
|
||||
"font-weight": role() === "company" ? "600" : "500",
|
||||
color: role() === "company" ? "#fd6116" : "#4b5563",
|
||||
transition: "all 0.2s ease",
|
||||
}}
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M3 21h18"/>
|
||||
<path d="M9 21V8l-6 4 6 9h6v-9l-6-4 6-3"/>
|
||||
<path d="M9 3h6v5H9z"/>
|
||||
</svg>
|
||||
Company
|
||||
</button>
|
||||
</div>
|
||||
{/* Role Selector - Only show tabs for job_seeker and company when no intent is provided */}
|
||||
<Show when={!search.intent && !search.role}>
|
||||
<div class="role-selector" style={{ display: "flex", gap: "8px", marginBottom: "24px" }}>
|
||||
<button
|
||||
type="button"
|
||||
class={`role-tab ${role() === "job_seeker" ? "active" : ""}`}
|
||||
onClick={() => setSelectedRole("job_seeker")}
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: "14px 16px",
|
||||
border: role() === "job_seeker" ? "2px solid #fd6116" : "2px solid #e5e7eb",
|
||||
"border-radius": "8px",
|
||||
background: role() === "job_seeker" ? "#fff5f0" : "#fff",
|
||||
cursor: "pointer",
|
||||
display: "flex",
|
||||
"align-items": "center",
|
||||
"justify-content": "center",
|
||||
gap: "10px",
|
||||
"font-size": "15px",
|
||||
"font-weight": role() === "job_seeker" ? "600" : "500",
|
||||
color: role() === "job_seeker" ? "#fd6116" : "#4b5563",
|
||||
transition: "all 0.2s ease",
|
||||
}}
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
|
||||
<circle cx="12" cy="7" r="4"/>
|
||||
</svg>
|
||||
Job Seeker
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class={`role-tab ${role() === "company" ? "active" : ""}`}
|
||||
onClick={() => setSelectedRole("company")}
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: "14px 16px",
|
||||
border: role() === "company" ? "2px solid #fd6116" : "2px solid #e5e7eb",
|
||||
"border-radius": "8px",
|
||||
background: role() === "company" ? "#fff5f0" : "#fff",
|
||||
cursor: "pointer",
|
||||
display: "flex",
|
||||
"align-items": "center",
|
||||
"justify-content": "center",
|
||||
gap: "10px",
|
||||
"font-size": "15px",
|
||||
"font-weight": role() === "company" ? "600" : "500",
|
||||
color: role() === "company" ? "#fd6116" : "#4b5563",
|
||||
transition: "all 0.2s ease",
|
||||
}}
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M3 21h18"/>
|
||||
<path d="M9 21V8l-6 4 6 9h6v-9l-6-4 6-3"/>
|
||||
<path d="M9 3h6v5H9z"/>
|
||||
</svg>
|
||||
Company
|
||||
</button>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
{/* Show role badge for professional/customer when coming via direct link */}
|
||||
<Show when={search.intent === "professional" || search.intent === "customer" || search.role === "professional" || search.role === "customer"}>
|
||||
<div style={{
|
||||
"margin-bottom": "24px",
|
||||
padding: "12px 16px",
|
||||
"background-color": "#fff5f0",
|
||||
"border-radius": "8px",
|
||||
"border-left": "4px solid #fd6116"
|
||||
}}>
|
||||
<p style={{ margin: 0, "font-weight": "600", color: "#fd6116" }}>
|
||||
Registering as: {role() === "professional" ? "Professional" : role() === "customer" ? "Customer" : role()}
|
||||
</p>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<div class="grid" style={{ "grid-template-columns": "1fr 1fr", margin: 0 }}>
|
||||
<div class="field">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue