feat(frontend): Implement Onboarding Welcome Flow
Some checks failed
Deploy Elmeg / deploy (push) Has been cancelled
Some checks failed
Deploy Elmeg / deploy (push) Has been cancelled
This commit is contained in:
fullsizemalt
parent
24aec3b9b1
commit
bc12238937
1 changed files with 241 additions and 0 deletions
241
frontend/app/welcome/page.tsx
Normal file
241
frontend/app/welcome/page.tsx
Normal file
|
|
@ -0,0 +1,241 @@
|
||||||
|
"use client"
|
||||||
|
|
||||||
|
import { useState } from "react"
|
||||||
|
import { motion, AnimatePresence } from "framer-motion"
|
||||||
|
import { Button } from "@/components/ui/button"
|
||||||
|
import { Input } from "@/components/ui/input"
|
||||||
|
import { Label } from "@/components/ui/label"
|
||||||
|
import { Card, CardContent, CardFooter, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||||
|
import { Switch } from "@/components/ui/switch"
|
||||||
|
import { PartyPopper, UserCircle, Settings, CheckCircle2, ArrowRight, ArrowLeft } from "lucide-react"
|
||||||
|
import { useRouter } from "next/navigation"
|
||||||
|
import { getApiUrl } from "@/lib/api-config"
|
||||||
|
|
||||||
|
const STEPS = [
|
||||||
|
{
|
||||||
|
id: "intro",
|
||||||
|
title: "Welcome to Elmeg",
|
||||||
|
description: "Let's get you set up to discover and track your favorite shows.",
|
||||||
|
icon: PartyPopper
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "profile",
|
||||||
|
title: "Create Your Profile",
|
||||||
|
description: "How should we call you in the community?",
|
||||||
|
icon: UserCircle
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "preferences",
|
||||||
|
title: "Customize Experience",
|
||||||
|
description: "Choose how you want to interact with the platform.",
|
||||||
|
icon: Settings
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "finish",
|
||||||
|
title: "You're All Set!",
|
||||||
|
description: "Ready to dive in?",
|
||||||
|
icon: CheckCircle2
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
export default function WelcomePage() {
|
||||||
|
const router = useRouter()
|
||||||
|
const [currentStep, setCurrentStep] = useState(0)
|
||||||
|
const [loading, setLoading] = useState(false)
|
||||||
|
|
||||||
|
// Form State
|
||||||
|
const [username, setUsername] = useState("")
|
||||||
|
const [displayName, setDisplayName] = useState("")
|
||||||
|
const [wikiMode, setWikiMode] = useState(false)
|
||||||
|
const [publicProfile, setPublicProfile] = useState(true)
|
||||||
|
|
||||||
|
const handleNext = async () => {
|
||||||
|
if (currentStep === STEPS.length - 1) {
|
||||||
|
router.push("/profile") // Redirect to Dashboard
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validation & Saving per step
|
||||||
|
if (currentStep === 1) {
|
||||||
|
if (!username) return alert("Username required")
|
||||||
|
setLoading(true)
|
||||||
|
try {
|
||||||
|
const token = localStorage.getItem("token")
|
||||||
|
const res = await fetch(`${getApiUrl()}/users/me`, {
|
||||||
|
method: "PATCH",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
Authorization: `Bearer ${token}`
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
username,
|
||||||
|
display_name: displayName || username
|
||||||
|
})
|
||||||
|
})
|
||||||
|
if (!res.ok) throw new Error("Failed to save profile")
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err)
|
||||||
|
alert("Failed to save profile. Username might be taken.")
|
||||||
|
setLoading(false)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
setLoading(false)
|
||||||
|
} else if (currentStep === 2) {
|
||||||
|
setLoading(true)
|
||||||
|
try {
|
||||||
|
const token = localStorage.getItem("token")
|
||||||
|
const res = await fetch(`${getApiUrl()}/users/me/preferences`, {
|
||||||
|
method: "PATCH",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
Authorization: `Bearer ${token}`
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
wiki_mode: wikiMode,
|
||||||
|
// If wikiMode is true, hide social stuff
|
||||||
|
show_comments: !wikiMode,
|
||||||
|
show_ratings: !wikiMode
|
||||||
|
})
|
||||||
|
})
|
||||||
|
if (!res.ok) throw new Error("Failed to save preferences")
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err)
|
||||||
|
setLoading(false)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
setCurrentStep(prev => prev + 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleBack = () => {
|
||||||
|
setCurrentStep(prev => Math.max(0, prev - 1))
|
||||||
|
}
|
||||||
|
|
||||||
|
const StepIcon = STEPS[currentStep].icon
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center bg-gray-50/50 dark:bg-zinc-950 p-4">
|
||||||
|
<Card className="w-full max-w-md shadow-xl border-t-4 border-t-primary">
|
||||||
|
<CardHeader className="text-center pb-2">
|
||||||
|
<div className="mx-auto w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4 text-primary">
|
||||||
|
<StepIcon className="w-6 h-6" />
|
||||||
|
</div>
|
||||||
|
<CardTitle className="text-2xl">{STEPS[currentStep].title}</CardTitle>
|
||||||
|
<CardDescription>{STEPS[currentStep].description}</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
|
||||||
|
<CardContent className="py-6">
|
||||||
|
<AnimatePresence mode="wait">
|
||||||
|
<motion.div
|
||||||
|
key={currentStep}
|
||||||
|
initial={{ opacity: 0, x: 20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
exit={{ opacity: 0, x: -20 }}
|
||||||
|
transition={{ duration: 0.2 }}
|
||||||
|
>
|
||||||
|
{currentStep === 0 && (
|
||||||
|
<div className="text-center space-y-4">
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
We're glad you're here. This quick setup will help us personalize your experience.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{currentStep === 1 && (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="username">Username <span className="text-red-500">*</span></Label>
|
||||||
|
<Input
|
||||||
|
id="username"
|
||||||
|
placeholder="e.g. phantastic_fan"
|
||||||
|
value={username}
|
||||||
|
onChange={e => setUsername(e.target.value)}
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-muted-foreground">Unique handle for mentions and profile URL.</p>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="displayName">Display Name</Label>
|
||||||
|
<Input
|
||||||
|
id="displayName"
|
||||||
|
placeholder="e.g. Phish Fan 99"
|
||||||
|
value={displayName}
|
||||||
|
onChange={e => setDisplayName(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{currentStep === 2 && (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="flex items-center justify-between space-x-2">
|
||||||
|
<div className="space-y-0.5">
|
||||||
|
<Label htmlFor="wiki-mode" className="text-base">Wiki Mode</Label>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
Hide all social features (comments, ratings, leaderboards). Just data.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Switch
|
||||||
|
id="wiki-mode"
|
||||||
|
checked={wikiMode}
|
||||||
|
onCheckedChange={setWikiMode}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between space-x-2 opacity-80 pointer-events-none">
|
||||||
|
<div className="space-y-0.5">
|
||||||
|
<Label className="text-base">Public Profile</Label>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
Allow others to see your stats and attendence.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Switch checked={publicProfile} />
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-center text-muted-foreground pt-4">You can change these later in settings.</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{currentStep === 3 && (
|
||||||
|
<div className="text-center space-y-4">
|
||||||
|
<p>Your profile is ready!</p>
|
||||||
|
<div className="p-4 bg-secondary/50 rounded-lg text-sm">
|
||||||
|
<p className="font-semibold">@{username}</p>
|
||||||
|
<p>{wikiMode ? "Wiki Mode: ON" : "Community Mode: ON"}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</motion.div>
|
||||||
|
</AnimatePresence>
|
||||||
|
</CardContent>
|
||||||
|
|
||||||
|
<CardFooter className="flex justify-between">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={handleBack}
|
||||||
|
disabled={currentStep === 0 || loading}
|
||||||
|
className={currentStep === 0 ? "invisible" : ""}
|
||||||
|
>
|
||||||
|
<ArrowLeft className="w-4 h-4 mr-2" /> Back
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button onClick={handleNext} disabled={loading}>
|
||||||
|
{loading ? "Saving..." : currentStep === STEPS.length - 1 ? "Get Started" : "Next"}
|
||||||
|
{currentStep !== STEPS.length - 1 && <ArrowRight className="w-4 h-4 ml-2" />}
|
||||||
|
</Button>
|
||||||
|
</CardFooter>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Progress Dots */}
|
||||||
|
<div className="absolute bottom-8 flex gap-2">
|
||||||
|
{STEPS.map((_, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className={`w-2 h-2 rounded-full transition-colors ${index === currentStep ? "bg-primary" : "bg-primary/20"}`}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
Loading…
Add table
Reference in a new issue