Merge pull request #32 from PiotrNakonowski/AdamPlewa

15.  Dopracowanie logowania do aplikacji webowej

WebApp/src/App.js

@@ -1,16 +1,31 @@
 import Login from "./pages/login/Login";
 import Home from "./pages/home/Home";
-import { BrowserRouter, Routes, Route} from "react-router-dom";
+import { BrowserRouter, Routes, Route, Navigate} from "react-router-dom";
+import { useContext } from "react";
+import { AuthContext } from "./context/AuthContext";
 
 function App() {
 
+  const {currentUser} = useContext(AuthContext)
+
+  const RequireAuth = ({ children }) => {
+    return currentUser ? children : <Navigate to="/login" />;
+  };
+
   return (
       <BrowserRouter>
         <Routes>
-        <Route path="/">
-          <Route index element={<Home />} />
-          <Route path="login" element={<Login />} />
-        </Route>
+          <Route path="/">
+            <Route path="login" element={<Login />} />
+              <Route
+                index
+                element={
+                  <RequireAuth>
+                    <Home />
+                  </RequireAuth>
+                }
+              />
+          </Route>
         </Routes>
       </BrowserRouter>
   );

WebApp/src/components/navbar/Navbar.jsx

@@ -1,15 +1,25 @@
+import { useContext } from "react";
 import "./navbar.scss";
 import LogoutIcon from '@mui/icons-material/Logout';
+import { AuthContext } from "../../context/AuthContext";
+import { useNavigate } from "react-router-dom";
 
 const Navbar = () => {
+  const { dispatch } = useContext(AuthContext);
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    dispatch({ type: "LOGOUT" });
+    navigate("/login");
+  };
 
   return (
     <div className="navbar">
       <div className="wrapper">
         <img className="logo-image" src="https://i.imgur.com/3U6VsFH.png" alt="logo"/>
         <div className="items">
-          <div className="item">
-            <LogoutIcon className="icon" />
+          <div className="item" onClick={handleLogout}>
+            <LogoutIcon className="icon"/>
           </div>
         </div>
       </div>

WebApp/src/components/navbar/navbar.scss

@@ -1,5 +1,4 @@
 .navbar {
-  width: 100vw;
   min-height: 100px;
   //border-bottom: 0.5px solid rgb(231, 228, 228);
   display: flex;
@@ -34,6 +33,7 @@
         .icon {
           font-size: 50px;
           color: white;
+          cursor: pointer;
         }
       }
     }

WebApp/src/context/AuthContext.js

@@ -0,0 +1,22 @@
+import { createContext, useEffect, useReducer } from "react";
+import AuthReducer from "./AuthReducer";
+
+const INITIAL_STATE = {
+  currentUser: JSON.parse(localStorage.getItem("user")) || null,
+};
+
+export const AuthContext = createContext(INITIAL_STATE);
+
+export const AuthContextProvider = ({ children }) => {
+  const [state, dispatch] = useReducer(AuthReducer, INITIAL_STATE);
+
+  useEffect(() => {
+    localStorage.setItem("user", JSON.stringify(state.currentUser));
+  }, [state.currentUser]);
+
+  return (
+    <AuthContext.Provider value={{ currentUser: state.currentUser, dispatch }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};

WebApp/src/context/AuthReducer.js

@@ -0,0 +1,18 @@
+const AuthReducer = (state, action) => {
+  switch (action.type) {
+    case "LOGIN": {
+      return {
+        currentUser: action.payload,
+      };
+    }
+    case "LOGOUT": {
+      return {
+        currentUser: null,
+      };
+    }
+    default:
+      return state;
+  }
+};
+
+export default AuthReducer;

WebApp/src/index.js

@@ -1,8 +1,11 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import App from "./App";
+import { AuthContextProvider } from "./context/AuthContext";
 
 ReactDOM.render(
-  <App />,
+  <AuthContextProvider>
+    <App />
+  </AuthContextProvider>,
   document.getElementById("root")
 );

WebApp/src/pages/home/home.scss

@@ -3,7 +3,6 @@
   display: flex;
   flex-direction: column;
   height: 100vh;
-  width: 100vw;
   //overflow: hidden;
 
   .main

WebApp/src/pages/login/Login.jsx

@@ -1,8 +1,9 @@
-import { useState } from "react";
+import { useContext, useState } from "react";
 import "./login.scss";
 import { signInWithEmailAndPassword } from "firebase/auth";
 import { auth } from "../../firebase";
 import { useNavigate } from "react-router-dom";
+import { AuthContext } from "../../context/AuthContext"
 
 const Login = () => {
   const [error, setError] = useState(false);
@@ -11,13 +12,16 @@ const Login = () => {
 
   const navigate = useNavigate();
 
+  const {dispatch} = useContext(AuthContext)
+
   const handleLogin = (e) => {
     e.preventDefault();
 
     signInWithEmailAndPassword(auth, email, password)
       .then((userCredential) => {
         // Signed in
         const user = userCredential.user;
+        dispatch({type:"LOGIN", payload:user})
         navigate("/");
       })
       .catch((error) => {