Merge branch 'main' into style-responsiveness

.env.template

@@ -4,30 +4,26 @@
 # In production, set the appropriate environment variables on impaas (see README)
 # =======================
 
-# Login details for the mysql 
-# ImPaaS will provide these details in prod, but you will need a dev database regardless for local development.
-# We recommend running a local mysql instance using docker and exposing port 3306 for local development
-# (see mysql docker image README)
-MYSQL_USER=
-MYSQL_DATABASE_NAME=
-MYSQL_HOST=
-MYSQL_PORT=
-MYSQL_PASSWORD=
+# Login details for postgres database
+# Replace "postgres:postgres" with "<username>:<password>"
+# And cpp-connect with the name of the database you are using
+DATABASE_URL="postgres://postgres:postgres@localhost:5432/cpp-connect"
 
 # ======================
 # These variables below will need to be manually provided to ImPaaS in production
 # ======================
 # Root dir to store uploaded files
 # If you choose to change this environment variable, add the chosen directory to the .tsuruignore file
 UPLOAD_DIR=./uploads
-# Azure AD details - see README
-AZURE_AD_CLIENT_ID=
-AZURE_AD_CLIENT_SECRET=
-AZURE_AD_TENANT_ID=
+# MS Entra SSO details - see README
+MS_ENTRA_CLIENT_ID=
+MS_ENTRA_CLIENT_SECRET=
+MS_ENTRA_TENANT_ID=
 # Secret for generates auth tokes (generate using `npx auth secret`)
 AUTH_SECRET= # Run `npx auth secret`. Read more: https://cli.authjs.dev
 
-# Comma separate list of allowed admins
+# Comma separate list of allowed admins. By default these users will receive the admin role on SSO login
+# Edit this list to add/remove admins
 # NOTE: MUST be the full email in the below format
 CPP_ALLOWED_ADMINS="[email protected],[email protected]"
 

app/api/uploads/[...path]/route.ts

@@ -1,11 +1,54 @@
 import { auth } from "@/auth"
+import prisma from "@/lib/db"
 import { validateFilePath } from "@/lib/files/saveFile"
 
 import fs from "fs/promises"
 import mime from "mime-types"
+import { Session } from "next-auth"
 import { NextRequest } from "next/server"
 import path from "path"
 
