SSA-Admin-Panel/src/Pages/Login.tsx

import {
  Box,
  Center,
  HStack,
  Image,
  Input,
  Text,
  VStack,
} from "@chakra-ui/react";
import axios from "axios";
import { useContext, useState } from "react";
import { useForm } from "react-hook-form";
import { useDispatch } from "react-redux";
import GlobalStateContext from "../Contexts/GlobalStateContext";
import { setToken } from "../Redux/Service/authSlice";
import logo from "../assets/logo.svg";
import { Button } from "../components/ui/button";
import { Field } from "../components/ui/field";
import { toaster, Toaster } from "../components/ui/toaster";
import { PasswordInput } from "../components/ui/password-input";
import { useNavigate } from "react-router-dom";
import ForgetPassword from "./ForgetPassword";

interface FormValues {
  mobileNumber: number;
  password: string;
}

const Login = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const context = useContext(GlobalStateContext);
  if (!context) {
    throw new Error("App must be used within a GlobalStateProvider");
  }
  const { setIsAuthenticate } = context;
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormValues>();

  const onSubmit = handleSubmit(async (data) => {
    setIsLoading(true);
    // Encode Basic Auth Credentials
    const username = import.meta.env.VITE_USER_NAME || ""; // Replace with actual username
    const password = import.meta.env.VITE_PASSWORD || ""; // Replace with actual password
    const basicAuth = `${username} : ${password}`; // Encode to Base64

    try {
      const res = await axios.post(
        `${import.meta.env.VITE_API_URL}/login`,
        {
          mobile_number: Number(data.mobileNumber),
          password: data.password,
        },
        {
          headers: {
            Authorization: `Basic ${basicAuth}`,
            "Content-Type": "application/json",
          },
        }
      );
      console.log("============",res);
      

      if (res.data) {
        setIsAuthenticate(true);
        console.log("====================================");
        console.log(res.data?.data);
        console.log("====================================");
        navigate("/dashboard");
        dispatch(setToken(String(res.data?.data["access-token"])));
      } else {
        console.log("====================================");
        console.log(res);
        console.log("====================================");
      }
    } catch (error) {
      console.log('error', error);
      
      if (error) {
        toaster.create({
          // title: error?.response?.data?.message,
          title: "Something Went Wrong",
          type: "info",
        })
        // console.log("Login failed", error?.response?.data?.message);
        setIsLoading(false);
      }
    }
  });

  return (

    <VStack appearance={'light'} w={"100%"} h={"100vh"} bg={"#ffffff"}>
      <HStack
        boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
        w={"100%"}
        ps={8}
        h={"7%"}
        justifyContent={"flex-start"}
      >
        <Image w={50} src={logo} />
      </HStack>

      <HStack w={"100%"} h={"93%"} p={8} gap={8}>
        <Center
          display={{ base: "none", md: "flex" }}
          bg={"#02A0A033"}
          w={"50%"}
          h={"100%"}
          rounded={"3xl"}
        >
          <Image w={250} src={logo} />
        </Center>

        <Box
          as={"form"}
          onSubmit={onSubmit}
          p={{ base: 4, md: 16 }}
          w={{ base: "100%", md: "50%" }}
          h={"100%"}
        >
          <VStack gap={2} w={"100%"}>
            <Text
              w={"100%"}
              textAlign={"center"}
              fontSize={"24px"}
              fontWeight={"normal"}
              color={"#313039"}
            >
              LOGIN
            </Text>

            <Box mt={6} gap={4} w={"full"}>
              <Field
                color={"#313039"}
                label={"Enter Mobile Number"}
                w={"100%"}
                invalid={!!errors.mobileNumber}
                errorText={errors.mobileNumber?.message}
                mb={4}
              >
                <Input
                  type="number"
                  ps={3}
                  {...register("mobileNumber", {
                    required: "Mobile Number address is required",
                  })}
                  placeholder="Mobile Number Address"
                />
                {/* <Text as={'span'} w={'100%'} fontSize={'xs'} fontWeight={'normal'} color={'#686677'}>Forget password</Text>  */}
              </Field>
              <Field
                color={"#313039"}
                label={"Enter password."}
                w={"100%"}
                invalid={!!errors.password}
                errorText={errors.password?.message}
                mb={2}
              >
                <PasswordInput
                  ps={3}
                  {...register("password", { required: "Pasword is required" })}
                  placeholder="Enter password"
                />
                {/* <Text as={'span'} w={'100%'} fontSize={'xs'} fontWeight={'normal'} color={'#686677'}>Forget password</Text>  */}
              </Field>
              <Button
                loading={isLoading}
                mt={4}
                size={"sm"}
                bg={"#02A0A0"}
                rounded={"md"}
                w={"100%"}
                color={"#ffffff"}
                type="submit"
              >
                Login
              </Button>

              <ForgetPassword />
            </Box>
          </VStack>
        </Box>
        <Toaster />
      </HStack>
    </VStack>
  );
};

export default Login;