admin authentication

CryptoStein-PLEARN · Oct 16, 2023 · 593cdb2 · 593cdb2
1 parent 6dabce8
commit 593cdb2
Show file tree

Hide file tree

Showing 9 changed files with 1,438 additions and 75 deletions.
diff --git a/DashBoard/package-lock.json b/DashBoard/package-lock.json
diff --git a/DashBoard/package.json b/DashBoard/package.json
@@ -18,6 +18,7 @@
     "@testing-library/user-event": "^13.5.0",
     "apexcharts": "3.35.5",
     "axios": "^1.5.0",
+    "firebase": "^10.5.0",
     "framer-motion": "^7.10.2",
     "react": "^18.2.0",
     "react-apexcharts": "1.4.0",

diff --git a/DashBoard/src/components/fields/InputField.jsx b/DashBoard/src/components/fields/InputField.jsx
@@ -2,8 +2,18 @@
 import React from "react";
 
 function InputField(props) {
-  const { label, id, extra, type, placeholder, variant, state, disabled } =
-    props;
+  const {
+    label,
+    id,
+    extra,
+    value,
+    type,
+    placeholder,
+    variant,
+    state,
+    disabled,
+    onChange,
+  } = props;
 
   return (
     <div className={`${extra}`}>
@@ -16,7 +26,11 @@ function InputField(props) {
         {label}
       </label>
       <input
+        onChange={(e) => {
+          onChange(e);
+        }}
         disabled={disabled}
+        value={value}
         type={type}
         id={id}
         placeholder={placeholder}

diff --git a/DashBoard/src/layouts/admin/index.jsx b/DashBoard/src/layouts/admin/index.jsx
@@ -1,12 +1,29 @@
 import React, { useEffect, useState } from "react";
-import { Routes, Route, Navigate, useLocation } from "react-router-dom";
+import {
+  Routes,
+  Route,
+  Navigate,
+  useLocation,
+  useNavigate,
+} from "react-router-dom";
 import Navbar from "components/navbar";
 import Sidebar from "components/sidebar";
 import Footer from "components/footer/Footer";
 import routes from "routes.js";
 import { getGetInTouchDetails } from "Store/Slice/userSlice";
 import { useDispatch } from "react-redux";
+import { onAuthStateChanged } from "firebase/auth";
+import { firbaseauth } from "utils/firebase";
 export default function Admin(props) {
+  const navigate = useNavigate();
+  useEffect(() => {
+    onAuthStateChanged(firbaseauth, (user) => {
+      if (!user) {
+        navigate("/auth");
+      }
+    });
+  }, []);
+
   const { ...rest } = props;
   const location = useLocation();
   const [open, setOpen] = React.useState(true);

diff --git a/DashBoard/src/layouts/auth/index.jsx b/DashBoard/src/layouts/auth/index.jsx
@@ -25,25 +25,6 @@ export default function Auth() {
           <div className="relative flex">
             <div className="mx-auto flex min-h-full w-full flex-col justify-start pt-12 md:max-w-[75%] lg:h-screen lg:max-w-[1013px] lg:px-8 lg:pt-0 xl:h-[100vh] xl:max-w-[1383px] xl:px-0 xl:pl-[70px]">
               <div className="mb-auto flex flex-col pl-5 pr-5 md:pr-0 md:pl-12 lg:max-w-[48%] lg:pl-0 xl:max-w-full">
-                <Link to="/admin" className="mt-0 w-max lg:pt-10">
-                  <div className="mx-auto flex h-fit w-fit items-center hover:cursor-pointer">
-                    <svg
-                      width="8"
-                      height="12"
-                      viewBox="0 0 8 12"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M6.70994 2.11997L2.82994 5.99997L6.70994 9.87997C7.09994 10.27 7.09994 10.9 6.70994 11.29C6.31994 11.68 5.68994 11.68 5.29994 11.29L0.709941 6.69997C0.319941 6.30997 0.319941 5.67997 0.709941 5.28997L5.29994 0.699971C5.68994 0.309971 6.31994 0.309971 6.70994 0.699971C7.08994 1.08997 7.09994 1.72997 6.70994 2.11997V2.11997Z"
-                        fill="#A3AED0"
-                      />
-                    </svg>
-                    <p className="ml-3 text-sm text-gray-600">
-                      Back to Dashboard
-                    </p>
-                  </div>
-                </Link>
                 <Routes>
                   {getRoutes(routes)}
                   <Route
@@ -54,11 +35,12 @@ export default function Auth() {
                 <div className="absolute right-0 hidden h-full min-h-screen md:block lg:w-[49vw] 2xl:w-[44vw]">
                   <div
                     className="absolute flex h-full w-full items-end justify-center bg-cover bg-center lg:rounded-bl-[120px] xl:rounded-bl-[200px]"
-                    style={{ backgroundImage: `url(${authImg})` }}
+                    style={{
+                      backgroundImage: `url('https://4kwallpapers.com/images/walls/thumbs_2t/8743.jpg')`,
+                    }}
                   />
                 </div>
               </div>
-              <Footer />
             </div>
           </div>
         </main>

diff --git a/DashBoard/src/routes.js b/DashBoard/src/routes.js
@@ -35,12 +35,12 @@ const routes = [
     component: <Profile />,
   },
 
-  // {
-  //   name: "Sign In",
-  //   layout: "/auth",
-  //   path: "sign-in",
-  //   icon: <MdLock className="h-6 w-6" />,
-  //   component: <SignIn />,
-  // },
+  {
+    name: "Sign In",
+    layout: "/auth",
+    path: "sign-in",
+    icon: <MdLock className="h-6 w-6" />,
+    component: <SignIn />,
+  },
 ];
 export default routes;
diff --git a/DashBoard/src/utils/firebase.js b/DashBoard/src/utils/firebase.js
@@ -0,0 +1,12 @@
+import { initializeApp } from "firebase/app";
+import { getAuth } from "firebase/auth";
+const firebaseConfig = {
+  apiKey: "AIzaSyB0AiHGZLoh5uBPSVLgnyVoNeKmRvRv_7g",
+  authDomain: "plearndashboard.firebaseapp.com",
+  projectId: "plearndashboard",
+  storageBucket: "plearndashboard.appspot.com",
+  messagingSenderId: "682473492675",
+  appId: "1:682473492675:web:9cd2297b3d80099c155276",
+};
+const app = initializeApp(firebaseConfig);
+export const firbaseauth = getAuth(app);
diff --git a/DashBoard/src/views/admin/default/index.jsx b/DashBoard/src/views/admin/default/index.jsx
@@ -14,8 +14,13 @@ import ComplexTable from "views/admin/default/components/ComplexTable";
 import DailyTraffic from "views/admin/default/components/DailyTraffic";
 import tableDataCheck from "./variables/tableDataCheck.json";
 import tableDataComplex from "./variables/tableDataComplex.json";
+import { onAuthStateChanged } from "firebase/auth";
+import { firbaseauth } from "utils/firebase";
 
 const Dashboard = () => {
+  onAuthStateChanged(firbaseauth, (currentUser) => {
+    if (currentUser) console.log(currentUser);
+  });
   return (
     <div>
       {/* Card widget */}

diff --git a/DashBoard/src/views/auth/SignIn.jsx b/DashBoard/src/views/auth/SignIn.jsx
@@ -1,8 +1,24 @@
 import InputField from "components/fields/InputField";
-import { FcGoogle } from "react-icons/fc";
-import Checkbox from "components/checkbox";
+import { signInWithEmailAndPassword } from "firebase/auth";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { firbaseauth } from "utils/firebase";
 
 export default function SignIn() {
+  const [email, setEmail] = useState();
+  const [passWord, setpassWord] = useState();
+  const navigate = useNavigate();
+  const handleLogin = async (event) => {
+    event.preventDefault(); 
+    try {
+      const mail = email;
+      const password = passWord;
+      await signInWithEmailAndPassword(firbaseauth, mail, password);
+      navigate("/admin/");
+    } catch (error) {
+      alert(error);
+    }
+  };
   return (
     <div className="mt-16 mb-16 flex h-full w-full items-center justify-center px-2 md:mx-0 md:px-0 lg:mb-10 lg:items-center lg:justify-start">
       {/* Sign in section */}
@@ -13,67 +29,37 @@ export default function SignIn() {
         <p className="mb-9 ml-1 text-base text-gray-600">
           Enter your email and password to sign in!
         </p>
-        <div className="mb-6 flex h-[50px] w-full items-center justify-center gap-2 rounded-xl bg-lightPrimary hover:cursor-pointer dark:bg-navy-800">
-          <div className="rounded-full text-xl">
-            <FcGoogle />
-          </div>
-          <h5 className="text-sm font-medium text-navy-700 dark:text-white">
-            Sign In with Google
-          </h5>
-        </div>
-        <div className="mb-6 flex items-center  gap-3">
-          <div className="h-px w-full bg-gray-200 dark:bg-navy-700" />
-          <p className="text-base text-gray-600 dark:text-white"> or </p>
-          <div className="h-px w-full bg-gray-200 dark:bg-navy-700" />
-        </div>
-        {/* Email */}
         <InputField
           variant="auth"
+          placeholder="mail@simmmple.com"
           extra="mb-3"
+          onChange={(e) => setEmail(e.target.value)}
           label="Email*"
-          placeholder="mail@simmmple.com"
+          value={email}
           id="email"
           type="text"
         />
 
         {/* Password */}
         <InputField
           variant="auth"
+          onChange={(e) => {
+            setpassWord(e.target.value);
+          }}
           extra="mb-3"
           label="Password*"
+          value={passWord}
           placeholder="Min. 8 characters"
           id="password"
           type="password"
         />
-        {/* Checkbox */}
-        <div className="mb-4 flex items-center justify-between px-2">
-          <div className="flex items-center">
-            <Checkbox />
-            <p className="ml-2 text-sm font-medium text-navy-700 dark:text-white">
-              Keep me logged In
-            </p>
-          </div>
-          <a
-            className="text-sm font-medium text-brand-500 hover:text-brand-600 dark:text-white"
-            href=" "
-          >
-            Forgot Password?
-          </a>
-        </div>
-        <button className="linear mt-2 w-full rounded-xl bg-brand-500 py-[12px] text-base font-medium text-white transition duration-200 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:text-white dark:hover:bg-brand-300 dark:active:bg-brand-200">
+
+        <button
+          onClick={handleLogin}
+          className="linear mt-2 w-full rounded-xl bg-brand-500 py-[12px] text-base font-medium text-white transition duration-200 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:text-white dark:hover:bg-brand-300 dark:active:bg-brand-200"
+        >
           Sign In
         </button>
-        <div className="mt-4">
-          <span className=" text-sm font-medium text-navy-700 dark:text-gray-600">
-            Not registered yet?
-          </span>
-          <a
-            href=" "
-            className="ml-1 text-sm font-medium text-brand-500 hover:text-brand-600 dark:text-white"
-          >
-            Create an account
-          </a>
-        </div>
       </div>
     </div>
   );