add Login, Register components

my-app/firebase-config.js

@@ -1,15 +1,18 @@
-import { getFirestore } from 'firebase/firestore'
+import { getFirestore } from "firebase/firestore";
 import { initializeApp } from "firebase/app";
-
+import { getStorage } from "firebase/storage";
+import { getAuth } from "firebase/auth";
 
 export const firebaseConfig = {
-    apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
-    authDomain: import.meta.env.VITE_AUTH_DOMAIN,
-    projectId: import.meta.env.VITE_PROJECT_ID,
-    storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
-    messagingSenderId: import.meta.env.VITE_FIREBASE_MSG_SENDER_ID,
-    appId: import.meta.env.VITE_FIREBASE_APP_ID
+  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
+  authDomain: import.meta.env.VITE_AUTH_DOMAIN,
+  projectId: import.meta.env.VITE_PROJECT_ID,
+  storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
+  messagingSenderId: import.meta.env.VITE_FIREBASE_MSG_SENDER_ID,
+  appId: import.meta.env.VITE_FIREBASE_APP_ID,
 };
 
 const app = initializeApp(firebaseConfig);
 export const db = getFirestore(app);
+export const auth = getAuth(app);
+export const storage = getStorage(app);

my-app/src/App.jsx

@@ -2,46 +2,64 @@ import "./App.css";
 import { Header } from "./Components/Header/Header";
 import { LandingPage } from "./Components/LandingPage/LandingPage.tsx";
 import { Portfolio } from "./Components/Portfolio/Portfolio.tsx";
+import { Login } from "./Components/Authentication/Login/Login.tsx";
+import { Register } from "./Components/Authentication/Register/Register.tsx";
 import { Pricing } from "./Components/Pricing/Pricing";
 import { ContactForm } from "./Components/ContactForm/ContactForm";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
 import { PortfolioImage } from "./Components/Portfolio/PortfolioImage/PortfolioImage.jsx";
 import { NotFound } from "./Components/NotFound/NotFound";
 import { ThemeProvider } from "./providers/theme.tsx";
-import { BasketProvider } from "./providers/basketContext.tsx";
 import { Footer } from "./Components/Footer/Footer";
