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 { usePathname, useRouter } from 'next/navigation';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import Image from 'next/image';
|
import Image from 'next/image';
|
||||||
|
import { registerUser } from '@/public/src/services/auth/api';
|
||||||
import { Category } from '@/public/src/types/categories';
|
import { Category } from '@/public/src/types/categories';
|
||||||
|
|
||||||
import { ShoppingCart, Trash2, Search, X, ChevronDown } from "lucide-react";
|
import { ShoppingCart, Trash2, Search, X, ChevronDown } from "lucide-react";
|
||||||
@@ -24,8 +24,6 @@ const mainNavLinks = [
|
|||||||
{ label: "تماس با ما", href: "/contact" },
|
{ label: "تماس با ما", href: "/contact" },
|
||||||
];
|
];
|
||||||
|
|
||||||
// 1. استخراج دستهبندیهای منحصر به فرد از محصولات
|
|
||||||
const uniqueCategories = Array.from(new Set(products.map(p => p.category)));
|
|
||||||
|
|
||||||
export function Header({ categories }: { categories: Category[] }) {
|
export function Header({ categories }: { categories: Category[] }) {
|
||||||
const [menuOpen, setMenuOpen] = useState(false);
|
const [menuOpen, setMenuOpen] = useState(false);
|
||||||
@@ -37,6 +35,47 @@ export function Header({ categories }: { categories: Category[] }) {
|
|||||||
const searchRef = useRef<HTMLDivElement>(null);
|
const searchRef = useRef<HTMLDivElement>(null);
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const safeCategories = categories || [];
|
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 rootCategories = safeCategories.filter(cat => cat.parent === null);
|
||||||
const parsePrice = (priceStr?: string | null) => {
|
const parsePrice = (priceStr?: string | null) => {
|
||||||
if (!priceStr) return 0;
|
if (!priceStr) return 0;
|
||||||
@@ -79,8 +118,6 @@ export function Header({ categories }: { categories: Category[] }) {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// ... (بقیه کدهای شما از اینجا تا بخش <nav> دست نخورده باقی میماند)
|
|
||||||
// ... (بخشهای top bar, main bar, search, cart, etc. بدون تغییر هستند)
|
|
||||||
return (
|
return (
|
||||||
<header>
|
<header>
|
||||||
<div>
|
<div>
|
||||||
@@ -340,10 +377,197 @@ export function Header({ categories }: { categories: Category[] }) {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</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>
|
<span>ورود / عضویت</span>
|
||||||
</button>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
21
public/src/services/auth/api.tsx
Normal file
21
public/src/services/auth/api.tsx
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
export const registerUser = async (data:any) => {
|
||||||
|
const response = await fetch(
|
||||||
|
"https://parsshop-back.mugit.ir/api/auth/register/password",
|
||||||
|
{
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const result = await response.json();
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw result;
|
||||||
|
}
|
||||||
|
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
Reference in New Issue
Block a user