91 lines
2.2 KiB
TypeScript
91 lines
2.2 KiB
TypeScript
|
import {
|
||
|
|
Button,
|
||
|
|
FormControl,
|
||
|
|
FormLabel,
|
||
|
|
Input,
|
||
|
|
useToast,
|
||
|
|
VStack,
|
||
|
|
} from "@chakra-ui/react";
|
||
|
|
import React, { useEffect } from "react";
|
||
|
|
import { useMutation } from "urql";
|
||
|
|
import { AuthLayout } from "../layouts/AuthLayout";
|
||
|
|
import { AdminLogin, AdminSignup } from "../graphql/mutation";
|
||
|
|
import { useLocation, useNavigate } from "react-router-dom";
|
||
|
|
|
||
|
|
export const Auth = () => {
|
||
|
|
const [loginResult, login] = useMutation(AdminLogin);
|
||
|
|
const [signUpResult, signup] = useMutation(AdminSignup);
|
||
|
|
|
||
|
|
const toast = useToast();
|
||
|
|
const navigate = useNavigate()
|
||
|
|
const { pathname } = useLocation();
|
||
|
|
const isLogin = pathname === "/login";
|
||
|
|
|
||
|
|
const handleAdminSecret = (e: any) => {
|
||
|
|
e.preventDefault();
|
||
|
|
const formValues = [...e.target.elements].reduce((agg: any, elem: any) => {
|
||
|
|
if (elem.id) {
|
||
|
|
return {
|
||
|
|
...agg,
|
||
|
|
[elem.id]: elem.value,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
return agg;
|
||
|
|
}, {});
|
||
|
|
|
||
|
|
(isLogin ? login : signup)({
|
||
|
|
secret: formValues["admin-secret"],
|
||
|
|
}).then((res) => {
|
||
|
|
if (!res.error?.name) {
|
||
|
|
navigate("/");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
const errors = isLogin ? loginResult.error : signUpResult.error;
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (errors?.graphQLErrors) {
|
||
|
|
(errors?.graphQLErrors || []).map((error: any) => {
|
||
|
|
toast({
|
||
|
|
title: error.message,
|
||
|
|
isClosable: true,
|
||
|
|
status: "error",
|
||
|
|
position:"bottom-right"
|
||
|
|
});
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}, [errors])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<AuthLayout>
|
||
|
|
<form onSubmit={handleAdminSecret}>
|
||
|
|
<VStack spacing="2.5" justify="space-between">
|
||
|
|
<FormControl isRequired>
|
||
|
|
<FormLabel htmlFor="admin-secret">
|
||
|
|
{isLogin ? "Enter" : "Setup"} Admin Secret
|
||
|
|
</FormLabel>
|
||
|
|
<Input
|
||
|
|
size="lg"
|
||
|
|
id="admin-secret"
|
||
|
|
placeholder="Admin secret"
|
||
|
|
minLength={6}
|
||
|
|
/>
|
||
|
|
</FormControl>
|
||
|
|
<Button
|
||
|
|
isLoading={signUpResult.fetching || loginResult.fetching}
|
||
|
|
colorScheme="blue"
|
||
|
|
size="lg"
|
||
|
|
w="100%"
|
||
|
|
d="block"
|
||
|
|
type="submit"
|
||
|
|
>
|
||
|
|
{isLogin ? "Login" : "Sign up"}
|
||
|
|
</Button>
|
||
|
|
</VStack>
|
||
|
|
</form>
|
||
|
|
</AuthLayout>
|
||
|
|
);
|
||
|
|
};
|