Login page designed

.env

@@ -0,0 +1,3 @@
+REACT_APP_DEVELOPMENT=development
+REACT_APP_API=https://staging-server.eurekatraders.org/api/v1/
+REACT_APP_FALLBACK_IMAGE=/common/fallbackimage.png

package.json

@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@hookform/resolvers": "^3.3.1",
+    "@lottiefiles/react-lottie-player": "^3.5.3",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -11,14 +13,20 @@
     "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",
     "axios": "^1.5.0",
+    "classnames": "^2.3.2",
+    "date-fns": "^2.30.0",
+    "js-cookie": "^3.0.5",
+    "jwt-decode": "^3.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.47.0",
     "react-icons": "^4.11.0",
     "react-query": "^3.39.3",
     "react-router-dom": "^6.16.0",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "yup": "^1.3.2"
   },
   "scripts": {
     "dev": "react-scripts start",
@@ -45,6 +53,7 @@
     ]
   },
   "devDependencies": {
+    "@types/js-cookie": "^3.0.4",
     "tailwindcss": "^3.3.3"
   }
 }

src/components/common/custom-button.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+interface CustomButtonProps {
+  color: string;
+  text: string;
+  func: any;
+}
+const CustomButton = ({ color, text, func }: CustomButtonProps) => {
+  return (
+    <button
+      type="submit"
+      className={`w-full h-10 flex items-center rounded-[4px] justify-center ${color} text-white  `}
+      onClick={func}
+    >
+      {text}
+    </button>
+  );
+};
+
+export default CustomButton;

src/components/common/custom-input.tsx

@@ -0,0 +1,183 @@
+import classNames from "classnames";
+import { useState } from "react";
+import { AiFillEye, AiFillEyeInvisible } from "react-icons/ai";
+
+interface CustomInputProps {
+  register: any;
+  errors: any;
+  id: string;
+  label: string;
+  type: string;
+  placeholder?: string;
+  className?: string;
+  isReadonly?: boolean;
+  isCapitalize?: boolean;
+  max?: any;
+  withTooltip?: boolean;
+  toolTip?: string;
+}
+export const CustomInput = ({
+  register,
+  errors,
+  id,
+  label,
+  max,
+  type,
+  placeholder,
+  className,
+  isReadonly,
+  isCapitalize,
+  withTooltip,
+  toolTip,
+}: CustomInputProps) => {
+  return (
+    <div
+      className={classNames(
+        "input-wrapper flex gap-1 flex-col text-black",
+        className
+      )}
+    >
+      {!withTooltip ? (
+        <label htmlFor={id} className="text-[#7F7E83] text-[17px] capitalize">
+          {label}
+        </label>
+      ) : (
+        <div className="wrapper flex items-center gap-2">
+          <label htmlFor={id} className="text-[#7F7E83] text-[17px] capitalize">
+            {label}
+          </label>
+
+          {/* <Tooltip label={toolTip} position="right" color="#0C164B">
+            <span>
+              <BiHelpCircle />
+            </span>
+          </Tooltip> */}
+        </div>
+      )}
+      {type === "text" && (
+        <input
+          type="text"
+          name={id}
+          id={id}
+          {...register(id)}
+          readOnly={isReadonly}
+          className={classNames(
+            "h-12  bg-[#F4F4F4] border mt-2 px-2.5 font-semibold rounded-[4px] outline-none border-input-border",
+            !isCapitalize && "capitalize"
+          )}
+        />
+      )}
+      {type === "email" && (
+        <input
+          type="email"
+          name={id}
+          id={id}
+          {...register(id)}
+          readOnly={isReadonly}
+          className="px-2 py-2 mt-2 bg-white border border-input-border"
+        />
+      )}
+
+      {type === "number" && (
+        <input
+          type="number"
+          name={id}
+          id={id}
+          {...register(id)}
+          readOnly={isReadonly}
+          className={classNames(
+            "h-12  bg-[#F4F4F4] border px-2.5 mt-2 font-semibold rounded-[4px] outline-none border-input-border",
+            !isCapitalize && "capitalize"
+          )}
+        />
+      )}
+      {type === "textarea" && (
+        <textarea
+          type="text"
+          name={id}
+          id={id}
+          rows={6}
+          readOnly={isReadonly}
+          placeholder={placeholder}
+          {...register(id)}
+          className={classNames(
+            "h-12  bg-[#F4F4F4] border px-2.5 mt-2 font-semibold rounded-[4px] outline-none border-input-border",
+            !isCapitalize && "capitalize"
+          )}
+        />
+      )}
+      {type === "date" && (
+        <input
+          type="date"
+          name={id}
+          max={max}
+          id={id}
+          rows={6}
+          placeholder={placeholder}
+          {...register(id)}
+          className={classNames(
+            "h-12  bg-[#F4F4F4] border px-2.5 mt-2 font-semibold rounded-[4px] outline-none border-input-border",
+            !isCapitalize && "capitalize"
+          )}
+        />
+      )}
+      {errors[`${id}`] && (
+        <span className="text-red-500 text-sm font-normal">
+          {errors[`${id}`].message as string}
+        </span>
+      )}
+    </div>
+  );
+};
+export const CustomPasswordInput = ({
+  register,
+  errors,
+  id,
+  className,
+  label,
+}: CustomInputProps) => {
+  const [show, setshow] = useState(false);
+  return (
+    <div
+      className={classNames(
+        "input-wrapper relative  flex gap-1 flex-col text-black",
+        className
+      )}
+    >
+      <label htmlFor={id} className="text-[#7F7E83] text-[17px] capitalize">
+        {label}
+      </label>
+
+      <input
+        type={show ? "text" : "password"}
+        name={id}
+        id={id}
+        {...register(id)}
+        className={classNames(
+          "h-12 w-full  bg-[#F4F4F4] mt-2 border px-2.5 font-semibold rounded-[4px] outline-none border-input-border"
+        )}
+      />
+
+      <div className="icon-wrapper absolute right-2 top-14">
+        {show && (
+          <AiFillEye
+            className="cursor-pointer"
+            onClick={() => setshow(false)}
+          />
+        )}
+        {!show && (
+          <AiFillEyeInvisible
+            className="cursor-pointer"
+            onClick={() => setshow(true)}
+          />
+        )}
+      </div>
+
+      {errors[`${id}`] && (
+        <span className="text-red-500 text-sm font-normal">
+          {errors[`${id}`].message as string}
+        </span>
+      )}
+    </div>
+  );
+};

