Created application form

app/application/page.tsx

@@ -0,0 +1,18 @@
+import { createClient } from "@/utils/supabase/server";
+import { redirect } from "next/navigation";
+
+export default async function Application() {
+
+    // Check that the user is authenticated
+    const supabase = createClient();
+
+    const {
+        data: { user },
+    } = await supabase.auth.getUser();
+
+    if (!user) {
+        return redirect("/login");
+    }
+
+    return redirect('/dashboard/application?page=1');
+}

app/auth/callback/route.ts

@@ -0,0 +1,19 @@
+import { createClient } from "@/utils/supabase/server";
+import { NextResponse } from "next/server";
+
+export async function GET(request: Request) {
+  // The `/auth/callback` route is required for the server-side auth flow implemented
+  // by the SSR package. It exchanges an auth code for the user's session.
+  // https://supabase.com/docs/guides/auth/server-side/nextjs
+  const requestUrl = new URL(request.url);
+  const code = requestUrl.searchParams.get("code");
+  const origin = requestUrl.origin;
+
+  if (code) {
+    const supabase = createClient();
+    await supabase.auth.exchangeCodeForSession(code);
+  }
+
+  // URL to redirect to after sign up process completes
+  return NextResponse.redirect(`${origin}/dashboard`);
+}

app/dashboard/application/applied/page.tsx

@@ -0,0 +1,46 @@
+import { createClient } from "@/utils/supabase/server";
+import { redirect } from "next/navigation";
+import Link from "next/link";
+
+export default async function Applied() {
+    // Create a new Supabase server client
+    const supabase = createClient();
+
+    // Make sure the user is authenticated
+    const {
+        data: { user },
+    } = await supabase.auth.getUser();
+
+    if (!user) {
+        return redirect("/login");
+    }
+
+    // Check if user has submitted an application
+    const { data: application, error } = await supabase.from("applications").select().eq("account_id", user.id);
+
+    if (error) {
+        console.error("Error fetching application: ", error);
+    }
+
+    if (!application || application.length === 0) {
+        return redirect("/dashboard/application?page=1");
+    }
+
+    return (
+        <div className="flex flex-col justify-center items-center w-11/12 lg:w-1/2 min-h-[50vh] my-4 mx-auto">
+            <div className="bg-highlight p-6 lg:p-12 rounded-md shadow-md">
+                <h1 className="text-2xl lg:text-4xl text-center font-semibold text-primary text-background mb-8">Thank you for applying to TerraHacks 2024!</h1>
+                <p className="lg:text-lg text-center text-background font-mono">
+                    Your application has been recieved!
+                    If you have any questions or concerns, please don't hesitate to contact us
+                    at <a href="mailto:[email protected]" className="underline hover:text-gray-400 ease-in-out duration-300">[email protected]</a>.
+                </p>
+                <p className="lg:text-lg text-center text-background font-mono mt-4">
+                    Your application details can be found on 
+                    the <Link href={`/dashboard`} aria-label="Redirect to homepage" className="underline hover:text-gray-400 ease-in-out duration-300">homepage</Link> of 
+                    your dashboard. We look forward to reviewing your application! Good luck!
+                </p>
+            </div>
+        </div>
+    )
+}

app/dashboard/application/page.tsx

@@ -0,0 +1,46 @@
+import { createClient } from "@/utils/supabase/server";
+import { redirect } from "next/navigation";
+import ApplicationForm from "@/components/application/applicationForm";
+import ApplicationError from "@/components/application/applicationError";
+
+export default async function Application({ searchParams }: { searchParams: {page: string, message: string } }) {
+
+    // Check that the user is authenticated
+    const supabase = createClient();
+
+    const {
+        data: { user },
+    } = await supabase.auth.getUser();
+
+    if (!user) {
+        return redirect("/login");
+    }
+
+    // Check if the user has already submitted an application
+    const { data: appliedData, error } = await supabase.from("users").select("applied").eq("id", user.id);
+
+    if (error) {
+        console.error("Error fetching application: ", error);
+    }
+
+
+    if (!appliedData || appliedData.length === 0) {
+        return redirect("/dashboard/application?page=1");
+    }
+
+    // If the user has already applied, redirect them to the application status page
+    const applicationStatus = appliedData[0].applied;
+    if (applicationStatus === "Applied") {
+        return redirect("/dashboard/application/applied");
+    }
+
+    return (
+        <>
+            <ApplicationForm />
+            {searchParams?.message && (
+                <ApplicationError key={Date.now()} searchParams={searchParams} />
+            )}
+        </>
+
+    );
+}

