mirror of
https://gitbruv.vercel.app/api/git/bruv/gitbruv.git
synced 2025-12-20 23:24:09 +01:00
wip
This commit is contained in:
Ahmet Kilinc
parent
a63628e659
commit
dffc97239e
17 changed files with 1220 additions and 24 deletions
239
actions/settings.ts
Normal file
239
actions/settings.ts
Normal file
|
|
@ -0,0 +1,239 @@
|
|||
"use server";
|
||||
|
||||
import { db } from "@/db";
|
||||
import { users, accounts, repositories } from "@/db/schema";
|
||||
import { getSession } from "@/lib/session";
|
||||
import { eq, and } from "drizzle-orm";
|
||||
import { revalidatePath } from "next/cache";
|
||||
import { auth } from "@/lib/auth";
|
||||
import { r2Put, r2Delete } from "@/lib/r2";
|
||||
|
||||
export async function updateProfile(data: {
|
||||
name: string;
|
||||
username: string;
|
||||
bio?: string;
|
||||
location?: string;
|
||||
website?: string;
|
||||
pronouns?: string;
|
||||
}) {
|
||||
const session = await getSession();
|
||||
if (!session?.user) {
|
||||
throw new Error("Unauthorized");
|
||||
}
|
||||
|
||||
const normalizedUsername = data.username.toLowerCase().replace(/\s+/g, "-");
|
||||
|
||||
if (!/^[a-zA-Z0-9_-]+$/.test(normalizedUsername)) {
|
||||
throw new Error("Username can only contain letters, numbers, underscores, and hyphens");
|
||||
}
|
||||
|
||||
if (normalizedUsername.length < 3) {
|
||||
throw new Error("Username must be at least 3 characters");
|
||||
}
|
||||
|
||||
const existingUser = await db.query.users.findFirst({
|
||||
where: and(
|
||||
eq(users.username, normalizedUsername),
|
||||
),
|
||||
});
|
||||
|
||||
if (existingUser && existingUser.id !== session.user.id) {
|
||||
throw new Error("Username is already taken");
|
||||
}
|
||||
|
||||
await db
|
||||
.update(users)
|
||||
.set({
|
||||
name: data.name,
|
||||
username: normalizedUsername,
|
||||
bio: data.bio || null,
|
||||
location: data.location || null,
|
||||
website: data.website || null,
|
||||
pronouns: data.pronouns || null,
|
||||
updatedAt: new Date(),
|
||||
})
|
||||
.where(eq(users.id, session.user.id));
|
||||
|
||||
revalidatePath("/settings");
|
||||
revalidatePath(`/${normalizedUsername}`);
|
||||
|
||||
return { success: true, username: normalizedUsername };
|
||||
}
|
||||
|
||||
export async function updateSocialLinks(data: {
|
||||
github?: string;
|
||||
twitter?: string;
|
||||
linkedin?: string;
|
||||
custom?: string[];
|
||||
}) {
|
||||
const session = await getSession();
|
||||
if (!session?.user) {
|
||||
throw new Error("Unauthorized");
|
||||
}
|
||||
|
||||
const socialLinks = {
|
||||
github: data.github || undefined,
|
||||
twitter: data.twitter || undefined,
|
||||
linkedin: data.linkedin || undefined,
|
||||
custom: data.custom?.filter(Boolean) || undefined,
|
||||
};
|
||||
|
||||
await db
|
||||
.update(users)
|
||||
.set({
|
||||
socialLinks,
|
||||
updatedAt: new Date(),
|
||||
})
|
||||
.where(eq(users.id, session.user.id));
|
||||
|
||||
revalidatePath("/settings");
|
||||
|
||||
return { success: true };
|
||||
}
|
||||
|
||||
export async function updateAvatar(formData: FormData) {
|
||||
const session = await getSession();
|
||||
if (!session?.user) {
|
||||
throw new Error("Unauthorized");
|
||||
}
|
||||
|
||||
const file = formData.get("avatar") as File;
|
||||
if (!file || file.size === 0) {
|
||||
throw new Error("No file provided");
|
||||
}
|
||||
|
||||
if (!file.type.startsWith("image/")) {
|
||||
throw new Error("File must be an image");
|
||||
}
|
||||
|
||||
if (file.size > 5 * 1024 * 1024) {
|
||||
throw new Error("File size must be less than 5MB");
|
||||
}
|
||||
|
||||
const ext = file.name.split(".").pop() || "png";
|
||||
const key = `avatars/${session.user.id}.${ext}`;
|
||||
|
||||
const buffer = Buffer.from(await file.arrayBuffer());
|
||||
await r2Put(key, buffer);
|
||||
|
||||
const avatarUrl = `/api/avatar/${session.user.id}.${ext}`;
|
||||
|
||||
await db
|
||||
.update(users)
|
||||
.set({
|
||||
image: avatarUrl,
|
||||
avatarUrl,
|
||||
updatedAt: new Date(),
|
||||
})
|
||||
.where(eq(users.id, session.user.id));
|
||||
|
||||
revalidatePath("/settings");
|
||||
revalidatePath("/");
|
||||
|
||||
return { success: true, avatarUrl };
|
||||
}
|
||||
|
||||
export async function updateEmail(data: { email: string }) {
|
||||
const session = await getSession();
|
||||
if (!session?.user) {
|
||||
throw new Error("Unauthorized");
|
||||
}
|
||||
|
||||
const existingUser = await db.query.users.findFirst({
|
||||
where: eq(users.email, data.email),
|
||||
});
|
||||
|
||||
if (existingUser && existingUser.id !== session.user.id) {
|
||||
throw new Error("Email is already in use");
|
||||
}
|
||||
|
||||
await db
|
||||
.update(users)
|
||||
.set({
|
||||
email: data.email,
|
||||
updatedAt: new Date(),
|
||||
})
|
||||
.where(eq(users.id, session.user.id));
|
||||
|
||||
revalidatePath("/settings/account");
|
||||
|
||||
return { success: true };
|
||||
}
|
||||
|
||||
export async function updatePassword(data: {
|
||||
currentPassword: string;
|
||||
newPassword: string;
|
||||
}) {
|
||||
const session = await getSession();
|
||||
if (!session?.user) {
|
||||
throw new Error("Unauthorized");
|
||||
}
|
||||
|
||||
const user = await db.query.users.findFirst({
|
||||
where: eq(users.id, session.user.id),
|
||||
});
|
||||
|
||||
if (!user) {
|
||||
throw new Error("User not found");
|
||||
}
|
||||
|
||||
try {
|
||||
await auth.api.signInEmail({
|
||||
body: { email: user.email, password: data.currentPassword },
|
||||
});
|
||||
} catch {
|
||||
throw new Error("Current password is incorrect");
|
||||
}
|
||||
|
||||
await auth.api.changePassword({
|
||||
body: {
|
||||
currentPassword: data.currentPassword,
|
||||
newPassword: data.newPassword,
|
||||
},
|
||||
headers: {
|
||||
cookie: `better-auth.session_token=${session.session.token}`,
|
||||
},
|
||||
});
|
||||
|
||||
return { success: true };
|
||||
}
|
||||
|
||||
export async function deleteAccount() {
|
||||
const session = await getSession();
|
||||
if (!session?.user) {
|
||||
throw new Error("Unauthorized");
|
||||
}
|
||||
|
||||
const userRepos = await db.query.repositories.findMany({
|
||||
where: eq(repositories.ownerId, session.user.id),
|
||||
});
|
||||
|
||||
const { r2DeletePrefix } = await import("@/lib/r2");
|
||||
for (const repo of userRepos) {
|
||||
try {
|
||||
await r2DeletePrefix(`repos/${session.user.id}/${repo.name}.git`);
|
||||
} catch {}
|
||||
}
|
||||
|
||||
try {
|
||||
await r2Delete(`avatars/${session.user.id}`);
|
||||
} catch {}
|
||||
|
||||
await db.delete(users).where(eq(users.id, session.user.id));
|
||||
|
||||
return { success: true };
|
||||
}
|
||||
|
||||
export async function getCurrentUser() {
|
||||
const session = await getSession();
|
||||
if (!session?.user) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const user = await db.query.users.findFirst({
|
||||
where: eq(users.id, session.user.id),
|
||||
});
|
||||
|
||||
return user;
|
||||
}
|
||||
|
||||
|
|
@ -5,14 +5,12 @@ import { eq } from "drizzle-orm";
|
|||
import { getUserRepositories } from "@/actions/repositories";
|
||||
import { RepoList } from "@/components/repo-list";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import { CalendarDays, GitBranch } from "lucide-react";
|
||||
import { CalendarDays, GitBranch, MapPin, Link as LinkIcon } from "lucide-react";
|
||||
import { format } from "date-fns";
|
||||
import Link from "next/link";
|
||||
import { GithubIcon, XIcon, LinkedInIcon } from "@/components/icons";
|
||||
|
||||
export default async function ProfilePage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ username: string }>;
|
||||
}) {
|
||||
export default async function ProfilePage({ params }: { params: Promise<{ username: string }> }) {
|
||||
const { username } = await params;
|
||||
|
||||
const user = await db.query.users.findFirst({
|
||||
|
|
@ -29,20 +27,66 @@ export default async function ProfilePage({
|
|||
<div className="container px-4 py-8">
|
||||
<div className="flex flex-col lg:flex-row gap-8">
|
||||
<aside className="lg:w-72 shrink-0">
|
||||
<div className="sticky top-20">
|
||||
<Avatar className="w-64 h-64 mx-auto lg:mx-0 mb-4 border-4 border-border">
|
||||
<AvatarImage src={user.image || undefined} />
|
||||
<AvatarFallback className="text-6xl bg-accent/20">
|
||||
{user.name.charAt(0).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
<div className="sticky top-20 space-y-4">
|
||||
<Avatar className="w-64 h-64 mx-auto lg:mx-0 border border-border">
|
||||
<AvatarImage src={user.avatarUrl || user.image || undefined} />
|
||||
<AvatarFallback className="text-6xl bg-accent/20">{user.name.charAt(0).toUpperCase()}</AvatarFallback>
|
||||
</Avatar>
|
||||
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">{user.name}</h1>
|
||||
<p className="text-lg text-muted-foreground">@{user.username}</p>
|
||||
<div className="flex items-center gap-2 mt-4 text-sm text-muted-foreground">
|
||||
{user.pronouns && <p className="text-sm text-muted-foreground">{user.pronouns}</p>}
|
||||
</div>
|
||||
|
||||
{user.bio && <p className="text-sm">{user.bio}</p>}
|
||||
|
||||
<div className="space-y-2 text-sm">
|
||||
{user.location && (
|
||||
<div className="flex items-center gap-2 text-muted-foreground">
|
||||
<MapPin className="h-4 w-4" />
|
||||
<span>{user.location}</span>
|
||||
</div>
|
||||
)}
|
||||
{user.website && (
|
||||
<div className="flex items-center gap-2 text-muted-foreground">
|
||||
<LinkIcon className="h-4 w-4" />
|
||||
<Link href={user.website} target="_blank" className="text-primary hover:underline truncate">
|
||||
{user.website.replace(/^https?:\/\//, "")}
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-2 text-muted-foreground">
|
||||
<CalendarDays className="h-4 w-4" />
|
||||
<span>Joined {format(new Date(user.createdAt), "MMMM yyyy")}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{user.socialLinks && (
|
||||
<div className="flex items-center gap-3">
|
||||
{user.socialLinks.github && (
|
||||
<Link href={user.socialLinks.github} target="_blank" className="text-muted-foreground hover:text-foreground transition-colors">
|
||||
<GithubIcon className="h-5 w-5" />
|
||||
</Link>
|
||||
)}
|
||||
{user.socialLinks.twitter && (
|
||||
<Link href={user.socialLinks.twitter} target="_blank" className="text-muted-foreground hover:text-foreground transition-colors">
|
||||
<XIcon className="h-5 w-5" />
|
||||
</Link>
|
||||
)}
|
||||
{user.socialLinks.linkedin && (
|
||||
<Link href={user.socialLinks.linkedin} target="_blank" className="text-muted-foreground hover:text-foreground transition-colors">
|
||||
<LinkedInIcon className="h-5 w-5" />
|
||||
</Link>
|
||||
)}
|
||||
{user.socialLinks.custom?.map((link, i) => (
|
||||
<Link key={i} href={link} target="_blank" className="text-muted-foreground hover:text-foreground transition-colors">
|
||||
<LinkIcon className="h-5 w-5" />
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
|
|
@ -56,9 +100,7 @@ export default async function ProfilePage({
|
|||
<div className="border border-dashed border-border rounded-lg p-12 text-center">
|
||||
<GitBranch className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
|
||||
<h3 className="text-lg font-medium mb-2">No repositories yet</h3>
|
||||
<p className="text-muted-foreground">
|
||||
{user.name} hasn't created any public repositories.
|
||||
</p>
|
||||
<p className="text-muted-foreground">{user.name} hasn't created any public repositories.</p>
|
||||
</div>
|
||||
) : (
|
||||
<RepoList repos={repos} username={username} />
|
||||
|
|
@ -68,4 +110,3 @@ export default async function ProfilePage({
|
|||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
55
app/(main)/settings/account/page.tsx
Normal file
55
app/(main)/settings/account/page.tsx
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
import { redirect } from "next/navigation";
|
||||
import { getCurrentUser } from "@/actions/settings";
|
||||
import { EmailForm } from "@/components/settings/email-form";
|
||||
import { PasswordForm } from "@/components/settings/password-form";
|
||||
import { DeleteAccount } from "@/components/settings/delete-account";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
|
||||
export default async function AccountSettingsPage() {
|
||||
const user = await getCurrentUser();
|
||||
|
||||
if (!user) {
|
||||
redirect("/login");
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Email Address</CardTitle>
|
||||
<CardDescription>
|
||||
Change the email associated with your account
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<EmailForm currentEmail={user.email} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Password</CardTitle>
|
||||
<CardDescription>
|
||||
Update your password to keep your account secure
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<PasswordForm />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-red-500/20">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-red-500">Danger Zone</CardTitle>
|
||||
<CardDescription>
|
||||
Irreversible actions that affect your account
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<DeleteAccount username={user.username} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
28
app/(main)/settings/layout.tsx
Normal file
28
app/(main)/settings/layout.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import { redirect } from "next/navigation";
|
||||
import { getSession } from "@/lib/session";
|
||||
import { SettingsNav } from "@/components/settings/settings-nav";
|
||||
|
||||
export default async function SettingsLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const session = await getSession();
|
||||
|
||||
if (!session?.user) {
|
||||
redirect("/login");
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container max-w-5xl py-8">
|
||||
<h1 className="text-2xl font-semibold mb-8">Settings</h1>
|
||||
<div className="flex gap-8">
|
||||
<aside className="w-48 shrink-0">
|
||||
<SettingsNav />
|
||||
</aside>
|
||||
<main className="flex-1 min-w-0">{children}</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
65
app/(main)/settings/page.tsx
Normal file
65
app/(main)/settings/page.tsx
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
import { redirect } from "next/navigation";
|
||||
import { getCurrentUser } from "@/actions/settings";
|
||||
import { ProfileForm } from "@/components/settings/profile-form";
|
||||
import { AvatarUpload } from "@/components/settings/avatar-upload";
|
||||
import { SocialLinksForm } from "@/components/settings/social-links-form";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
|
||||
export default async function SettingsPage() {
|
||||
const user = await getCurrentUser();
|
||||
|
||||
if (!user) {
|
||||
redirect("/login");
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Profile Picture</CardTitle>
|
||||
<CardDescription>
|
||||
Upload a picture to personalize your profile
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<AvatarUpload currentAvatar={user.avatarUrl} name={user.name} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Profile Information</CardTitle>
|
||||
<CardDescription>
|
||||
Update your profile details visible to other users
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ProfileForm
|
||||
user={{
|
||||
name: user.name,
|
||||
username: user.username,
|
||||
bio: user.bio,
|
||||
location: user.location,
|
||||
website: user.website,
|
||||
pronouns: user.pronouns,
|
||||
}}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Social Links</CardTitle>
|
||||
<CardDescription>
|
||||
Add links to your social profiles
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<SocialLinksForm socialLinks={user.socialLinks} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
35
app/api/avatar/[filename]/route.ts
Normal file
35
app/api/avatar/[filename]/route.ts
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { r2Get } from "@/lib/r2";
|
||||
|
||||
export async function GET(
|
||||
request: NextRequest,
|
||||
{ params }: { params: Promise<{ filename: string }> }
|
||||
) {
|
||||
const { filename } = await params;
|
||||
|
||||
const key = `avatars/${filename}`;
|
||||
const data = await r2Get(key);
|
||||
|
||||
if (!data) {
|
||||
return new NextResponse(null, { status: 404 });
|
||||
}
|
||||
|
||||
const ext = filename.split(".").pop()?.toLowerCase();
|
||||
let contentType = "image/png";
|
||||
|
||||
if (ext === "jpg" || ext === "jpeg") {
|
||||
contentType = "image/jpeg";
|
||||
} else if (ext === "gif") {
|
||||
contentType = "image/gif";
|
||||
} else if (ext === "webp") {
|
||||
contentType = "image/webp";
|
||||
}
|
||||
|
||||
return new NextResponse(data, {
|
||||
headers: {
|
||||
"Content-Type": contentType,
|
||||
"Cache-Control": "public, max-age=31536000, immutable",
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { GitBranch, Plus, LogOut, User, ChevronDown } from "lucide-react";
|
||||
import { GitBranch, Plus, LogOut, User, ChevronDown, Settings } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
|
||||
|
|
@ -70,6 +70,12 @@ export function Header() {
|
|||
Your profile
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href="/settings" className="cursor-pointer gap-2">
|
||||
<Settings className="h-4 w-4" />
|
||||
Settings
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem onClick={handleSignOut} className="cursor-pointer gap-2 text-destructive focus:text-destructive focus:bg-destructive/10">
|
||||
<LogOut className="h-4 w-4" />
|
||||
|
|
|
|||
34
components/icons.tsx
Normal file
34
components/icons.tsx
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import React from "react";
|
||||
|
||||
export function XIcon({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" className={className}>
|
||||
<path
|
||||
className="fill-current"
|
||||
d="M357.2 48L427.8 48 273.6 224.2 455 464 313 464 201.7 318.6 74.5 464 3.8 464 168.7 275.5-5.2 48 140.4 48 240.9 180.9 357.2 48zM332.4 421.8l39.1 0-252.4-333.8-42 0 255.3 333.8z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function GithubIcon({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" className={className}>
|
||||
<path
|
||||
className="fill-current"
|
||||
d="M173.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM252.8 8c-138.7 0-244.8 105.3-244.8 244 0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1 100-33.2 167.8-128.1 167.8-239 0-138.7-112.5-244-251.2-244zM105.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function LinkedInIcon({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" className={className}>
|
||||
<path
|
||||
className="fill-current"
|
||||
d="M416 32L31.9 32C14.3 32 0 46.5 0 64.3L0 447.7C0 465.5 14.3 480 31.9 480L416 480c17.6 0 32-14.5 32-32.3l0-383.4C448 46.5 433.6 32 416 32zM135.4 416l-66.4 0 0-213.8 66.5 0 0 213.8-.1 0zM102.2 96a38.5 38.5 0 1 1 0 77 38.5 38.5 0 1 1 0-77zM384.3 416l-66.4 0 0-104c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9l0 105.8-66.4 0 0-213.8 63.7 0 0 29.2 .9 0c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9l0 117.2z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
81
components/settings/avatar-upload.tsx
Normal file
81
components/settings/avatar-upload.tsx
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
"use client";
|
||||
|
||||
import { useState, useRef } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import { updateAvatar } from "@/actions/settings";
|
||||
import { Camera, Loader2 } from "lucide-react";
|
||||
|
||||
interface AvatarUploadProps {
|
||||
currentAvatar?: string | null;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export function AvatarUpload({ currentAvatar, name }: AvatarUploadProps) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [preview, setPreview] = useState<string | null>(currentAvatar || null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
async function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
if (!file.type.startsWith("image/")) {
|
||||
setError("Please select an image file");
|
||||
return;
|
||||
}
|
||||
|
||||
if (file.size > 5 * 1024 * 1024) {
|
||||
setError("Image must be less than 5MB");
|
||||
return;
|
||||
}
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
setPreview(e.target?.result as string);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append("avatar", file);
|
||||
const result = await updateAvatar(formData);
|
||||
setPreview(result.avatarUrl);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Failed to upload avatar");
|
||||
setPreview(currentAvatar || null);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-start gap-6">
|
||||
<div className="relative">
|
||||
<Avatar className="w-24 h-24">
|
||||
<AvatarImage src={preview || undefined} alt={name} />
|
||||
<AvatarFallback className="text-2xl bg-accent">{name.charAt(0).toUpperCase()}</AvatarFallback>
|
||||
</Avatar>
|
||||
{loading && (
|
||||
<div className="absolute inset-0 bg-background/80 rounded-full flex items-center justify-center">
|
||||
<Loader2 className="w-6 h-6 animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<input ref={fileInputRef} type="file" accept="image/*" onChange={handleFileChange} className="hidden" />
|
||||
<Button type="button" variant="outline" size="sm" onClick={() => fileInputRef.current?.click()} disabled={loading}>
|
||||
<Camera className="w-4 h-4 mr-2" />
|
||||
Change Avatar
|
||||
</Button>
|
||||
<p className="text-xs text-muted-foreground">JPG, PNG or GIF. Max 5MB.</p>
|
||||
{error && <p className="text-xs text-red-500">{error}</p>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
112
components/settings/delete-account.tsx
Normal file
112
components/settings/delete-account.tsx
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { deleteAccount } from "@/actions/settings";
|
||||
import { Loader2, AlertTriangle } from "lucide-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
interface DeleteAccountProps {
|
||||
username: string;
|
||||
}
|
||||
|
||||
export function DeleteAccount({ username }: DeleteAccountProps) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [confirmation, setConfirmation] = useState("");
|
||||
const [showConfirm, setShowConfirm] = useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
async function handleDelete() {
|
||||
if (confirmation !== username) {
|
||||
setError("Please type your username to confirm");
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
await deleteAccount();
|
||||
router.push("/");
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Failed to delete account");
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (!showConfirm) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Once you delete your account, there is no going back. All your repositories and data will be permanently deleted.
|
||||
</p>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={() => setShowConfirm(true)}
|
||||
>
|
||||
Delete Account
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start gap-3 p-4 bg-red-500/10 border border-red-500/20 rounded-md">
|
||||
<AlertTriangle className="w-5 h-5 text-red-500 shrink-0 mt-0.5" />
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm font-medium text-red-500">
|
||||
This action cannot be undone
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
This will permanently delete your account, all repositories, and remove all your data from our servers.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="confirm">
|
||||
Type <span className="font-mono font-semibold">{username}</span> to confirm
|
||||
</Label>
|
||||
<Input
|
||||
id="confirm"
|
||||
value={confirmation}
|
||||
onChange={(e) => setConfirmation(e.target.value)}
|
||||
placeholder="Enter your username"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="text-sm text-red-500 bg-red-500/10 border border-red-500/20 rounded-md px-3 py-2">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setShowConfirm(false);
|
||||
setConfirmation("");
|
||||
setError(null);
|
||||
}}
|
||||
disabled={loading}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={handleDelete}
|
||||
disabled={loading || confirmation !== username}
|
||||
>
|
||||
{loading && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
|
||||
Delete My Account
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
80
components/settings/email-form.tsx
Normal file
80
components/settings/email-form.tsx
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { updateEmail } from "@/actions/settings";
|
||||
import { Loader2 } from "lucide-react";
|
||||
|
||||
interface EmailFormProps {
|
||||
currentEmail: string;
|
||||
}
|
||||
|
||||
export function EmailForm({ currentEmail }: EmailFormProps) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [success, setSuccess] = useState(false);
|
||||
|
||||
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
setSuccess(false);
|
||||
|
||||
const formData = new FormData(e.currentTarget);
|
||||
const email = formData.get("email") as string;
|
||||
|
||||
if (email === currentEmail) {
|
||||
setError("New email is the same as current email");
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await updateEmail({ email });
|
||||
setSuccess(true);
|
||||
setTimeout(() => setSuccess(false), 3000);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Failed to update email");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email Address</Label>
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
defaultValue={currentEmail}
|
||||
required
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Your email is used for account notifications and git authentication
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="text-sm text-red-500 bg-red-500/10 border border-red-500/20 rounded-md px-3 py-2">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{success && (
|
||||
<div className="text-sm text-green-500 bg-green-500/10 border border-green-500/20 rounded-md px-3 py-2">
|
||||
Email updated successfully!
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button type="submit" disabled={loading}>
|
||||
{loading && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
|
||||
Update Email
|
||||
</Button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
106
components/settings/password-form.tsx
Normal file
106
components/settings/password-form.tsx
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { updatePassword } from "@/actions/settings";
|
||||
import { Loader2 } from "lucide-react";
|
||||
|
||||
export function PasswordForm() {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [success, setSuccess] = useState(false);
|
||||
|
||||
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
setSuccess(false);
|
||||
|
||||
const formData = new FormData(e.currentTarget);
|
||||
const currentPassword = formData.get("currentPassword") as string;
|
||||
const newPassword = formData.get("newPassword") as string;
|
||||
const confirmPassword = formData.get("confirmPassword") as string;
|
||||
|
||||
if (newPassword !== confirmPassword) {
|
||||
setError("New passwords do not match");
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (newPassword.length < 8) {
|
||||
setError("Password must be at least 8 characters");
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await updatePassword({ currentPassword, newPassword });
|
||||
setSuccess(true);
|
||||
(e.target as HTMLFormElement).reset();
|
||||
setTimeout(() => setSuccess(false), 3000);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Failed to update password");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="currentPassword">Current Password</Label>
|
||||
<Input
|
||||
id="currentPassword"
|
||||
name="currentPassword"
|
||||
type="password"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="newPassword">New Password</Label>
|
||||
<Input
|
||||
id="newPassword"
|
||||
name="newPassword"
|
||||
type="password"
|
||||
required
|
||||
minLength={8}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Must be at least 8 characters
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="confirmPassword">Confirm New Password</Label>
|
||||
<Input
|
||||
id="confirmPassword"
|
||||
name="confirmPassword"
|
||||
type="password"
|
||||
required
|
||||
minLength={8}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="text-sm text-red-500 bg-red-500/10 border border-red-500/20 rounded-md px-3 py-2">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{success && (
|
||||
<div className="text-sm text-green-500 bg-green-500/10 border border-green-500/20 rounded-md px-3 py-2">
|
||||
Password updated successfully!
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button type="submit" disabled={loading}>
|
||||
{loading && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
|
||||
Update Password
|
||||
</Button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
150
components/settings/profile-form.tsx
Normal file
150
components/settings/profile-form.tsx
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { updateProfile } from "@/actions/settings";
|
||||
import { Loader2 } from "lucide-react";
|
||||
|
||||
interface ProfileFormProps {
|
||||
user: {
|
||||
name: string;
|
||||
username: string;
|
||||
bio?: string | null;
|
||||
location?: string | null;
|
||||
website?: string | null;
|
||||
pronouns?: string | null;
|
||||
};
|
||||
}
|
||||
|
||||
export function ProfileForm({ user }: ProfileFormProps) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [success, setSuccess] = useState(false);
|
||||
|
||||
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
setSuccess(false);
|
||||
|
||||
const formData = new FormData(e.currentTarget);
|
||||
|
||||
try {
|
||||
await updateProfile({
|
||||
name: formData.get("name") as string,
|
||||
username: formData.get("username") as string,
|
||||
bio: formData.get("bio") as string,
|
||||
location: formData.get("location") as string,
|
||||
website: formData.get("website") as string,
|
||||
pronouns: formData.get("pronouns") as string,
|
||||
});
|
||||
setSuccess(true);
|
||||
setTimeout(() => setSuccess(false), 3000);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Failed to update profile");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Display Name</Label>
|
||||
<Input
|
||||
id="name"
|
||||
name="name"
|
||||
defaultValue={user.name}
|
||||
placeholder="Your display name"
|
||||
required
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Your name as it appears on your profile
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="username">Username</Label>
|
||||
<Input
|
||||
id="username"
|
||||
name="username"
|
||||
defaultValue={user.username}
|
||||
placeholder="username"
|
||||
required
|
||||
pattern="[a-zA-Z0-9_-]+"
|
||||
minLength={3}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Your unique handle. Letters, numbers, underscores, and hyphens only.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="bio">Bio</Label>
|
||||
<Textarea
|
||||
id="bio"
|
||||
name="bio"
|
||||
defaultValue={user.bio || ""}
|
||||
placeholder="Tell us about yourself"
|
||||
maxLength={160}
|
||||
rows={3}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Brief description for your profile. Max 160 characters.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="pronouns">Pronouns</Label>
|
||||
<Input
|
||||
id="pronouns"
|
||||
name="pronouns"
|
||||
defaultValue={user.pronouns || ""}
|
||||
placeholder="e.g., they/them, she/her, he/him"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="location">Location</Label>
|
||||
<Input
|
||||
id="location"
|
||||
name="location"
|
||||
defaultValue={user.location || ""}
|
||||
placeholder="City, Country"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="website">Website</Label>
|
||||
<Input
|
||||
id="website"
|
||||
name="website"
|
||||
type="url"
|
||||
defaultValue={user.website || ""}
|
||||
placeholder="https://yourwebsite.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="text-sm text-red-500 bg-red-500/10 border border-red-500/20 rounded-md px-3 py-2">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{success && (
|
||||
<div className="text-sm text-green-500 bg-green-500/10 border border-green-500/20 rounded-md px-3 py-2">
|
||||
Profile updated successfully!
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button type="submit" disabled={loading}>
|
||||
{loading && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
|
||||
Save Changes
|
||||
</Button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
42
components/settings/settings-nav.tsx
Normal file
42
components/settings/settings-nav.tsx
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { User, Shield } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const navItems = [
|
||||
{ href: "/settings", label: "Profile", icon: User },
|
||||
{ href: "/settings/account", label: "Account", icon: Shield },
|
||||
];
|
||||
|
||||
export function SettingsNav() {
|
||||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
<nav className="flex flex-col gap-1">
|
||||
{navItems.map((item) => {
|
||||
const isActive = item.href === "/settings"
|
||||
? pathname === "/settings"
|
||||
: pathname.startsWith(item.href);
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={cn(
|
||||
"flex items-center gap-3 px-3 py-2 rounded-md text-sm transition-colors",
|
||||
isActive
|
||||
? "bg-accent text-foreground font-medium"
|
||||
: "text-muted-foreground hover:text-foreground hover:bg-accent/50"
|
||||
)}
|
||||
>
|
||||
<item.icon className="w-4 h-4" />
|
||||
{item.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
107
components/settings/social-links-form.tsx
Normal file
107
components/settings/social-links-form.tsx
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { updateSocialLinks } from "@/actions/settings";
|
||||
import { Loader2, Link } from "lucide-react";
|
||||
import { GithubIcon, LinkedInIcon, XIcon } from "../icons";
|
||||
|
||||
interface SocialLinksFormProps {
|
||||
socialLinks?: {
|
||||
github?: string;
|
||||
twitter?: string;
|
||||
linkedin?: string;
|
||||
custom?: string[];
|
||||
} | null;
|
||||
}
|
||||
|
||||
export function SocialLinksForm({ socialLinks }: SocialLinksFormProps) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [success, setSuccess] = useState(false);
|
||||
const [customLinks, setCustomLinks] = useState<string[]>([socialLinks?.custom?.[0] || "", socialLinks?.custom?.[1] || "", socialLinks?.custom?.[2] || ""]);
|
||||
|
||||
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
setSuccess(false);
|
||||
|
||||
const formData = new FormData(e.currentTarget);
|
||||
|
||||
try {
|
||||
await updateSocialLinks({
|
||||
github: formData.get("github") as string,
|
||||
twitter: formData.get("twitter") as string,
|
||||
linkedin: formData.get("linkedin") as string,
|
||||
custom: customLinks.filter(Boolean),
|
||||
});
|
||||
setSuccess(true);
|
||||
setTimeout(() => setSuccess(false), 3000);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Failed to update social links");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="github" className="flex items-center gap-2">
|
||||
<GithubIcon className="w-4 h-4" />
|
||||
GitHub
|
||||
</Label>
|
||||
<Input id="github" name="github" defaultValue={socialLinks?.github || ""} placeholder="https://github.com/username" type="url" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="twitter" className="flex items-center gap-2">
|
||||
<XIcon className="w-4 h-4" />
|
||||
Twitter / X
|
||||
</Label>
|
||||
<Input id="twitter" name="twitter" defaultValue={socialLinks?.twitter || ""} placeholder="https://twitter.com/username" type="url" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="linkedin" className="flex items-center gap-2">
|
||||
<LinkedInIcon className="w-4 h-4" />
|
||||
LinkedIn
|
||||
</Label>
|
||||
<Input id="linkedin" name="linkedin" defaultValue={socialLinks?.linkedin || ""} placeholder="https://linkedin.com/in/username" type="url" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<Label className="flex items-center gap-2">
|
||||
<Link className="w-4 h-4" />
|
||||
Custom Links
|
||||
</Label>
|
||||
{[0, 1, 2].map((i) => (
|
||||
<Input
|
||||
key={i}
|
||||
value={customLinks[i]}
|
||||
onChange={(e) => {
|
||||
const newLinks = [...customLinks];
|
||||
newLinks[i] = e.target.value;
|
||||
setCustomLinks(newLinks);
|
||||
}}
|
||||
placeholder={`Custom link ${i + 1}`}
|
||||
type="url"
|
||||
/>
|
||||
))}
|
||||
<p className="text-xs text-muted-foreground">Add up to 3 custom links to your profile</p>
|
||||
</div>
|
||||
|
||||
{error && <div className="text-sm text-red-500 bg-red-500/10 border border-red-500/20 rounded-md px-3 py-2">{error}</div>}
|
||||
|
||||
{success && <div className="text-sm text-green-500 bg-green-500/10 border border-green-500/20 rounded-md px-3 py-2">Social links updated!</div>}
|
||||
|
||||
<Button type="submit" disabled={loading}>
|
||||
{loading && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
|
||||
Save Social Links
|
||||
</Button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
14
db/schema.ts
14
db/schema.ts
|
|
@ -1,4 +1,4 @@
|
|||
import { pgTable, text, timestamp, boolean, uuid } from "drizzle-orm/pg-core";
|
||||
import { pgTable, text, timestamp, boolean, uuid, jsonb } from "drizzle-orm/pg-core";
|
||||
|
||||
export const users = pgTable("users", {
|
||||
id: text("id").primaryKey(),
|
||||
|
|
@ -7,6 +7,17 @@ export const users = pgTable("users", {
|
|||
emailVerified: boolean("email_verified").notNull().default(false),
|
||||
image: text("image"),
|
||||
username: text("username").notNull().unique(),
|
||||
bio: text("bio"),
|
||||
location: text("location"),
|
||||
website: text("website"),
|
||||
pronouns: text("pronouns"),
|
||||
avatarUrl: text("avatar_url"),
|
||||
socialLinks: jsonb("social_links").$type<{
|
||||
github?: string;
|
||||
twitter?: string;
|
||||
linkedin?: string;
|
||||
custom?: string[];
|
||||
}>(),
|
||||
createdAt: timestamp("created_at").notNull().defaultNow(),
|
||||
updatedAt: timestamp("updated_at").notNull().defaultNow(),
|
||||
});
|
||||
|
|
@ -65,4 +76,3 @@ export const repositories = pgTable("repositories", {
|
|||
createdAt: timestamp("created_at").notNull().defaultNow(),
|
||||
updatedAt: timestamp("updated_at").notNull().defaultNow(),
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,11 @@ import type { NextConfig } from "next";
|
|||
|
||||
const nextConfig: NextConfig = {
|
||||
/* config options here */
|
||||
experimental: {
|
||||
serverActions: {
|
||||
bodySizeLimit: "1mb",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue