added login page for admin

client/src/App.tsx

@@ -4,6 +4,7 @@ import "./styles/GlobalStyles.scss";
 import "react-tooltip/dist/react-tooltip.css";
 import LandingPage from "./pages/home";
 import Login from "./pages/auth/login";
+import AdminLogin from "./pages/auth/admin/login";
 import Signup from "./pages/auth/signup";
 import ResetPassword from "./pages/auth/reset-password";
 import ForgotPassword from "./pages/auth/forgot-password";
@@ -25,6 +26,7 @@ function App() {
           <Route path="/" element={<LandingPage />} />
           <Route element={<Layout />}>
             <Route path="/login" element={<Login />} />
+            <Route path="/admin/login" element={<AdminLogin />} />
             <Route path="/signup" element={<Signup />} />
             <Route path="/resetpassword" element={<ResetPassword />} />
             <Route path="/forgotpassword" element={<ForgotPassword />} />

client/src/pages/auth/admin/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function index() {
+  return (
+    <div>Admin dashboard</div>
+  )
+}

client/src/pages/auth/admin/login.tsx

@@ -0,0 +1,125 @@
+import { useState } from "react";
+import "../style.scss";
+import { toast } from "react-toastify";
+import { MdOutlineVisibilityOff, MdOutlineVisibility } from "react-icons/md";
+import { useNavigate } from "react-router-dom";
+import { login } from "../../../utils/api/auth";
+import Spinner from "../../../components/Spinner";
+import { LoginInRequestPayload } from "../../../types";
+import { setToken } from "../../../utils";
+import LanguageToggle from "../../../components/LanguageToggle";
+import { Trans, t } from "@lingui/macro";
+
+/**
+ * @category Client App
+ * @subcategory Pages
+ * @module Login
+ * @description Users login with email and password, including Google signup option.
+ * @component
+ * @example
+   <Route path="admin/login" element={<AdminLogin />} />
+ */
+
+const Login = () => {
+  const [toggleVisibility, setToggleVisibility] = useState(false);
+  const [isError, setError] = useState(false);
+  const [isLoading, setLoading] = useState(false);
+  const navigate = useNavigate();
+
+  const loginHandler = async (event: any) => {
+    setError(false);
+    event.preventDefault();
+    try {
+      const formData: LoginInRequestPayload = {
+        email: event.target.email.value,
+        password: event.target.password.value,
+      };
+      setLoading(true);
+      let response = await login(formData);
+      if (response.success) {
+        setToken(response.data.access_token);
+       console.log(response)
+      }
+    } catch (error: any) {
+      setError(true);
+      toast.error(error.message, {
+        position: toast.POSITION.TOP_CENTER,
+        autoClose: 5000,
+        theme: "colored",
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <section className="login-signup">
+        <div className="login-signup__languageToggle">
+          {" "}
+          <LanguageToggle />
+        </div>
+
+        <h1 className="login-signup__heading">
+          <Trans>Login As Admin</Trans>
+        </h1>
+
+        <form
+          className="login-signup__form"
+          onSubmit={loginHandler}
+          method="POST"
+        >
+          <div className="field">
+            <label className="sr-only" htmlFor="email">
+              <Trans> Email</Trans>
+            </label>
+            <input
+              type="email"
+              name="email"
+              placeholder={t`Email`}
+              required
+              className={`${isError && "error-input"}`}
+            />
+          </div>
+
+          <div className="field">
+            <label className="sr-only" htmlFor="password">
+              Password
+            </label>
+            <input
+              type={toggleVisibility ? "text" : "password"}
+              placeholder={t`Password`}
+              required
+              name="password"
+              className={`${isError && "error-input"}`}
+            />
+            <button
+              type="button"
+              aria-label="toggle password"
+              className="icon-button eye-icon"
+              onClick={() => setToggleVisibility(!toggleVisibility)}
+            >
+              {toggleVisibility ? (
+                <MdOutlineVisibility />
+              ) : (
+                <MdOutlineVisibilityOff />
+              )}
+            </button>
+          </div>
+
+          <div className="field button-field">
+            <button>
+              {isLoading ? (
+                <Spinner width="30px" height="30px" color="#fff" />
+              ) : (
+                t`Login`
+              )}
+            </button>
+          </div>
+        </form>
+      </section>
+    </>
+  );
+};
+
+export default Login;