fixed resizing issue with auth

ahnafnafee · Mar 7, 2022 · af4449e · af4449e · vercel · Mar 7, 2022
1 parent b1fe472
commit af4449e
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 37 deletions.
diff --git 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
@@ -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
@@ -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;