updated styling

keynotes.app/public/css/style.css

@@ -4,6 +4,17 @@
   --desktop-line-height: 1;
   --mobile-heading-font-size: 4em;
   --mobile-line-height: 0.8;
+
+  /* colors */
+
+  --100-blue: hsl(219, 64%, 96%, 100%);
+  --200-blue: hsl(222, 81%, 94%, 100%);
+  --300-blue: hsl(221, 86%, 92%, 100%);
+  --400-blue: hsl(222, 92%, 90%, 100%);
+  --500-blue: hsl(222, 97%, 88%, 100%);
+  --600-blue: hsl(222, 97%, 85%, 100%);
+  --700-blue: hsl(222, 100%, 84%, 100%);
+  --800-blue: hsl(222, 100%, 34%, 100%);
 }
 /* 1. Use a more-intuitive box-sizing model */
 *,
@@ -23,6 +34,7 @@ body {
   /* 4. Improve text rendering */
   -webkit-font-smoothing: antialiased;
   font-family: "Lato, serif";
+  background: var(--200-blue);
 }
 
 /* 5. Improve media defaults */
@@ -67,6 +79,10 @@ h6 {
   text-wrap: balance;
 }
 
+a {
+  color: var(--800-blue);
+}
+
 /*
   9. Create a root stacking context
 */