+/**
+ * @param session The user's session
+ * @param suffix The suffix of the file path
+ * @returns A response if the user is unauthorised to view the requested CV, or "authorised" if they are authorised
+ */
+const checkAuthorisedForCV = async (session: Session, suffix: string): Promise<Response | "authorised"> => {
+  // Only check for CVs
+  if (suffix.split("/")[0] !== "cvs") {
+    return "authorised"
+  }
+
+  // Only companies and admins can view any CV
+  if (session.user.role === "COMPANY" || session.user.role === "ADMIN") {
+    return "authorised"
+  }
+
+  // Students can only view their own CV
+  if (session.user.role === "STUDENT") {
+    const studentProfile = await prisma.studentProfile.findUnique({
+      select: {
+        cv: true,
+      },
+      where: {
+        userId: session.user.id,
+      },
+    })
+
+    if (!studentProfile) {
+      return new Response("Student profile not found", { status: 404 })
+    }
+
+    if (suffix !== "/" + studentProfile.cv) {
+      return new Response("Unauthorised to view this CV", { status: 403 })
+    }
+
+    return "authorised"
+  }
+
+  return new Response("Unexpected error", { status: 500 })
+}
+
 /**
  * Upon request: return the file provided at the path in the volume
  * @example GET /api/uploads/banner/myCompanyBanner.png
@@ -29,6 +72,12 @@ export const GET = async (req: NextRequest) => {
     return new Response("Invalid path", { status: 400 })
   }
 
+  const res = await checkAuthorisedForCV(session, suffix)
+
+  if (res !== "authorised") {
+    return res
+  }
+
   const filePath = path.join(process.env.UPLOAD_DIR, suffix)
 
   try {

app/auth/login/page.tsx

@@ -1,12 +1,12 @@
 import { auth, signIn } from "@/auth"
 import Link from "@/components/Link"
+import ThemedLogo from "@/components/ThemedLogo"
 
 import styles from "./page.module.scss"
 
 import { Button, Flex, Separator, Text } from "@radix-ui/themes"
 import { Heading } from "@react-email/components"
 import { AuthError } from "next-auth"
-import Image from "next/image"
 import { redirect } from "next/navigation"
 import React from "react"
 
@@ -36,7 +36,7 @@ const LoginPage = async () => {
   return (
     <Flex gap="6" direction="column">
       <Flex className={styles.logosContainer}>
-        <Image src="/images/imperial-logo-blue.svg" alt="imperial logo in blue" width={0} height={0} />
+        <ThemedLogo />
       </Flex>
       <Flex pl="9" pr="9" direction="column" gap="5">
         <Flex direction="column" justify="center" align="center">

app/auth/login/partner/page.tsx

@@ -63,7 +63,7 @@ const LoginPage = () => {
         </TextField.Root>
 
         <Button size="3" style={{ width: "100%" }}>
-          {isPending ? <Spinner /> : "Sign In With Magic Link"}
+          {isPending ? <Spinner /> : "Sign in with magic link"}
         </Button>
       </form>
     </Flex>

app/companies/CompanyAdminActions.tsx

@@ -8,8 +8,8 @@ import React from "react"
 export const CompanyAdminActions = () => {
   return (
     <RestrictedArea showMessage={false}>
-      <Card variant="surface">
-        <Flex direction="row" align="center" justify="between" p="2">
+      <Card style={{ width: "100%" }} variant="surface">
+        <Flex gap="3" direction="row" align="center" justify="between" p="2">
           <Heading size="6">Admin Actions</Heading>
           <Flex direction="row" align="center">
             <AddCompany />

app/companies/[slug]/page.module.scss

@@ -18,8 +18,8 @@
   width: var(--profile-image-size);
   height: var(--profile-image-size);
   padding: 0.5em;
-  box-shadow: 0 4px 12px var(--gray-11);
   position: relative;
+  box-shadow: 0 4px 12px var(--gray-11);
   display: flex;
   justify-content: center;
   align-items: center;

app/companies/[slug]/page.tsx

@@ -149,14 +149,14 @@ const CompanyPage = async ({ params }: { params: { slug: string } }) => {
 
       <Card>
         <Tabs.Root defaultValue="about">
-          <Tabs.List>
+          <Tabs.List highContrast>
             <Tabs.Trigger value="about">About</Tabs.Trigger>
             <Tabs.Trigger value="opportunities">Opportunities</Tabs.Trigger>
             <Tabs.Trigger value="events">Events</Tabs.Trigger>
           </Tabs.List>
           <Tabs.Content value="about">
             <Box className={styles.aboutCard}>
-              <Collapsible.Root className={styles.CollapsibleRoot}>
+              <Collapsible.Root className={styles.CollapsibleRoot} defaultOpen={session?.user.role === "STUDENT"}>
                 <Box className={styles.summaryContainer}>
                   <CompanyDetail title="Summary">
                     {companyProfile.summary && <MdViewer markdown={companyProfile.summary} />}

app/companies/page.tsx

@@ -4,7 +4,7 @@ import prisma from "@/lib/db"
 
 import { CompanyAdminActions } from "./CompanyAdminActions"
 
-import { Flex } from "@radix-ui/themes"
+import { Flex, Heading } from "@radix-ui/themes"
 import React from "react"
 
 const OpportunitiesPage = async () => {
@@ -21,7 +21,8 @@ const OpportunitiesPage = async () => {
 
   return (
     <RestrictedArea allowedRoles={["STUDENT"]}>
-      <Flex gap="5" direction="column">
+      <Flex gap="5" direction="column" align="center">
+        <Heading size="8">Companies</Heading>
         <CompanyAdminActions />
         <CompanyTable columns={["logo", "name", "sector", "size", "hq"]} companies={companies} />
       </Flex>

app/events/EventTable.tsx

@@ -5,11 +5,14 @@ import Link from "@/components/Link"
 import TanstackTable from "@/components/TanstackTable"
 import { EditEvent } from "@/components/UpsertEvent"
 
+import styles from "./eventTable.module.scss"
+
 import { getCompanyLink } from "../companies/getCompanyLink"
 import type { CompanyProfile, Event } from "@prisma/client"
 import { Flex } from "@radix-ui/themes"
 import { ColumnDef, DisplayColumnDef, createColumnHelper } from "@tanstack/react-table"
 import { format } from "date-fns"
+import Image from "next/image"
 import { useMemo } from "react"
 
 type EventRow = {
@@ -41,6 +44,26 @@ const EventTable = ({
         id: "company.name",
         sortingFn: "alphanumeric",
       },
+      "company.logo": {
+        cell: info => (
+          <Flex align="center" justify="center">
+            <Flex justify="center" height="4em" maxWidth="8em">
+              {info.getValue() && (
+                <Image
+                  unoptimized
+                  src={`/api/uploads/${info.getValue()}`}
+                  alt="profile teaser"
+                  width={100}
+                  height={100}
+                  className={styles.logo}
+                />
+              )}
+            </Flex>
+          </Flex>
+        ),
+        header: "",
+        enableSorting: false,
+      },
       title: {
         cell: info => <Link href={`/events/${info.row.original.id}`}>{info.getValue()}</Link>,
         header: "Title",

app/events/eventTable.module.scss

@@ -0,0 +1,6 @@
+.logo {
+  flex-grow: 1;
+  object-fit: contain;
+  width: 100%;
+  height: auto;
+}

app/events/page.tsx

@@ -3,6 +3,7 @@ import prisma from "@/lib/db"
 
 import EventTable from "./EventTable"
 
+import { Flex, Heading } from "@radix-ui/themes"
 import React from "react"
 
 const EventsPage = async () => {
@@ -15,10 +16,13 @@ const EventsPage = async () => {
 
   return (
     <RestrictedArea allowedRoles={["STUDENT"]}>
-      <EventTable
-        events={events}
-        columns={["company.name", "title", "dateStart", "shortDescription", "location", "spaces"]}
-      />
+      <Flex direction="column" gap="5" align="center" width="100%">
+        <Heading size="8">Events</Heading>
+        <EventTable
+          events={events}
+          columns={["company.logo", "company.name", "title", "dateStart", "shortDescription", "location", "spaces"]}
+        />
+      </Flex>
     </RestrictedArea>
   )
 }

app/layout.tsx

@@ -10,6 +10,7 @@ import "@radix-ui/themes/components.css"
 import "@radix-ui/themes/tokens/base.css"
 import "@radix-ui/themes/utilities.css"
 import { Metadata } from "next"
+import { ThemeProvider } from "next-themes"
 import { Inter } from "next/font/google"
 import { ReactNode } from "react"
 
@@ -29,25 +30,27 @@ const RootLayout = ({
   return (
     <html lang="en">
       <body className={inter.className}>
-        <Theme accentColor="blue" grayColor="gray">
-          <ThemePanel defaultOpen={false} />
-          <Client>
-            <Flex direction="column" justify="between" minHeight="100vh">
-              <NavbarWrapper />
-              <Flex
-                id={CONTENT_ID}
-                className="page-container"
-                align="center"
-                direction="column"
-                height="100%"
-                flexGrow="1"
-              >
-                <Box className="page-content">{children}</Box>
+        <ThemeProvider attribute="class">
+          <Theme accentColor="blue" grayColor="gray">
+            <ThemePanel defaultOpen={false} />
+            <Client>
+              <Flex direction="column" justify="between" minHeight="100vh">
+                <NavbarWrapper />
+                <Flex
+                  id={CONTENT_ID}
+                  className="page-container"
+                  align="center"
+                  direction="column"
+                  height="100%"
+                  flexGrow="1"
+                >
+                  <Box className="page-content">{children}</Box>
+                </Flex>
+                <Footer />
               </Flex>
-              <Footer />
-            </Flex>
-          </Client>
-        </Theme>
+            </Client>
+          </Theme>
+        </ThemeProvider>
       </body>
     </html>
   )

app/opportunities/OpportunityTable.tsx

@@ -5,11 +5,14 @@ import Link from "@/components/Link"
 import TanstackTable from "@/components/TanstackTable"
 import { EditOpportunity } from "@/components/UpsertOpportunity"
 
+import styles from "./opportunityTable.module.scss"
+
 import { getCompanyLink } from "../companies/getCompanyLink"
 import type { CompanyProfile, Opportunity } from "@prisma/client"
 import { Flex } from "@radix-ui/themes"
 import { ColumnDef, DisplayColumnDef, createColumnHelper } from "@tanstack/react-table"
 import { formatDistanceToNowStrict } from "date-fns"
+import Image from "next/image"
 import { useMemo } from "react"
 
 type OpportunityRow = {
@@ -41,6 +44,26 @@ const OpportunityTable = ({
         id: "company.name",
         sortingFn: "alphanumeric",
       },
+      "company.logo": {
+        cell: info => (
+          <Flex align="center" justify="center">
+            <Flex justify="center" height="4em" maxWidth="8em">
+              {info.getValue() && (
+                <Image
+                  unoptimized
+                  src={`/api/uploads/${info.getValue()}`}
+                  alt="profile teaser"
+                  width={100}
+                  height={100}
+                  className={styles.logo}
+                />
+              )}
+            </Flex>
+          </Flex>
+        ),
+        header: "",
+        enableSorting: false,
+      },
       position: {
         cell: info => <Link href={`/opportunities/${info.row.original.id}`}>{info.getValue()}</Link>,
         header: "Position",