108 lines
3.4 KiB
TypeScript
108 lines
3.4 KiB
TypeScript
"use client";
|
||
|
||
import React, { useEffect, useState } from "react";
|
||
import { useSession } from "next-auth/react";
|
||
import Link from "next/link";
|
||
import { getCookieSession, type AuthUser } from "@/lib/auth-api";
|
||
|
||
export default function ProfilePage() {
|
||
const { data: session, status } = useSession();
|
||
const [cookieUser, setCookieUser] = useState<AuthUser | null | undefined>(undefined);
|
||
|
||
useEffect(() => {
|
||
getCookieSession().then((s) =>
|
||
setCookieUser(s.loggedIn && s.user ? s.user : null)
|
||
);
|
||
}, []);
|
||
|
||
const loading = status === "loading" || cookieUser === undefined;
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="container mx-auto flex min-h-[60vh] items-center justify-center px-4">
|
||
<p className="text-neutral-500">Yükleniyor...</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (session?.user) {
|
||
const u = session.user;
|
||
return (
|
||
<div className="container mx-auto max-w-lg px-4 py-12">
|
||
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white">
|
||
Profil
|
||
</h1>
|
||
<div className="mt-6 rounded-xl border border-neutral-200 bg-white p-6 dark:border-neutral-800 dark:bg-neutral-900">
|
||
<p className="text-sm text-neutral-500 dark:text-neutral-400">
|
||
{u.email ?? u.name ?? "Oturum açıldı"}
|
||
</p>
|
||
{u.name && (
|
||
<p className="mt-1 font-medium text-neutral-900 dark:text-white">
|
||
{u.name}
|
||
</p>
|
||
)}
|
||
</div>
|
||
<p className="mt-4 text-sm text-neutral-500 dark:text-neutral-400">
|
||
<Link href="/" className="text-blue-600 hover:underline dark:text-blue-400">
|
||
Ana sayfaya dön
|
||
</Link>
|
||
</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (cookieUser) {
|
||
const u = cookieUser;
|
||
return (
|
||
<div className="container mx-auto max-w-lg px-4 py-12">
|
||
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white">
|
||
Profil
|
||
</h1>
|
||
<div className="mt-6 rounded-xl border border-neutral-200 bg-white p-6 dark:border-neutral-800 dark:bg-neutral-900">
|
||
<p className="text-sm text-neutral-500 dark:text-neutral-400">
|
||
{u.email}
|
||
</p>
|
||
<p className="mt-1 font-medium text-neutral-900 dark:text-white">
|
||
{u.first_name} {u.last_name}
|
||
</p>
|
||
{u.username && (
|
||
<p className="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
|
||
@{u.username}
|
||
</p>
|
||
)}
|
||
</div>
|
||
<p className="mt-4 text-sm text-neutral-500 dark:text-neutral-400">
|
||
<Link href="/" className="text-blue-600 hover:underline dark:text-blue-400">
|
||
Ana sayfaya dön
|
||
</Link>
|
||
</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="container mx-auto max-w-lg px-4 py-12">
|
||
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white">
|
||
Profil
|
||
</h1>
|
||
<p className="mt-4 text-neutral-600 dark:text-neutral-400">
|
||
Bu sayfayı görmek için giriş yapmalısınız.
|
||
</p>
|
||
<div className="mt-4 flex gap-3">
|
||
<Link
|
||
href="/auth/login"
|
||
className="text-sm font-medium text-blue-600 hover:underline dark:text-blue-400"
|
||
>
|
||
Giriş yap
|
||
</Link>
|
||
<Link
|
||
href="/auth/register"
|
||
className="text-sm font-medium text-blue-600 hover:underline dark:text-blue-400"
|
||
>
|
||
Kayıt ol
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|