src/components/login/login-form.jsx

@@ -0,0 +1,85 @@
+import React from "react";
+import { useForm } from "react-hook-form";
+import { loginSchema } from "src/schema/login-schema";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { CustomInput, CustomPasswordInput } from "../common/custom-input";
+import CustomButton from "../common/custom-button";
+import { AiOutlineClose } from "react-icons/ai";
+import { Link, Router, useNavigate, useRoutes } from "react-router-dom";
+import { Navigate } from "react-router-dom";
+const LoginForm = () => {
+  const {
+    register,
+    handleSubmit,
+    setError,
+    reset,
+    setValue,
+    clearErrors,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(loginSchema),
+  });
+  const [isRemember, setIsRemember] = React.useState(false);
+  const navigate = useNavigate();
+  return (
+    <form
+      onSubmit={handleSubmit((data) => {
+        navigate("/");
+      })}
+      className=" w-[547px] px-[49px] py-[59px] flex flex-col items-center justify-center shadow-[0_2px_18px_0_rgba(0,0,0,0.1)]"
+    >
+      <h1 className="aitc-text uppercase text-primary text-4xl font-bold">
+        Aitc
+      </h1>
+      <div className="w-[247px] mt-[18px] mb-[48px]">
+        <p className="text-[#D1D1D1] text-center text-sm">
+          Step into the world to digital assets and decentralized systems.
+        </p>
+      </div>
+      {/* <div className="invalid-message px-2.5 flex w-full gap-[10px] items-center h-12 bg-[#F15C42] bg-opacity-20 mb-[20px] rounded-[4px]">
+        <div className="w-6 h-6 rounded-full bg-[#F15C42] flex items-center justify-center">
+          <AiOutlineClose fill="white" size={14} />
+        </div>
+        <h1 className="message ">Invalid username or email address.</h1>
+      </div> */}
+      <div className="flex flex-col w-full gap-[35px]">
+        <CustomInput
+          register={register}
+          errors={errors}
+          label="Username"
+          type="text"
+          id="username"
+        />
+        <CustomPasswordInput
+          register={register}
+          errors={errors}
+          label="Password"
+          type="password"
+          id="password"
+        />
+      </div>
+      <div className="forget-password-section flex items-center mt-4 w-full justify-between">
+        <div className="flex  gap-1 items-center">
+          <div
+            onClick={() => {
+              setIsRemember(!isRemember);
+            }}
+            className={`w-4 h-4 rounded-full cursor-pointer border ${
+              isRemember && "bg-primary"
+            } border-primary`}
+          ></div>
+          <p className="text-[#6B6B6B] text-sm">Remember me</p>
+        </div>
+        <Link to={"/"} className="text-primary text-opacity-75 text-sm">
+          Forget Password?
+        </Link>
+      </div>
+
+      <div className="w-full  mt-12">
+        <CustomButton text="Login" color="bg-primary" />
+      </div>
+    </form>
+  );
+};
+
+export default LoginForm;

src/config/index.ts

@@ -0,0 +1,6 @@
+const config = {
+  dev: process.env.REACT_APP_DEVELOPMENT !== "production",
+  apiUrl: process.env.REACT_APP_API,
+};
+
+export default config;

src/login.tsx

@@ -1,10 +1,28 @@
-import React from "react";
-import Layout from "./components/common/layout";
+import { Player } from "@lottiefiles/react-lottie-player";
+import LoginForm from "./components/login/login-form";
 
 const Login = () => {
   return (
-    <div className="">
-      <Layout />
+    <div className="w-full h-screen flex ">
+      <div className="w-[50%] bg-[#FF7500] bg-opacity-25 py-[26px] px-3.5 rounded-tr-[40%]">
+        <div className="logo-wrapper w-[281px] h-20 px-2.5 flex items-center justify-center">
+          <img src={"/aitclogo.png"} alt="Aitc logo" height={50} width={141} />
+        </div>
+        <h1 className="login-welcometext font-medium text-[22px] ml-[207px] mt-[71.5px] ">
+          Welcome To <span className="text-[#FF7500]">Admin</span> Portal,
+        </h1>
+        <div className="player-wrapper  ">
+          <Player
+            autoplay
+            loop
+            src={"/deleteable/animation.json"}
+            style={{ height: "463", width: "70%" }}
+          ></Player>
+        </div>
+      </div>
+      <div className="w-[50%] flex items-center justify-center">
+        <LoginForm />
+      </div>
     </div>
   );
 };