app/dashboard/contact/page.tsx

@@ -0,0 +1,86 @@
+import { createClient } from "@/utils/supabase/server";
+import { redirect } from "next/navigation";
+import Link from "next/link";
+import Item from "@/components/contact/Item";
+// import { FaDiscord } from "react-icons/fa6";
+// import { IoLogoDiscord, IoLogoInstagram } from "react-icons/io5";
+
+export default async function Contact() {
+    const supabase = createClient();
+
+    //Check with Supabase to see if user is logged in by getUser() call. 
+    //If logged in, does nothing
+    const {
+        data: { user },
+    } = await supabase.auth.getUser();
+
+    //If not logged in, redirect to login page
+    if (!user) {
+        return redirect("/login");
+    }
+
+    return (
+        <>
+            <div className="md:sticky top-0 z-10 shrink-0 px-6 md:py-8 py-2 border-b-2 border-b-gray-300 bg-[#f7fafc]">
+                <h1 className="text-xl md:text-4xl text-gray-800 font-bold font-sans">Got Questions?</h1>
+                <p className="md:text-xl text-gray-400 md:mt-4 font-sans whitespace-pre-line">Our team is happy to help you in any way we can! </p>
+                <p className="text-gray-800 mt-2">The best way to get a fast response to your inquiries is to email us at {" "}
+
+                    <a
+                        aria-label="Send us an email"
+                        href="mailto:[email protected]"
+                        target="_blank"
+                        rel="nooppener noreferrer"
+                        className="text-sky-600 font-bold underline hover:text-sky-400 duration-300 ease-in-out"
+                    >
+                        [email protected]
+                    </a>!
+                </p>
+            </div>
+            {/* apply grid, configure rows, 2 cols on lg or bigger, 1 col smaller than lg*/}
+            <div className="grid grid-cols-1 lg:grid-cols-2 xl:text-lg w-[90%] gap-4 lg:gap-6 2xl:gap-8">
+                <Item
+                    name={"Discord"}
+                    link={"https://discord.gg/982AkBQea7"}
+                    linkText={"Join Our Discord Server!"}
+                    description={"TerraHack's discord server is the center of all information for this event. Join our server to get the latest updates and ask questions to our team!"}
+                />
+
+                <Item
+                    name={"Instagram"}
+                    link={"https://www.instagram.com/terrahacks.tmu"}
+                    linkText={"Follow us on Instagram!"}
+                    description={"Follow our journey on Instagram! We post updates, behind-the-scenes, sponsorship highlights, and more!"}
+                />
+
+                <Item
+                    name={"TikTok"}
+                    link={"https://www.tiktok.com/@terrahacks"}
+                    linkText={"Follow us on TikTok!"}
+                    description={"Follow us on Tiktok for funny content, skits, and event information!"}
+                />
+
+                <Item
+                    name={"LinkedIn"}
+                    link={"https://www.linkedin.com/company/terrahacks"}
+                    linkText={"Connect with us on LinkedIn!"}
+                    description={"Visit our LinkedIn for professional updates, sponsor highlights, and more!"}
+                />
+
+                <Item
+                    name={"Newsletter"}
+                    link={"https://www.terrahacks.ca/newsletter"}
+                    linkText={"Join our Newsletter!"}
+                    description={"Aside from our social media, we also have a newsletter! Subscribe to get the latest updates and information about TerraHacks!"}
+                />
+
+                <Item
+                    name={"Linktree"}
+                    link={"https://linktr.ee/terrahacks"}
+                    linkText={"Our Linktree!"}
+                    description={"Linktree is a hub for all of our social media links! Visit our Linktree to find all of our social media links in one place!"}
+                />
+            </div>
+        </>
+    );
+}

app/dashboard/data-request/page.tsx

