adding reset-password

package.json

@@ -13,6 +13,7 @@
     "@emotion/styled": "^11.12.0",
     "@mui/material": "^5.16.4",
     "@radix-ui/react-avatar": "^1.1.0",
+    "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-icons": "^1.3.0",

src/app/api/update-password/route.ts

@@ -0,0 +1,19 @@
+import {NextRequest, NextResponse} from "next/server";
+import { cookies } from 'next/headers';
+import {createClient} from "@/utils/supabase/server";
+
+export async function GET(req: NextRequest) {
+  const requestUrl = new URL(req.nextUrl.href)
+  const code = requestUrl.searchParams.get('code')
+
+  if( code ) {
+    const supabase = createClient()
+    const { error } = await supabase.auth.exchangeCodeForSession(code)
+
+    return NextResponse.redirect(new URL(`${req.nextUrl.origin}/auth/update_password`, req.nextUrl.href))
+  }
+
+  console.log({error : 'ERROR: Invalid auth code or no auth code found'}, { status: 500 })
+
+  return NextResponse.redirect(new URL(`${req.nextUrl.origin}/auth`, req.nextUrl.href))
+}

src/app/auth/component/component.tsx

@@ -1,9 +1,11 @@
 import React, { FormEvent, use, useEffect, useState } from "react";
+import Link from "next/link";
 import axios from "axios";
 
 import { Label } from "@/components/ui/label"
 import { Input } from "@/components/ui/input"
 import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
 import Loader from '@/components/ui/loader'
 
 import { VscEye, VscEyeClosed } from "react-icons/vsc"
@@ -165,6 +167,25 @@ export function Component( props : Props) {
             <i className={`${!(input.name === 'password') && 'hidden'} ${styles.inputicon} ${styles.eyeicon}`} onClick={() => setRevealPassword(!revealPassword)}>{revealPassword?<VscEyeClosed size='23px'/>:<VscEye size='23px'/>}</i>
           </div>
         ))}
+
+        {auth === 'login' &&
+          <div className="flex items-center justify-between">
+            <div className="flex items-center">
+              <Checkbox
+                id="remember-me"
+                name="remember-me"
+                className="h-4 w-4 rounded text-primary focus:ring-primary"
+              />
+              <Label htmlFor="remember-me" className="ml-2 block text-sm text-foreground">
+                Remember me
+              </Label>
+            </div>
+            <div className="text-sm">
+              <Link href="auth/reset_password" className="font-medium text-primary hover:text-primary/80" prefetch={false}>
+                Forgot your password?
+              </Link>
+            </div>
+          </div>}
           <div>
             <Button
               type="submit"

src/app/auth/page.tsx

@@ -104,6 +104,11 @@ export default function Auth(){
             </div>)}
 
           {oauthhidden && <OAuthComponent onClick={Authsignin} />}
+          <div className="text-center text-sm text-muted-foreground">
+            <Link href="/home" className="font-medium hover:underline" prefetch={false}>
+              Back to Home
+            </Link>
+          </div>
         </Component>
       </Suspense>
     )

src/app/auth/reset_password/page.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import React, { useState } from 'react';
+import { supabase } from '@/utils/supabase/client';
+import { useCookies } from 'next-client-cookies';
+import Link from 'next/link';
+
+import { Card, CardContent, CardFooter } from "@/components/ui/card"
+import { Label } from "@/components/ui/label"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import ErrorDialog from '@/components/error_dialog'
+import Loader from '@/components/ui/loader'
+
+
+const ResetPassword = () => {
+  const cookies = useCookies();
+  const loginpath = cookies.get('email') != ''?'/auth?auth=login':'/auth';
+
+  const [email, setEmail] = useState<string>(cookies.get('email') || '');
+  const [errorMsg, setErrorMsg] = useState<null | string>(null);
+  const [successMsg, setSuccessMsg] = useState<null | string>(null);
+  const [loading, setLoading] = useState<boolean>(false);
+
+
+  async function resetPassword(formData: { email: string; }) {
+    setLoading(true);
+    const { error } = await supabase.auth.resetPasswordForEmail(formData.email, {
+      redirectTo: `${window.location.origin}/api/update-password`,
+    });
+    setLoading(false);
+    if (error) {
+      setErrorMsg(error.message);
+    } else {
+      setSuccessMsg('Password reset instructions sent.');
+    }
+
+  }
+
+  return (
+  <div className="min-h-screen px-4 py-12 sm:px-6 lg:px-8">
+    <div className="mx-auto max-w-md space-y-6 py-12">
+      <div className="space-y-2 text-center">
+        <h1 className="text-3xl font-bold">Forgot <span className="text-primary">Password</span></h1>
+        <p className="text-muted-foreground">Enter your email below to reset your password.</p>
+      </div>
+      <Card>
+        <form className="space-y-4" onSubmit={(e) => {
+          e.preventDefault();
+          resetPassword({ email });
+        }}>
+          <CardContent className="space-y-4">
+            <div className="space-y-2 mt-3">
+              <Label htmlFor="email">Email</Label>
+              <Input onChange={(e) => {
+                setEmail(e.target.value);
+              }} id="email" type="email" name="email" value={email} placeholder="m@example.com" required />
+            </div>
+            <div>
+              <Button
+                type="submit"
+                className="group relative flex w-full justify-center rounded-[8px] bg-primary py-6 px-4 text-md font-bold text-primary-foreground transition-colors focus:opacity-90 focus:outline-none disabled:opacity-60"
+                disabled={loading || !email}
+              >
+                {loading ?
+                  <i className="flex text-primary-foreground mr-2"><Loader /></i>: 'Reset Password'}
+              </Button>
+            </div>
+          </CardContent>
+          <CardFooter className="text-center text-primary">
+            <Link href={loginpath} className="text-sm" prefetch={false}>
+              Return to Login
+            </Link>
+          </CardFooter>
+        </form>
+      </Card>
+      <p className="text-muted text-center">{successMsg}</p>
+    </div>
+
+    {errorMsg && <ErrorDialog error_message={errorMsg} />}
+  </div>
+  );
+};
+
+export default ResetPassword;

