Merge pull request #53 from GenerateNU/7-comp-7-login-form-frontend

7 comp 7 login form frontend

package.json

@@ -28,6 +28,7 @@
     "postcss": "8.4.28",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-icons": "^4.11.0",
     "tailwindcss": "3.3.3"
   },
   "devDependencies": {

src/components/Logo.tsx

@@ -0,0 +1,3 @@
+export default function CompoundLogo(){
+    return <>LOGO HERE</>
+}

src/components/SignInForm.tsx

@@ -0,0 +1,50 @@
+import { Text, Button, Input, Divider, VStack, HStack, InputGroup, InputRightElement, Center, AbsoluteCenter, Flex } from "@chakra-ui/react";
+import CompoundLogo from "./Logo";
+import { FcGoogle } from 'react-icons/fc'
+import { FaFacebook } from 'react-icons/fa'
+import { SiLinkedin } from 'react-icons/si'
+import { signIn } from "next-auth/react";
+import { useState } from "react";
+
+export default function SignInForm(): JSX.Element {
+    const [show, setShow] = useState(false)
+    const handleClick = () => setShow(!show)
+
+    return (
+        <Flex
+            width="100vw"
+            height="75vh"
+            alignItems="center"
+            justifyContent="center"
+        >
+        <Center>
+            <VStack spacing='24px'>
+                <CompoundLogo></CompoundLogo>
+                <Input variant='outline' placeholder='Email'></Input>
+                <InputGroup size='md'>
+            <Input
+                pr='4.5rem'
+                type={show ? 'text' : 'password'}
+                placeholder='Enter password'
+            />
+            <InputRightElement width='4.5rem'>
+                <Button h='1.75rem' size='sm' onClick={handleClick}>
+                {show ? 'Hide' : 'Show'}
+                </Button>
+            </InputRightElement>
+            </InputGroup>
+                <Button> Login </Button>
+                <Divider  borderWidth={'2px'} orientation="horizontal"></Divider>
+                <Text textColor={'black'}>Or Log In With One Of: </Text>
+                <HStack spacing='10px'>
+                    {/* Providers Here */}
+                    <Button w={'full'} leftIcon={<FcGoogle />} onClick={() => signIn("google")}>Google</Button>
+                    <Button w={'full'} colorScheme={'facebook'} leftIcon={<FaFacebook />}>Facebook</Button>
+                    <Button w={'full'} colorScheme={'messenger'} leftIcon={<SiLinkedin />}>LinkedIn</Button>
+                </HStack>
+                <Divider borderWidth={'2px'} orientation="horizontal"></Divider>
+                <Button>Sign Up</Button>
+            </VStack>
+    </Center>
+    </Flex>)
+  }

src/models/users.ts

@@ -3,7 +3,7 @@ import { PrismaClient, User } from "@prisma/client";
 import isEmail from "isemail";
 import { PrismaClientKnownRequestError } from "@prisma/client/runtime/library";
 import { UserData, UserReturnType } from "../../lib/CompoundTypes";
-import { data } from "autoprefixer";
+import prisma from "../../lib/client";
 
 // Uer Information that is Insensitive
 export interface InsensitiveUserInformation {
@@ -159,11 +159,11 @@ export default class Users {
   }
 
   public async isUserInDatabase(email: string): Promise<boolean> {
-    const userExists = this.usersDB.findUnique({
+    const userExists = await this.usersDB.findUnique({
       where: {
         email: email,
       },
     });
-    return userExists instanceof Users;
+    return userExists !== null;
   }
-}
+}

src/pages/api/auth/[...nextauth].ts

@@ -15,18 +15,20 @@ export const authOptions: NextAuthOptions = {
     async signIn({ user }) {
       if (user.email) {
         const isUserinDB = await persistentUserInstance.isUserInDatabase(user.email)
+        console.log(isUserinDB)
         if(isUserinDB === false) {
           const dummyUserData: UserData = {
             email: user.email,
-            phoneNumber: "null",
+            phoneNumber: null,
             firstName: user.name?.split(" ")[0] as string,
             lastName: user.name?.split(" ")[1] as string,
             dob: new Date(),
           };
           await persistentUserInstance.signUpProviderDetails(dummyUserData);
+          return '/auth-frontend/signUp'
         }
         else {
-          return true
+          return '/dashboard'
         }
       }
       return true;

src/pages/auth-frontend/signIn.tsx

@@ -0,0 +1,5 @@
+import SignInForm from "@/components/SignInForm";
+
+export default function SignInPage(): JSX.Element {
+    return (<SignInForm></SignInForm>)
+}

src/pages/auth-frontend/signUp.tsx

@@ -0,0 +1,3 @@
+export default function SignInPage(): JSX.Element {
+    return (<>Sign Up Flow Here</>)
+}

src/pages/dashboard/index.tsx

@@ -0,0 +1,3 @@
+export default function SignInPage(): JSX.Element {
+    return (<>dashboard here</>)
+}

src/pages/index.tsx

@@ -1,5 +1,7 @@
 import SignUpBar from "@/components/SignUpBar";
 import { signIn } from "next-auth/react";
+import SignInPage from "./auth-frontend/signIn";
+import { Button } from "@chakra-ui/react";
 
 export default function Home() {
   function button(text: string) {
@@ -9,16 +11,15 @@ export default function Home() {
       </button>
     );
   }
-
 
   return (
     <main className="bg-black flex min-h-screen flex-col items-center justify-between p-12">
       <h1>Home!</h1>
-      <div onClick={signIn} href={"/auth-frontend/signUp"}>
-            {button("Sign Up")}
+      <div onClick={() => signIn("google")} >
+        {button("Sign In")}
       </div>
-      <div onClick={signIn} href={"/auth-frontend/signIn"}>
-            {button("Sign In")}
+      <div onClick={() => signIn("google")} >
+        { button("Sign Up") }
       </div>
     </main>
   );