diff --git a/app/accounts/login/page.jsx b/app/accounts/login/page.jsx index a357598..1cdfb77 100644 --- a/app/accounts/login/page.jsx +++ b/app/accounts/login/page.jsx @@ -4,6 +4,8 @@ import MainContext from "@/app/contexts/mainContext"; import { backendUrl, serAxios } from "@/utils/axios"; import Image from "next/image"; import React, { useContext, useEffect, useState } from "react"; +import { ChevronDown, Search } from "lucide-react"; +import { useCurrency } from "@/app/contexts/currencyContext"; const getAuthPageData = async () => { // Fetch data from external API @@ -26,7 +28,15 @@ const LoginSignup = () => { email: "", password: "", confirmPassword: "", + country: "", }); + const [countries, setCountries] = useState([]); + const [isCountryDropdownOpen, setIsCountryDropdownOpen] = useState(false); + const [isLoading, setIsLoading] = useState(false); + const [searchTerm, setSearchTerm] = useState(""); + const [filteredCountries, setFilteredCountries] = useState([]); + const { setUserCountry } = useCurrency(); + const handleInputChange = (e) => { const { name, value } = e.target; setFormData((prevData) => ({ @@ -35,25 +45,69 @@ const LoginSignup = () => { })); }; + const handleCountrySelect = (country) => { + setFormData((prevData) => ({ + ...prevData, + country: country, + })); + setIsCountryDropdownOpen(false); + setSearchTerm(""); + }; + + const fetchCountries = async () => { + setIsLoading(true); + try { + const response = await fetch('https://countriesnow.space/api/v0.1/countries/'); + const data = await response.json(); + if (!data.error) { + setCountries(data.data); + setFilteredCountries(data.data); + } + } catch (error) { + console.error("Error fetching countries:", error); + } finally { + setIsLoading(false); + } + }; + const handleSubmit = async (e) => { e.preventDefault(); if (isLogin) { loginUser(formData); } else { + // If registering, also set the user's country for currency purposes + if (formData.country) { + setUserCountry(formData.country); + } registerUser(formData); } }; const toggleMode = () => { setIsLogin(!isLogin); - setFormData({ email: "", password: "", confirmPassword: "" }); + setFormData({ email: "", password: "", confirmPassword: "", country: "" }); + setSearchTerm(""); }; useEffect(() => { getAuthPageData().then((data) => { setLoginPageData(data); }); - }, []); + + if (!isLogin) { + fetchCountries(); + } + }, [isLogin]); + + // Filter countries based on search term + useEffect(() => { + if (countries.length > 0) { + const filtered = countries.filter(country => + country.country.toLowerCase().includes(searchTerm.toLowerCase()) + ); + setFilteredCountries(filtered); + } + }, [searchTerm, countries]); return (