Code-the-Change-YYC · fisayoadabs · Jan 16, 2025 · Jan 16, 2025 · Feb 5, 2025 · Feb 10, 2025
diff --git a/amplify/auth/PostConfirmation/handler.ts b/amplify/auth/PostConfirmation/handler.ts
@@ -52,6 +52,7 @@ export const handler: PostConfirmationTriggerHandler = async (event) => {
   const cognitoGroupResponse = await cognitoClient.send(command);
 
   const DDBResponse = await dataClient.models.User.create({
+    profilePicture: "",
     firstName: "",
     lastName: "",
     role: "Participant",

diff --git a/amplify/auth/resource.ts b/amplify/auth/resource.ts
@@ -27,68 +27,7 @@ export const auth = defineAuth({
       verificationEmailStyle: "CODE",
       verificationEmailSubject: "Welcome Hack the Change!",
       verificationEmailBody: (createCode) =>
-        `<html>
-          <head>
-              <meta charset="UTF-8" />
-              <title>Hack the Change Account Confirmation</title>
-              <style>
-                  body, html {
-                      margin: 0;
-                      padding: 0;
-                      height: 100%;
-                      font-family: Arial, sans-serif;
-                  }
-                  .email-container {
-                      max-width: 600px;
-                      margin: 0 auto;
-                      /* Need the published Location of the ctc Hero image to paste here according to google */
-                      background-size: cover;
-                      background-position: center;
-                      padding: 40px 20px;
-                      box-sizing: border-box;
-                      min-height: 400px;
-                  }
-                  .content-box {
-                      background-color: rgba(255, 255, 255, 0.9);
-                      border-radius: 8px;
-                      padding: 30px;
-                      margin: 20px 0;
-                      text-align: center;
-                      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-                  }
-                  h1 {
-                      color: #4a4a4a;
-                      margin-bottom: 20px;
-                  }
-                  .verification-code {
-                      font-size: 32px;
-                      font-weight: bold;
-                      color: #ff5a5f;
-                      letter-spacing: 2px;
-                      padding: 10px;
-                      margin: 15px 0;
-                  }
-                  .footer {
-                      font-size: 12px;
-                      color: #666;
-                      margin-top: 20px;
-                  }
-              </style>
-          </head>
-          <body>
-              <div class="email-container">
-                  <div class="content-box">
-                      <h1>Hack the Change Account Confirmation</h1>
-                      <p>Thank you for creating your Hack the Change account. Please use the code below to complete your registration:</p>
-                      <div class="verification-code">${createCode()}</div>
-                      <p>If you didn't request this code, you can safely ignore this email.</p>
-                  </div>
-                  <div class="footer">
-                      &copy; 2025 Code the Change. <img src="https://www.codethechangeyyc.ca/_next/image?url=/logo.png&w=96&q=75" alt="Code the Change Logo" style="height: 12px; vertical-align: middle; margin: 0 4px;"> All rights reserved. 
-                  </div>
-              </div>
-          </body>
-          </html>`,
+        `<h1>Use this code to confirm your Hack the Change Account: ${createCode()}</h1>`,
     },
 
     externalProviders: {

diff --git a/amplify/backend.ts b/amplify/backend.ts
@@ -2,10 +2,13 @@
 import { auth } from "@/amplify/auth/resource";
 import { data } from "@/amplify/data/resource";
 import { defineBackend } from "@aws-amplify/backend";
 
+import { storage } from "./storage/resource";
+
 const backend = defineBackend({
   auth,
   data,
+  storage,
 });
 
 // Cognito Email Overrides

diff --git a/amplify/data/resource.ts b/amplify/data/resource.ts
@@ -15,6 +15,7 @@ const schema = a
     User: a
       .model({
         id: a.id().required(),
+        profilePicture: a.string(),
         firstName: a.string(),
         lastName: a.string(),
         role: a

diff --git a/amplify/storage/resource.ts b/amplify/storage/resource.ts
@@ -0,0 +1,13 @@
+import { defineStorage } from "@aws-amplify/backend";
+
+export const storage = defineStorage({
+  name: "profileImageStorage",
+  access: (allow) => ({
+    "public/*": [
+      allow.authenticated.to(["read", "write", "delete"]),
+      allow.groups(["Participant"]).to(["read", "write"]),
+      allow.groups(["Judge"]).to(["read", "write", "delete"]),
+      allow.groups(["Admin"]).to(["read", "write", "delete"]),
+    ],
+  }),
+});
diff --git a/next.config.js b/next.config.js
@@ -1,6 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   images: {
+    domains: ["images.ctfassets.net", "s3.ca-central-1.amazonaws.com"],
     remotePatterns: [
       {
         protocol: "https",

diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "@aldabil/react-scheduler": "^2.9.5",
     "@aws-amplify/adapter-nextjs": "^1.0.18",
     "@aws-amplify/ui-react": "^6.1.5",
+    "@aws-amplify/ui-react-storage": "^3.9.1",
     "@emotion/react": "11.13.3",
     "@emotion/styled": "11.13.0",
     "@mui/icons-material": "^5.15.10",
@@ -36,9 +37,9 @@
     "date-fns": "^4.1.0",
     "js-sha3": "^0.9.3",
     "luxon": "^3.4.4",
-    "next": "^14.2.12",
-    "react": "^18",
-    "react-dom": "^18",
+    "next": "^15.3.5",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "react-hook-form": "^7.51.5",
     "react-icons": "^5.0.1",
     "react-loading-skeleton": "^3.4.0",

diff --git a/public/images/landingpage/HackathonFinished/hackathon_finished_background.png b/public/images/landingpage/HackathonFinished/hackathon_finished_background.png
diff --git a/public/svgs/judgingRubric/rubric_left.svg b/public/svgs/judgingRubric/rubric_left.svg
diff --git a/public/svgs/judgingRubric/rubric_right.svg b/public/svgs/judgingRubric/rubric_right.svg
diff --git a/src/_middleware.ts b/src/_middleware.ts
@@ -0,0 +1,43 @@
+// // middleware.ts
+// import { fetchAuthSession } from "aws-amplify/auth/server";
+// import { NextResponse } from "next/server";
+// import type { NextRequest } from "next/server";
+
+// import { runWithAmplifyServerContext } from "@/utils/amplify-utils";
+
+// export async function middleware(request: NextRequest) {
+//   const response = NextResponse.next();
+
+//   const authenticated = await runWithAmplifyServerContext({
+//     nextServerContext: { request, response },
+//     operation: async (contextSpec) => {
+//       try {
+//         const session = await fetchAuthSession(contextSpec, {});
+//         return session.tokens !== undefined;
+//       } catch (error) {
+//         console.log(error);
+//         return false;
+//       }
+//     },
+//   });
+
+//   if (authenticated) {
+//     return response;
+//   }
+
+//   return NextResponse.redirect(new URL("/login", request.url));
+// }
+
+// export const config = {
+//   matcher: [
+//     /*
+//      * Match all request paths except for the ones starting with:
+//      * - api (API routes)
+//      * - _next/static (static files)
+//      * - _next/image (image optimization files)
+//      * - favicon.ico (favicon file)
+//      * - login
+//      */
+//     "/((?!api|_next/static|_next/image|favicon.ico|static|login|$).*)",
+//   ],
+// };
diff --git a/src/app/admin/components/UsersTable.tsx b/src/app/admin/components/UsersTable.tsx
@@ -36,33 +36,31 @@ export default function UsersTable({ users }: { users: User[] }) {
     typeName: "User",
   });
   return (
-    <div className="users group flex flex-1 flex-col justify-between overflow-hidden rounded-3xl bg-white p-2 text-xl outline  outline-awesomer-purple">
-      <div className="overflow-x-auto">
-        <div className="w-full">
-          <TableSearch
-            tableDataLength={table.getRowCount()}
-            handleSearchChange={useCallback(
-              (value: string) => setGlobalFilter(value),
-              [],
-            )}
+    <div className="users group flex flex-1 flex-col justify-between overflow-x-auto rounded-3xl bg-white p-2 text-xl outline  outline-awesomer-purple">
+      <div className="w-full">
+        <TableSearch
+          tableDataLength={table.getRowCount()}
+          handleSearchChange={useCallback(
+            (value: string) => setGlobalFilter(value),
+            [],
+          )}
+        />
+        <table className="w-full border-separate border-spacing-x-0.5 p-2">
+          <TanstackTableHead
+            table={useMemo(() => table.getHeaderGroups(), [table])}
           />
-          <table className="w-full border-separate border-spacing-x-0.5 p-2">
-            <TanstackTableHead
-              table={useMemo(() => table.getHeaderGroups(), [table])}
-            />
-            <TanstackTableBody table={table} />
-            <tfoot>
-              <tr>
-                <th
-                  colSpan={table.getAllColumns().length}
-                  className="rounded-b-xl bg-awesome-purple p-4 text-white"
-                />
-              </tr>
-            </tfoot>
-          </table>
-        </div>
-        <TableFooter table={table} />
+          <TanstackTableBody table={table} />
+          <tfoot>
+            <tr>
+              <th
+                colSpan={table.getAllColumns().length}
+                className="rounded-b-xl bg-awesome-purple p-4 text-white"
+              />
+            </tr>
+          </tfoot>
+        </table>
       </div>
+      <TableFooter table={table} />
     </div>
   );
 }
diff --git a/src/app/admin/teams/components/TanstackTableFooter.tsx b/src/app/admin/teams/components/TanstackTableFooter.tsx
@@ -2,7 +2,7 @@ import type { Table } from "@tanstack/react-table";
 
 export default function TanstackTableFooter<T>({ table }: { table: Table<T> }) {
   return (
-    <div className="text-md mb-2 flex items-center justify-between px-3 text-awesomer-purple group-[.teams]:gap-2.5 group-[.users]:gap-7 group-[.users]:whitespace-nowrap group-[.teams]:md:gap-4 group-[.users]:md:gap-11">
+    <div className="text-md flex items-center justify-between px-3 text-awesomer-purple group-[.teams]:gap-2.5 group-[.users]:gap-7 group-[.users]:whitespace-nowrap group-[.teams]:md:gap-4 group-[.users]:md:gap-11">
       <div className="text-black">
         Showing {table.getRowModel().rows.length.toLocaleString()} of{" "}
         {table.getRowCount().toLocaleString()} Rows

diff --git a/src/app/admin/teams/components/TeamsTable.tsx b/src/app/admin/teams/components/TeamsTable.tsx
@@ -29,33 +29,31 @@ export default function TeamsTable({ teams }: { teams: Team[] }) {
     typeName: "Team",
   });
   return (
-    <div className="teams group flex flex-1 flex-col justify-between overflow-hidden rounded-3xl bg-white p-2 text-xl outline  outline-awesomer-purple">
-      <div className="overflow-x-auto">
-        <div className="w-full">
-          <TableSearch
-            tableDataLength={table.getRowCount()}
-            handleSearchChange={useCallback(
-              (value: string) => setGlobalFilter(value),
-              [],
-            )}
+    <div className="teams group flex flex-1 flex-col justify-between overflow-x-auto rounded-3xl bg-white p-2 text-xl outline  outline-awesomer-purple">
+      <div className="w-full">
+        <TableSearch
+          tableDataLength={table.getRowCount()}
+          handleSearchChange={useCallback(
+            (value: string) => setGlobalFilter(value),
+            [],
+          )}
+        />
+        <table className="ml-1.5 w-full border-separate border-spacing-x-0.5 p-2 md:ml-0">
+          <TeamsTableHead
+            table={useMemo(() => table.getHeaderGroups(), [table])}
           />
-          <table className="ml-1.5 w-full border-separate border-spacing-x-0.5 p-2 md:ml-0">
-            <TeamsTableHead
-              table={useMemo(() => table.getHeaderGroups(), [table])}
-            />
-            <TeamTableBody table={table} />
-            <tfoot>
-              <tr>
-                <th
-                  colSpan={table.getAllColumns().length}
-                  className="rounded-b-xl bg-awesome-purple p-4 text-white"
-                />
-              </tr>
-            </tfoot>
-          </table>
-        </div>
-        <TableFooter table={table} />
+          <TeamTableBody table={table} />
+          <tfoot>
+            <tr>
+              <th
+                colSpan={table.getAllColumns().length}
+                className="rounded-b-xl bg-awesome-purple p-4 text-white"
+              />
+            </tr>
+          </tfoot>
+        </table>
       </div>
+      <TableFooter table={table} />
     </div>
   );
 }
diff --git a/src/app/hackathon-end/page.tsx b/src/app/hackathon-end/page.tsx