firebase

package-lock.json

@@ -15,6 +15,8 @@
         "phosphor-react": "^1.4.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-firebase-hooks": "^5.1.1",
+        "react-icons": "^5.2.1",
         "react-router-dom": "^6.4.4",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.0"
@@ -15149,6 +15151,23 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-firebase-hooks": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/react-firebase-hooks/-/react-firebase-hooks-5.1.1.tgz",
+      "integrity": "sha512-y2UpWs82xs+39q5Rc/wq316ca52QsC0n8m801V+yM4IC4hbfOL4yQPVSh7w+ydstdvjN9F+lvs1WrO2VYxpmdA==",
+      "peerDependencies": {
+        "firebase": ">= 9.0.0",
+        "react": ">= 16.8.0"
+      }
+    },
+    "node_modules/react-icons": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
+      "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",

package.json

@@ -10,6 +10,8 @@
     "phosphor-react": "^1.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-firebase-hooks": "^5.1.1",
+    "react-icons": "^5.2.1",
     "react-router-dom": "^6.4.4",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.0"

src/App.js

+// src/App.js
+import React, { useState } from "react";
 import "./App.css";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import { Navbar } from "./components/navbar";
@@ -6,18 +8,22 @@ import { Contact } from "./pages/contact";
 import { Checkout } from "./pages/checkout"; 
 import { Cart } from "./pages/cart/cart";
 import { ShopContextProvider } from "./context/shop-context";
+import { Login } from "./components/Login";
 
 function App() {
+  const [user, setUser] = useState(null);
+
   return (
     <div className="App">
       <ShopContextProvider>
         <Router>
-          <Navbar />
+          <Navbar user={user} setUser={setUser} />
           <Routes>
-            <Route path="/" element={<Shop />} />
+            <Route path="/" element={<Shop user={user} />} />
             <Route path="/contact" element={<Contact />} />
             <Route path="/checkout" element={<Checkout />} />
             <Route path="/cart" element={<Cart />} />
+            <Route path="/login" element={<Login setUser={setUser} />} />
           </Routes>
         </Router>
       </ShopContextProvider>

src/components/Login.css

+.login-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    background-color: #f8f9fa;
+  }
+  
+  .login-box {
+    background-color: white;
+    padding: 40px;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    max-width: 400px;
+    width: 100%;
+    text-align: center;
+  }
+  
+  .login-box h2 {
+    margin-bottom: 20px;
+    color: #343a40;
+  }
+  
+  .login-box input {
+    display: block;
+    width: calc(100% - 20px);
+    padding: 10px;
+    margin: 10px auto;
+    border: 1px solid #ced4da;
+    border-radius: 5px;
+  }
+  
+  .login-box button {
+    display: block;
+    width: calc(100% - 20px);
+    padding: 10px;
+    margin: 10px auto;
+    border: none;
+    background-color: #007bff;
+    color: white;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+  
+  .login-box button:hover {
+    background-color: #0056b3;
+  }
+  
\ No newline at end of file

src/components/Login.js

+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { auth } from "../firebase-config";
+import { signInWithEmailAndPassword } from "firebase/auth";
+import "./Login.css";
+
+export const Login = ({ setUser }) => {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const navigate = useNavigate();
+
+  const handleLogin = async () => {
+    try {
+      const userCredential = await signInWithEmailAndPassword(auth, email, password);
+      setUser(userCredential.user);
+      console.log("Login successful:", userCredential.user); 
+      navigate("/"); 
+    } catch (error) {
+      console.error("Error logging in", error); 
+    }
+  };
+
+  return (
+    <div className="login-container">
+      <div className="login-box">
+        <h2>Login</h2>
+        <input
+          type="email"
+          placeholder="Email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
+        <input
+          type="password"
+          placeholder="Password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+        />
+        <button onClick={handleLogin}>Login</button>
+      </div>
+    </div>
+  );
+};

src/components/navbar.js

-// navbar.js
+// src/components/navbar.js
 import React from "react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { ShoppingCart } from "phosphor-react";
+import { auth } from "../firebase-config";
+import { signOut } from "firebase/auth";
 import "./navbar.css";
 
-export const Navbar = () => {
+export const Navbar = ({ user, setUser }) => {
+  const navigate = useNavigate();
+
+  const handleLogout = async () => {
+    await signOut(auth);
+    setUser(null);
+    console.log("Logout successful"); 
+    navigate("/login");
+  };
+
   return (
     <div className="navbar">
       <div className="links">
@@ -13,6 +24,11 @@ export const Navbar = () => {
         <Link to="/cart">
           <ShoppingCart size={32} />
         </Link>
+        {user ? (
+          <button onClick={handleLogout}>Logout</button>
+        ) : (
+          <Link to="/login"> Login </Link>
+        )}
       </div>
     </div>
   );

src/firebase-config.js

+import { initializeApp } from "firebase/app";
+import { getAuth } from "firebase/auth";
+
+// Your web app's Firebase configuration
+const firebaseConfig = {
+    apiKey: "AIzaSyA61BW4vGOjCkfvKK9azjjAFET7mF5lHy0",
+    authDomain: "protech-shop1.firebaseapp.com",
+    projectId: "protech-shop1",
+    storageBucket: "protech-shop1.appspot.com",
+    messagingSenderId: "154428282416",
+    appId: "1:154428282416:web:34373700850dfafcb87ff5"
+  };
+  
+
+const app = initializeApp(firebaseConfig);
+export const auth = getAuth(app);

src/pages/checkout.js

@@ -8,7 +8,6 @@ export const Checkout = () => {
   const handleOrderSubmit = (event) => {
     event.preventDefault();
     setIsOrderPlaced(true);
-    // 模拟一个网络请求
     setTimeout(() => {
       setIsOrderPlaced(false);
       alert("Your order has been successfully placed!");

src/pages/shop/product.js

+// src/pages/shop/product.js
 import React, { useContext } from "react";
 import { ShopContext } from "../../context/shop-context";
 
+
 export const Product = (props) => {
   const { id, productName, price, productImage } = props.data;
   const { addToCart, cartItems } = useContext(ShopContext);
+  const { user } = props; 
 
   const cartItemCount = cartItems[id];
 
+  const handleAddToCart = () => {
+    if (!user) {
+      alert("Please log in to add items to your cart.");
+    } else {
+      addToCart(id);
+    }
+  };
+
   return (
     <div className="product">
-      <img src={productImage} />
+      <img src={productImage} alt={productName} />
       <div className="description">
         <p>
           <b>{productName}</b>
         </p>
         <p> ${price}</p>
       </div>
-      <button className="addToCartBttn" onClick={() => addToCart(id)}>
+      <button className="addToCartBttn" onClick={handleAddToCart}>
         Add To Cart {cartItemCount > 0 && <> ({cartItemCount})</>}
       </button>
     </div>

src/pages/shop/shop.js

+// src/pages/shop/shop.js
 import React from "react";
 import { PRODUCTS } from "../../products";
 import { Product } from "./product";
 import "./shop.css";
 
-export const Shop = () => {
+export const Shop = ({ user }) => {
   return (
     <div className="shop">
       <div className="shopTitle">
@@ -12,7 +13,7 @@ export const Shop = () => {
 
       <div className="products">
         {PRODUCTS.map((product) => (
-          <Product data={product} />
+          <Product key={product.id} data={product} user={user} />
         ))}
       </div>
     </div>