@@ -81,7 +97,7 @@ a {
 
 nav {
   font-size: 1.5rem;
-  margin: 1em 0 2em;
+  padding: 1em 0;
 }
 
 nav > ul {
@@ -100,6 +116,10 @@ ul > li {
   text-align: center;
 }
 
+li a {
+  color: black;
+}
+
 form {
   width: 100%;
   max-width: 50vw;
@@ -109,6 +129,18 @@ input {
   padding: 0.75em;
 }
 
+footer {
+  position: absolute;
+  bottom: 0;
+}
+
+.divider {
+  height: 0.25em;
+  background: var(--300-blue);
+  width: 80vw;
+  margin: 0 auto 1em;
+}
+
 .flex {
   display: flex;
 }
@@ -227,6 +259,16 @@ input {
   justify-content: space-between;
 }
 
+.likes {
+  flex: 1;
+  flex-grow: 0;
+}
+
+.card__likes {
+  padding: 0;
+  font-weight: 300;
+}
+
 .card .card__message {
   margin-bottom: 1em;
 }
@@ -261,7 +303,7 @@ input {
   height: 2px;
   bottom: 0;
   left: 0;
-  background-color: black;
+  background-color: var(--700-blue);
   transform-origin: bottom left;
   transition: transform 0.25s ease-out;
 }

keynotes.app/src/controllers/authController.js

@@ -3,7 +3,10 @@ const db = require("../models/query");
 const { validationResult } = require("express-validator");
 
 function loginGet(req, res, next) {
-  res.render("login", { pageTitle: "InspiredCliches | Login" });
+  res.render("login", {
+    pageTitle: "InspiredCliches | Login",
+    errors: req.session.messages,
+  });
 }
 
 function logOut(req, res, next) {

keynotes.app/src/controllers/indexController.js

@@ -42,6 +42,19 @@ function addNotePost(req, res, next) {
   res.redirect("/");
 }
 
+function deleteNote(req, res) {
+  const { messageId, userId } = req.query;
+
+  if (res.locals.currentUser) {
+    const message = db.getNoteById(messageId);
+
+    if (message.user_id === Number(userId)) {
+      db.deleteNote(Number(messageId));
+    }
+    res.redirect("/");
+  }
+}
+
 function addNoteGet(req, res, next) {
   res.render("note-form", { pageTitle: "InspiredCliches | New Note" });
 }
@@ -69,6 +82,7 @@ module.exports = {
   indexGet,
   addNoteGet,
   addNotePost,
+  deleteNote,
   addLike,
   getProfile,
 };

keynotes.app/src/middlewares/auth.js

@@ -4,27 +4,33 @@ const LocalStrategy = require("passport-local");
 const passport = require("passport");
 
 passport.use(
-  new LocalStrategy(async (username, password, done) => {
+  new LocalStrategy(
-    try {
+    { passReqToCallback: true },
-      const query = db.query(`SELECT * FROM users WHERE username = $1`);
+    async (req, username, password, done) => {
-      const user = query.get({ $1: username });
+      try {
+        req.session.messages = [];
+        const query = db.query(`SELECT * FROM users WHERE username = $1`);
+        const user = query.get({ $1: username });
 
-      if (!user) {
+        if (!user) {
-        return done(null, false, {
+          return done(null, false, {
-          message: "Incorrect username or password.",
+            message: "Incorrect username or password.",
-        });
+          });
+        }
+
+        const match = await bcryptjs.compare(password, user.password);
+
+        if (!match) {
+          return done(null, false, {
+            message: "Incorrect username or password.",
+          });
+        }
+        return done(null, user);
+      } catch (err) {
+        return done(err);
       }
-
+    },
-      const match = await bcryptjs.compare(password, user.password);
+  ),
-
-      if (!match) {
-        return done(null, false, { message: "Incorrect username or password" });
-      }
-      return done(null, user);
-    } catch (err) {
-      return done(err);
-    }
-  }),
 );
 
 passport.serializeUser((user, done) => {

keynotes.app/src/models/query.js

@@ -26,6 +26,17 @@ function putNewNote(note) {
   query.run({ $1: message, $2: media, $3: userId, $4: date });
 }
 
+function deleteNote(messageId) {
+  try {
+    const query = db.query(`DELETE FROM likes WHERE message_id = $1`);
+    query.run({ $1: messageId });
+    const queryTwo = db.query(`DELETE FROM messages WHERE message_id = $1`);
+    queryTwo.run({ $1: messageId });
+  } catch (e) {
+    console.log(e);
+  }
+}
+
 function getLikesByUser(userId) {
   const query = db.query(`SELECT message_id FROM likes WHERE user_id = $1`);
 
@@ -38,7 +49,9 @@ function getTotalLikesByMessageId(messageId) {
 }
 
 function getNoteById(noteId) {
-  const query = db.query(`SELECT message from messages WHERE message_id = $1`);
+  const query = db.query(
+    `SELECT message, user_id from messages WHERE message_id = $1`,
+  );
   return query.get({ $1: noteId });
 }
 
@@ -107,6 +120,7 @@ module.exports = {
   putNewNote,
   insertLike,
   deleteLike,
+  deleteNote,
   checkIfNotedLiked,
   insertUser,
   getLikesByUser,

keynotes.app/src/routes/authRouter.js

@@ -12,6 +12,7 @@ authRouter.post(
   passport.authenticate("local", {
     successRedirect: "/",
     failureRedirect: "/auth/login",
+    failureMessage: true,
   }),
 );
 authRouter.get("/logout", authController.logOut);

keynotes.app/src/routes/indexRouter.js

@@ -8,5 +8,6 @@ indexRouter.get("/like", indexController.addLike);
 indexRouter.get("/new", indexController.addNoteGet);
 indexRouter.post("/new", indexController.addNotePost);
 indexRouter.get("/profile", indexController.getProfile);
+indexRouter.get("/delete", indexController.deleteNote);
 
 module.exports = { indexRouter };

keynotes.app/src/views/feed.ejs

@@ -13,12 +13,15 @@
 			<p class="card__message"><%= note.message %></p>
 			<div class="container flex grid__card__metadata">
 			<p class="card__author"><a href="/profile?userId=<%= note.user_id %>"><%= note.user %></a></p>
-			<p><%= note.likes_count %> Likes</p>
+			<div class="likes flex">
+
 			<a href="/like?noteId=<%= note.message_id %>">
 				<% if (likedPost) { %><i class="fa-solid fa-heart red"></i><% } else { %><i class="fa-regular fa-heart red"></i><% }; %>
 			</a>
+			<p class="card__likes"><%= note.likes_count %></p>
+			</div>
 			<% if (currentUser.user_id === note.user_id) { %>
-				<a href="#">&nbsp;Delete</a>
+				<a href="/delete?userId=<%= currentUser.user_id %>&messageId=<%= note.message_id %>">&nbsp;X</a>
 			<% }; %>
 			</div>
 		</div>

keynotes.app/src/views/footer.ejs

@@ -1,3 +1,6 @@
+	<footer>
+	<div> Test </div>
+	</footer>
 	<script src="/js/script.js"></script>
 	</body>
 </html>

keynotes.app/src/views/header.ejs

@@ -16,8 +16,12 @@
 	<body>
 		<nav>
 			<ul class="container flex">
-				<li><a class="hover__underline" href="/">Home</a></li>
+				<% if (!currentUser) { %>
+				<li><a class="hover__underline" href="/auth/register">Sign Up</a></li>
+
+				<% } %>
 				<% if (currentUser) { %>
+				<li><a class="hover__underline" href="/">Home</a></li>
 				<li><a class="hover__underline" href="/new" class="new-link">New Cliche</a></li>
 				<li><a class="hover__underline" href="/profile?userId=<%= currentUser.user_id %>">Profile</a></li>
 				<li><a class="hover__underline" href="/auth/logout">Logout</a></li>
@@ -26,4 +30,5 @@
 				<% }; %>
 			</ul>
 		</nav>
+		<div class="divider"></div>
 	

keynotes.app/src/views/login.ejs

@@ -1,4 +1,13 @@
 <%- include('header') %>
+<% if (locals.errors) {%>
+  <div class="center-horizontal">
+  <ul>
+    <% errors.forEach(function(error) { %>
+      <li><%= error %></li>
+    <% }); %>
+  </ul>
+  </div>
+<% }; %>
 <form class="center-horizontal" method="POST" action="/auth/login">
 	<div class="form-item flex">
 		<label for="username">UserName</label>