Merge pull request #56 from untilhamza/release/v1.11.0

Release/v1.11.0

Author: untilhamza

package.json

@@ -23,7 +23,8 @@
     "autoprefixer": "10.4.5",
     "bootstrap": "^5.1.3",
     "eslint": "^8.17.0",
-    "firebase": "^9.8.1",
+    "firebase": "^9.18.0",
+    "firebaseui": "^6.0.2",
     "formik": "^2.2.9",
     "react": "^18.1.0",
     "react-bootstrap": "^2.3.1",

src/App.js

@@ -1,4 +1,4 @@
-import { useContext } from "react";
+import { useContext, useEffect } from "react";
 import { Switch, Route, Redirect } from "react-router-dom";
 import { Layout } from "antd";
 import Navbar from "./components/NavBar/Navbar";
@@ -36,8 +36,8 @@ const App = () => {
             </Route>
 
             <Route path="/admin">
-              {authCtx.isLoggedIn && <Admin />}
-              {!authCtx.isLoggedIn && <Redirect to="/login" />}
+              {authCtx.isAdmin && <Admin />}
+              {!authCtx.isAdmin && <Redirect to="/login" />}
             </Route>
             <Route path="/check-appointment">
               {/* maybe pass the appointment id so it can be fetched */}
@@ -50,16 +50,20 @@ const App = () => {
               <Logout />
             </Route>
             <Route path="/settings">
-              <SettingsPage />
+              {authCtx.isAdmin && <SettingsPage />}
+              {!authCtx.isAdmin && <Redirect to="/login" />}
             </Route>
             <Route path="/general-settings">
-              <GeneralSettingsPage />
+              {authCtx.isAdmin && <GeneralSettingsPage />}
+              {!authCtx.isAdmin && <Redirect to="/login" />}
             </Route>
             <Route path="/slot-settings">
-              <SlotSettingsPage />
+              {authCtx.isAdmin && <SlotSettingsPage />}
+              {!authCtx.isAdmin && <Redirect to="/login" />}
             </Route>
             <Route path="/special-settings">
-              <SpecialDaySettingsPage />
+              {authCtx.isAdmin && <SpecialDaySettingsPage />}
+              {!authCtx.isAdmin && <Redirect to="/login" />}
             </Route>
             <Route path="/">
               <Customer />

src/components/BookingForm/BookingForm.js

@@ -4,6 +4,8 @@ import moment from "moment";
 import { Form, Button } from "react-bootstrap";
 import { DatePicker } from "antd";
 import TimeSelector from "../TimeSelector/TimeSelector";
+import { useContext } from "react";
+import AuthContext from "../../store/auth-context";
 
 import "./BookingForm.css";
 
@@ -18,6 +20,7 @@ const schema = yup.object().shape({
 });
 
 const BookingForm = ({ onCancel, onConfirm, oldData, slots, onGetSlots, slotStatus, settings }) => {
+  const authCtx = useContext(AuthContext);
   function handleGetSlots(date) {
     onGetSlots(date);
   }
@@ -34,7 +37,11 @@ const BookingForm = ({ onCancel, onConfirm, oldData, slots, onGetSlots, slotStat
       validationSchema={schema}
       onSubmit={(values, { resetForm }) => {
         //submitting data!
-        onConfirm(values);
+        if (!authCtx.isLoggedIn) {
+          authCtx.handleCustomerLogin();
+          return;
+        }
+        onConfirm({ ...values, userId: authCtx.userId, googleAccountName: authCtx.user.displayName, email: authCtx.user.email, photoURL: authCtx.user.photoURL });
         resetForm();
       }}
       initialValues={{

src/components/NavBar/Navbar.js

@@ -10,7 +10,6 @@ import SideBar from "../SideBar/SideBar";
 import "./NavBar.css";
 const Navbar = () => {
   const [showSidebar, setShowSidebar] = useState(false);
-
   const handleToggleSidebar = () => setShowSidebar((isShown) => !isShown);
 
   // const authCtx = useContext(AuthContext)

src/components/SideBar/SideBar.js

@@ -38,7 +38,7 @@ const SideBar = ({ show, onToggle }) => {
                   if (!item.protected) {
                     items.push(listItem);
                   }
-                  if (item.protected && authCtx.isLoggedIn) {
+                  if (item.protected && authCtx.isAdmin) {
                     items.push(listItem);
                   }
                   return items;

src/env.json

@@ -1,28 +1,3 @@
 {
-  "current-env": "production",
-  "production": {
-    "apiKey": "AIzaSyDyl-tV8qgWpgTMISb3M9ybaVxNPoGKuGA",
-    "authDomain": "appointments-9fa9d.firebaseapp.com",
-    "projectId": "appointments-9fa9d",
-    "storageBucket": "appointments-9fa9d.appspot.com",
-    "messagingSenderId": "514032231488",
-    "appId": "1:514032231488:web:a841adecd9dffad5aaaba5",
-    "measurementId": "G-N2D42P9687"
-  },
-  "development": {
-    "apiKey": "AIzaSyBNipwPtKZOGsNA6ezsEv2f_LjQ0Kg7J0k",
-    "authDomain": "appointments-dev-ff26f.firebaseapp.com",
-    "projectId": "appointments-dev-ff26f",
-    "storageBucket": "appointments-dev-ff26f.appspot.com",
-    "messagingSenderId": "1051559849613",
-    "appId": "1:1051559849613:web:e8e80694637eedde697cc4"
-  },
-  "test": {
-    "apiKey": "AIzaSyBNipwPtKZOGsNA6ezsEv2f_LjQ0Kg7J0k",
-    "authDomain": "appointments-dev-ff26f.firebaseapp.com",
-    "projectId": "appointments-dev-ff26f",
-    "storageBucket": "appointments-dev-ff26f.appspot.com",
-    "messagingSenderId": "1051559849613",
-    "appId": "1:1051559849613:web:e8e80694637eedde697cc4"
-  }
+  "current-env": "production"
 }

src/pages/NewBooking.js

@@ -27,7 +27,7 @@ const NewBooking = () => {
   }
 
   async function handleConfirm(bookingData) {
-    sendRequest(bookingData);
+    sendRequest({ ...bookingData });
   }
 
   // useEffect(() => {

src/store/auth-context.js

@@ -1,20 +1,30 @@
 import React, { useState } from "react";
 import { auth } from "../database/firebase-config";
+import { useHistory } from "react-router-dom";
 // import { httpGetSettings } from "../hooks/request"
 // import useHttp from "../hooks/useHttp"
-import { createUserWithEmailAndPassword, signInWithEmailAndPassword, onAuthStateChanged, signOut } from "firebase/auth";
+import { createUserWithEmailAndPassword, onAuthStateChanged, signOut, GoogleAuthProvider, signInWithPopup, signInWithEmailAndPassword } from "firebase/auth";
 //describes how the context looks like
+
+const provider = new GoogleAuthProvider();
+
+const ADMINS = ["Nwzxrf32Uee9i6hbTXSN2mWVzlC2", "lHxJifUfgHhJkECibwAudvf3MGp1", "lru8dL4JVWTycq0LHhHgyaWqX133"];
+
 const AuthContext = React.createContext({
   name: "",
   email: "",
   isLoggedIn: false,
+  isAdmin: false,
+  userId: "",
+  user: null,
   onLogin: ({ email, password }) => {},
   onLogout: ({ email, password }) => {},
   onRegister: ({ email, password }) => {},
 });
 
 export const AuthContextProvider = (props) => {
   const [user, setUser] = useState(null);
+  const history = useHistory();
 
   const handleLogout = async () => {
     try {
@@ -33,6 +43,35 @@ export const AuthContextProvider = (props) => {
     }
   };
 
+  const handleCustomerLogin = async () => {
+    signInWithPopup(auth, provider)
+      .then((result) => {
+        // This gives you a Google Access Token. You can use it to access the Google API.
+        const credential = GoogleAuthProvider.credentialFromResult(result);
+        const token = credential.accessToken;
+        // The signed-in user info.
+        const user = result.user;
+        //alert("user logged in" + JSON.stringify(user));
+        setUser(user);
+        // IdP data available using getAdditionalUserInfo(result)
+        // ...
+        //TODO: handle customer user login
+        history.push("/new-booking");
+      })
+      .catch((error) => {
+        // Handle Errors here.
+        const errorCode = error.code;
+        const errorMessage = error.message;
+        // The email of the user's account used.
+        const email = error.customData.email;
+        // The AuthCredential type that was used.
+        const credential = GoogleAuthProvider.credentialFromError(error);
+        // ...
+        alert("error when logging in" + JSON.stringify(error));
+        setUser(null);
+      });
+  };
+
   const handleRegister = async ({ email, password }) => {
     try {
       const user = await createUserWithEmailAndPassword(auth, email, password);
@@ -43,21 +82,20 @@ export const AuthContextProvider = (props) => {
   };
 
   onAuthStateChanged(auth, (currentUser) => {
-    //TODO: admins should be put in firebase table not here
-    const ADMINS = ["Nwzxrf32Uee9i6hbTXSN2mWVzlC2", "lHxJifUfgHhJkECibwAudvf3MGp1", "lru8dL4JVWTycq0LHhHgyaWqX133"];
-    if (currentUser && ADMINS.includes(currentUser.uid)) {
-      setUser(currentUser);
-    } else {
-      setUser(null);
-    }
+    console.log("user", currentUser);
+    setUser(currentUser);
   });
   const contextValue = {
     name: user?.displayname,
     email: user?.email,
+    userId: user?.uid,
+    isAdmin: user && ADMINS.includes(user?.uid),
     isLoggedIn: user ? true : false,
+    user: user,
     onLogin: handleLogin,
     onLogout: handleLogout,
     onRegister: handleRegister,
+    handleCustomerLogin,
   };
 
   return <AuthContext.Provider value={contextValue}>{props.children}</AuthContext.Provider>;

src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "1.10.0"
+  "version": "1.11.0"
 }