better profie load
This commit is contained in:
parent
0288bf8eda
commit
a58b9222c3
@ -9,6 +9,8 @@ import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { Avatar } from '@/components/ui/avatar'
|
||||
import { LoadingSpinner, LoadingOverlay } from '@/components/ui/loading-spinner'
|
||||
import { AvatarSkeleton, FormFieldSkeleton, TextAreaSkeleton } from '@/components/ui/skeleton'
|
||||
import { Camera, Save, Eye, EyeOff, Globe } from 'lucide-react'
|
||||
|
||||
interface UserProfile {
|
||||
@ -45,6 +47,9 @@ export default function ProfilePage() {
|
||||
})
|
||||
const [saveStatus, setSaveStatus] = useState<{type: 'success' | 'error' | null, message: string}>({type: null, message: ''})
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [profileLoading, setProfileLoading] = useState(true)
|
||||
const [fieldLoading, setFieldLoading] = useState<{[key: string]: boolean}>({})
|
||||
const [avatarUploading, setAvatarUploading] = useState(false)
|
||||
|
||||
const supabase = createClient()
|
||||
|
||||
@ -57,6 +62,7 @@ export default function ProfilePage() {
|
||||
const loadProfile = async () => {
|
||||
if (!user) return
|
||||
|
||||
setProfileLoading(true)
|
||||
try {
|
||||
// Get user metadata and profile data
|
||||
const { data: { user: userData }, error: userError } = await supabase.auth.getUser()
|
||||
@ -85,12 +91,15 @@ export default function ProfilePage() {
|
||||
} catch (error) {
|
||||
console.error('Error loading profile:', error)
|
||||
setSaveStatus({type: 'error', message: 'Failed to load profile'})
|
||||
} finally {
|
||||
setProfileLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const updateProfile = async (field: string, value: string) => {
|
||||
if (!user) return
|
||||
|
||||
setFieldLoading(prev => ({ ...prev, [field]: true }))
|
||||
setIsLoading(true)
|
||||
setSaveStatus({type: null, message: ''})
|
||||
|
||||
@ -120,6 +129,7 @@ export default function ProfilePage() {
|
||||
setSaveStatus({type: 'error', message: (error instanceof Error ? error.message : 'Unknown error') || `Failed to update ${field}`})
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
setFieldLoading(prev => ({ ...prev, [field]: false }))
|
||||
}
|
||||
}
|
||||
|
||||
@ -134,6 +144,7 @@ export default function ProfilePage() {
|
||||
return
|
||||
}
|
||||
|
||||
setFieldLoading(prev => ({ ...prev, password: true }))
|
||||
setIsLoading(true)
|
||||
setSaveStatus({type: null, message: ''})
|
||||
|
||||
@ -157,6 +168,7 @@ export default function ProfilePage() {
|
||||
setSaveStatus({type: 'error', message: (error instanceof Error ? error.message : 'Unknown error') || 'Failed to update password'})
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
setFieldLoading(prev => ({ ...prev, password: false }))
|
||||
}
|
||||
}
|
||||
|
||||
@ -164,6 +176,7 @@ export default function ProfilePage() {
|
||||
const file = event.target.files?.[0]
|
||||
if (!file || !user) return
|
||||
|
||||
setAvatarUploading(true)
|
||||
setIsLoading(true)
|
||||
setSaveStatus({type: null, message: ''})
|
||||
|
||||
@ -187,12 +200,14 @@ export default function ProfilePage() {
|
||||
await loadProfile()
|
||||
setSaveStatus({type: 'success', message: 'Avatar updated successfully'})
|
||||
setIsLoading(false)
|
||||
setAvatarUploading(false)
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
|
||||
} catch (error: unknown) {
|
||||
setSaveStatus({type: 'error', message: (error instanceof Error ? error.message : 'Unknown error') || 'Failed to upload avatar'})
|
||||
setIsLoading(false)
|
||||
setAvatarUploading(false)
|
||||
}
|
||||
}
|
||||
|
||||
@ -241,297 +256,372 @@ export default function ProfilePage() {
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* Avatar Section */}
|
||||
<div className="lg:col-span-1">
|
||||
<div className="bg-card p-6 rounded-lg border border-border">
|
||||
<h2 className="text-xl font-semibold text-foreground mb-4">Profile Picture</h2>
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="relative">
|
||||
<Avatar
|
||||
src={profile?.avatar_url}
|
||||
alt="Profile Avatar"
|
||||
size={96}
|
||||
className="w-24 h-24"
|
||||
/>
|
||||
<label className="absolute -bottom-2 -right-2 bg-primary text-primary-foreground p-2 rounded-full cursor-pointer hover:bg-primary/90">
|
||||
<Camera className="w-4 h-4" />
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
className="hidden"
|
||||
onChange={uploadAvatar}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</label>
|
||||
{profileLoading ? (
|
||||
<AvatarSkeleton />
|
||||
) : (
|
||||
<LoadingOverlay isLoading={avatarUploading}>
|
||||
<div className="bg-card p-6 rounded-lg border border-border">
|
||||
<h2 className="text-xl font-semibold text-foreground mb-4">Profile Picture</h2>
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="relative">
|
||||
<Avatar
|
||||
src={profile?.avatar_url}
|
||||
alt="Profile Avatar"
|
||||
size={96}
|
||||
className="w-24 h-24"
|
||||
/>
|
||||
<label className={`absolute -bottom-2 -right-2 bg-primary text-primary-foreground p-2 rounded-full cursor-pointer hover:bg-primary/90 ${avatarUploading ? 'pointer-events-none opacity-50' : ''}`}>
|
||||
{avatarUploading ? (
|
||||
<LoadingSpinner size="sm" className="text-primary-foreground" />
|
||||
) : (
|
||||
<Camera className="w-4 h-4" />
|
||||
)}
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
className="hidden"
|
||||
onChange={uploadAvatar}
|
||||
disabled={isLoading || avatarUploading}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground mt-2 text-center">
|
||||
{avatarUploading ? 'Uploading...' : 'Click the camera icon to upload a new picture'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground mt-2 text-center">
|
||||
Click the camera icon to upload a new picture
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</LoadingOverlay>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Profile Information */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
{/* Username */}
|
||||
<div className="bg-card p-6 rounded-lg border border-border">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold text-foreground">Username</h3>
|
||||
{!isEditing.username && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setIsEditing(prev => ({ ...prev, username: true }))}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isEditing.username ? (
|
||||
<div className="space-y-4">
|
||||
<Input
|
||||
value={formData.username}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, username: e.target.value }))}
|
||||
placeholder="Enter username"
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => updateProfile('username', formData.username)}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<Save className="w-4 h-4 mr-2" />
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setIsEditing(prev => ({ ...prev, username: false }))
|
||||
setFormData(prev => ({ ...prev, username: profile?.username || '' }))
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
{profileLoading ? (
|
||||
<FormFieldSkeleton />
|
||||
) : (
|
||||
<LoadingOverlay isLoading={fieldLoading.username}>
|
||||
<div className="bg-card p-6 rounded-lg border border-border">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold text-foreground">Username</h3>
|
||||
{!isEditing.username && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setIsEditing(prev => ({ ...prev, username: true }))}
|
||||
disabled={isLoading || avatarUploading}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isEditing.username ? (
|
||||
<div className="space-y-4">
|
||||
<Input
|
||||
value={formData.username}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, username: e.target.value }))}
|
||||
placeholder="Enter username"
|
||||
disabled={fieldLoading.username}
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => updateProfile('username', formData.username)}
|
||||
disabled={isLoading || fieldLoading.username}
|
||||
>
|
||||
{fieldLoading.username ? (
|
||||
<LoadingSpinner size="sm" className="mr-2" />
|
||||
) : (
|
||||
<Save className="w-4 h-4 mr-2" />
|
||||
)}
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setIsEditing(prev => ({ ...prev, username: false }))
|
||||
setFormData(prev => ({ ...prev, username: profile?.username || '' }))
|
||||
}}
|
||||
disabled={fieldLoading.username}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-foreground">{profile?.username || 'No username set'}</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-foreground">{profile?.username || 'No username set'}</p>
|
||||
)}
|
||||
</div>
|
||||
</LoadingOverlay>
|
||||
)}
|
||||
|
||||
{/* Email */}
|
||||
<div className="bg-card p-6 rounded-lg border border-border">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold text-foreground">Email</h3>
|
||||
{!isEditing.email && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setIsEditing(prev => ({ ...prev, email: true }))}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isEditing.email ? (
|
||||
<div className="space-y-4">
|
||||
<Input
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, email: e.target.value }))}
|
||||
placeholder="Enter email"
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => updateProfile('email', formData.email)}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<Save className="w-4 h-4 mr-2" />
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setIsEditing(prev => ({ ...prev, email: false }))
|
||||
setFormData(prev => ({ ...prev, email: profile?.email || '' }))
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
{profileLoading ? (
|
||||
<FormFieldSkeleton />
|
||||
) : (
|
||||
<LoadingOverlay isLoading={fieldLoading.email}>
|
||||
<div className="bg-card p-6 rounded-lg border border-border">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold text-foreground">Email</h3>
|
||||
{!isEditing.email && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setIsEditing(prev => ({ ...prev, email: true }))}
|
||||
disabled={isLoading || avatarUploading}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isEditing.email ? (
|
||||
<div className="space-y-4">
|
||||
<Input
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, email: e.target.value }))}
|
||||
placeholder="Enter email"
|
||||
disabled={fieldLoading.email}
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => updateProfile('email', formData.email)}
|
||||
disabled={isLoading || fieldLoading.email}
|
||||
>
|
||||
{fieldLoading.email ? (
|
||||
<LoadingSpinner size="sm" className="mr-2" />
|
||||
) : (
|
||||
<Save className="w-4 h-4 mr-2" />
|
||||
)}
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setIsEditing(prev => ({ ...prev, email: false }))
|
||||
setFormData(prev => ({ ...prev, email: profile?.email || '' }))
|
||||
}}
|
||||
disabled={fieldLoading.email}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-foreground">{profile?.email}</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-foreground">{profile?.email}</p>
|
||||
)}
|
||||
</div>
|
||||
</LoadingOverlay>
|
||||
)}
|
||||
|
||||
{/* Bio */}
|
||||
<div className="bg-card p-6 rounded-lg border border-border">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold text-foreground">Bio</h3>
|
||||
{!isEditing.bio && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setIsEditing(prev => ({ ...prev, bio: true }))}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isEditing.bio ? (
|
||||
<div className="space-y-4">
|
||||
<Textarea
|
||||
value={formData.bio}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, bio: e.target.value }))}
|
||||
placeholder="Tell us about yourself"
|
||||
className="min-h-[100px]"
|
||||
maxLength={500}
|
||||
/>
|
||||
<div className="text-sm text-muted-foreground text-right">
|
||||
{formData.bio.length}/500 characters
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => updateProfile('bio', formData.bio)}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<Save className="w-4 h-4 mr-2" />
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setIsEditing(prev => ({ ...prev, bio: false }))
|
||||
setFormData(prev => ({ ...prev, bio: profile?.bio || '' }))
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
{profileLoading ? (
|
||||
<TextAreaSkeleton />
|
||||
) : (
|
||||
<LoadingOverlay isLoading={fieldLoading.bio}>
|
||||
<div className="bg-card p-6 rounded-lg border border-border">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold text-foreground">Bio</h3>
|
||||
{!isEditing.bio && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setIsEditing(prev => ({ ...prev, bio: true }))}
|
||||
disabled={isLoading || avatarUploading}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isEditing.bio ? (
|
||||
<div className="space-y-4">
|
||||
<Textarea
|
||||
value={formData.bio}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, bio: e.target.value }))}
|
||||
placeholder="Tell us about yourself"
|
||||
className="min-h-[100px]"
|
||||
maxLength={500}
|
||||
disabled={fieldLoading.bio}
|
||||
/>
|
||||
<div className="text-sm text-muted-foreground text-right">
|
||||
{formData.bio.length}/500 characters
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => updateProfile('bio', formData.bio)}
|
||||
disabled={isLoading || fieldLoading.bio}
|
||||
>
|
||||
{fieldLoading.bio ? (
|
||||
<LoadingSpinner size="sm" className="mr-2" />
|
||||
) : (
|
||||
<Save className="w-4 h-4 mr-2" />
|
||||
)}
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setIsEditing(prev => ({ ...prev, bio: false }))
|
||||
setFormData(prev => ({ ...prev, bio: profile?.bio || '' }))
|
||||
}}
|
||||
disabled={fieldLoading.bio}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-foreground">{profile?.bio || 'No bio added yet'}</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-foreground">{profile?.bio || 'No bio added yet'}</p>
|
||||
)}
|
||||
</div>
|
||||
</LoadingOverlay>
|
||||
)}
|
||||
|
||||
{/* Language */}
|
||||
<div className="bg-card p-6 rounded-lg border border-border">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold text-foreground">Language</h3>
|
||||
<Globe className="w-5 h-5 text-muted-foreground" />
|
||||
</div>
|
||||
|
||||
<select
|
||||
value={formData.language}
|
||||
onChange={(e) => {
|
||||
const newLanguage = e.target.value as 'en' | 'zh'
|
||||
setFormData(prev => ({ ...prev, language: newLanguage }))
|
||||
updateProfile('language', newLanguage)
|
||||
}}
|
||||
className="w-full px-3 py-2 border border-border rounded-md bg-input text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
disabled={isLoading}
|
||||
>
|
||||
<option value="en">English</option>
|
||||
<option value="zh">中文</option>
|
||||
</select>
|
||||
</div>
|
||||
{profileLoading ? (
|
||||
<FormFieldSkeleton />
|
||||
) : (
|
||||
<LoadingOverlay isLoading={fieldLoading.language}>
|
||||
<div className="bg-card p-6 rounded-lg border border-border">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold text-foreground">Language</h3>
|
||||
{fieldLoading.language ? (
|
||||
<LoadingSpinner size="sm" />
|
||||
) : (
|
||||
<Globe className="w-5 h-5 text-muted-foreground" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<select
|
||||
value={formData.language}
|
||||
onChange={(e) => {
|
||||
const newLanguage = e.target.value as 'en' | 'zh'
|
||||
setFormData(prev => ({ ...prev, language: newLanguage }))
|
||||
updateProfile('language', newLanguage)
|
||||
}}
|
||||
className="w-full px-3 py-2 border border-border rounded-md bg-input text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
disabled={isLoading || fieldLoading.language || avatarUploading}
|
||||
>
|
||||
<option value="en">English</option>
|
||||
<option value="zh">中文</option>
|
||||
</select>
|
||||
</div>
|
||||
</LoadingOverlay>
|
||||
)}
|
||||
|
||||
{/* Password */}
|
||||
<div className="bg-card p-6 rounded-lg border border-border">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold text-foreground">Password</h3>
|
||||
{!isEditing.password && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setIsEditing(prev => ({ ...prev, password: true }))}
|
||||
>
|
||||
Change Password
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isEditing.password ? (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="newPassword">New Password</Label>
|
||||
<div className="relative mt-1">
|
||||
<Input
|
||||
id="newPassword"
|
||||
type={showPasswords.new ? 'text' : 'password'}
|
||||
value={formData.newPassword}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, newPassword: e.target.value }))}
|
||||
placeholder="Enter new password"
|
||||
className="pr-10"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPasswords(prev => ({ ...prev, new: !prev.new }))}
|
||||
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
||||
{profileLoading ? (
|
||||
<FormFieldSkeleton />
|
||||
) : (
|
||||
<LoadingOverlay isLoading={fieldLoading.password}>
|
||||
<div className="bg-card p-6 rounded-lg border border-border">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold text-foreground">Password</h3>
|
||||
{!isEditing.password && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setIsEditing(prev => ({ ...prev, password: true }))}
|
||||
disabled={isLoading || avatarUploading}
|
||||
>
|
||||
{showPasswords.new ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||||
</button>
|
||||
</div>
|
||||
Change Password
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="confirmPassword">Confirm New Password</Label>
|
||||
<div className="relative mt-1">
|
||||
<Input
|
||||
id="confirmPassword"
|
||||
type={showPasswords.confirm ? 'text' : 'password'}
|
||||
value={formData.confirmPassword}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, confirmPassword: e.target.value }))}
|
||||
placeholder="Confirm new password"
|
||||
className="pr-10"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPasswords(prev => ({ ...prev, confirm: !prev.confirm }))}
|
||||
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
{showPasswords.confirm ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||||
</button>
|
||||
{isEditing.password ? (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="newPassword">New Password</Label>
|
||||
<div className="relative mt-1">
|
||||
<Input
|
||||
id="newPassword"
|
||||
type={showPasswords.new ? 'text' : 'password'}
|
||||
value={formData.newPassword}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, newPassword: e.target.value }))}
|
||||
placeholder="Enter new password"
|
||||
className="pr-10"
|
||||
disabled={fieldLoading.password}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPasswords(prev => ({ ...prev, new: !prev.new }))}
|
||||
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
||||
disabled={fieldLoading.password}
|
||||
>
|
||||
{showPasswords.new ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="confirmPassword">Confirm New Password</Label>
|
||||
<div className="relative mt-1">
|
||||
<Input
|
||||
id="confirmPassword"
|
||||
type={showPasswords.confirm ? 'text' : 'password'}
|
||||
value={formData.confirmPassword}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, confirmPassword: e.target.value }))}
|
||||
placeholder="Confirm new password"
|
||||
className="pr-10"
|
||||
disabled={fieldLoading.password}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPasswords(prev => ({ ...prev, confirm: !prev.confirm }))}
|
||||
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
||||
disabled={fieldLoading.password}
|
||||
>
|
||||
{showPasswords.confirm ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={updatePassword}
|
||||
disabled={isLoading || fieldLoading.password}
|
||||
>
|
||||
{fieldLoading.password ? (
|
||||
<LoadingSpinner size="sm" className="mr-2" />
|
||||
) : (
|
||||
<Save className="w-4 h-4 mr-2" />
|
||||
)}
|
||||
Update Password
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setIsEditing(prev => ({ ...prev, password: false }))
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
currentPassword: '',
|
||||
newPassword: '',
|
||||
confirmPassword: ''
|
||||
}))
|
||||
}}
|
||||
disabled={fieldLoading.password}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={updatePassword}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<Save className="w-4 h-4 mr-2" />
|
||||
Update Password
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setIsEditing(prev => ({ ...prev, password: false }))
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
currentPassword: '',
|
||||
newPassword: '',
|
||||
confirmPassword: ''
|
||||
}))
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-muted-foreground">••••••••</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-muted-foreground">••••••••</p>
|
||||
)}
|
||||
</div>
|
||||
</LoadingOverlay>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
47
src/components/ui/loading-spinner.tsx
Normal file
47
src/components/ui/loading-spinner.tsx
Normal file
@ -0,0 +1,47 @@
|
||||
import { cn } from '@/lib/utils'
|
||||
import { Loader2 } from 'lucide-react'
|
||||
|
||||
interface LoadingSpinnerProps {
|
||||
size?: 'sm' | 'md' | 'lg'
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function LoadingSpinner({ size = 'md', className }: LoadingSpinnerProps) {
|
||||
const sizeClasses = {
|
||||
sm: 'h-4 w-4',
|
||||
md: 'h-6 w-6',
|
||||
lg: 'h-8 w-8'
|
||||
}
|
||||
|
||||
return (
|
||||
<Loader2
|
||||
className={cn(
|
||||
'animate-spin text-muted-foreground',
|
||||
sizeClasses[size],
|
||||
className
|
||||
)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
interface LoadingOverlayProps {
|
||||
isLoading: boolean
|
||||
children: React.ReactNode
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function LoadingOverlay({ isLoading, children, className }: LoadingOverlayProps) {
|
||||
return (
|
||||
<div className={cn("relative", className)}>
|
||||
{children}
|
||||
{isLoading && (
|
||||
<div className="absolute inset-0 bg-background/80 backdrop-blur-sm flex items-center justify-center rounded-lg">
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<LoadingSpinner size="sm" />
|
||||
<span>Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
70
src/components/ui/skeleton.tsx
Normal file
70
src/components/ui/skeleton.tsx
Normal file
@ -0,0 +1,70 @@
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface SkeletonProps {
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function Skeleton({ className }: SkeletonProps) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"animate-pulse rounded-md bg-muted",
|
||||
className
|
||||
)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
// Specific skeleton components for different profile sections
|
||||
export function ProfileCardSkeleton() {
|
||||
return (
|
||||
<div className="bg-card p-6 rounded-lg border border-border">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<Skeleton className="h-6 w-24" />
|
||||
<Skeleton className="h-8 w-12" />
|
||||
</div>
|
||||
<Skeleton className="h-4 w-full" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function AvatarSkeleton() {
|
||||
return (
|
||||
<div className="bg-card p-6 rounded-lg border border-border">
|
||||
<Skeleton className="h-6 w-32 mb-4" />
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="relative">
|
||||
<Skeleton className="w-24 h-24 rounded-full" />
|
||||
<div className="absolute -bottom-2 -right-2 w-10 h-10 rounded-full bg-primary/20">
|
||||
<Skeleton className="w-full h-full rounded-full" />
|
||||
</div>
|
||||
</div>
|
||||
<Skeleton className="h-3 w-48 mt-2" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function FormFieldSkeleton() {
|
||||
return (
|
||||
<div className="bg-card p-6 rounded-lg border border-border">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<Skeleton className="h-6 w-20" />
|
||||
<Skeleton className="h-8 w-12" />
|
||||
</div>
|
||||
<Skeleton className="h-10 w-full" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function TextAreaSkeleton() {
|
||||
return (
|
||||
<div className="bg-card p-6 rounded-lg border border-border">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<Skeleton className="h-6 w-16" />
|
||||
<Skeleton className="h-8 w-12" />
|
||||
</div>
|
||||
<Skeleton className="h-24 w-full" />
|
||||
</div>
|
||||
)
|
||||
}
|
Loading…
Reference in New Issue
Block a user