229 lines
8.7 KiB
TypeScript
229 lines
8.7 KiB
TypeScript
"use client";
|
||
|
||
import { useState, useEffect, useRef } from "react";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Input } from "@/components/ui/input";
|
||
import { Label } from "@/components/ui/label";
|
||
import {
|
||
Select,
|
||
SelectTrigger,
|
||
SelectValue,
|
||
SelectContent,
|
||
SelectItem,
|
||
} from "@/components/ui/select";
|
||
import { Bot, Save, User, KeyRound } from "lucide-react";
|
||
import { createClient } from "@/lib/supabase/client";
|
||
import { updateProfile, updatePassword } from "./actions";
|
||
|
||
export default function SettingsPage() {
|
||
const [aiProvider, setAiProvider] = useState("groq");
|
||
const [apiKey, setApiKey] = useState("");
|
||
const [saveStatus, setSaveStatus] = useState("");
|
||
|
||
// Profile state
|
||
const [firstName, setFirstName] = useState("");
|
||
const [lastName, setLastName] = useState("");
|
||
const [avatarUrl, setAvatarUrl] = useState("");
|
||
const [profileSaveStatus, setProfileSaveStatus] = useState("");
|
||
const [passwordSaveStatus, setPasswordSaveStatus] = useState("");
|
||
const formRef = useRef<HTMLFormElement>(null);
|
||
|
||
const supabase = createClient();
|
||
|
||
useEffect(() => {
|
||
const savedProvider = localStorage.getItem("mindspace_ai_provider");
|
||
const savedApiKey = localStorage.getItem("mindspace_api_key");
|
||
if (savedProvider) setAiProvider(savedProvider);
|
||
if (savedApiKey) setApiKey(savedApiKey);
|
||
|
||
// Fetch user profile
|
||
async function fetchProfile() {
|
||
const { data: { user } } = await supabase.auth.getUser();
|
||
if (user) {
|
||
const { data } = await supabase.from("profiles").select("*").eq("id", user.id).single();
|
||
if (data) {
|
||
setFirstName(data.first_name || "");
|
||
setLastName(data.last_name || "");
|
||
setAvatarUrl(data.avatar_url || "");
|
||
}
|
||
}
|
||
}
|
||
fetchProfile();
|
||
}, []);
|
||
|
||
const handleSaveAI = () => {
|
||
localStorage.setItem("mindspace_ai_provider", aiProvider);
|
||
localStorage.setItem("mindspace_api_key", apiKey);
|
||
|
||
setSaveStatus("Ayarlar başarıyla kaydedildi!");
|
||
setTimeout(() => setSaveStatus(""), 3000);
|
||
};
|
||
|
||
const handleProfileAction = async (formData: FormData) => {
|
||
const res = await updateProfile(formData);
|
||
if (res?.error) {
|
||
setProfileSaveStatus("Hata: " + res.error);
|
||
} else {
|
||
setProfileSaveStatus("Profil başarıyla güncellendi!");
|
||
if (formData.get("avatar") && (formData.get("avatar") as File).size > 0) {
|
||
window.location.reload();
|
||
}
|
||
}
|
||
setTimeout(() => setProfileSaveStatus(""), 3000);
|
||
};
|
||
|
||
const handlePasswordAction = async (formData: FormData) => {
|
||
const res = await updatePassword(formData);
|
||
if (res?.error) {
|
||
setPasswordSaveStatus("Hata: " + res.error);
|
||
} else {
|
||
setPasswordSaveStatus("Şifre başarıyla güncellendi!");
|
||
formRef.current?.reset();
|
||
}
|
||
setTimeout(() => setPasswordSaveStatus(""), 3000);
|
||
};
|
||
|
||
return (
|
||
<div className="flex flex-col gap-6 p-4 max-w-2xl mx-auto w-full">
|
||
<div>
|
||
<h1 className="text-3xl font-bold text-foreground">Ayarlar</h1>
|
||
<p className="text-muted-foreground mt-1">
|
||
Kullanıcı profili ve yapay zeka asistanı yapılandırmanızı yönetin.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Profile Settings */}
|
||
<div className="bg-card border border-border rounded-xl p-6 shadow-sm space-y-6 flex flex-col">
|
||
<div className="flex items-center gap-3 border-b border-border/50 pb-4">
|
||
<User className="w-6 h-6 text-primary" />
|
||
<h2 className="text-xl font-semibold">Kullanıcı Profili</h2>
|
||
</div>
|
||
|
||
<form action={handleProfileAction} className="space-y-4">
|
||
<div className="flex items-center gap-4 mb-6">
|
||
{avatarUrl ? (
|
||
<img src={avatarUrl} alt="Avatar" className="w-16 h-16 rounded-full object-cover border border-border" />
|
||
) : (
|
||
<div className="w-16 h-16 rounded-full bg-muted flex items-center justify-center border border-border">
|
||
<User className="w-8 h-8 text-muted-foreground" />
|
||
</div>
|
||
)}
|
||
<div className="space-y-1 flex-1">
|
||
<Label htmlFor="avatar">Profil Fotoğrafı Yükle</Label>
|
||
<Input id="avatar" name="avatar" type="file" accept="image/*" />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="firstName">Ad</Label>
|
||
<Input id="firstName" name="firstName" value={firstName} onChange={(e) => setFirstName(e.target.value)} />
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="lastName">Soyad</Label>
|
||
<Input id="lastName" name="lastName" value={lastName} onChange={(e) => setLastName(e.target.value)} />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-4 mt-4">
|
||
<Button type="submit" className="w-max">
|
||
<Save className="w-4 h-4 mr-2" />
|
||
Profili Kaydet
|
||
</Button>
|
||
{profileSaveStatus && (
|
||
<span className={`text-sm ${profileSaveStatus.startsWith("Hata") ? "text-red-500" : "text-green-600 dark:text-green-400"}`}>
|
||
{profileSaveStatus}
|
||
</span>
|
||
)}
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
{/* Password Settings */}
|
||
<div className="bg-card border border-border rounded-xl p-6 shadow-sm space-y-6 flex flex-col">
|
||
<div className="flex items-center gap-3 border-b border-border/50 pb-4">
|
||
<KeyRound className="w-6 h-6 text-primary" />
|
||
<h2 className="text-xl font-semibold">Şifre Değiştir</h2>
|
||
</div>
|
||
|
||
<form ref={formRef} action={handlePasswordAction} className="space-y-4">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="password">Yeni Şifre</Label>
|
||
<Input id="password" name="password" type="password" minLength={6} placeholder="En az 6 karakter" required />
|
||
</div>
|
||
|
||
<div className="flex items-center gap-4 mt-4">
|
||
<Button type="submit" className="w-max">
|
||
<Save className="w-4 h-4 mr-2" />
|
||
Şifreyi Güncelle
|
||
</Button>
|
||
{passwordSaveStatus && (
|
||
<span className={`text-sm ${passwordSaveStatus.startsWith("Hata") ? "text-red-500" : "text-green-600 dark:text-green-400"}`}>
|
||
{passwordSaveStatus}
|
||
</span>
|
||
)}
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
{/* AI Settings */}
|
||
<div className="bg-card border border-border rounded-xl p-6 shadow-sm space-y-6 flex flex-col">
|
||
<div className="flex items-center gap-3 border-b border-border/50 pb-4">
|
||
<Bot className="w-6 h-6 text-primary" />
|
||
<h2 className="text-xl font-semibold">Terapist (AI) Ayarları</h2>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
<div className="space-y-2">
|
||
<Label>AI Sağlayıcısı</Label>
|
||
<Select value={aiProvider} onValueChange={setAiProvider}>
|
||
<SelectTrigger className="w-full">
|
||
<SelectValue placeholder="Sağlayıcı seçin" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="ollama">
|
||
Ollama (Yerel & Gizlilik Odaklı)
|
||
</SelectItem>
|
||
<SelectItem value="openai">OpenAI (GPT-4o vb.)</SelectItem>
|
||
<SelectItem value="groq">Groq (Llama-3 Bulut)</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
<p className="text-xs text-muted-foreground">
|
||
Gizliliğiniz için yerel Ollama önerilir. Sunucunuzda çalışmayan
|
||
durumlarda OpenAI veya Groq gibi bulut çözümlerine geçebilirsiniz.
|
||
</p>
|
||
</div>
|
||
|
||
{aiProvider !== "ollama" && (
|
||
<div className="space-y-2">
|
||
<Label>API Anahtarı ({aiProvider.toUpperCase()})</Label>
|
||
<Input
|
||
type="password"
|
||
value={apiKey}
|
||
onChange={(e) => setApiKey(e.target.value)}
|
||
placeholder="sk-..."
|
||
/>
|
||
<p className="text-xs text-muted-foreground">
|
||
Anahtarınız sadece tarayıcınızın kendi local hafızasında güvenle
|
||
saklanır, hiçbir sunucuya kaydedilmez.
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex items-center gap-4 mt-4">
|
||
<Button onClick={handleSaveAI} className="w-max">
|
||
<Save className="w-4 h-4 mr-2" />
|
||
Kaydet
|
||
</Button>
|
||
{saveStatus && (
|
||
<span className="text-sm text-green-600 dark:text-green-400">
|
||
{saveStatus}
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|