profi sayfası
This commit is contained in:
@@ -6,7 +6,12 @@ import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
|
||||
import { Sidebar } from "@/components/dashboard/sidebar"
|
||||
import { UserNav } from "@/components/dashboard/user-nav"
|
||||
|
||||
export function DashboardHeader() {
|
||||
interface DashboardHeaderProps {
|
||||
user: { email?: string | null } | null
|
||||
profile: { full_name?: string | null, role?: string | null } | null
|
||||
}
|
||||
|
||||
export function DashboardHeader({ user, profile }: DashboardHeaderProps) {
|
||||
return (
|
||||
<header className="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
|
||||
<Sheet>
|
||||
@@ -28,7 +33,7 @@ export function DashboardHeader() {
|
||||
<div className="w-full flex-1">
|
||||
{/* Breadcrumb or Search could go here */}
|
||||
</div>
|
||||
<UserNav />
|
||||
<UserNav user={user} profile={profile} />
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
113
components/dashboard/password-form.tsx
Normal file
113
components/dashboard/password-form.tsx
Normal file
@@ -0,0 +1,113 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { useForm } from "react-hook-form"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import * as z from "zod"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { toast } from "sonner"
|
||||
import { Loader2 } from "lucide-react"
|
||||
import { supabase } from "@/lib/supabase"
|
||||
|
||||
const passwordSchema = z.object({
|
||||
password: z.string().min(6, "Şifre en az 6 karakter olmalıdır."),
|
||||
confirmPassword: z.string().min(6, "Şifre tekrarı en az 6 karakter olmalıdır."),
|
||||
}).refine((data) => data.password === data.confirmPassword, {
|
||||
message: "Şifreler eşleşmiyor.",
|
||||
path: ["confirmPassword"],
|
||||
})
|
||||
|
||||
type PasswordFormValues = z.infer<typeof passwordSchema>
|
||||
|
||||
export function PasswordForm() {
|
||||
const router = useRouter()
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const form = useForm<PasswordFormValues>({
|
||||
resolver: zodResolver(passwordSchema),
|
||||
defaultValues: {
|
||||
password: "",
|
||||
confirmPassword: "",
|
||||
},
|
||||
})
|
||||
|
||||
const onSubmit = async (data: PasswordFormValues) => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const { error } = await supabase.auth.updateUser({
|
||||
password: data.password
|
||||
})
|
||||
|
||||
if (error) {
|
||||
toast.error("Şifre güncellenemedi: " + error.message)
|
||||
return
|
||||
}
|
||||
|
||||
toast.success("Şifreniz başarıyla güncellendi.")
|
||||
form.reset()
|
||||
router.refresh()
|
||||
} catch (error) {
|
||||
toast.error("Bir sorun oluştu.")
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Yeni Şifre Belirle</CardTitle>
|
||||
<CardDescription>
|
||||
Hesabınız için yeni bir şifre belirleyin.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Yeni Şifre</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="password" placeholder="******" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="confirmPassword"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Şifre Tekrar</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="password" placeholder="******" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<Button type="submit" disabled={loading}>
|
||||
{loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
Şifreyi Güncelle
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -7,6 +7,7 @@ import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import * as z from "zod"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { PhoneInput } from "@/components/ui/phone-input"
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
@@ -25,34 +26,45 @@ import {
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { toast } from "sonner"
|
||||
import { Loader2 } from "lucide-react"
|
||||
import { createUser, updateUser } from "@/app/(dashboard)/dashboard/users/actions"
|
||||
import { createUser, updateUser, updateProfile } from "@/app/(dashboard)/dashboard/users/actions"
|
||||
|
||||
const userSchema = z.object({
|
||||
firstName: z.string().min(2, "Ad en az 2 karakter olmalıdır."),
|
||||
lastName: z.string().min(2, "Soyad en az 2 karakter olmalıdır."),
|
||||
email: z.string().email("Geçerli bir e-posta adresi giriniz."),
|
||||
password: z.string().optional(), // Password is optional on edit
|
||||
confirmPassword: z.string().optional(),
|
||||
role: z.enum(["admin", "user"]),
|
||||
phone: z.string().optional(),
|
||||
}).refine((data) => {
|
||||
// If we are creating a NEW user (no ID passed in props effectively, but schema doesn't know props),
|
||||
// we generally want password required. But here we'll handle it in the component logic or strictly separate schemas.
|
||||
// For simplicity, we make password optional in Zod but check it in onSubmit if it's a create action.
|
||||
// 1. Password match check
|
||||
if (data.password && data.password !== data.confirmPassword) {
|
||||
return false;
|
||||
}
|
||||
// 2. New user password requirement check (simplified here, but strict would check id)
|
||||
// We handle the "required" part in onSubmit manually for now as per previous logic,
|
||||
// but the matching check is now here.
|
||||
return true
|
||||
}, {
|
||||
message: "Şifreler eşleşmiyor.",
|
||||
path: ["confirmPassword"],
|
||||
})
|
||||
|
||||
type UserFormValues = z.infer<typeof userSchema>
|
||||
|
||||
interface UserFormProps {
|
||||
initialData?: {
|
||||
id: string
|
||||
id?: string
|
||||
firstName: string
|
||||
lastName: string
|
||||
email: string
|
||||
role: "admin" | "user"
|
||||
phone?: string
|
||||
}
|
||||
mode?: "admin" | "profile"
|
||||
}
|
||||
|
||||
export function UserForm({ initialData }: UserFormProps) {
|
||||
export function UserForm({ initialData, mode = "admin" }: UserFormProps) {
|
||||
const router = useRouter()
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
@@ -63,13 +75,17 @@ export function UserForm({ initialData }: UserFormProps) {
|
||||
lastName: initialData.lastName,
|
||||
email: initialData.email,
|
||||
password: "", // Empty password means no change
|
||||
confirmPassword: "",
|
||||
role: initialData.role,
|
||||
phone: initialData.phone,
|
||||
} : {
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
email: "",
|
||||
password: "",
|
||||
confirmPassword: "",
|
||||
role: "user",
|
||||
phone: "",
|
||||
},
|
||||
})
|
||||
|
||||
@@ -77,17 +93,32 @@ export function UserForm({ initialData }: UserFormProps) {
|
||||
setLoading(true)
|
||||
try {
|
||||
let result;
|
||||
if (initialData) {
|
||||
// Update
|
||||
result = await updateUser(initialData.id, data)
|
||||
|
||||
if (mode === "profile") {
|
||||
// Profile update mode (self-service)
|
||||
result = await updateProfile({
|
||||
firstName: data.firstName,
|
||||
lastName: data.lastName,
|
||||
phone: data.phone
|
||||
})
|
||||
} else if (initialData?.id) {
|
||||
// Admin update mode
|
||||
result = await updateUser(initialData.id, {
|
||||
firstName: data.firstName,
|
||||
lastName: data.lastName,
|
||||
email: data.email,
|
||||
password: data.password,
|
||||
role: data.role,
|
||||
phone: data.phone
|
||||
})
|
||||
} else {
|
||||
// Create
|
||||
// Admin create mode
|
||||
if (!data.password || data.password.length < 6) {
|
||||
toast.error("Yeni kullanıcı için şifre gereklidir (min 6 karakter).")
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
result = await createUser(data.firstName, data.lastName, data.email, data.password, data.role)
|
||||
result = await createUser(data.firstName, data.lastName, data.email, data.password, data.role, data.phone)
|
||||
}
|
||||
|
||||
if (result.error) {
|
||||
@@ -95,9 +126,16 @@ export function UserForm({ initialData }: UserFormProps) {
|
||||
return
|
||||
}
|
||||
|
||||
toast.success(initialData ? "Kullanıcı güncellendi." : "Kullanıcı oluşturuldu.")
|
||||
router.push("/dashboard/users")
|
||||
toast.success(
|
||||
mode === "profile"
|
||||
? "Profil bilgileriniz güncellendi."
|
||||
: initialData ? "Kullanıcı güncellendi." : "Kullanıcı oluşturuldu."
|
||||
)
|
||||
|
||||
router.refresh()
|
||||
if (mode === "admin") {
|
||||
router.push("/dashboard/users")
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error("Bir sorun oluştu.")
|
||||
} finally {
|
||||
@@ -139,6 +177,20 @@ export function UserForm({ initialData }: UserFormProps) {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="phone"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Telefon</FormLabel>
|
||||
<FormControl>
|
||||
<PhoneInput placeholder="555 123 4567" defaultCountry="TR" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="email"
|
||||
@@ -146,52 +198,83 @@ export function UserForm({ initialData }: UserFormProps) {
|
||||
<FormItem>
|
||||
<FormLabel>E-posta</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="ahmet@parakasa.com" {...field} />
|
||||
<Input
|
||||
placeholder="ahmet@parakasa.com"
|
||||
{...field}
|
||||
disabled={mode === "profile"}
|
||||
className={mode === "profile" ? "bg-muted" : ""}
|
||||
/>
|
||||
</FormControl>
|
||||
{mode === "profile" && <p className="text-[0.8rem] text-muted-foreground">E-posta adresi değiştirilemez.</p>}
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Şifre</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="password" placeholder={initialData ? "Değiştirmek için yeni şifre girin" : "******"} {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
{mode === "admin" && (
|
||||
<>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Şifre</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="password" placeholder={initialData ? "Değiştirmek için yeni şifre girin" : "******"} {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="role"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Rol</FormLabel>
|
||||
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Rol seçin" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value="user">Kullanıcı</SelectItem>
|
||||
<SelectItem value="admin">Yönetici</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="confirmPassword"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Şifre Tekrar</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="password" placeholder="******" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="role"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Rol</FormLabel>
|
||||
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Rol seçin" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value="user">Kullanıcı</SelectItem>
|
||||
<SelectItem value="admin">Yönetici</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{mode === "profile" && (
|
||||
<div className="space-y-1">
|
||||
<FormLabel>Rol</FormLabel>
|
||||
<Input value={initialData?.role === 'admin' ? 'Yönetici' : 'Kullanıcı'} disabled className="bg-muted" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button type="submit" disabled={loading} className="w-full">
|
||||
{loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
Kullanıcı Oluştur
|
||||
{mode === "profile" ? "Değişiklikleri Kaydet" : (initialData ? "Kaydet" : "Kullanıcı Oluştur")}
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
|
||||
@@ -14,13 +14,30 @@ import {
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuShortcut,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu"
|
||||
import { supabase } from "@/lib/supabase"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { useEffect, useState } from "react"
|
||||
import { User } from "@supabase/supabase-js"
|
||||
|
||||
export function UserNav() {
|
||||
interface UserProfile {
|
||||
full_name: string | null
|
||||
email: string | null
|
||||
role: string | null
|
||||
}
|
||||
|
||||
interface UserNavProps {
|
||||
user: {
|
||||
email?: string | null
|
||||
} | null
|
||||
profile: {
|
||||
full_name?: string | null
|
||||
role?: string | null
|
||||
} | null
|
||||
}
|
||||
|
||||
export function UserNav({ user, profile }: UserNavProps) {
|
||||
const router = useRouter()
|
||||
|
||||
const handleSignOut = async () => {
|
||||
@@ -29,22 +46,31 @@ export function UserNav() {
|
||||
router.refresh()
|
||||
}
|
||||
|
||||
const getInitials = (name: string) => {
|
||||
return name
|
||||
.split(' ')
|
||||
.map((n) => n[0])
|
||||
.join('')
|
||||
.toUpperCase()
|
||||
.substring(0, 2)
|
||||
}
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" className="relative h-8 w-8 rounded-full">
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarImage src="/avatars/01.png" alt="@parakasa" />
|
||||
<AvatarFallback>PK</AvatarFallback>
|
||||
<AvatarImage src="/avatars/01.png" alt={profile?.full_name || "@parakasa"} />
|
||||
<AvatarFallback>{profile?.full_name ? getInitials(profile.full_name) : 'PK'}</AvatarFallback>
|
||||
</Avatar>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="w-56" align="end" forceMount>
|
||||
<DropdownMenuLabel className="font-normal">
|
||||
<div className="flex flex-col space-y-1">
|
||||
<p className="text-sm font-medium leading-none">Admin</p>
|
||||
<p className="text-sm font-medium leading-none">{profile?.full_name || 'Kullanıcı'}</p>
|
||||
<p className="text-xs leading-none text-muted-foreground">
|
||||
admin@parakasa.com
|
||||
{user?.email}
|
||||
</p>
|
||||
</div>
|
||||
</DropdownMenuLabel>
|
||||
@@ -52,23 +78,18 @@ export function UserNav() {
|
||||
<DropdownMenuGroup>
|
||||
<Link href="/dashboard/profile">
|
||||
<DropdownMenuItem className="cursor-pointer">
|
||||
Profil
|
||||
Profil Bilgileri
|
||||
</DropdownMenuItem>
|
||||
</Link>
|
||||
<Link href="/dashboard/users">
|
||||
<Link href="/dashboard/profile/password">
|
||||
<DropdownMenuItem className="cursor-pointer">
|
||||
Kullanıcılar
|
||||
</DropdownMenuItem>
|
||||
</Link>
|
||||
<Link href="/dashboard/settings">
|
||||
<DropdownMenuItem className="cursor-pointer">
|
||||
Ayarlar
|
||||
Şifre Değiştir
|
||||
</DropdownMenuItem>
|
||||
</Link>
|
||||
</DropdownMenuGroup>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem onClick={handleSignOut}>
|
||||
Çıkış Yap
|
||||
<DropdownMenuItem onClick={handleSignOut} className="cursor-pointer text-red-600 focus:text-red-600">
|
||||
Çıkış
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
23
components/ui/phone-input.tsx
Normal file
23
components/ui/phone-input.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import * as React from "react"
|
||||
import PhoneInput from "react-phone-number-input"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
export interface PhoneInputProps extends React.ComponentProps<typeof PhoneInput> {
|
||||
className?: string
|
||||
}
|
||||
|
||||
const PhoneInputComponent = React.forwardRef<any, PhoneInputProps>(({ className, ...props }, ref) => {
|
||||
return (
|
||||
<PhoneInput
|
||||
ref={ref}
|
||||
className={cn("flex", className)} // Wrapper class
|
||||
numberInputProps={{
|
||||
className: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
}}
|
||||
{...(props as any)}
|
||||
/>
|
||||
)
|
||||
})
|
||||
PhoneInputComponent.displayName = "PhoneInput"
|
||||
|
||||
export { PhoneInputComponent as PhoneInput }
|
||||
Reference in New Issue
Block a user