Merge pull request #10 from Restu-Averian/master

add login feature

src/Routing.jsx

@@ -4,20 +4,40 @@ import Detail from "./Detail";
 import PlantLists from "./page/Plants/PlantLists";
 import AddPlants from "./page/Plants/AddPlants";
 import EditPlants from "./page/Plants/EditPlants";
+import Login from "./page/Login";
+import NotFound from "./page/NotFound";
+import useCheckLogin from "./hooks/useCheckLogin";
+import { Spin } from "antd";
 
 const Routing = () => {
-  return (
-    <Routes>
-      <Route path="/" element={<Navigate to="/dashboard" />} />
-      <Route path="/dashboard" element={<Dashboard />} />
-      <Route path="/detail/:id" element={<Detail />} />
+  const { isLogin, isLoadingLogin } = useCheckLogin();
 
-      <Route path="/plant_lists" element={<PlantLists />} />
-      <Route path="/plant_lists/add_plant" element={<AddPlants />} />
-      <Route path="/plant_lists/detail_plant/:id" element={<EditPlants />} />
+  return (
+    <>
+      {isLoadingLogin ? (
+        <Spin />
+      ) : (
+        <Routes>
+          {isLogin ? (
+            <>
+              <Route path="/" element={<Navigate to="/dashboard" />} />
+              <Route path="/dashboard" element={<Dashboard />} />
+              <Route path="/detail/:id" element={<Detail />} />
+              <Route path="/plant_lists" element={<PlantLists />} />
+              <Route path="/plant_lists/add_plant" element={<AddPlants />} />
+              <Route
+                path="/plant_lists/detail_plant/:id"
+                element={<EditPlants />}
+              />
+            </>
+          ) : (
+            <Route path="/login" element={<Login />} />
+          )}
 
-      {/* <Route path="/login" /> */}
-    </Routes>
+          <Route path="*" element={<NotFound />} />
+        </Routes>
+      )}
+    </>
   );
 };
 export default Routing;

src/components/Plants/PlantsForm.jsx

@@ -1,4 +1,7 @@
-import { CloseCircleOutlined } from "@ant-design/icons/lib/icons";
+import {
+  ArrowLeftOutlined,
+  CloseCircleOutlined,
+} from "@ant-design/icons/lib/icons";
 import {
   Badge,
   Button,
@@ -202,8 +205,18 @@ const PlantsForm = ({ type }) => {
             setLoading,
           }}
         >
-          <Row>
-            <Col span={24}>
+          <Row align="middle">
+            <Col span={2}>
+              <Button
+                shape="circle"
+                icon={<ArrowLeftOutlined />}
+                onClick={() => {
+                  navigate("/plant_lists");
+                }}
+              />
+            </Col>
+
+            <Col span={22}>
               <Typography.Title>
                 {type === "add" ? "Tambah Plant" : "Edit Plant"}
               </Typography.Title>

src/components/Sidebar.jsx

@@ -1,12 +1,46 @@
-import { Layout, Menu } from "antd";
+import { Button, Layout, Menu, message, Modal } from "antd";
+import { getAuth, signOut } from "firebase/auth";
+import { useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
+import useCheckLogin from "../hooks/useCheckLogin";
 
 const { Header, Sider, Content } = Layout;
 
 const Sidebar = ({ children }) => {
   const { pathname } = useLocation();
+  const { isLogin } = useCheckLogin();
 
   const navigate = useNavigate();
+  const auth = getAuth();
+  const [loadingLogout, setLoadingLogout] = useState(false);
+
+  const logOutHandler = () => {
+    setLoadingLogout(true);
+    Modal.confirm({
+      content: "Are you sure to logout ?",
+      onOk: () => {
+        signOut(auth)
+          ?.then(() => {
+            localStorage?.removeItem("LOGIN_DATA");
+          })
+          ?.catch((error) => {
+            message?.error({
+              content: JSON.stringify(error),
+            });
+          })
+          ?.finally(() => {
+            setLoadingLogout(false);
+          });
+      },
+      onCancel: () => {
+        setLoadingLogout(false);
+      },
+      okButtonProps: {
+        danger: true,
+      },
+      okText: "Logout",
+    });
+  };
 
   const SidebarList = [
     {
@@ -39,19 +73,30 @@ const Sidebar = ({ children }) => {
             padding: "24px 0",
           }}
         >
-          <Sider width={200}>
-            <Menu
-              mode="inline"
-              selectedKeys={[`${pathname?.split("/")?.[1]}`]}
-              style={{
-                height: "100%",
-              }}
-              onClick={({ key }) => {
-                navigate(key);
-              }}
-              items={SidebarList}
-            />
-          </Sider>
+          {isLogin && (
+            <Sider width={200}>
+              <Menu
+                mode="inline"
+                selectedKeys={[`${pathname?.split("/")?.[1]}`]}
+                style={{
+                  height: "100%",
+                }}
+                onClick={({ key }) => {
+                  navigate(key);
+                }}
+                items={SidebarList}
+              />
+              <Button
+                block
+                loading={loadingLogout}
+                disabled={loadingLogout}
+                danger
+                onClick={() => logOutHandler()}
+              >
+                Logout
+              </Button>
+            </Sider>
+          )}
           <Content
             style={{
               padding: "0 24px",

src/hooks/useCheckLogin.js

@@ -0,0 +1,39 @@
+import { getAuth, onAuthStateChanged } from "firebase/auth";
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+const useCheckLogin = () => {
+  const auth = getAuth();
+  const navigate = useNavigate();
+
+  const [isLogin, setIsLogin] = useState(false);
+  const [isLoadingLogin, setIsLoadingLogin] = useState(false);
+
+  const checkLogin = () => {
+    setIsLoadingLogin(true);
+
+    onAuthStateChanged(auth, (user) => {
+      if (user) {
+        if (window.location.pathname === "/login") {
+          navigate("/dashboard");
+        }
+        setIsLogin(true);
+      } else {
+        setIsLogin(false);
+
+        if (window.location.pathname !== "/login") {
+          navigate("/login");
+        }
+      }
+      setIsLoadingLogin(false);
+    });
+  };
+
+  useEffect(() => {
+    checkLogin();
+  }, [window.location.pathname]);
+
+  return { isLogin, isLoadingLogin };
+};
+
+export default useCheckLogin;

src/page/Login/Login.jsx

@@ -0,0 +1,60 @@
+import { Button, Form, Input, message } from "antd";
+import { getAuth, signInWithEmailAndPassword } from "firebase/auth";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+const Login = () => {
+  const [FormLogin] = Form.useForm();
+  const auth = getAuth();
+  const [loading, setLoading] = useState(false);
+  const navigate = useNavigate();
+
+  const loginHandler = () => {
+    FormLogin?.validateFields().then(() => {
+      setLoading(true);
+      const loginInfo = FormLogin?.getFieldsValue();
+
+      signInWithEmailAndPassword(auth, loginInfo?.email, loginInfo?.password)
+        .then((userCredential) => {
+          const user = userCredential.user;
+
+          const LOGIN_DATA = {
+            token: user?.accessToken,
+            email: user?.email,
+          };
+          localStorage?.setItem("LOGIN_DATA", JSON.stringify(LOGIN_DATA));
+          navigate("/dashboard");
+          // window.location.href = "/";
+        })
+        .catch((error) => {
+          const errorCode = error.code;
+          const errorMessage = error.message;
+
+          message.error({
+            content: `Error msg : ${errorMessage}, errCode : ${errorCode}`,
+          });
+          setLoading(false);
+        });
+    });
+  };
+  return (
+    <Form form={FormLogin}>
+      <Form.Item name="email" label="Email" rules={[{ required: true }]}>
+        <Input />
+      </Form.Item>
+      <Form.Item name="password" label="Password" rules={[{ required: true }]}>
+        <Input.Password />
+      </Form.Item>
+      <Button
+        htmlType="submit"
+        type="primary"
+        onClick={() => loginHandler()}
+        loading={loading}
+        disabled={loading}
+      >
+        Login
+      </Button>
+    </Form>
+  );
+};
+export default Login;

src/page/Login/index.jsx

@@ -0,0 +1,3 @@
+import Login from "./Login";
+
+export default Login;

src/page/NotFound.jsx

@@ -0,0 +1,4 @@
+const NotFound = () => {
+  return <h1>Not Found</h1>;
+};
+export default NotFound;