Merge pull request #33 from cs3216-a3-group-4/chloe/home-page

feat(frontend): home page
jippy-the-frog · Sep 23, 2024 · 44b6be4 · 44b6be4
2 parents b7b6273 + d5b6fc2
commit 44b6be4
Show file tree

Hide file tree

Showing 41 changed files with 1,734 additions and 141 deletions.
diff --git a/frontend/.env.example b/frontend/.env.example
@@ -1,4 +1,4 @@
-NEXT_PUBLIC_APP_NAME=TODO
+NEXT_PUBLIC_APP_NAME=Jippy
 NEXT_PUBLIC_FRONTEND_URL="http://localhost:3000"
 NEXT_PUBLIC_BACKEND_URL="http://localhost:8000"
 NEXT_PUBLIC_GOOGLE_CLIENT_ID=
diff --git a/frontend/app/favicon.ico b/frontend/app/favicon.ico
diff --git a/frontend/app/home.tsx b/frontend/app/home.tsx
@@ -0,0 +1,26 @@
+import NewsArticle from "@/components/news/news-article";
+
+/* This component should only be rendered to authenticated users */
+const Home = () => {
+  return (
+    <div className="flex flex-col w-full py-8">
+      <div className="flex flex-col mb-8 gap-y-2 mx-8 md:mx-16 xl:mx-32">
+        <span className="text-sm text-muted-foreground">
+          {new Date().toDateString()}
+        </span>
+        <h1 className="text-3xl 2xl:text-4xl font-bold">
+          What happened this week
+        </h1>
+      </div>
+
+      <div className="flex flex-col w-auto mx-4 md:mx-8 xl:mx-24">
+        <NewsArticle />
+        <NewsArticle />
+        <NewsArticle />
+        <NewsArticle />
+      </div>
+    </div>
+  );
+};
+
+export default Home;
diff --git a/frontend/app/landing.tsx b/frontend/app/landing.tsx
@@ -0,0 +1,6 @@
+const Landing = () => {
+  // TODO: build landing page
+  return <></>;
+};
+
+export default Landing;
diff --git a/frontend/app/login/page.tsx b/frontend/app/login/page.tsx
@@ -23,6 +23,7 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { Form } from "@/components/ui/form";
+import { useUserStore } from "@/store/user/user-store-provider";
 
 const loginFormSchema = z.object({
   email: z.string().email("Invalid email address"),
@@ -38,7 +39,10 @@ type LoginForm = z.infer<typeof loginFormSchema>;
 
 function LoginPage() {
   const router = useRouter();
+  const isLoggedIn = useUserStore((state) => state.isLoggedIn);
+  const setLoggedIn = useUserStore((state) => state.setLoggedIn);
   const [isError, setIsError] = useState<boolean>(false);
+
   const form = useForm<LoginForm>({
     resolver: zodResolver(loginFormSchema),
     defaultValues: loginFormDefault,
@@ -54,10 +58,15 @@ function LoginPage() {
       setIsError(true);
     } else {
       setIsError(false);
+      setLoggedIn(response.data.user);
       router.push("/");
     }
   };
 
+  if (isLoggedIn) {
+    router.push("/");
+  }
+
   return (
     <Box className="flex flex-col m-auto w-full justify-center items-center gap-y-6">
       <Card className="flex flex-col border-0 md:border px-6 sm:px-12 sm:py-3 md:max-w-lg">

diff --git a/frontend/app/not-found.tsx b/frontend/app/not-found.tsx
@@ -0,0 +1,32 @@
+import JippyClown from "@/assets/jippy-clown";
+import Link from "@/components/navigation/link";
+import { Button } from "@/components/ui/button";
+
+function AboutPage() {
+  return (
+    <div className="flex flex-col space-y-4 m-auto px-12 md:px-24">
+      <div className="flex flex-col space-y-8">
+        <JippyClown />
+        <div className="flex flex-col space-y-2">
+          <h3 className="text-lg md:text-2xl font-medium font-mono">
+            404 Not Found Error
+          </h3>
+          <h1 className="text-3xl md:text-5xl font-semibold">
+            Ribbit! Jippy couldn&apos;t find that page...
+          </h1>
+        </div>
+      </div>
+      <div className="flex flex-col gap-y-8">
+        <p>
+          The page you were looking for doesn&apos;t exist. The page might have
+          moved, or you might have clicked on a bad link.
+        </p>
+        <Link href="/">
+          <Button size="lg">Bring me back to my home page</Button>
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+export default AboutPage;
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
@@ -1,102 +1,12 @@
-import Image from "next/image";
+"use client";
 
-export default function Home() {
-  return (
-    <div className="w-full flex flex-col items-center gap-12 justify-center">
-      <div className="flex flex-col gap-8 items-center justify-center">
-        <Image
-          alt="Next.js logo"
-          className="dark:invert"
-          height={38}
-          priority
-          src="https://nextjs.org/icons/next.svg"
-          width={180}
-        />
-        <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
-              app/page.tsx
-            </code>
-            .
-          </li>
-          <li>Save and see your changes instantly.</li>
-        </ol>
+import Home from "@/app/home";
+import Landing from "@/app/landing";
+import { useUserStore } from "@/store/user/user-store-provider";
 
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            <Image
-              alt="Vercel logomark"
-              className="dark:invert"
-              height={20}
-              src="https://nextjs.org/icons/vercel.svg"
-              width={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            Read our docs
-          </a>
-        </div>
-      </div>
+const RootPage = () => {
+  const isLoggedIn = useUserStore((store) => store.isLoggedIn);
+  return isLoggedIn ? <Home /> : <Landing />;
+};
 
-      <div className="flex gap-6">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          <Image
-            alt="File icon"
-            aria-hidden
-            height={16}
-            src="https://nextjs.org/icons/file.svg"
-            width={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          <Image
-            alt="Window icon"
-            aria-hidden
-            height={16}
-            src="https://nextjs.org/icons/window.svg"
-            width={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          <Image
-            alt="Globe icon"
-            aria-hidden
-            height={16}
-            src="https://nextjs.org/icons/globe.svg"
-            width={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </div>
-    </div>
-  );
-}
+export default RootPage;
diff --git a/frontend/app/register/page.tsx b/frontend/app/register/page.tsx
@@ -16,6 +16,7 @@ import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Box } from "@/components/ui/box";
 import { Button } from "@/components/ui/button";
 import { Form } from "@/components/ui/form";
+import { useUserStore } from "@/store/user/user-store-provider";
 
 const registerFormSchema = z.object({
   email: z.string().email("Invalid email address"),
@@ -31,6 +32,7 @@ type RegisterForm = z.infer<typeof registerFormSchema>;
 
 function RegisterPage() {
   const router = useRouter();
+  const isLoggedIn = useUserStore((state) => state.isLoggedIn);
   const [isError, setIsError] = useState<boolean>(false);
   const form = useForm<RegisterForm>({
     resolver: zodResolver(registerFormSchema),
@@ -51,8 +53,12 @@ function RegisterPage() {
     }
   };
 
+  if (isLoggedIn) {
+    router.push("/");
+  }
+
   return (
-    <Box className="flex w-full space-x-24">
+    <Box className="flex w-full gap-x-24">
       <Box className="flex justify-center items-center bg-card text-card-foreground px-12 md:px-20 w-full lg:w-6/12">
         <Box className="flex-col space-y-8 w-full max-w-3xl">
           {/* Header */}

diff --git a/frontend/assets/jippy-clown.tsx b/frontend/assets/jippy-clown.tsx
@@ -0,0 +1,41 @@
+const JippyClown = () => {
+  return (
+    <svg
+      fill="none"
+      height="137"
+      viewBox="0 0 138 137"
+      width="138"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <ellipse cx="112.5" cy="20" fill="#B54141" rx="12.5" ry="12" />
+      <ellipse cx="103.5" cy="12" fill="#B54141" rx="12.5" ry="12" />
+      <path
+        d="M100.482 82.6951C90.4821 104.695 114.482 121.195 119.982 122.695C125.482 124.195 115.654 134.686 104.482 131.195C96.4821 128.695 83.9819 103.695 75.4819 86.1951C69.1468 73.1522 56.9819 79.1951 38.4821 64.1951C24.452 52.8193 29.6487 37.0284 39.4821 28.1951C47.1487 21.5284 68.682 8.59507 93.482 10.1951C118.282 11.7951 123.815 27.5284 123.482 35.1951C118.482 56.6951 107.649 70.3617 100.482 82.6951Z"
+        fill="#8BB9A3"
+      />
+      <path
+        d="M16.5343 45.772C26.9819 34.1951 41.1628 19.9609 62.0343 15.272C85.76 9.94199 121.284 8.09838 123.034 27.772C127.482 77.7482 87.4296 74.9445 60.482 71.2482C46.982 70.2482 36.982 79.7482 35.982 93.7482C35.9024 94.8625 36.482 96.2482 38.982 96.7482C43.482 97.6482 40.482 90.2482 44.482 84.2482C51.1772 74.2053 61.0028 73.7231 70.4819 81.1951C74.822 84.6161 78.3682 90.1829 79.982 95.4683C83.8032 107.983 80.7429 117.686 68.0345 126.772C50.9022 139.02 30.1539 126.836 16.5343 110.772C0.118583 91.4103 -0.472289 64.6169 16.5343 45.772Z"
+        fill="#8BB9A3"
+      />
+      <path
+        d="M41.0001 93.9583C37.5001 87.695 44.5179 78.6872 52.5 76.6951C62.5174 74.1951 76.2431 80.5539 80.793 93.9583C85.5776 108.054 78.702 123.32 64.7616 128.541C51.0002 133.695 40.0002 131.695 28.5004 125.695C10.4067 116.255 2.50009 93.9583 6.76154 70.5413C16.0141 19.6975 112.564 -14.5873 122.761 32.0413C126.936 51.131 109.5 63.1951 100.793 81.9583C97.0118 90.1058 96.7927 97.7215 98.7927 104.458C100.793 111.195 106.481 119.814 117 123.195"
+        stroke="#3B5249"
+        strokeLinecap="round"
+        strokeWidth="10"
+      />
+      <path
+        d="M90.5395 36.3987C88.9019 39.7797 89.6241 43.1468 92.2096 45.8722C95.6087 49.455 101.735 49.6996 104.856 45.8722C107.401 42.7511 107.271 38.7822 104.856 35.5594C101.497 31.0778 92.9808 31.3583 90.5395 36.3987Z"
+        fill="#3B5249"
+      />
+      <ellipse cx="75.5" cy="63" fill="#B54141" rx="12.5" ry="12" />
+      <ellipse cx="63.5" cy="56" fill="#B54141" rx="12.5" ry="12" />
+      <ellipse cx="65.5" cy="43" fill="#B54141" rx="12.5" ry="12" />
+      <ellipse cx="59.5" cy="28" fill="#C44747" rx="12.5" ry="12" />
+      <ellipse cx="67.5" cy="14" fill="#B54141" rx="12.5" ry="12" />
+      <ellipse cx="59.5" cy="28" fill="#B54141" rx="12.5" ry="12" />
+      <ellipse cx="130.5" cy="33" fill="#C44747" rx="7.5" ry="7" />
+    </svg>
+  );
+};
+
+export default JippyClown;
diff --git a/frontend/assets/jippy-icon/jippy-icon-lg.tsx b/frontend/assets/jippy-icon/jippy-icon-lg.tsx
@@ -0,0 +1,33 @@
+const JippyIconLg = ({ classname }: { classname?: string }) => {
+  return (
+    <svg
+      className={classname}
+      fill="none"
+      height="89"
+      viewBox="0 0 86 89"
+      width="86"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M67.1804 52.3571C60.5284 66.9916 76.4932 77.9675 80.1518 78.9653C83.8104 79.9631 77.2727 86.9419 69.8411 84.6195C64.5196 82.9565 56.2044 66.3264 50.5502 54.6853C46.3361 46.0091 38.2439 50.0289 25.9377 40.0508C16.6049 32.4836 20.0617 21.9794 26.6029 16.1034C31.7028 11.6687 46.0269 3.06544 62.5239 4.12976C79.021 5.19409 82.7018 15.66 82.4801 20.7599C79.154 35.0618 71.9477 44.1529 67.1804 52.3571Z"
+        fill="#8BB9A3"
+      />
+      <path
+        d="M11.3379 27.7957C18.2877 20.0947 27.7209 10.626 41.6047 7.50698C57.3871 3.96141 81.0176 2.73503 82.1823 15.822C85.1408 49.0664 58.4977 47.2013 40.5721 44.7425C31.5918 44.0773 24.9398 50.3968 24.2746 59.7096C24.2216 60.4509 24.6072 61.3727 26.2702 61.7053C29.2636 62.3039 27.268 57.3814 29.9288 53.3902C34.3825 46.7097 40.9185 46.3889 47.2241 51.3593C50.1111 53.635 52.4701 57.338 53.5436 60.8539C56.0854 69.1787 54.0497 75.6334 45.596 81.6773C34.1996 89.825 20.3977 81.7197 11.3379 71.034C0.418064 58.1545 0.0250134 40.3314 11.3379 27.7957Z"
+        fill="#8BB9A3"
+      />
+      <path
+        d="M27.6124 59.8494C25.2842 55.6831 29.9524 49.691 35.2622 48.3659C41.9258 46.7028 51.0562 50.9328 54.0828 59.8494C57.2656 69.2263 52.6919 79.3812 43.4186 82.8542C34.2645 86.2825 26.9472 84.9521 19.2976 80.9609C7.26152 74.6811 2.00204 59.8494 4.83677 44.2723C10.9916 10.4509 75.2168 -12.3556 82.0004 18.6619C84.7777 31.3605 73.1789 39.3856 67.3867 51.867C64.8716 57.2867 64.7259 62.3528 66.0563 66.8341C67.3867 71.3154 71.1705 77.0489 78.1679 79.2979"
+        stroke="#3B5249"
+        strokeLinecap="round"
+        strokeWidth="7"
+      />
+      <path
+        d="M60.5665 21.5605C59.4771 23.8096 59.9575 26.0494 61.6775 27.8624C63.9385 30.2457 68.0135 30.4083 70.0898 27.8624C71.7829 25.7861 71.6964 23.146 70.0898 21.0022C67.8556 18.021 62.1904 18.2076 60.5665 21.5605Z"
+        fill="#3B5249"
+      />
+    </svg>
+  );
+};
+
+export default JippyIconLg;
diff --git a/frontend/assets/jippy-icon/jippy-icon-md.tsx b/frontend/assets/jippy-icon/jippy-icon-md.tsx
@@ -0,0 +1,33 @@
+const JippyIconMd = ({ classname }: { classname?: string }) => {
+  return (
+    <svg
+      className={classname}
+      fill="none"
+      height="57"
+      viewBox="0 0 55 57"
+      width="55"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M42.294 33.3596C38.1177 42.5475 48.1407 49.4384 50.4377 50.0648C52.7346 50.6913 48.6301 55.0727 43.9644 53.6147C40.6235 52.5706 35.403 42.1298 31.8532 34.8213C29.2074 29.3742 24.127 31.8979 16.4009 25.6335C10.5416 20.8826 12.7118 14.2879 16.8185 10.5988C20.0204 7.8146 29.0133 2.41326 39.3705 3.08146C49.7278 3.74967 52.0386 10.3204 51.8994 13.5222C49.8112 22.5012 45.287 28.2089 42.294 33.3596Z"
+        fill="#8BB9A3"
+      />
+      <path
+        d="M7.23469 17.9395C11.5979 13.1046 17.5203 7.15996 26.2368 5.20176C36.1454 2.97578 50.9812 2.20583 51.7123 10.4221C53.5698 31.2937 36.8427 30.1227 25.5886 28.5791C19.9506 28.1614 15.7743 32.1289 15.3566 37.9757C15.3234 38.4411 15.5655 39.0198 16.6095 39.2286C18.4889 39.6045 17.236 36.514 18.9065 34.0082C21.7026 29.8141 25.8061 29.6127 29.7648 32.7332C31.5774 34.1619 33.0584 36.4868 33.7324 38.6941C35.3282 43.9206 34.0501 47.973 28.7427 51.7675C21.5878 56.8828 12.9226 51.7941 7.23469 45.0854C0.379005 36.9994 0.132239 25.8096 7.23469 17.9395Z"
+        fill="#8BB9A3"
+      />
+      <path
+        d="M17.4522 38.0635C15.9905 35.4478 18.9213 31.6858 22.2549 30.8538C26.4384 29.8098 32.1707 32.4654 34.0709 38.0635C36.0691 43.9505 33.1976 50.326 27.3757 52.5064C21.6285 54.6587 17.0346 53.8235 12.232 51.3177C4.67546 47.3751 1.37345 38.0635 3.15316 28.2838C7.01731 7.04998 47.3392 -7.26839 51.5982 12.2051C53.3418 20.1775 46.0598 25.2158 42.4234 33.0519C40.8443 36.4546 40.7529 39.6351 41.5881 42.4486C42.4234 45.2621 44.7989 48.8617 49.192 50.2736"
+        stroke="#3B5249"
+        strokeLinecap="round"
+        strokeWidth="5"
+      />
+      <path
+        d="M38.1414 14.0249C37.4575 15.4369 37.7591 16.8431 38.8389 17.9813C40.2585 19.4776 42.8168 19.5797 44.1203 17.9813C45.1833 16.6778 45.129 15.0203 44.1203 13.6744C42.7177 11.8027 39.161 11.9199 38.1414 14.0249Z"
+        fill="#3B5249"
+      />
+    </svg>
+  );
+};
+
+export default JippyIconMd;
diff --git a/frontend/assets/jippy-icon/jippy-icon-sm.tsx b/frontend/assets/jippy-icon/jippy-icon-sm.tsx
@@ -0,0 +1,33 @@
+const JippyIconSm = ({ classname }: { classname?: string }) => {
+  return (
+    <svg
+      className={classname}
+      fill="none"
+      height="35"
+      viewBox="0 0 34 35"
+      width="34"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M26.299 20.3081C23.7805 25.8488 29.8248 30.0043 31.21 30.382C32.5951 30.7598 30.1199 33.402 27.3063 32.5228C25.2916 31.8931 22.1434 25.5969 20.0027 21.1896C18.4072 17.9048 15.3435 19.4267 10.6844 15.6489C7.15094 12.7839 8.45972 8.80705 10.9362 6.58239C12.8671 4.9034 18.2902 1.64617 24.536 2.04912C30.7819 2.45208 32.1754 6.41449 32.0915 8.34533C30.8322 13.7601 28.1039 17.202 26.299 20.3081Z"
+        fill="#8BB9A3"
+      />
+      <path
+        d="M5.15674 11.0091C7.78796 8.09349 11.3594 4.50864 16.6158 3.32776C22.5911 1.9854 31.5377 1.52109 31.9786 6.47586C33.0987 19.0623 23.0116 18.3562 16.2249 17.4252C12.8249 17.1734 10.3065 19.566 10.0546 23.0918C10.0346 23.3725 10.1805 23.7215 10.8102 23.8474C11.9435 24.074 11.1879 22.2104 12.1953 20.6993C13.8815 18.17 16.3561 18.0486 18.7434 19.9304C19.8364 20.792 20.7295 22.1939 21.1359 23.5251C22.0983 26.6768 21.3276 29.1206 18.127 31.4088C13.8122 34.4936 8.5868 31.4249 5.15674 27.3793C1.02247 22.503 0.873662 15.7552 5.15674 11.0091Z"
+        fill="#8BB9A3"
+      />
+      <path
+        d="M11.3182 23.1447C10.4367 21.5674 12.2041 19.2987 14.2144 18.797C16.7373 18.1674 20.1941 19.7689 21.34 23.1447C22.545 26.6948 20.8134 30.5395 17.3025 31.8544C13.8367 33.1524 11.0664 32.6487 8.17018 31.1376C3.6133 28.76 1.62204 23.1447 2.69528 17.2472C5.02553 4.44231 29.3413 -4.19227 31.9097 7.55105C32.9611 12.3588 28.5698 15.3971 26.3769 20.1226C25.4246 22.1745 25.3695 24.0925 25.8732 25.7892C26.3769 27.4858 27.8094 29.6565 30.4586 30.508"
+        stroke="#3B5249"
+        strokeLinecap="round"
+        strokeWidth="3"
+      />
+      <path
+        d="M23.795 8.64845C23.3826 9.49994 23.5645 10.348 24.2156 11.0343C25.0717 11.9367 26.6145 11.9982 27.4006 11.0343C28.0416 10.2483 28.0088 9.24873 27.4006 8.43707C26.5547 7.30839 24.4099 7.37904 23.795 8.64845Z"
+        fill="#3B5249"
+      />
+    </svg>
+  );
+};
+
+export default JippyIconSm;