150 lines
4.2 KiB
TypeScript
150 lines
4.2 KiB
TypeScript
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;
|