+import { auth } from "./../firebase-config.js";
+import { useState } from "react";
+import { onAuthStateChanged } from "firebase/auth";
 
 function App() {
   const quotes = [
     "A camera alone does not make a picture. To make a picture you need a camera, a photographer and above all a subject. It is the subject that determines the interest of the photograph. – Man Ray",
     "Capturing Moments, Creating Memories: Lens Studio, where photography meets artistry, offering stunning prints from our portfolio to adorn your world.",
   ];
 
+  const [user, setUser] = useState(null);
+  onAuthStateChanged(auth, (res) => {
+    setUser(res);
+  });
+
   return (
     <>
       <ThemeProvider>
-        <BasketProvider>
-          <BrowserRouter>
-            <Header />
-            <div className="main__container">
-              <Routes>
-                <Route
-                  path="/"
-                  element={<LandingPage quotes={quotes} />}
-                ></Route>
-                <Route path="/portfolio" element={<Portfolio />}></Route>
-                <Route path="/pricing" element={<Pricing />}></Route>
-                <Route path="/contactform" element={<ContactForm />}></Route>
-                <Route
-                  path="/portfolio/:imageId"
-                  element={<PortfolioImage />}
-                ></Route>
-                <Route path="*" element={<NotFound />}></Route>
-              </Routes>
-            </div>
-            <Footer />
-          </BrowserRouter>
-        </BasketProvider>
+        <BrowserRouter>
+          <Header setUser={setUser} user={user} />
+          <div className="main__container">
+            <Routes>
+              <Route path="/" element={<LandingPage quotes={quotes} />}></Route>
+              <Route
+                path="/portfolio"
+                element={user ? <Portfolio /> : <Login />}
+              ></Route>
+              <Route
+                path="/pricing"
+                element={user ? <Pricing /> : <Login />}
+              ></Route>
+              <Route path="/contactform" element={<ContactForm />}></Route>
+              <Route
+                path="/portfolio/:imageId"
+                element={user ? <PortfolioImage user={user} /> : <Login />}
+              ></Route>
+              <Route path="*" element={<NotFound />}></Route>
+              <Route
+                path="/login"
+                element={user ? <Navigate to={"/"} replace /> : <Login />}
+              ></Route>
+              <Route
+                path="/register"
+                element={user ? <Navigate to={"/"} replace /> : <Register />}
+              ></Route>
+            </Routes>
+          </div>
+          <Footer />
+        </BrowserRouter>
       </ThemeProvider>
     </>
   );

my-app/src/Components/Authentication/Login/Login.module.css

@@ -0,0 +1,32 @@
+.login__container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.login__header {
+  margin: 100px auto 80px;
+  text-align: center;
+  font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
+  font-weight: 800;
+  text-transform: uppercase;
+  font-size: 2.4rem;
+}
+
+.login__form {
+  height: 500px;
+  width: 500px;
+  border-radius: 20px;
+  padding-bottom: 20px;
+}
+
+.light {
+  background: var(--box-light-color-light);
+  color: var(--main-text-color-light);
+}
+
+.dark {
+  background: var(--box-light-color-dark);
+  color: var(--main-text-color-dark);
+}

my-app/src/Components/Authentication/Login/Login.tsx

@@ -0,0 +1,31 @@
+import styles from "./Login.module.css"
+import { ThemeContext } from "../../../providers/theme.tsx";
+import { useContext } from "react";
+import classnames from "classnames";
+import { AuthForm } from "../../structure_components/AuthForm.jsx"
+import { useNavigate } from "react-router-dom";
+import { signInWithEmailAndPassword } from "firebase/auth";
+import { auth } from "../../../../firebase-config.js";
+
+
+export const Login = () => {
+    const { theme } = useContext(ThemeContext);
+    const navigate = useNavigate()
+    const handleSubmit = ({ login, password }) => {
+        signInWithEmailAndPassword(auth, login, password)
+            .then((e) => console.log(e))
+            .then(() => navigate("/"))
+    }
+    return (
+        <div className={classnames(styles["login__container"], styles[theme])}>
+            <h1 className={classnames(styles["login__header"], styles[theme])}>
+                Login page
+            </h1>
+            <div className={classnames(styles["login__form"], styles[theme])}>
+
+                <AuthForm submitText="Login" handleSubmit={handleSubmit}></AuthForm>
+            </div>
+
+        </div>
+    );
+};

my-app/src/Components/Authentication/Register/Register.module.css

@@ -0,0 +1,32 @@
+.register__container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.register__header {
+  margin: 100px auto 80px;
+  text-align: center;
+  font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
+  font-weight: 800;
+  text-transform: uppercase;
+  font-size: 2.4rem;
+}
+
+.register__form {
+  height: 500px;
+  width: 500px;
+  border-radius: 20px;
+  padding-bottom: 20px;
+}
+
+.light {
+  background: var(--box-light-color-light);
+  color: var(--main-text-color-light);
+}
+
+.dark {
+  background: var(--box-light-color-dark);
+  color: var(--main-text-color-dark);
+}

my-app/src/Components/Authentication/Register/Register.tsx

@@ -0,0 +1,27 @@
+import styles from "./Register.module.css"
+import { ThemeContext } from "../../../providers/theme.tsx";
+import { useContext } from "react";
+import classnames from "classnames";
+import { AuthForm } from "../../structure_components/AuthForm.jsx"
+import { createUserWithEmailAndPassword } from "firebase/auth";
+import { auth } from "../../../../firebase-config.js";
+
+
+export const Register = () => {
+    const { theme } = useContext(ThemeContext);
+    const handleSubmit = ({ login, password }) => {
+        createUserWithEmailAndPassword(auth, login, password)
+            .then((e) => console.log(e))
+    }
+    return (
+        <div className={classnames(styles["register__container"], styles[theme])}>
+            <h1 className={classnames(styles["register__header"], styles[theme])}>
+                Registration page
+            </h1>
+            <div className={classnames(styles["register__form"], styles[theme])}>
+                <AuthForm submitText="Register" handleSubmit={handleSubmit}></AuthForm>
+            </div>
+
+        </div>
+    );
+};

my-app/src/Components/BasketModal/BasketModal.jsx

@@ -1,13 +1,16 @@
 import styles from "./BasketModal.module.css";
 import { Modal } from "../Modal/Modal.jsx";
-import { useContext, useEffect } from "react";
+import { useContext, useEffect, useState } from "react";
 import { ThemeContext } from "../../providers/theme.tsx";
-import { BasketContext } from "../../providers/BasketContext";
 import { BasketItem } from "../BasketModal/BasketItem/BasketItem.tsx";
+import { db } from "../../../firebase-config.js";
+import { collection } from "firebase/firestore";
 
-export const BasketModal = ({ isOpen, onClose }) => {
+export const BasketModal = ({ isOpen, onClose, user }) => {
   const { theme } = useContext(ThemeContext);
-  const { basket } = useContext(BasketContext);
+  console.log("User from basket", user);
+
+  const [basket, setBasket] = useState([]);
   console.log("BASKET", basket);
 
   useEffect(() => {
@@ -32,6 +35,21 @@ export const BasketModal = ({ isOpen, onClose }) => {
     };
   }, [isOpen]);
 
+  // const getData = () => {
+  //   const basketCollection = collection(db, "basket", user.uid);
+  //   onSnapshot(basketCollection, (res) => {
+  //     const items = res.docs.map((doc) => ({
+  //       id: doc.id,
+  //       ...doc.data(),
+  //     }));
+
+  //     setBasket(items);
+  //   });
+  // };
+  // useEffect(() => {
+  //   getData();
+  // }, []);
+
   return (
     <div style={{ display: isOpen ? "block" : "none" }}>
       <div
@@ -46,7 +64,7 @@ export const BasketModal = ({ isOpen, onClose }) => {
           x
         </button>
         <div>
-          {basket.length > 0 ? (
+          {basket ? (
             <div>
               {basket.map((product, index) => (
                 <BasketItem key={index} product={product} />