Render inline sign-in prompt for mentor apply instead of redirect
cgen-84d620fa24fc48609c1ea8dde4b2ffd5
This commit is contained in:
Builder.io
parent
2fe007a831
commit
d94b0396f8
1 changed files with 128 additions and 109 deletions
|
|
@ -16,11 +16,12 @@ import { Input } from "@/components/ui/input";
|
|||
import { Label } from "@/components/ui/label";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
|
||||
export default function MentorApply() {
|
||||
const { user, loading } = useAuth();
|
||||
const { user } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const [bio, setBio] = useState("");
|
||||
const [expertise, setExpertise] = useState<string[]>([]);
|
||||
const [expertiseInput, setExpertiseInput] = useState("");
|
||||
|
|
@ -28,15 +29,7 @@ export default function MentorApply() {
|
|||
const [hourlyRate, setHourlyRate] = useState<string>("");
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!loading && !user) {
|
||||
aethexToast.info({
|
||||
title: "Sign in required",
|
||||
description: "Please sign in to apply as a mentor",
|
||||
});
|
||||
navigate("/login");
|
||||
}
|
||||
}, [user, loading, navigate]);
|
||||
// Show inline sign-in prompt instead of redirecting away
|
||||
|
||||
const addExpertise = () => {
|
||||
const parts = expertiseInput
|
||||
|
|
@ -102,111 +95,137 @@ export default function MentorApply() {
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<Card className="max-w-3xl">
|
||||
<CardHeader>
|
||||
<CardTitle>Mentor profile</CardTitle>
|
||||
<CardDescription>
|
||||
Tell mentees how you can help and set your availability.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={onSubmit} className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="bio">Short bio</Label>
|
||||
<Textarea
|
||||
id="bio"
|
||||
value={bio}
|
||||
onChange={(e) => setBio(e.target.value)}
|
||||
placeholder="What topics do you mentor on?"
|
||||
rows={5}
|
||||
/>
|
||||
{!user ? (
|
||||
<Card className="max-w-2xl">
|
||||
<CardHeader>
|
||||
<CardTitle>Sign in required</CardTitle>
|
||||
<CardDescription>
|
||||
Sign in to create your mentor profile and start receiving requests.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex gap-3">
|
||||
<Button
|
||||
onClick={() => {
|
||||
const next = encodeURIComponent(location.pathname + location.search);
|
||||
navigate(`/login?next=${next}`);
|
||||
}}
|
||||
>
|
||||
Sign in
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => navigate("/community#mentorship")}>
|
||||
Back to directory
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="expertise">Expertise</Label>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
id="expertise"
|
||||
value={expertiseInput}
|
||||
onChange={(e) => setExpertiseInput(e.target.value)}
|
||||
placeholder="Add tags, e.g. Unreal, AI, Networking"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
addExpertise();
|
||||
}
|
||||
}}
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<Card className="max-w-3xl">
|
||||
<CardHeader>
|
||||
<CardTitle>Mentor profile</CardTitle>
|
||||
<CardDescription>
|
||||
Tell mentees how you can help and set your availability.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={onSubmit} className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="bio">Short bio</Label>
|
||||
<Textarea
|
||||
id="bio"
|
||||
value={bio}
|
||||
onChange={(e) => setBio(e.target.value)}
|
||||
placeholder="What topics do you mentor on?"
|
||||
rows={5}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="expertise">Expertise</Label>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
id="expertise"
|
||||
value={expertiseInput}
|
||||
onChange={(e) => setExpertiseInput(e.target.value)}
|
||||
placeholder="Add tags, e.g. Unreal, AI, Networking"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
addExpertise();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={addExpertise}
|
||||
variant="secondary"
|
||||
>
|
||||
Add
|
||||
</Button>
|
||||
</div>
|
||||
{expertise.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 mt-2">
|
||||
{expertise.map((tag) => (
|
||||
<Badge
|
||||
key={tag}
|
||||
variant="outline"
|
||||
className="cursor-pointer"
|
||||
onClick={() => removeExpertise(tag)}
|
||||
>
|
||||
{tag}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid sm:grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="rate">Hourly rate (optional)</Label>
|
||||
<Input
|
||||
id="rate"
|
||||
type="number"
|
||||
min="0"
|
||||
step="1"
|
||||
placeholder="e.g. 100"
|
||||
value={hourlyRate}
|
||||
onChange={(e) => setHourlyRate(e.target.value)}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Set to 0 or leave blank if you mentor for free.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="available">Available</Label>
|
||||
<div className="flex items-center gap-3">
|
||||
<Switch
|
||||
id="available"
|
||||
checked={available}
|
||||
onCheckedChange={setAvailable}
|
||||
/>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Show in mentor directory
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<Button type="submit" disabled={!canSubmit}>
|
||||
{submitting ? "Saving..." : "Save mentor profile"}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={addExpertise}
|
||||
variant="secondary"
|
||||
variant="outline"
|
||||
onClick={() => navigate("/community#mentorship")}
|
||||
>
|
||||
Add
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
{expertise.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 mt-2">
|
||||
{expertise.map((tag) => (
|
||||
<Badge
|
||||
key={tag}
|
||||
variant="outline"
|
||||
className="cursor-pointer"
|
||||
onClick={() => removeExpertise(tag)}
|
||||
>
|
||||
{tag}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid sm:grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="rate">Hourly rate (optional)</Label>
|
||||
<Input
|
||||
id="rate"
|
||||
type="number"
|
||||
min="0"
|
||||
step="1"
|
||||
placeholder="e.g. 100"
|
||||
value={hourlyRate}
|
||||
onChange={(e) => setHourlyRate(e.target.value)}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Set to 0 or leave blank if you mentor for free.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="available">Available</Label>
|
||||
<div className="flex items-center gap-3">
|
||||
<Switch
|
||||
id="available"
|
||||
checked={available}
|
||||
onCheckedChange={setAvailable}
|
||||
/>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Show in mentor directory
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<Button type="submit" disabled={!canSubmit}>
|
||||
{submitting ? "Saving..." : "Save mentor profile"}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => navigate("/community#mentorship")}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue