first commit
This commit is contained in:
gotolombok
154
app/profile/account/page.tsx
Normal file
154
app/profile/account/page.tsx
Normal file
@@ -0,0 +1,154 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { createClient } from '@/lib/supabase/client';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { ArrowLeft, Loader2, CheckCircle, AlertCircle } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||||
|
||||
export default function AccountSettingsPage() {
|
||||
const [user, setUser] = useState<any>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [fullName, setFullName] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [message, setMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null);
|
||||
const router = useRouter();
|
||||
const supabase = createClient();
|
||||
|
||||
useEffect(() => {
|
||||
const getUser = async () => {
|
||||
const { data: { user } } = await supabase.auth.getUser();
|
||||
if (!user) {
|
||||
router.push('/login');
|
||||
} else {
|
||||
setUser(user);
|
||||
setFullName(user.user_metadata?.full_name || '');
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
getUser();
|
||||
}, [router, supabase]);
|
||||
|
||||
const handleUpdateProfile = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setSaving(true);
|
||||
setMessage(null);
|
||||
|
||||
try {
|
||||
const updates: any = {
|
||||
data: { full_name: fullName }
|
||||
};
|
||||
|
||||
if (password) {
|
||||
updates.password = password;
|
||||
}
|
||||
|
||||
const { error } = await supabase.auth.updateUser(updates);
|
||||
|
||||
if (error) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
setMessage({ type: 'success', text: 'Profile updated successfully' });
|
||||
if (password) setPassword(''); // Clear password field on success
|
||||
} catch (error: any) {
|
||||
setMessage({ type: 'error', text: error.message });
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div className="min-h-screen bg-[#050B14] flex items-center justify-center text-white">Loading...</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#050B14] text-white pt-24 pb-12 font-sans">
|
||||
<div className="max-w-2xl mx-auto px-4">
|
||||
<Link href="/profile" className="inline-flex items-center text-gray-400 hover:text-white mb-6 transition">
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Back to Profile
|
||||
</Link>
|
||||
|
||||
<Card className="bg-[#1f1f1f] border-gray-800 text-white">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl font-bold">Account Settings</CardTitle>
|
||||
<CardDescription className="text-gray-400">
|
||||
Update your personal information and security.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleUpdateProfile} className="space-y-6">
|
||||
|
||||
{/* Email (Read Only) */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email" className="text-gray-300">Email Address</Label>
|
||||
<Input
|
||||
id="email"
|
||||
value={user?.email || ''}
|
||||
disabled
|
||||
className="bg-[#141414] border-gray-700 text-gray-500 cursor-not-allowed"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Full Name */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="fullName" className="text-gray-300">Display Name</Label>
|
||||
<Input
|
||||
id="fullName"
|
||||
value={fullName}
|
||||
onChange={(e) => setFullName(e.target.value)}
|
||||
className="bg-[#141414] border-gray-700 text-white focus:border-red-600 focus:ring-red-600"
|
||||
placeholder="Enter your name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Password */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password" className="text-gray-300">New Password</Label>
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="bg-[#141414] border-gray-700 text-white focus:border-red-600 focus:ring-red-600"
|
||||
placeholder="Leave blank to keep current password"
|
||||
/>
|
||||
<p className="text-xs text-gray-500">Only enter a new password if you want to change it.</p>
|
||||
</div>
|
||||
|
||||
{/* Status Message */}
|
||||
{message && (
|
||||
<div className={`p-3 rounded flex items-center gap-2 ${message.type === 'success' ? 'bg-green-900/20 text-green-400 border border-green-900' : 'bg-red-900/20 text-red-400 border border-red-900'}`}>
|
||||
{message.type === 'success' ? <CheckCircle className="w-5 h-5" /> : <AlertCircle className="w-5 h-5" />}
|
||||
<span>{message.text}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Submit Button */}
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={saving}
|
||||
className="w-full bg-red-600 hover:bg-red-700 text-white font-bold"
|
||||
>
|
||||
{saving ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||
Saving...
|
||||
</>
|
||||
) : (
|
||||
'Save Changes'
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
73
app/profile/bookmarks/page.tsx
Normal file
73
app/profile/bookmarks/page.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
import { createClient } from "@/lib/supabase/server";
|
||||
import { redirect } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { ChevronLeft } from "lucide-react";
|
||||
|
||||
export default async function BookmarksPage() {
|
||||
const supabase = await createClient();
|
||||
|
||||
const { data: { user } } = await supabase.auth.getUser();
|
||||
|
||||
if (!user) {
|
||||
redirect("/login");
|
||||
}
|
||||
|
||||
const { data: bookmarks, error } = await supabase
|
||||
.from("bookmarks")
|
||||
.select("*")
|
||||
.eq("user_id", user.id)
|
||||
.order("created_at", { ascending: false });
|
||||
|
||||
if (error) {
|
||||
console.error("Error fetching bookmarks:", error);
|
||||
return <div className="min-h-screen pt-24 text-white text-center">Error loading bookmarks</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#050B14] text-white pt-24 pb-12 px-4 md:px-16">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="flex items-center gap-4 mb-8">
|
||||
<Link href="/profile" className="p-2 bg-gray-800 rounded-full hover:bg-gray-700 transition">
|
||||
<ChevronLeft className="w-6 h-6 text-white" />
|
||||
</Link>
|
||||
<h1 className="text-3xl font-bold">My Bookmarks</h1>
|
||||
</div>
|
||||
|
||||
{bookmarks.length === 0 ? (
|
||||
<div className="text-center text-gray-400 py-20">
|
||||
<p className="text-xl">No bookmarks yet.</p>
|
||||
<Link href="/" className="text-red-500 hover:underline mt-4 inline-block">Explore movies</Link>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6">
|
||||
{bookmarks.map((item) => (
|
||||
<Link
|
||||
key={item.id}
|
||||
href={item.type === 'movie' ? `/movie/${item.subject_id}` : `/dracin/${item.subject_id}`}
|
||||
className="group relative aspect-[2/3] rounded-lg overflow-hidden border border-gray-800 bg-gray-900 transition hover:scale-105"
|
||||
>
|
||||
{item.poster ? (
|
||||
<Image
|
||||
src={item.poster}
|
||||
alt={item.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
unoptimized
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center bg-gray-800 text-gray-500">
|
||||
No Image
|
||||
</div>
|
||||
)}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-4">
|
||||
<span className="text-white font-medium text-sm line-clamp-2">{item.title}</span>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
112
app/profile/page.tsx
Normal file
112
app/profile/page.tsx
Normal file
@@ -0,0 +1,112 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { createClient } from '@/lib/supabase/client';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { User, Bookmark, History, FileText, ChevronRight, Crown, Shield } from 'lucide-react';
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
||||
|
||||
export default function ProfilePage() {
|
||||
const [user, setUser] = useState<any>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const router = useRouter();
|
||||
const [supabase] = useState(() => createClient());
|
||||
|
||||
useEffect(() => {
|
||||
const getUser = async () => {
|
||||
const { data: { user } } = await supabase.auth.getUser();
|
||||
if (!user) {
|
||||
router.push('/login');
|
||||
} else {
|
||||
setUser(user);
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
getUser();
|
||||
}, [router, supabase]);
|
||||
|
||||
const handleSignOut = async () => {
|
||||
await supabase.auth.signOut();
|
||||
router.push('/login');
|
||||
router.refresh();
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div className="min-h-screen bg-[#050B14] flex items-center justify-center text-white">Loading...</div>;
|
||||
}
|
||||
|
||||
if (!user) return null;
|
||||
|
||||
const menuItems = [
|
||||
{ icon: User, label: "Account settings", href: "/profile/account" },
|
||||
{ icon: Bookmark, label: "Bookmark", href: "/profile/bookmarks" },
|
||||
{ icon: History, label: "History", href: "/history" },
|
||||
{ icon: Shield, label: "Contact support", href: "#" },
|
||||
{ icon: FileText, label: "Terms & condition", href: "#" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#050B14] text-white pt-24 pb-24 relative overflow-hidden font-sans">
|
||||
{/* Background Effect */}
|
||||
<div className="absolute top-0 left-0 w-full h-[50vh] bg-gradient-to-b from-red-900/20 to-[#050B14] pointer-events-none" />
|
||||
|
||||
<div className="max-w-md mx-auto px-6 relative z-10 flex flex-col items-center">
|
||||
|
||||
{/* Profile Header */}
|
||||
<div className="flex flex-col items-center mb-10">
|
||||
<div className="relative mb-4">
|
||||
<Avatar className="w-24 h-24 border-2 border-gray-700">
|
||||
<AvatarImage src={user.user_metadata?.avatar_url || "https://github.com/shadcn.png"} />
|
||||
<AvatarFallback className="bg-red-600 text-2xl font-bold">
|
||||
{user.email?.charAt(0).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
{/* Edit Icon Badge (Optional) */}
|
||||
{/* <div className="absolute bottom-0 right-0 bg-gray-800 p-1 rounded-full border border-black">
|
||||
<Camera className="w-4 h-4 text-gray-400" />
|
||||
</div> */}
|
||||
</div>
|
||||
|
||||
<h1 className="text-2xl font-bold mb-1">{user.user_metadata?.full_name || "Cineprime User"}</h1>
|
||||
<p className="text-gray-400 text-sm">{user.email}</p>
|
||||
</div>
|
||||
|
||||
{/* Menu List */}
|
||||
<div className="w-full space-y-2 mb-8">
|
||||
{menuItems.map((item, index) => (
|
||||
<Link key={index} href={item.href} className="flex items-center justify-between py-4 cursor-pointer hover:bg-white/5 rounded-lg px-2 transition">
|
||||
<div className="flex items-center gap-4">
|
||||
<item.icon className="w-6 h-6 text-red-500" />
|
||||
<span className="text-base font-medium text-gray-200">{item.label}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<ChevronRight className="w-5 h-5 text-gray-500" />
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Premium Button */}
|
||||
<Button
|
||||
className="w-full h-14 bg-gradient-to-r from-red-600 to-red-900 hover:from-red-700 hover:to-red-950 text-white text-lg font-bold rounded-xl shadow-lg shadow-red-900/40 flex items-center justify-center gap-2 mb-6"
|
||||
>
|
||||
<Crown className="w-6 h-6 fill-white" />
|
||||
Join premium
|
||||
</Button>
|
||||
|
||||
{/* Sign Out (Custom) */}
|
||||
<button
|
||||
onClick={handleSignOut}
|
||||
className="text-gray-500 font-medium text-sm hover:text-white hover:underline transition"
|
||||
>
|
||||
Sign Out
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user