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"
|
||||
|
||||
import { useEffect, useState } from "react"
|
||||
import { useEffect } from "react"
|
||||
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 [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(() => {
|
||||
loadProfile()
|
||||
}, [])
|
||||
|
||||
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
|
||||
router.replace("/dashboard/profile")
|
||||
}, [router])
|
||||
|
||||
return (
|
||||
<div className="container max-w-4xl py-10">
|
||||
<h1 className="text-3xl font-bold mb-8">My Profile</h1>
|
||||
|
||||
<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 className="flex items-center justify-center min-h-screen">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue