hack4impact-calpoly · javalosr2004 · Feb 19, 2024 · Feb 18, 2024 · Feb 18, 2024 · Feb 18, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
   "dependencies": {
     "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/react": "^2.8.2",
+    "@clerk/nextjs": "^4.29.7",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@fullcalendar/bootstrap5": "^6.1.10",
@@ -27,6 +28,7 @@
     "@heroicons/react": "^2.1.1",
     "bootstrap": "^5.3.2",
     "bootstrap-icons": "^1.11.3",
+    "eslint-plugin-prettier": "^5.1.3",
     "framer-motion": "^11.0.3",
     "mongoose": "^7.6.8",
     "next": "14.0.0",

diff --git a/src/app/Providers.tsx b/src/app/Providers.tsx
@@ -1,14 +1,17 @@
 "use client";
+import { ClerkProvider } from "@clerk/nextjs";
 import StyledComponentsRegistry from "./lib/registry";
 import { ChakraProvider } from "@chakra-ui/react";
 export default function Providers({ children }: { children: React.ReactNode }) {
   return (
 
+    <ClerkProvider>
     <StyledComponentsRegistry>
       <ChakraProvider>
         {children}
       </ChakraProvider>
     </StyledComponentsRegistry>
+    </ClerkProvider>
 
   )
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { ClerkProvider } from '@clerk/nextjs'
 import "./globals.css";
 import Providers from "./Providers";
 
@@ -14,12 +15,12 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
-      <body>
-        <Providers>
-            {children}
-        </Providers>
-        </body>
-    </html>
+      <html lang="en">
+        <body>
+          <Providers>
+              {children}
+          </Providers>
+          </body>
+      </html>
   );
 }
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
@@ -12,9 +12,59 @@ import {
 } from "@chakra-ui/react";
 import NextLink from "next/link";
 import { FaEye, FaEyeSlash } from "react-icons/fa";
+import { useSignIn } from '@clerk/nextjs';
+import { useRouter, useSearchParams} from 'next/navigation';
 
 export default function Login() {
   const [showPassword, setShowPassword] = useState(false);
+  const { isLoaded, signIn, setActive } = useSignIn();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const router = useRouter();
+  const searchParams = useSearchParams()
+  const redirect_url = searchParams.get('redirect_url')
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!isLoaded) {
+      return;
+    }
+
+    if (!email || !password) {
+      alert('Please fill out all fields.');
+      return;
+    }
+
+    console.log(email, password)
+
+    try {
+      const completeSignIn = await signIn.create({identifier: email, strategy: "password", password });
+      if (completeSignIn.status !== 'complete') {
+        // The status can also be `needs_factor_on', 'needs_factor_two', or 'needs_identifier'
+        // Please see https://clerk.com/docs/references/react/use-sign-in#result-status for  more information
+        console.log(JSON.stringify(completeSignIn, null, 2));
+      }
+
+      if (completeSignIn.status === 'complete') {
+        // If complete, user exists and provided password match -- set session active
+        await setActive({ session: completeSignIn.createdSessionId });
+
+        // Redirect the user to a post sign-in route
+        if (redirect_url){
+            router.push(redirect_url);
+        }
+        else{
+            // Redirect the user to a post sign-in route
+            router.push('/');
+        }
+      }
+    } catch (err) {
+      console.error(JSON.stringify(err, null, 2));
+    }
+
+      //setSubmitted(true);
+  };
 
   const handleTogglePassword = () => {
     setShowPassword((prevShowPassword) => !prevShowPassword);
@@ -24,21 +74,30 @@ export default function Login() {
     <>
       <Box p={4} maxWidth="400px" mx="auto">
         <Box mb={6}>
-          <Heading as="h1" fontSize="xl" textAlign="center">
+          <Heading 
+            as="h1" 
+            fontSize="xl" 
+            textAlign="center">
             Log In
           </Heading>
         </Box>
-        <FormControl mb={4}>
+        <FormControl mb={4} isRequired>
           <FormLabel>Email</FormLabel>
-          <Input type="text" placeholder="Email" variant="filled" />
+          <Input 
+            type="text" 
+            placeholder="Email" 
+            variant="filled" 
+            onChange={(e) => setEmail(e.target.value)}
+          />
         </FormControl>
-        <FormControl mb={4}>
+        <FormControl mb={4} isRequired>
           <FormLabel>Password</FormLabel>
           <Input
             type={showPassword ? "text" : "password"}
             placeholder="Password"
             variant="filled"
             pr="4.5rem"
+            onChange={(e) => setPassword(e.target.value)}
           />
           <Button
             position="absolute"
@@ -56,7 +115,7 @@ export default function Login() {
           </ChakraLink>
         </FormControl>
         <FormControl mb={4}>
-          <Button bg="#a3caf0" width="full">
+          <Button bg="#a3caf0" width="full" onClick={handleSubmit}>
             Log In
           </Button>
         </FormControl>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -4,6 +4,7 @@ import { Button } from "@styles/Button";
 import CreateEditEvent from "@components/CreateEditEvent";
 import NextLink from "next/link";
 import YourParentComponent from "@components/YourParentComponent";
+import { SignOutButton } from "@clerk/nextjs";
 
 export default function Home() {
   return (
@@ -14,6 +15,7 @@ export default function Home() {
       <NextLink href="/login">
         <Button>Login</Button>
       </NextLink>
+      < SignOutButton />
       <YourParentComponent />
     </main>
   );