Frontend fixes for the fall semester

app.js

@@ -1,6 +1,5 @@
 require("dotenv").config();
 const express = require("express");
-const http = require("http");
 const ejsMate = require("ejs-mate");
 const cookieParser = require("cookie-parser");
 const session = require("express-session");
@@ -12,12 +11,13 @@ const GoogleStrategy = require("passport-google-oauth2").Strategy;
 const { cspConfig, sessionConfig } = require("./config/general.config");
 const db = require("./database/db");
 const { fallible } = require("./middleware");
-const authRoutes = require("./routes/auth");
-const attendRoutes = require("./routes/attendance");
 const adminRoutes = require("./routes/admin");
+const attendRoutes = require("./routes/attendance");
+const authRoutes = require("./routes/auth");
+const galleryRoutes = require("./routes/gallery");
+const presentationsRoutes = require("./routes/presentations");
 const profileRoutes = require("./routes/profile");
 const projectsRoutes = require("./routes/projects");
-const presentationsRoutes = require("./routes/presentations");
 const scheduleRoutes = require("./routes/schedule");
 const app = express();
 
@@ -101,6 +101,7 @@ app.use((req, res, next) => {
 app.use("/", adminRoutes);
 app.use("/", attendRoutes);
 app.use("/", authRoutes);
+app.use("/", galleryRoutes);
 app.use("/", presentationsRoutes);
 app.use("/", profileRoutes);
 app.use("/", projectsRoutes);
@@ -110,7 +111,7 @@ app.get(
   "/",
   fallible(async (req, res) => {
     const imageResp = await db.query(
-      "SELECT * FROM images ORDER BY RANDOM() LIMIT 1",
+      "SELECT * FROM images WHERE active = true ORDER BY RANDOM() LIMIT 1",
     );
     const image = imageResp.rows[0];
 
@@ -166,11 +167,8 @@ app.use((req, res, next) => {
 app.use((err, req, res, next) => {
   let error;
   if (process.env.NODE_ENV === "development") {
-    // Possible security hazard if we expose the trace, so only display it
-    // in development mode.
     error = err.stack;
   }
-
   res.status(500).render("error", { title: "Error", error: error });
 });
 

database/init_database.sql

@@ -56,7 +56,8 @@ CREATE TABLE IF NOT EXISTS rsvps (
 
 CREATE TABLE IF NOT EXISTS images (
     "id"       TEXT PRIMARY KEY,
-    "caption"  TEXT
+    "caption"  TEXT,
+    "active"   BOOLEAN
 );
 
 CREATE TABLE IF NOT EXISTS presentations (

middleware.js

@@ -15,13 +15,22 @@ module.exports.isLoggedIn = (req, res, next) => {
 };
 
 module.exports.isAdminAuthenticated = (req, res, next) => {
-  if (req.user == undefined || !req.user.is_admin || !req.isAuthenticated()) {
-    req.session.returnTo = req.originalUrl;
-    req.user = false;
-    req.flash("error", "You do not have permission to view this page!");
-    return res.redirect("/");
-  } else {
+  if (process.env.NODE_ENV === "development") {
+    // bypass admin auth in development mode
     next();
+  } else {
+    if (
+      req.user === undefined ||
+      !req.user.is_admin ||
+      !req.isAuthenticated()
+    ) {
+      req.session.returnTo = req.originalUrl;
+      req.user = false;
+      req.flash("error", "You do not have permission to view this page!");
+      return res.redirect("/");
+    } else {
+      next();
+    }
   }
 };
 

package.json

@@ -1,13 +1,12 @@
 {
   "name": "acm-site",
   "version": "1.0.0",
-  "description": "The backend for the Mines ACM website.",
+  "description": "The Mines ACM club website, acm.mines.edu",
   "main": "app.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
     "start": "sass --style=compressed public/stylesheets/styles.scss public/stylesheets/styles.css; node app.js"
   },
-  "author": "",
+  "author": "Mines ACM Contributors",
   "license": "ISC",
   "dependencies": {
     "bootstrap": "^5.3.2",

public/stylesheets/styles.scss

@@ -95,6 +95,13 @@ a {
 }
 
 // --- DEFAULT OVERRIDES ---
+.btn-primary {
+  color: white;
+}
+
+.btn:hover {
+  color: white;
+}
 
 .container {
   @extend .py-5;
@@ -139,6 +146,31 @@ nav .nav-item {
 }
 
 // --- NEW STYLES ---
+.gallery-container {
+  background-color: white;
+  border-bottom: 4px solid $primary;
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: 15px;
+  column-gap: 15px;
+}
+
+.gallery-image {
+  object-fit: contain;
+}
+
+.thumbnail {
+  display: flex;
+  height: 200px;
+}
+
+.gallery-image-caption {
+  @extend .pt-2, .fs-5;
+  font-style: italic;
+  text-align: center;
+  margin-bottom: 2%;
+}
+
 .subhead-base {
   @extend .ps-3, .fs-5;
   border-left: 4px solid;
@@ -155,6 +187,10 @@ nav .nav-item {
   border-left-color: $secondary;
 }
 
+.subhead-text {
+  font-size: 18px;
+}
+
 .scroll {
   height: 50vh;
   overflow-y: scroll;
@@ -176,6 +212,7 @@ nav .nav-item {
 .large-card-title {
   @extend .m-0, .text-secondary;
   font-weight: bold;
+  display: inline-block;
 }
 
 .large-card-sidetitle {
@@ -251,6 +288,7 @@ nav .nav-item {
   @extend .rounded-5;
   width: 128px;
   height: 128px;
+  object-fit: cover;
 }
 
 .project-image {
@@ -280,11 +318,16 @@ nav .nav-item {
   @extend .rounded-5, .w-100, .mb-3;
 }
 
-// for 'about us' cards styling
 .row-cols-auto > * {
   max-width: 20%;
 }
 
+.rsvp {
+  // display: flex;
+  align-items: center;
+  margin-left: 1%;
+}
+
 // --- ANIMATIONS ---
 
 @keyframes fadein {

routes/admin.js

@@ -65,6 +65,19 @@ router.post(
   }),
 );
 
+router.post(
+  "/meetings/remove",
+  isAdminAuthenticated,
+  fallible(async (req, res) => {
+    await db.query("DELETE FROM meetings WHERE id = $1", [req.body.meeting_id]);
+    req.flash(
+      "success",
+      "Successfully removed meeting with id " + req.body.meeting_id + ".",
+    );
+    res.redirect("/admin");
+  }),
+);
+
 router.post(
   "/officers",
   isAdminAuthenticated,

routes/attendance.js

@@ -86,7 +86,7 @@ router.post(
 router.get(
   "/attend",
   fallible(async (req, res) => {
-    // Find active meeting if possible (2 hour buffer) TODO there's probably a better way to do this
+    // Find active meeting if possible (2 hour buffer)
     const meetingResp = await db.query(
       "SELECT * FROM meetings WHERE date >= NOW() - INTERVAL '2 hours' and date <= NOW() + INTERVAL '2 hours'",
     );

routes/gallery.js

@@ -0,0 +1,28 @@
+const express = require("express");
+const db = require("../database/db");
+const { isAdminAuthenticated, fallible } = require("../middleware");
+const router = express.Router();
+
+router.get(
+  "/gallery",
+  fallible(async (req, res) => {
+    const images = await db.query("SELECT * FROM images");
+    res.render("gallery", { title: "Gallery", images: images.rows });
+  }),
+);
+
+router.post(
+  "/gallery",
+  isAdminAuthenticated,
+  fallible(async (req, res) => {
+    const active =
+      req.body.active === "true" || req.body.activeHidden === "false";
+    await db.query("UPDATE images SET active = $1 WHERE id = $2", [
+      active,
+      req.body.image_id,
+    ]);
+    res.redirect("/gallery");
+  }),
+);
+
+module.exports = router;

views/about.ejs

@@ -1,25 +1,23 @@
 <% layout('layouts/base')%>
 
-<main>
-    <div class="backdrop">    
-        <div class="container">
-          <div class="row gx-4 gy-4">
+<main class="backdrop">
+    <div class="container">
+        <div class="row gx-4 gy-4">
             <div class="col">
                 <h1 class="text-secondary">Join our Discord</h1>
-                <p>The Discord server is a live chat where members of Mines ACM communicate with each other. Join to keep up-to-date with happenings!</p>
+                <p>The Discord is a live chat where members of Mines ACM communicate with each other. Join to keep up to date with our events!</p>
                 <ol>
                     <li><b>Create a Discord account</b>: Use our <a href="https://discord.gg/wUZezTgVzd">invite link</a> and create an account or sign in with an existing one.</li>
                     <li><b>Verify your email</b>: Make sure your email is verified so you can log in again!</li>
                     <li><b>Download the Discord app</b> on your mobile device or computer.</li>
                 </ol>
-                <button class="btn btn-outline-primary"><a style="text-decoration: none; color: inherit" href="https://discord.gg/wUZezTgVzd">Join Discord</a></button>
+                <button class="btn btn-outline-primary"><a href="https://discord.gg/wUZezTgVzd">Join Discord</a></button>
             </div>
             <div class="col-lg-6">
                 <div class="row justify-content-center">                    
                     <iframe class="col" src="https://discord.com/widget?id=953659355562127371&theme=dark" width="350" height="350" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>
                 </div>
             </div>
-          </div>
         </div>
     </div>
 

views/admin.ejs

@@ -20,6 +20,10 @@
                                 <p><strong>RSVPs</strong>: <%= meeting.rsvps %></p>
                             <% } %>
                             <button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#edit-meeting-<%= meeting.id %>-modal">Edit Meeting</button>
+                            <form class="d-inline-block" method="POST" action="/meetings/remove">
+                                <input type="hidden" name="meeting_id" value="<%= meeting.id %>">
+                                <button class="btn d-inline-block btn-outline-danger">Delete</button>
+                            </form>
                             <% if(meeting.attendance.length > 0) { %>
                                 <button class="btn btn-primary attendance-csv" data-attendance="<%= JSON.stringify([meeting.attendance, meeting.date]) %>">Export attendance to CSV</button>
                             <% } %>
@@ -47,7 +51,7 @@
         <div class="large-card shadow mb-4">
             <h2>Officers</h2>
             <% for(let officer of officers) { %>
-                <p class="mt-2"><%= officer.name %> | <%= officer.title %></p>
+                <p class="mt-2"><b><%= officer.name %></b>, <%= officer.title %></p>
                 <p class="mb-2"><%= officer.id + "@mines.edu" %></p>
 
                 <button class="btn d-inline-block btn-outline-primary" data-bs-toggle="modal" data-bs-target="#edit-officer-<%= officer.id %>-modal">Edit</button>

views/gallery.ejs

@@ -0,0 +1,48 @@
+<% layout('layouts/base')%>
+
+<div class="container">
+    <h1 class="text-secondary">Gallery</h1>
+    <div class="gallery-container p-4">
+        <% for(let image of images) { %>
+            <div class="thumbnail">
+                <img data-bs-toggle="modal" data-bs-target="#image-detail-<%= image.id %>" src="uploads/<%= image.id %>" alt="<%= image.caption %>" class="gallery-image img-fluid mx-auto d-block rounded shadow" />
+            </div>
+
+            <div class="modal fade" id="image-detail-<%= image.id %>" tabindex="-1" aria-labelledby="image-detail-<%= image.id %>-label" aria-hidden="true">
+                <div class="modal-dialog">
+                    <div class="modal-content p-4">
+                        <div class="modal-header">
+                            <h5 class="modal-title" id="image-detail-<%= image.id %>-label">Image</h5>
+                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                        </div>
+
+                        <img src="uploads/<%= image.id %>" alt="<%= image.caption %>" class="mt-2 img-fluid mx-auto d-block rounded shadow" />
+                        <p class="gallery-image-caption"><%= image.caption %></p>
+
+                        <!-- TODO find a better way to do this check -->
+                        <% if(typeof user=='object' && user) { %>
+                            <% if(user.is_admin) { %>
+                            <p>Admin Actions</p>
+                            <form method="POST" action="/gallery">
+                                <input type="hidden" name="image_id" value="<%= image.id %>">
+                                <input type="hidden" name="activeHidden" value="<%= image.active %>">
+
+                                <div class="modal-body">
+                                    <div class="mb-3">
+                                        <input class="form-check-input" type="checkbox" <%= image.active ? 'checked' : '' %> role="switch" name="active" id="activeImage-<%= image.id %>" value="<%= image.active ? '1' : '0' %>">
+                                        <label class="form-check-label" for="activeImage-<%= image.id %>">Active</label>
+                                    </div>
+                                </div>
+                                <div class="modal-footer">
+                                    <button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="modal">Discard</button>
+                                    <button class="btn btn-success">Update</button>
+                                </div>
+                            </form>
+                            <% } %>
+                        <% } %>
+                    </div>
+                </div>
+            </div>
+        <% } %>
+    </div>
+</div>

views/home.ejs

@@ -26,10 +26,10 @@
 								<% if (typeof user === 'object' && user) { %>
 									<form class="d-inline" method="POST" action="/rsvp">
 										<input type="hidden" name="meeting_id" value="<%= meetings[0].id %>">
-										<button class="btn btn-outline-primary rsvp">I'm In!</button>
+										<button class="btn btn-outline-primary rsvp">I'm in!</button>
 									</form>
 								<% } else { %>
-									<button class="btn btn-outline-primary rsvp" data-bs-toggle="modal" data-bs-target="#rsvp-<%= meetings[0].id %>-modal">I'm In!</button>
+									<button class="btn btn-outline-primary rsvp" data-bs-toggle="modal" data-bs-target="#rsvp-<%= meetings[0].id %>-modal">I'm in!</button>
 								<% } %>
 							<% } %>
 						<% } else { %>
@@ -59,7 +59,7 @@
 						<% if(meetings.length > 0) { %>
 							<% for(let meeting of meetings) { %>
 								<div class="meeting-compact py-3">
-									<div class="row row-cols-auto gx-2 align-items-center">									
+									<div class="d-flex align-items-center">
 										<p class="home-header-3"><%= meeting.title %></p>
 										<% if(meeting.rsvped) { %>
 											<p class="home-sideheader">(RSVP'ed)</p>
@@ -74,7 +74,6 @@
 											<% } %>
 										<% } %>
 									</div>
-
 									<p><strong><span class="datetime"><%= meeting.date %>,<%= meeting.duration %></span></strong>
 										in <strong><%= meeting.location %></strong></p>
 									<p class="meeting-description"><%= meeting.description %></p>

views/layouts/base.ejs

@@ -14,6 +14,7 @@
         <link rel="preconnect" href="https://fonts.googleapis.com">
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
         <link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
     </head>
     <body class="d-flex flex-column h-100">
         <%- include('../partials/navbar')%>