login modal box
This commit is contained in:
haniyeroozmand
@@ -3,7 +3,7 @@ import React, { useState, useEffect, useRef } from 'react';
|
||||
import { usePathname, useRouter } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
|
||||
import { registerUser } from '@/public/src/services/auth/api';
|
||||
import { Category } from '@/public/src/types/categories';
|
||||
|
||||
import { ShoppingCart, Trash2, Search, X, ChevronDown } from "lucide-react";
|
||||
@@ -24,8 +24,6 @@ const mainNavLinks = [
|
||||
{ label: "تماس با ما", href: "/contact" },
|
||||
];
|
||||
|
||||
// 1. استخراج دستهبندیهای منحصر به فرد از محصولات
|
||||
const uniqueCategories = Array.from(new Set(products.map(p => p.category)));
|
||||
|
||||
export function Header({ categories }: { categories: Category[] }) {
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
@@ -37,6 +35,47 @@ export function Header({ categories }: { categories: Category[] }) {
|
||||
const searchRef = useRef<HTMLDivElement>(null);
|
||||
const router = useRouter();
|
||||
const safeCategories = categories || [];
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [formType, setFormType] = useState("mobile");
|
||||
const [activeTab, setActiveTab] = useState("login");
|
||||
const [registerForm, setRegisterForm] = useState({
|
||||
phone: "",
|
||||
username: "",
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
password: "",
|
||||
confirmPassword: "",
|
||||
});
|
||||
|
||||
const handleRegisterChange = (e: any) => {
|
||||
const { name, value } = e.target;
|
||||
|
||||
setRegisterForm((prev) => ({
|
||||
...prev,
|
||||
[name]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
|
||||
|
||||
const handleRegister = async () => {
|
||||
try {
|
||||
|
||||
const payload = {
|
||||
phone: registerForm.phone,
|
||||
username: registerForm.username,
|
||||
password: registerForm.password,
|
||||
};
|
||||
|
||||
const res = await registerUser(payload);
|
||||
|
||||
console.log("ثبت نام موفق", res);
|
||||
|
||||
} catch (err) {
|
||||
console.log("خطا:", err);
|
||||
}
|
||||
};
|
||||
|
||||
const rootCategories = safeCategories.filter(cat => cat.parent === null);
|
||||
const parsePrice = (priceStr?: string | null) => {
|
||||
if (!priceStr) return 0;
|
||||
@@ -79,8 +118,6 @@ export function Header({ categories }: { categories: Category[] }) {
|
||||
}
|
||||
};
|
||||
|
||||
// ... (بقیه کدهای شما از اینجا تا بخش <nav> دست نخورده باقی میماند)
|
||||
// ... (بخشهای top bar, main bar, search, cart, etc. بدون تغییر هستند)
|
||||
return (
|
||||
<header>
|
||||
<div>
|
||||
@@ -340,10 +377,197 @@ export function Header({ categories }: { categories: Category[] }) {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<button className="flex items-center gap-2 px-3 py-2.5 bg-white border border-gray-300/60 rounded-xl text-xs text-gray-700 hover:bg-gray-50 transition">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" className="w-4 h-4 text-gray-500"><path strokeLinecap="round" strokeLinejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.5 20.25a7.5 7.5 0 0115 0" /></svg>
|
||||
|
||||
<button
|
||||
onClick={() => setIsOpen(true)}
|
||||
className="flex cursor-pointer items-center gap-2 px-3 py-2.5 bg-white border border-gray-300/60 rounded-xl text-xs text-gray-700 hover:bg-gray-50 transition"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" className="w-4 h-4 text-gray-500">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.5 20.25a7.5 7.5 0 0115 0" />
|
||||
</svg>
|
||||
<span>ورود / عضویت</span>
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-[#1A2332]/40 backdrop-blur-sm transition-opacity" dir="rtl">
|
||||
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
onClick={() => setIsOpen(false)}
|
||||
></div>
|
||||
|
||||
<div className="relative w-full max-w-sm bg-white rounded-3xl shadow-2xl p-8">
|
||||
|
||||
{/* دکمه بستن */}
|
||||
<button
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="absolute cursor-pointer top-4 left-5 text-gray-400 hover:text-gray-700 transition"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
|
||||
<div className="flex flex-col items-center mt-2 w-full">
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex w-full bg-gray-100 rounded-xl p-1 mb-6">
|
||||
<button
|
||||
onClick={() => setActiveTab("login")}
|
||||
className={`flex-1 cursor-pointer py-2 text-sm rounded-lg transition ${activeTab === "login"
|
||||
? "bg-white shadow text-[#1A2332] font-semibold"
|
||||
: "text-gray-500"
|
||||
}`}
|
||||
>
|
||||
ورود
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setActiveTab("register")}
|
||||
className={`flex-1 py-2 text-sm rounded-lg transition ${activeTab === "register"
|
||||
? "bg-white shadow text-[#1A2332] font-semibold"
|
||||
: "text-gray-500"
|
||||
}`}
|
||||
>
|
||||
ثبت نام
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
{/* ---------------- LOGIN ---------------- */}
|
||||
|
||||
{activeTab === "login" && (
|
||||
<div className="w-full">
|
||||
|
||||
{/* فرم موبایل */}
|
||||
{formType === "mobile" && (
|
||||
<div className="w-full space-y-4">
|
||||
|
||||
<input
|
||||
type="tel"
|
||||
placeholder="شماره موبایل"
|
||||
className="w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-2xl text-sm text-right focus:outline-none focus:border-[#ffb900]"
|
||||
/>
|
||||
|
||||
<button className="w-full cursor-pointer py-3.5 bg-[#ffb900] hover:bg-[#e5a600] text-[#1A2332] font-semibold rounded-2xl text-sm">
|
||||
ورود
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setFormType("password")}
|
||||
className="w-full text-xs text-gray-500 hover:text-[#1A2332]"
|
||||
>
|
||||
ورود با نام کاربری و رمز عبور
|
||||
</button>
|
||||
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* فرم یوزر پس */}
|
||||
{formType === "password" && (
|
||||
<div className="w-full space-y-4">
|
||||
|
||||
<input
|
||||
type="text"
|
||||
placeholder="نام کاربری"
|
||||
className="w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-2xl text-sm text-right focus:outline-none focus:border-[#ffb900]"
|
||||
/>
|
||||
|
||||
<input
|
||||
type="password"
|
||||
placeholder="رمز عبور"
|
||||
className="w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-2xl text-sm text-right focus:outline-none focus:border-[#ffb900]"
|
||||
/>
|
||||
|
||||
<button className="w-full cursor-pointer py-3.5 bg-[#ffb900] hover:bg-[#e5a600] text-[#1A2332] font-semibold rounded-2xl text-sm">
|
||||
ورود
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setFormType("mobile")}
|
||||
className="w-full text-xs text-gray-500 hover:text-[#1A2332]"
|
||||
>
|
||||
ورود با شماره موبایل
|
||||
</button>
|
||||
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ---------------- REGISTER ---------------- */}
|
||||
|
||||
{activeTab === "register" && (
|
||||
<div className="w-full space-y-4">
|
||||
|
||||
<input
|
||||
name="phone"
|
||||
value={registerForm.phone}
|
||||
onChange={handleRegisterChange}
|
||||
type="tel"
|
||||
placeholder="شماره موبایل"
|
||||
className="w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-2xl text-sm text-right focus:outline-none focus:border-[#ffb900]"
|
||||
/>
|
||||
|
||||
<input
|
||||
name="firstName"
|
||||
value={registerForm.firstName}
|
||||
onChange={handleRegisterChange}
|
||||
type="text"
|
||||
placeholder="نام"
|
||||
className="w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-2xl text-sm text-right focus:outline-none focus:border-[#ffb900]"
|
||||
/>
|
||||
|
||||
<input
|
||||
name="lastName"
|
||||
value={registerForm.lastName}
|
||||
onChange={handleRegisterChange}
|
||||
type="text"
|
||||
placeholder="نام خانوادگی"
|
||||
className="w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-2xl text-sm text-right focus:outline-none focus:border-[#ffb900]"
|
||||
/>
|
||||
<input
|
||||
name="username"
|
||||
value={registerForm.username}
|
||||
onChange={handleRegisterChange}
|
||||
type="text"
|
||||
placeholder="نام کاربری"
|
||||
className='w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-2xl text-sm text-right focus:outline-none focus:border-[#ffb900]'
|
||||
/>
|
||||
<input
|
||||
name="password"
|
||||
value={registerForm.password}
|
||||
onChange={handleRegisterChange}
|
||||
type="password"
|
||||
placeholder="رمز عبور"
|
||||
className="w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-2xl text-sm text-right focus:outline-none focus:border-[#ffb900]"
|
||||
/>
|
||||
|
||||
<input
|
||||
name="confirmPassword"
|
||||
value={registerForm.confirmPassword}
|
||||
onChange={handleRegisterChange}
|
||||
type="password"
|
||||
placeholder="تکرار رمز عبور"
|
||||
className="w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-2xl text-sm text-right focus:outline-none focus:border-[#ffb900]"
|
||||
/>
|
||||
|
||||
<button
|
||||
onClick={handleRegister}
|
||||
className="w-full cursor-pointer py-3.5 bg-[#ffb900] hover:bg-[#e5a600] text-[#1A2332] font-semibold rounded-2xl text-sm"
|
||||
>
|
||||
ثبت نام
|
||||
</button>
|
||||
|
||||
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user