src/app/auth/update_password/page.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import React, { useState } from "react"
+import { supabase } from "@/utils/supabase/client"
+import { useRouter } from "next/navigation"
+
+import { Label } from "@/components/ui/label"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import Loader from "@/components/ui/loader"
+import ErrorDialog from "@/components/error_dialog"
+import Link from "next/link"
+
+export default function Update_password() {
+  const router = useRouter()
+  const [errorMsg, setErrorMsg] = useState<string | null>(null)
+  const [loading, setLoading] = useState<boolean>(false)
+
+  async function updatePassword(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    setLoading(true)
+    if( e.currentTarget.password.value !== e.currentTarget.confirmPassword.value ) {
+      setErrorMsg("Passwords do not match")
+      return
+    }
+    const { error } = await supabase.auth.updateUser({
+      password: e.currentTarget.password.value,
+    });
+    setLoading(false)
+
+    if (error) {
+      setErrorMsg(error.message)
+    } else {
+      router.replace("/form_create")
+    }
+  }
+
+
+  return (
+    <div className="flex min-h-[100dvh] flex-col items-center justify-center bg-background px-4 py-12 sm:px-6 lg:px-8">
+      <div className="mx-auto max-w-md w-full space-y-6">
+        <div className="space-y-2 text-center">
+          <h1 className="text-3xl font-bold">Update Password</h1>
+          <p className="text-muted-foreground">Enter a new password to update your account.</p>
+        </div>
+        <form className="space-y-4" onSubmit={updatePassword}>
+          <div className="space-y-2">
+            <Label htmlFor="password">New Password</Label>
+            <Input id="password" type="password" placeholder="Enter a new password" required />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="confirmPassword">Confirm Password</Label>
+            <Input id="confirmPassword" type="password" placeholder="Confirm your new password" required />
+          </div>
+          <div>
+            <Button
+              type="submit"
+              className="group relative flex w-full justify-center rounded-[8px] bg-primary py-6 px-4 text-md font-bold text-primary-foreground transition-colors focus:opacity-90 focus:outline-none"
+              disabled={loading}
+            >
+              {loading ?
+                <i className="flex text-primary-foreground mr-2"><Loader /></i>: 'Update Password'}
+            </Button>
+          </div>
+        </form>
+        <div className="text-center">
+          <Link href="/auth/reset_password" className="inline-block text-sm underline text-muted-foreground" prefetch={false}>
+            Back to Reset Password
+          </Link>
+        </div>
+      </div>
+      {errorMsg && <ErrorDialog error_message={errorMsg} />}
+    </div>
+  )
+}

src/app/home/layout.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import Navbar from "@/components/navbar"
+import Footer from "@/components/footer"
 
 
 interface RootLayoutProps {
@@ -11,6 +12,7 @@ export default function RootLayout({ children } : RootLayoutProps) {
     <>
       <Navbar />
       {children}
+      <Footer />
     </>
   )
 }

src/app/home/page.tsx

@@ -1,3 +1,4 @@
+import React from "react"
 import Link from "next/link"
 import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card"
 import Image from "next/image"