@@ -0,0 +1,96 @@
+import { createClient } from '@/utils/supabase/server';
+import { redirect } from 'next/navigation';
+import dataRequest from '@/server/dataRequest';
+import { SubmitButton } from '@/components/forms/submit-button';
+import ErrorMessage from '@/components/auth/error-message';
+
+export default async function DataRequest({ searchParams }: { searchParams: { message: string } }) {
+    const supabase = createClient();
+
+    const { data: { user } } = await supabase.auth.getUser();
+
+    if (!user) {
+        return redirect('/login');
+    }
+
+    return (
+        <>
+            <div className="md:sticky top-0 z-10 shrink-0 px-6 md:py-8 py-2 border-b-2 border-b-gray-300 bg-[#f7fafc]">
+                <h1 className="text-xl md:text-4xl text-gray-800 font-bold font-sans">Data Request Form</h1>
+                <p className="md:text-xl text-gray-400 md:mt-4 font-sans whitespace-pre-line">
+                    You can request to view/edit/delete your user data here.
+                </p>
+                <p className="text-gray-800 mt-2">If you have any questions or concers email us at {" "}
+
+                    <a
+                        aria-label="Send us an email"
+                        href="mailto:[email protected]"
+                        target="_blank"
+                        rel="nooppener noreferrer"
+                        className="text-sky-600 font-bold underline hover:text-sky-400 duration-300 ease-in-out"
+                    >
+                        [email protected]
+                    </a>! You can review our privacy policy {" "}
+                    <a
+                        aria-label="View our privacy policy"
+                        href="/assets/privacy-policy.pdf"
+                        target='_blank'
+                        className="text-sky-600 font-bold underline hover:text-sky-400 duration-300 ease-in-out"
+                    >
+                        here
+                    </a>.
+                </p>
+            </div>
+            <form className='flex flex-col mx-auto w-11/12 md:w-3/4 xl:w-1/2 gap-6 bg-highlight p-4 font-medium rounded-md shadow-sm m-4'>
+                <h1 className='text-background font-semibold text-lg lg:text-xl xl:text-2xl 2xl:text-3xl'>Data Request Form</h1>
+                <div className='flex flex-col'>
+                    <label
+                        htmlFor="request-type"
+                        className="text-base lg:text-lg text-background pb-2 after:content-['*'] after:ml-0.5 after:text-red-500"
+                    >
+                        Request Type
+                    </label>
+                    <select
+                        id="request-type"
+                        name="request-type"
+                        className="rounded-md px-4 py-2 bg-background mb-4 w-full"
+                        defaultValue={""}
+                    >
+                        <option value="" disabled>-- Select --</option>
+                        <option value="view">View my data</option>
+                        <option value="edit">Edit my data</option>
+                        <option value="delete">Delete my data</option>
+                    </select>
+                </div>
+
+                <div className='flex flex-col'>
+                    <label
+                        htmlFor="description"
+                        className="text-base lg:text-lg text-background pb-2 after:content-['*'] after:ml-0.5 after:text-red-500"
+                    >
+                        Description
+                    </label>
+                    <textarea
+                        id="description"
+                        name="description"
+                        className="rounded-md px-4 py-2 bg-background min-h-[20vh] mb-4 placeholder-gray-400"
+                    />
+                </div>
+
+                <SubmitButton
+                    formAction={dataRequest}
+                    className="bg-btn py-4 px-12 w-11/12 md:w-3/4 xl:w-1/2 mx-auto rounded-md text-background font-bold cursor-pointer hover:bg-btnHover transition ease-in-out duration-300'"
+                    pendingText="Requesting..."
+                    type="submit"
+                >
+                    Submit
+                </SubmitButton>
+            </form>
+            {searchParams.message && 
+                <div className='flex flex-col mx-auto justify-center items-center'>
+                    <ErrorMessage searchParams={searchParams} />
+                </div>
+            }
+        </>
+    );
+}

app/dashboard/layout.tsx

@@ -10,7 +10,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
     return (
         <section className={`${raleway.className}`}>
             <Sidenav />
-            <div className="md:pl-72 lg:pl-80">
+            <div className="md:pl-72 2xl:pl-80">
                 {children}
                 <Footer />
             </div>