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 { Label } from "@/components/ui/label";
|
||||||
import { Switch } from "@/components/ui/switch";
|
import { Switch } from "@/components/ui/switch";
|
||||||
import { Textarea } from "@/components/ui/textarea";
|
import { Textarea } from "@/components/ui/textarea";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useLocation, useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
export default function MentorApply() {
|
export default function MentorApply() {
|
||||||
const { user, loading } = useAuth();
|
const { user } = useAuth();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
const location = useLocation();
|
||||||
const [bio, setBio] = useState("");
|
const [bio, setBio] = useState("");
|
||||||
const [expertise, setExpertise] = useState<string[]>([]);
|
const [expertise, setExpertise] = useState<string[]>([]);
|
||||||
const [expertiseInput, setExpertiseInput] = useState("");
|
const [expertiseInput, setExpertiseInput] = useState("");
|
||||||
|
|
@ -28,15 +29,7 @@ export default function MentorApply() {
|
||||||
const [hourlyRate, setHourlyRate] = useState<string>("");
|
const [hourlyRate, setHourlyRate] = useState<string>("");
|
||||||
const [submitting, setSubmitting] = useState(false);
|
const [submitting, setSubmitting] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
// Show inline sign-in prompt instead of redirecting away
|
||||||
if (!loading && !user) {
|
|
||||||
aethexToast.info({
|
|
||||||
title: "Sign in required",
|
|
||||||
description: "Please sign in to apply as a mentor",
|
|
||||||
});
|
|
||||||
navigate("/login");
|
|
||||||
}
|
|
||||||
}, [user, loading, navigate]);
|
|
||||||
|
|
||||||
const addExpertise = () => {
|
const addExpertise = () => {
|
||||||
const parts = expertiseInput
|
const parts = expertiseInput
|
||||||
|
|
@ -102,111 +95,137 @@ export default function MentorApply() {
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Card className="max-w-3xl">
|
{!user ? (
|
||||||
<CardHeader>
|
<Card className="max-w-2xl">
|
||||||
<CardTitle>Mentor profile</CardTitle>
|
<CardHeader>
|
||||||
<CardDescription>
|
<CardTitle>Sign in required</CardTitle>
|
||||||
Tell mentees how you can help and set your availability.
|
<CardDescription>
|
||||||
</CardDescription>
|
Sign in to create your mentor profile and start receiving requests.
|
||||||
</CardHeader>
|
</CardDescription>
|
||||||
<CardContent>
|
</CardHeader>
|
||||||
<form onSubmit={onSubmit} className="space-y-6">
|
<CardContent>
|
||||||
<div className="space-y-2">
|
<div className="flex gap-3">
|
||||||
<Label htmlFor="bio">Short bio</Label>
|
<Button
|
||||||
<Textarea
|
onClick={() => {
|
||||||
id="bio"
|
const next = encodeURIComponent(location.pathname + location.search);
|
||||||
value={bio}
|
navigate(`/login?next=${next}`);
|
||||||
onChange={(e) => setBio(e.target.value)}
|
}}
|
||||||
placeholder="What topics do you mentor on?"
|
>
|
||||||
rows={5}
|
Sign in
|
||||||
/>
|
</Button>
|
||||||
|
<Button variant="outline" onClick={() => navigate("/community#mentorship")}>
|
||||||
|
Back to directory
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
</CardContent>
|
||||||
<div className="space-y-2">
|
</Card>
|
||||||
<Label htmlFor="expertise">Expertise</Label>
|
) : (
|
||||||
<div className="flex gap-2">
|
<Card className="max-w-3xl">
|
||||||
<Input
|
<CardHeader>
|
||||||
id="expertise"
|
<CardTitle>Mentor profile</CardTitle>
|
||||||
value={expertiseInput}
|
<CardDescription>
|
||||||
onChange={(e) => setExpertiseInput(e.target.value)}
|
Tell mentees how you can help and set your availability.
|
||||||
placeholder="Add tags, e.g. Unreal, AI, Networking"
|
</CardDescription>
|
||||||
onKeyDown={(e) => {
|
</CardHeader>
|
||||||
if (e.key === "Enter") {
|
<CardContent>
|
||||||
e.preventDefault();
|
<form onSubmit={onSubmit} className="space-y-6">
|
||||||
addExpertise();
|
<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
|
<Button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={addExpertise}
|
variant="outline"
|
||||||
variant="secondary"
|
onClick={() => navigate("/community#mentorship")}
|
||||||
>
|
>
|
||||||
Add
|
Cancel
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
{expertise.length > 0 && (
|
</form>
|
||||||
<div className="flex flex-wrap gap-2 mt-2">
|
</CardContent>
|
||||||
{expertise.map((tag) => (
|
</Card>
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue