Redirect /profile to /dashboard/profile for dashboard layout
This commit is contained in:
Tiago Yamamoto
parent
78857b7afe
commit
d52a83f94b
1 changed files with 6 additions and 214 deletions
|
|
@ -1,226 +1,18 @@
|
||||||
"use client"
|
"use client"
|
||||||
|
|
||||||
import { useEffect, useState } from "react"
|
import { useEffect } from "react"
|
||||||
import { useRouter } from "next/navigation"
|
import { useRouter } from "next/navigation"
|
||||||
import { authApi, profileApi, type ApiUser } from "@/lib/api"
|
|
||||||
import { Button } from "@/components/ui/button"
|
|
||||||
import { Input } from "@/components/ui/input"
|
|
||||||
import { Textarea } from "@/components/ui/textarea"
|
|
||||||
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
|
|
||||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
|
||||||
import { Label } from "@/components/ui/label"
|
|
||||||
import { Loader2, User, Mail, Shield, Save, Upload } from "lucide-react"
|
|
||||||
import { toast } from "sonner"
|
|
||||||
|
|
||||||
export default function ProfilePage() {
|
export default function ProfileRedirect() {
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const [user, setUser] = useState<ApiUser | null>(null)
|
|
||||||
const [isLoading, setIsLoading] = useState(true)
|
|
||||||
const [isSaving, setIsSaving] = useState(false)
|
|
||||||
|
|
||||||
// Form State
|
|
||||||
const [formData, setFormData] = useState({
|
|
||||||
name: "",
|
|
||||||
email: "",
|
|
||||||
phone: "",
|
|
||||||
bio: "",
|
|
||||||
})
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
loadProfile()
|
router.replace("/dashboard/profile")
|
||||||
}, [])
|
}, [router])
|
||||||
|
|
||||||
const loadProfile = async () => {
|
|
||||||
try {
|
|
||||||
setIsLoading(true)
|
|
||||||
const userData = await authApi.getCurrentUser()
|
|
||||||
setUser(userData)
|
|
||||||
setFormData({
|
|
||||||
name: userData.name || userData.fullName || "",
|
|
||||||
email: userData.email || "",
|
|
||||||
phone: userData.phone || "",
|
|
||||||
bio: userData.bio || "",
|
|
||||||
})
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Failed to load profile:", error)
|
|
||||||
toast.error("Failed to load profile")
|
|
||||||
router.push("/login") // Redirect if unauthorized
|
|
||||||
} finally {
|
|
||||||
setIsLoading(false)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
|
||||||
const { name, value } = e.target
|
|
||||||
setFormData(prev => ({ ...prev, [name]: value }))
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleSubmit = async (e: React.FormEvent) => {
|
|
||||||
e.preventDefault()
|
|
||||||
if (!user) return
|
|
||||||
|
|
||||||
try {
|
|
||||||
setIsSaving(true)
|
|
||||||
// Call update API
|
|
||||||
await profileApi.update({
|
|
||||||
name: formData.name,
|
|
||||||
// email: formData.email, // Often email update requires verification, let's allow it if API supports
|
|
||||||
phone: formData.phone,
|
|
||||||
bio: formData.bio,
|
|
||||||
})
|
|
||||||
toast.success("Profile updated successfully")
|
|
||||||
// Reload to ensure sync
|
|
||||||
await loadProfile()
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Failed to update profile:", error)
|
|
||||||
toast.error("Failed to update profile")
|
|
||||||
} finally {
|
|
||||||
setIsSaving(false)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleAvatarUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
const file = e.target.files?.[0]
|
|
||||||
if (!file) return
|
|
||||||
|
|
||||||
try {
|
|
||||||
setIsLoading(true) // Show global loading for avatar
|
|
||||||
toast.info("Uploading avatar...")
|
|
||||||
await profileApi.uploadAvatar(file)
|
|
||||||
toast.success("Avatar uploaded!")
|
|
||||||
await loadProfile()
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Avatar upload failed:", error)
|
|
||||||
toast.error("Failed to upload avatar")
|
|
||||||
} finally {
|
|
||||||
setIsLoading(false)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isLoading && !user) {
|
|
||||||
return (
|
|
||||||
<div className="flex items-center justify-center min-h-screen">
|
|
||||||
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!user) return null
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="container max-w-4xl py-10">
|
<div className="flex items-center justify-center min-h-screen">
|
||||||
<h1 className="text-3xl font-bold mb-8">My Profile</h1>
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
|
||||||
|
|
||||||
<div className="grid gap-6 md:grid-cols-[300px_1fr]">
|
|
||||||
|
|
||||||
{/* Left Column: Avatar & Basic Info */}
|
|
||||||
<div className="space-y-6">
|
|
||||||
<Card>
|
|
||||||
<CardHeader className="text-center">
|
|
||||||
<div className="relative mx-auto mb-4 group">
|
|
||||||
<Avatar className="h-32 w-32 border-4 border-background shadow-lg">
|
|
||||||
<AvatarImage src={user.avatarUrl} alt={user.name} />
|
|
||||||
<AvatarFallback className="text-4xl">{user.name?.charAt(0).toUpperCase()}</AvatarFallback>
|
|
||||||
</Avatar>
|
|
||||||
<div className="absolute inset-0 flex items-center justify-center bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity rounded-full">
|
|
||||||
<label htmlFor="avatar-upload" className="cursor-pointer text-white flex flex-col items-center gap-1">
|
|
||||||
<Upload className="h-6 w-6" />
|
|
||||||
<span className="text-xs font-medium">Change</span>
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
id="avatar-upload"
|
|
||||||
type="file"
|
|
||||||
accept="image/*"
|
|
||||||
className="hidden"
|
|
||||||
onChange={handleAvatarUpload}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<CardTitle>{user.name || user.fullName}</CardTitle>
|
|
||||||
<CardDescription>{user.email}</CardDescription>
|
|
||||||
<div className="mt-4 flex items-center justify-center gap-2">
|
|
||||||
<Shield className="h-4 w-4 text-muted-foreground" />
|
|
||||||
<span className="text-sm font-medium bg-secondary px-3 py-1 rounded-full capitalize">
|
|
||||||
{user.role}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</CardHeader>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Right Column: Edit Form */}
|
|
||||||
<div className="space-y-6">
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Personal Information</CardTitle>
|
|
||||||
<CardDescription>Update your personal details here.</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<form onSubmit={handleSubmit} className="space-y-4">
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<Label htmlFor="name">Full Name</Label>
|
|
||||||
<div className="relative">
|
|
||||||
<User className="absolute left-3 top-2.5 h-4 w-4 text-muted-foreground" />
|
|
||||||
<Input
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
value={formData.name}
|
|
||||||
onChange={handleInputChange}
|
|
||||||
className="pl-9"
|
|
||||||
placeholder="Your full name"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<Label htmlFor="email">Email</Label>
|
|
||||||
<div className="relative">
|
|
||||||
<Mail className="absolute left-3 top-2.5 h-4 w-4 text-muted-foreground" />
|
|
||||||
<Input
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
value={formData.email}
|
|
||||||
disabled // Email usually managed separately or disabled
|
|
||||||
className="pl-9 bg-muted"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<p className="text-xs text-muted-foreground">To change your email, please contact support.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<Label htmlFor="phone">Phone Number</Label>
|
|
||||||
<Input
|
|
||||||
id="phone"
|
|
||||||
name="phone"
|
|
||||||
value={formData.phone}
|
|
||||||
onChange={handleInputChange}
|
|
||||||
placeholder="+1 (555) 000-0000"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<Label htmlFor="bio">Bio</Label>
|
|
||||||
<Textarea
|
|
||||||
id="bio"
|
|
||||||
name="bio"
|
|
||||||
value={formData.bio}
|
|
||||||
onChange={handleInputChange}
|
|
||||||
placeholder="Tell us a little about yourself..."
|
|
||||||
className="min-h-[120px]"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex justify-end pt-4">
|
|
||||||
<Button type="submit" disabled={isSaving}>
|
|
||||||
{isSaving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
|
||||||
{isSaving ? "Saving..." : "Save Changes"}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue