login
unknown
javascript
a year ago
11 kB
10
Indexable
import {
Button,
Flex,
FormControl,
FormLabel,
Heading,
Input,
Stack,
FormErrorMessage,
Box,
Text,
} from "@chakra-ui/react";
import { useState, useEffect } from "react";
import { NextPage } from "next";
import { useRouter } from "next/router";
import { FcGoogle } from "react-icons/fc";
import { FaFacebook } from "react-icons/fa";
import NextLink from "next/link";
import {
Formik,
Form,
Field,
ErrorMessage,
FieldInputProps,
FormikProps,
} from "formik";
import axios, { AxiosError } from "axios";
interface VALUES {
email: string;
password: string;
}
type FieldProps = {
field: FieldInputProps<string>;
form: FormikProps<VALUES>;
};
import { signIn } from "next-auth/react";
import Head from "next/head";
const LoginPage: NextPage = () => {
const router = useRouter();
const [error, setError] = useState(router.query.error || "");
useEffect(() => {
if (router.query.error) {
setError(router.query.error);
}
}, [router.query]);
const [googleSubmitting, setGoogleSubmitting] = useState(false);
const handleClearErrors = () => {
setError("");
const q = Object.assign({}, router.query);
delete q["error"];
router.replace(
{
pathname: "/login",
query: q,
},
undefined,
{ shallow: true }
);
};
const nextURL = (router.query.next as string) || "/customer/dashboard";
const [seconds, setSeconds] = useState(0);
const loggedOutFlag = router.query["logged-out"];
const [redirectInterval, setRedirectInterval] = useState<any>(null);
useEffect(() => {
if (!loggedOutFlag) return;
const i = setInterval(() => {
setSeconds((s) => {
if (s == 8) {
router.push("/");
clearInterval(i);
}
return s + 1;
});
}, 1000);
setRedirectInterval(i);
return () => {
clearInterval(i);
setRedirectInterval(null);
};
}, [setRedirectInterval, loggedOutFlag, router]);
const stopRedirect = () => {
if (redirectInterval) {
clearInterval(redirectInterval);
setRedirectInterval(null);
}
};
return <>
<Head>
<title>Login to Akountmate | Project management simplified.</title>
</Head>
<Flex
m={0}
p={0}
w="100%"
overflowX="hidden"
minH="100vh"
bg="accent.100"
justifyContent={"center"}
alignItems="center"
>
<Flex
my="1em"
mx={["0.5rem", null, "1rem"]}
w="calc(100% - 1rem)"
maxW="600px"
p={["1em 1em", null, "1em 2em"]}
h="max-content"
flexDir={"column"}
bg="white"
gap="1em"
>
<Flex color="black" w="100%" justifyContent={"center"}>
<img src="/landing/logo_black.svg" style={{ height: "5em" }} />
</Flex>
<Heading fontSize="1.4em" fontWeight={"600"}>
Login to Akountmate
</Heading>
<Text color="red.600" fontWeight="500">
{error}
</Text>
<Stack
direction={["column", null, "row"]}
minH={["3rem", null, "unset"]}
// justifyContent="stretch"
w="100%"
>
<Button
// minW="23ch"
// mx="auto"
width="100%"
// flex={["0 1", null, 1]}
isLoading={googleSubmitting}
onClick={() => {
handleClearErrors();
stopRedirect();
setGoogleSubmitting(true);
signIn("google", {
redirect: true,
callbackUrl: nextURL,
})
.then((resp) => {
if (resp?.error) {
// if (resp.error == "CredentialsSignin")
// throw new Error(
// "Invalid credentials were provided. Please try again."
// );
console.log("ERRO", resp.error);
throw resp?.error;
}
// if (!resp?.ok) throw new Error("Failed to login, try again.");
if (router.query.next) {
router.push(router.query.next as string);
return;
}
router.push(nextURL);
})
.catch((er) => {
setError(er.message || er);
console.warn(er);
})
.finally(() => {
// setGoogleSubmitting(false);
});
}}
leftIcon={<FcGoogle fontSize={"1.5em"} />}
>
Continue with Google
</Button>
{/* <Button
flex="1"
leftIcon={<FaFacebook fontSize={"1.5em"} color="#4267B2" />}
>
Facebook
</Button> */}
</Stack>
<hr />
<Formik
initialValues={{
email: "",
password: "",
}}
onSubmit={(values, actions) => {
handleClearErrors();
stopRedirect();
signIn("credentials", {
email: values.email,
password: values.password,
redirect: false,
})
.then((resp) => {
if (resp?.error) {
if (resp.error == "CredentialsSignin")
throw new Error(
"Invalid credentials were provided. Please try again."
);
throw resp?.error;
}
if (!resp?.ok) throw new Error("Failed to login, try again.");
if (resp?.url) {
const u = new URL(resp.url);
console.log(u.searchParams.get("error"));
}
if (router.query.next) {
router.push(router.query.next as string);
return;
}
router.push("/customer/dashboard");
})
.catch((er) => {
setError(er.message || er);
console.warn(er);
})
.finally(() => actions.setSubmitting(false));
}}
>
{(props) => (
<Form>
<Field name="email">
{(props: FieldProps) => (
<FormControl
mt="1em"
isInvalid={
(props.form.errors.email && props.form.touched.email) ||
false
}
isRequired
>
<FormLabel fontWeight={"600"}>Your Email</FormLabel>
<Input
{...props.field}
variant="flushed"
type="email"
onFocus={() => {
stopRedirect();
}}
placeholder="example@gmail.com"
isDisabled={props.form.isSubmitting}
/>
<FormErrorMessage>
{props.form.errors.email}
</FormErrorMessage>
</FormControl>
)}
</Field>
<Field
validate={(s: string) => {
if (s.length < 5) {
return "Length must be greater than or equals 5";
}
return "";
}}
name="password"
>
{(props: FieldProps) => (
<FormControl
mt="1em"
isInvalid={
(props.form.errors.password &&
props.form.touched.password) ||
false
}
isRequired
>
<FormLabel fontWeight={"600"}>Your Password</FormLabel>
<Input
{...props.field}
variant="flushed"
type="password"
onFocus={() => {
stopRedirect();
}}
placeholder="Password"
isDisabled={props.form.isSubmitting}
/>
<FormErrorMessage>
{props.form.errors.password}
</FormErrorMessage>
</FormControl>
)}
</Field>
<Flex
w="100%"
justifyContent={"space-between"}
mt="2em"
gap="1em"
alignItems={["stretch", "center"]}
flexDir={["column", "row"]}
>
<NextLink href="/password-email" passHref legacyBehavior>
<Button
as="a"
variant="link"
alignSelf={["flex-start", "center"]}
colorScheme={"accent"}
isDisabled={props.isSubmitting}
>
Forgot Password?
</Button>
</NextLink>
<Flex
flex={1}
justifyContent={["space-between", "flex-end"]}
gap="1em"
// alignItems="center"
>
<NextLink
href={"/register?next=" + encodeURIComponent(nextURL)}
passHref
legacyBehavior>
<Button
as="a"
variant="link"
// px="0.5em"
colorScheme={"gray"}
isDisabled={props.isSubmitting}
>
Create a new account
</Button>
</NextLink>
<Button
borderRadius={"4px"}
px="2em"
isLoading={props.isSubmitting}
type="submit"
colorScheme={"accent"}
>
Login
</Button>
</Flex>
</Flex>
</Form>
)}
</Formik>
{redirectInterval && (
<Text mt="1rem" fontSize="md" color="gray.400">
Redirecting to homescreen{" "}
{Array.from(new Array(seconds)).map((m) => ".")}
</Text>
)}
</Flex>
</Flex>
</>;
};
export default LoginPage;
Editor is loading...
Leave a Comment