@@ -6,28 +7,69 @@ export default function Home() {
 
   return (
     <div className="flex flex-col min-h-dvh">
-      <section className="relative w-full py-12 md:py-24 lg:py-32 bg-primary flex item-center justify-center bg-cover bg-center bg-[url('/home/homebg.jpeg')] after:content-[''] after:w-full after:h-full after:absolute after:top-0 after:-z-0 after:bg-[rgba(0,0,0,.6)] ">
-        <div className="container px-4 md:px-6 flex flex-col items-center text-center space-y-6 relative z-20">
-          <h1 className="text-4xl font-bold sm:text-5xl md:text-6xl">
-            Welcome to the Coding Club
-          </h1>
-          <p className="max-w-[700px] md:text-xl">
-            Join our vibrant community of passionate coders and unlock a world of learning, collaboration, and growth.
-          </p>
-          <Link
-            href="#"
-            className="inline-flex h-10 items-center justify-center rounded-md bg-primary-foreground px-8 text-sm font-medium shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
-            prefetch={false}
-          >
-            Join Now
-          </Link>
+      <section className="w-full py-12 md:py-24 lg:py-32 bg-background text-muted flex justify-around">
+        <div className=" px-4 md:px-6 grid gap-6 lg:grid-cols-2 lg:gap-12 max-w-[1240px] flex items-center justify-around">
+          <div className="space-y-4 ">
+            <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl md:text-6xl lg:text-7xl">
+              Unlock Your Coding Potential
+            </h1>
+            <p className="max-w-[600px] text-lg md:text-xl">
+              Join our vibrant community of coders and unlock your full potential through workshops, events, and
+              shared resources.
+            </p>
+            <div className="flex flex-col gap-2 justify-center sm:flex-row lg:justify-start">
+              <Link
+                href="/auth"
+                className="inline-flex h-10 items-center justify-center rounded-md bg-primary text-primary-foreground px-8 text-sm font-medium shadow transition-colors hover:bg-primary-hover focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+                prefetch={false}
+              >
+                Join Now
+              </Link>
+              <Link href="#" className="inline-flex h-10 items-center justify-center rounded-md px-8 text-sm font-medium shadow transition-colors hover:bg-muted hover:text-primary-foreground border focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+              >
+                Learn More
+              </Link>
+            </div>
+          </div>
+          <div className="flex justify-center lg:justify-end">
+            <Image
+              src="/home/placeholder.png"
+              alt="Coding Club"
+              width={400}
+              height={600}
+              className="rounded-lg w-[400px] lg:w-[500px]"
+            />
+          </div>
         </div>
       </section>
-      <section className="w-full py-12 md:py-24 lg:py-32 flex item-center justify-center">
+      <section id="features" className="bg-background py-20 px-6 md:px-12">
+          <div className="container mx-auto grid grid-cols-1 md:grid-cols-3 gap-12">
+            <div className="flex flex-col items-center text-center">
+              <LaptopIcon className="w-12 h-12 text-primary mb-4" />
+              <h3 className="text-2xl font-bold mb-2">Workshops</h3>
+              <p className="text-muted-foreground">
+                Dive into hands-on coding workshops and learn from experienced instructors.
+              </p>
+            </div>
+            <div className="flex flex-col items-center text-center">
+              <MilestoneIcon className="w-12 h-12 text-primary mb-4" />
+              <h3 className="text-2xl font-bold mb-2">Mentorship</h3>
+              <p className="text-muted-foreground">
+                Receive personalized guidance from our network of industry mentors.
+              </p>
+            </div>
+            <div className="flex flex-col items-center text-center">
+              <GroupIcon className="w-12 h-12 text-primary mb-4" />
+              <h3 className="text-2xl font-bold mb-2">Community</h3>
+              <p className="text-muted-foreground">Connect with like-minded coders and build lasting friendships.</p>
+            </div>
+          </div>
+        </section>
+      <section className="w-full py-12 md:py-24 lg:py-32 flex item-center justify-center bg-secondary">
         <div className="container px-4 md:px-6 space-y-6">
           <div className="flex flex-col items-center justify-center space-y-4 text-center">
             <div className="space-y-2">
-              <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">Upcoming Events</h2>
+              <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">Upcoming <span className="text-primary">Events</span></h2>
               <p className="max-w-[900px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                 Check out our upcoming events and workshops to learn new skills, network with fellow coders, and have
                 fun!
@@ -131,18 +173,18 @@ export default function Home() {
           </div>
         </div>
       </section>
-      <section className="w-full py-12 md:py-24 lg:py-32 bg-muted flex item-center justify-center">
+      <section className="w-full py-12 md:py-24 lg:py-32 bg-background flex item-center justify-center">
         <div className="container px-4 md:px-6 space-y-6">
           <div className="flex flex-col items-center justify-center space-y-4 text-center">
             <div className="space-y-2">
-              <h2 className="text-3xl font-bold text-black tracking-tighter sm:text-5xl">Club Resources</h2>
+              <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">Club <span className="text-primary">Resources</span></h2>
               <p className="max-w-[900px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                 Explore our collection of tutorials, projects, and other resources to help you grow as a coder.
               </p>
             </div>
           </div>
           <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-            <Card className="flex flex-col">
+            <Card className="flex flex-col bg-secondary border-none">
               <CardHeader>
                 <CardTitle>Tutorials</CardTitle>
                 <CardDescription>Learn new technologies and programming languages.</CardDescription>
@@ -180,7 +222,7 @@ export default function Home() {
                 </Link>
               </CardContent>
             </Card>
-            <Card className="flex flex-col">
+            <Card className="flex flex-col bg-secondary border-none">
               <CardHeader>
                 <CardTitle>Projects</CardTitle>
                 <CardDescription>Build real-world applications to showcase your skills.</CardDescription>
@@ -218,7 +260,7 @@ export default function Home() {
                 </Link>
               </CardContent>
             </Card>
-            <Card className="flex flex-col">
+            <Card className="flex flex-col bg-secondary border-none">
               <CardHeader>
                 <CardTitle>Community</CardTitle>
                 <CardDescription>Connect with fellow coders and get support from the community.</CardDescription>
@@ -248,7 +290,12 @@ export default function Home() {
                   href="#"
                   className="group grid h-auto w-full items-center justify-start gap-1 rounded-md bg-background p-4 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50"
                   prefetch={false}
-                />
+                >
+                  <div className="text-sm font-medium leading-none group-hover:underline">LinkedIN</div>
+                  <div className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                  Join our Coding Club on LinkedIn to learn, collaborate, and network!
+                  </div>
+                </Link>
               </CardContent>
             </Card>
           </div>
@@ -258,6 +305,93 @@ export default function Home() {
   )
 }
 
+
+function LaptopIcon(props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M20 16V7a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v9m16 0H4m16 0 1.28 2.55a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45L4 16" />
+    </svg>
+  )
+}
+
+function GroupIcon(props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M3 7V5c0-1.1.9-2 2-2h2" />
+      <path d="M17 3h2c1.1 0 2 .9 2 2v2" />
+      <path d="M21 17v2c0 1.1-.9 2-2 2h-2" />
+      <path d="M7 21H5c-1.1 0-2-.9-2-2v-2" />
+      <rect width="7" height="5" x="7" y="7" rx="1" />
+      <rect width="7" height="5" x="10" y="12" rx="1" />
+    </svg>
+  )
+}
+
+function MenuIcon(props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <line x1="4" x2="20" y1="12" y2="12" />
+      <line x1="4" x2="20" y1="6" y2="6" />
+      <line x1="4" x2="20" y1="18" y2="18" />
+    </svg>
+  )
+}
+
+
+function MilestoneIcon(props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M18 6H5a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h13l4-3.5L18 6Z" />
+      <path d="M12 13v8" />
+      <path d="M12 3v3" />
+    </svg>
+  )
+}
+
 function CalendarIcon(props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>) {
   return (
     <svg

src/app/layout.tsx

@@ -49,7 +49,6 @@ export default function RootLayout({
         <Suspense fallback={<Loading />}>{children}</Suspense>
         <Analytics />
         <SpeedInsights />
-        <Footer />
       </body>
     </html>
   );

src/components/footer.jsx

@@ -8,7 +8,7 @@ const notoSansFont = Noto_Sans({ weight: ["300","400"], subsets: ["latin"] });
 const montserratFont = Montserrat({weight: ["100","400"], subsets: ["latin"] });
 
 function Footer() {
-    const homeLink =        "/";
+    const homeLink =        "/home";
     const eventsLink =      "/events";
     const projectsLink =    "/projects";
     const membersLink =     "/members";

src/components/navbar.jsx

@@ -18,7 +18,7 @@ function Navbar() {
         <>
             <div id="pseudo"></div>
             <div className="navbar">
-                <a href="/home" className="logo-container">
+                <Link href="/home" className="logo-container" prefetch={false}>
                     <img className="logo-img"  src="https://avatars.githubusercontent.com/u/9347727?s=200&v=4" alt="IIITV Logo" />
                     <p className="logo-title">Coding Club</p>
                 </Link>

src/components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

src/utils/supabase/middleware.ts

@@ -69,6 +69,8 @@ export async function updateSession(request: NextRequest) {
     response = NextResponse.redirect(new URL('/auth', request.nextUrl.href))
   }else if (!user && request.nextUrl.pathname === '/test_api') {
     response = NextResponse.redirect(new URL('/auth', request.nextUrl.href))
+  } else if (!user && request.nextUrl.pathname === '/auth/update_password') {
+    response = NextResponse.redirect(new URL('/auth', request.nextUrl.href))
   }
 
   // const searchParams = request.nextUrl.searchParams