SSA-Admin-Panel/src/Pages/OnBoarding/CreatePass.tsx

import { Center, HStack, Image, Input, Text, VStack } from "@chakra-ui/react";
import { useContext, useState } from "react";
import { useForm } from "react-hook-form";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
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";

interface FormValues {
  password: string;
  confirmPassword: string;
}

const CreatePass = () => {
  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((data) => {
    setIsLoading(true);
    if (data?.password === "password123") { 
      setTimeout(() => {
        setIsAuthenticate(true);
        setIsLoading(false);
      }, 3000); 
    } else {
      toaster.create({
        title: `Invalid Credentials`,
        type: "error",
      });
      setIsLoading(false);
    }
  });

  return (
    <VStack 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>

        <Center
          as={"form"}
          onSubmit={onSubmit}
          p={{ base: 4, md: 16 }}
          w={{ base: "100%", md: "50%" }}
          h={"100%"}
        >
          <VStack gap={2} w={"100%"} alignItems={"flex-start"}>
            <Text
              w={"100%"}
              textAlign={"center"}
              fontSize={"24px"}
              fontWeight={"normal"}
              color={"#313039"}
              textTransform={"uppercase"}
            >
              create a password
            </Text>

            <VStack mt={6} gap={4} w={"full"}>
              <Field
                color={"#313039"}
                label={"Enter password"}
                w={"100%"}
                invalid={!!errors.password}
                errorText={errors.password?.message}
              >
                <Input
                  ps={3}
                  type="password"
                  {...register("password", {
                    required: "Password is required",
                    minLength: {
                      value: 6,
                      message: "Password must be at least 6 characters long",
                    },
                  })}
                  placeholder="Enter your password"
                />
              </Field>
              <Field
                color={"#313039"}
                label={"Confirm password"}
                w={"100%"}
                invalid={!!errors.confirmPassword}
                errorText={errors.confirmPassword?.message}
              >
                <Input
                  ps={3}
                  type="password"
                  {...register("confirmPassword", {
                    required: "Please confirm your password",
                    validate: (value) => 
                      value === getValues("password") || "Passwords do not match",
                  })}
                  placeholder="Confirm your password"
                />
              </Field>
              <Button
                loading={isLoading}
                mt={4}
                size={"sm"}
                bg={"#02A0A0"}
                rounded={"md"}
                w={"100%"}
                color={"#ffffff"}
                type="submit"
                textTransform="capitalize"
              >
                Confirm Password
              </Button>

              <Text>Forgot password</Text>
            </VStack>
          </VStack>
        </Center>
        <Toaster />
      </HStack>
    </VStack>
  );
};

export default CreatePass;