login

 avatar
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