diff --git a/components/SignIn.js b/components/SignIn.js index a2b9968..eeb2d1d 100644 --- a/components/SignIn.js +++ b/components/SignIn.js @@ -51,16 +51,9 @@ export default function SignIn() { }, validationSchema: Yup.object().shape({ email: Yup.string().email("Invalid email").required("Required"), - password: Yup.string() - // TODO: Will be added during prod - // .matches( - // /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/, - // "Password must contain at least 8 characters, one uppercase, one lowercase and one number" - // ) - .required("Required"), + password: Yup.string().min(8, "Too small!").required("Required"), }), async onSubmit(values, formikActions) { - console.log(values); try { const { user, session, error } = await supabaseClient.auth.signIn({ @@ -88,7 +81,12 @@ export default function SignIn() { return ( <div className="flex flex-col flex-1 justify-between"> <div> - <FormControl isRequired className="my-4" size="md"> + <FormControl + isInvalid={Boolean(errors.email)} + isRequired + className="my-4" + size="md" + > <FormLabel htmlFor="email">Email address</FormLabel> <InputGroup size="md"> <Input @@ -107,7 +105,11 @@ export default function SignIn() { </InputGroup> <FormErrorMessage>{errors.email}</FormErrorMessage> </FormControl> - <FormControl isRequired className="my-4"> + <FormControl + isInvalid={Boolean(errors.password)} + isRequired + className="my-4" + > <FormLabel htmlFor="password">Password</FormLabel> <InputGroup size="md"> <Input diff --git a/components/SignUp.js b/components/SignUp.js index 01d9974..6369acd 100644 --- a/components/SignUp.js +++ b/components/SignUp.js @@ -59,14 +59,13 @@ export default function SignUp() { email: Yup.string().email("Invalid email").required("Required"), password: Yup.string() // TODO: Will be added during prod - // .matches( - // /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/, - // "Password must contain at least 8 characters, one uppercase, one lowercase and one number" - // ) + .matches( + /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/, + "Password must contain at least 8 characters, one uppercase, one lowercase and one number" + ) .required("Required"), }), async onSubmit(values, formikActions) { - console.log(values); try { const { error } = await supabaseClient.auth.signUp( { diff --git a/pages/authenticate.js b/pages/authenticate.js index 5a3a0bd..dafec7d 100644 --- a/pages/authenticate.js +++ b/pages/authenticate.js @@ -9,24 +9,12 @@ import { Image, Text, } from "@chakra-ui/react"; -import Head from "next/head"; import SignIn from "../components/SignIn"; import SignUp from "../components/SignUp"; import { NextSeo } from "next-seo"; import { ClerkLoaded } from "@clerk/clerk-react"; -import { useUser } from "@clerk/nextjs"; -import { useRouter } from "next/router"; -import { supabaseClient } from "../lib/client"; function AuthPage(props) { - const router = useRouter(); - const [value, setValue] = React.useState("1"); - const user = supabaseClient.auth.user(); - - const handleChange = (event, newValue) => { - setValue(newValue); - }; - return ( <ClerkLoaded> <div className="flex h-full"> @@ -39,11 +27,11 @@ function AuthPage(props) { <Flex alignItems={"center"} justifyContent="center" - className="my-11" + className="mt-11" direction={"column"} > <Image - boxSize="70%" + width={"70%"} objectFit="contain" alt="Logo" src="/images/bookworm-logo.png" @@ -119,12 +107,4 @@ function AuthPage(props) { ); } -// export async function getServerSideProps(context) { -// const res = await fetch("https://api.github.com/repos/vercel/next.js"); -// const json = await res.json(); -// return { -// props: { stars: json.stargazers_count }, -// }; -// } - export default AuthPage;