Closed registration handling

app/closed/closed.module.scss

@@ -0,0 +1,92 @@
+.screen {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100vw;
+    min-height: 100vh;
+    gap: 30px;
+
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.logo {
+    height: fit-content;
+    width: 55vw;
+    max-width: 1000px;
+
+    @media screen and (max-width: 640px) {
+        width: 90vw;
+    }
+}
+
+.container {
+    flex: 3;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: bottom;
+
+    width: 100vw;
+    max-width: 1000px;
+    padding: 50px;
+
+    @media screen and (max-width: 640px) {
+        flex: 2;
+        // background-size: cover;
+        padding: 0;
+    }
+}
+
+.container .content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 20px;
+    flex: 0.9;
+    @media screen and (max-width: 640px) {
+        flex: 1;
+    }
+}
+
+.container .topSpacer {
+    display: none;
+    @media screen and (max-width: 640px) {
+        flex: 0.6;
+        display: flex;
+    }
+}
+
+.container .spacer {
+    flex: 0.6;
+}
+
+.container h2 {
+    position: relative;
+    z-index: 4;
+    text-align: center;
+    color: #34274a;
+}
+
+.container .link {
+    color: #34274a;
+    position: relative;
+    text-align: center;
+    text-decoration: underline;
+    text-decoration-color: #34274a;
+    padding-top: 14px;
+}
+
+.container .signUpAsButtons {
+    flex: 1;
+}
+
+.topSpacer {
+    flex: 3;
+}

app/closed/page.tsx

@@ -0,0 +1,50 @@
+import Image from "next/image";
+import Link from "next/link";
+
+import SNOWGLOBE from "@/public/registration/track_selection/snowglobe.svg";
+import LOGO_TEXTONLY from "@/public/registration/track_selection/logo_textonly.svg";
+import BACKGROUND from "@/public/registration/track_selection/background.svg";
+
+import OlympianButton from "@/components/OlympianButton/OlympianButton";
+
+import styles from "@/app/closed/closed.module.scss"
+
+const closed: React.FC = () => {
+
+    return (
+        <main
+            style={{
+                backgroundImage: `url(${BACKGROUND?.src})`
+            }}
+            className={styles.screen}
+        >
+            <div className={styles.topSpacer}></div>
+            <Image
+                alt="HackOlympus Logo"
+                src={LOGO_TEXTONLY}
+                className={styles.logo}
+            />
+            <div
+                style={{
+                    backgroundImage: `url(${SNOWGLOBE?.src})`
+                }}
+                className={styles.container}
+            >
+                <div className={styles.topSpacer}></div>
+                <div className={styles.content}>
+                    <h2>Sorry, registration is closed.</h2>
+                    <h2>Check back next year!</h2>
+                    <OlympianButton
+                        text="Back"
+                        link="/"
+                        blue
+                    />
+
+                </div>
+                <div className={styles.spacer}></div>
+            </div>
+        </main>
+    );
+};
+
+export default closed;

app/register/layout.tsx

@@ -3,33 +3,52 @@ import Loading from "@/components/Loading/Loading";
 import {
     isAuthenticated,
     authenticate,
-    getRegistrationOrDefault
+    getRegistrationOrDefault,
+    getRegistrationStatus
 } from "@/util/api";
 import Head from "next/head";
 import { usePathname, useRouter } from "next/navigation";
 import { useState, useEffect } from "react";
 
 const Layout = ({ children }: { children: React.ReactNode }) => {
-    const [isLoading, setIsLoading] = useState(true);
-    const router = useRouter();
-    const pathname = usePathname();
+    const [isLoading, setIsLoading] = useState(true)
+    const router = useRouter()
+    const pathname = usePathname()
+    const [isAlive, setIsAlive] = useState(true)
+
+
 
     useEffect(() => {
         if (!isAuthenticated()) {
-            authenticate(pathname);
-            return;
+            authenticate(pathname)
+            return
         }
 
         getRegistrationOrDefault()
             .then(registration => {
                 if (registration.hasSubmitted) {
-                    router.push("/profile");
+                    router.push("/profile")
+                } else if (!isAlive) {
+                    router.push("/closed")
                 }
             })
             .finally(() => {
-                setIsLoading(false);
-            });
-    }, []);
+                setIsLoading(false)
+            })
+    }, [])
+
+    useEffect(() => {
+        const fetchRegistrationStatus = async () => {
+          try {
+            const response = await getRegistrationStatus()
+            setIsAlive(response.alive)
+          } catch (err) {
+            console.error(err)
+          }
+        }
+
+        fetchRegistrationStatus()
+      }, [])
 
     return (
         <>

components/Home/Olympian/Olympian.tsx

@@ -1,4 +1,7 @@
+"use client";
 import styles from "./Olympian.module.scss";
+import { useEffect, useState } from "react";
+import { getRegistrationStatus } from "@/util/api";
 
 import Image from "next/image";
 import LOGO from "@/public/home/olympian/logo.svg";
@@ -7,6 +10,12 @@ import OlympianButton from "@/components/OlympianButton/OlympianButton";
 import Description from "../Description/Description";
 
 const Olympian: React.FC = () => {
+    const [registrationOpen, setRegistrationOpen] = useState(true);
+    useEffect(() => {
+        getRegistrationStatus().then(status => {
+            setRegistrationOpen(status.alive);
+        });
+    }, []);
     return (
         <section className={styles.olympianMain}>
             <div className={styles.main}>
@@ -16,8 +25,8 @@ const Olympian: React.FC = () => {
                     className={styles.logo}
                 />
                 <OlympianButton
-                    text="Register Now"
-                    link="/register"
+                    text={registrationOpen ? "Register Now" : "Profile"}
+                    link={registrationOpen ? "/register" : "/profile"}
                     bottomPadding
                 />
             </div>
@@ -31,4 +40,4 @@ const Olympian: React.FC = () => {
     );
 };
 
-export default Olympian;
+export default Olympian;

components/OlympianButton/OlympianButton.tsx

@@ -41,4 +41,4 @@ const OlympianButton: React.FC<OlympianButtonProps> = ({
     );
 };
 
-export default OlympianButton;
+export default OlympianButton;