feat: add membership page and authorization logic

headlessNode · headlessNode · commit 773ec86f148c · 2024-11-19T19:46:52.000+05:00
- use riddle to authorize
- fix bug in the logic of post creation time
- fix bug in the logic of getting post creator
username
- add group hove to post title
diff --git a/app.js b/app.js
@@ -8,6 +8,7 @@ const indexRouter = require('./routes/indexRouter.js');
 const loginRouter = require('./routes/loginRouter.js');
 const registerRouter = require('./routes/registerRouter.js');
 const postRouter = require('./routes/postRouter.js');
+const membershipRouter = require('./routes/membershipRouter.js');
 const customErrors = require('./errors/CustomErrors.js');
 const db = require('./db/query.js');
 const pool = require('./db/pool.js');
@@ -85,7 +86,8 @@ app.use('/', indexRouter);
 app.use('/login', loginRouter);
 app.use('/register', registerRouter);
 app.use('/post', postRouter);
-app.post('/logout', (req, res) => {
+app.use('/membership', membershipRouter);
+app.get('/logout', (req, res) => {
     req.logOut((err) => {
         if (err) {
             return next(err);
diff --git a/controllers/indexController.js b/controllers/indexController.js
@@ -7,7 +7,10 @@ const indexController = {
                 ...res.locals.currentUser
             };
             const posts = await db.getPosts();
-            res.render('index', {user, posts});
+            const postCreators = await Promise.all(
+                posts.map(async (post) => await db.findUserById(post.user_id))
+              );
+            res.render('index', {user, posts, postCreators});
     }),
 };
 
diff --git a/controllers/membershipController.js b/controllers/membershipController.js
@@ -0,0 +1,42 @@
+const asyncHandler = require('express-async-handler');
+const db = require('../db/query.js');
+const {body, validationResult} = require('express-validator');
+require('dotenv').config();
+
+const validateRiddle = [
+    body('secret_answer')
+        .trim()
+        .notEmpty()
+        .withMessage('The answer is required'),
+    body('secret_answer')
+        .trim()
+        .custom(value => value === process.env.MEMBERSHIP_SECRET)
+        .withMessage('The answer is incorrect. Try again.')
+];
+
+const membershipController = {
+    renderForm: asyncHandler(async (req, res) => {
+        const user = {
+            ...res.locals.currentUser
+        };
+        res.render('membership', {user});
+    }),
+
+    addMembership: [
+        validateRiddle,
+        asyncHandler(async (req, res) => {
+            const errors = validationResult(req);
+            const user = {
+                ...res.locals.currentUser
+            };
+            if (!errors.isEmpty()) {
+                res.render('membership', {user, errors: errors.array()});
+            } else {
+                await db.addMembership(user.id);
+                res.redirect('/');
+            }
+        })
+    ],
+};
+
+module.exports = membershipController;
diff --git a/db/query.js b/db/query.js
@@ -76,6 +76,12 @@ const editPost = asyncHandler(async (id, title, content) => {
     );
 });
 
+const addMembership = asyncHandler(async (id) => {
+    await pool.query(
+        'UPDATE users SET is_member = true WHERE id = $1', [id]
+    );
+});
+
 module.exports = {
     filterUsername,
     registerUser,
@@ -85,5 +91,6 @@ module.exports = {
     getPostById,
     createPost,
     editPost,
-    deletePost
+    deletePost,
+    addMembership
 };
diff --git a/public/output.css b/public/output.css
@@ -835,6 +835,11 @@ video {
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
 
+.bg-gray-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
 .bg-gray-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
@@ -868,6 +873,10 @@ video {
   padding: 0.75rem;
 }
 
+.p-4 {
+  padding: 1rem;
+}
+
 .p-6 {
   padding: 1.5rem;
 }
@@ -1167,6 +1176,11 @@ video {
   --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
 }
 
+.group:hover .group-hover\:text-blue-600 {
+  --tw-text-opacity: 1;
+  color: rgb(37 99 235 / var(--tw-text-opacity));
+}
+
 .group:hover .group-hover\:underline {
   text-decoration-line: underline;
 }
diff --git a/routes/loginRouter.js b/routes/loginRouter.js
@@ -4,7 +4,7 @@ const loginController = require('../controllers/loginController.js');
 
 loginRouter.get('/', (req, res) => {
     if(req.isAuthenticated()) {
-        res.render('login', {user: res.locals.currentUser});
+        res.redirect('/');
     } else {
         loginController.renderForm(req, res);
     }
diff --git a/routes/membershipRouter.js b/routes/membershipRouter.js
@@ -0,0 +1,14 @@
+const {Router} = require('express');
+const membershipRouter = Router();
+const membershipController = require('../controllers/membershipController.js');
+
+membershipRouter.get('/', (req, res) => {
+    if(req.isAuthenticated()) {
+        membershipController.renderForm(req, res);
+    } else {
+        res.redirect('/login');
+    }
+});
+membershipRouter.post('/', membershipController.addMembership);
+
+module.exports = membershipRouter;
diff --git a/routes/postRouter.js b/routes/postRouter.js
@@ -2,10 +2,28 @@ const {Router} = require('express');
 const postRouter = Router();
 const postController = require('../controllers/postController.js');
 
-postRouter.get('/create', postController.renderForm);
+postRouter.get('/create', (req, res) => {
+    if(req.isAuthenticated()) {
+        postController.renderForm(req, res);
+    } else {
+        res.redirect('/login');
+    }
+});
 postRouter.post('/create', postController.createPost);
-postRouter.get('/delete/:id', postController.deletePost);
-postRouter.get('/edit/:id', postController.renderEditForm);
+postRouter.get('/delete/:id', (req, res) => {
+    if(req.isAuthenticated()) {
+        postController.deletePost(req, res);
+    } else {
+        res.redirect('/login');
+    }
+});
+postRouter.get('/edit/:id', (req, res) => {
+    if(req.isAuthenticated()) {
+        postController.renderEditForm(req, res);
+    } else {
+        res.redirect('/login');
+    }
+});
 postRouter.post('/edit/:id', postController.editPost);
 
 module.exports = postRouter;
diff --git a/routes/registerRouter.js b/routes/registerRouter.js
@@ -4,7 +4,7 @@ const registerController = require('../controllers/registerController.js');
 
 registerRouter.get('/', (req, res) => {
     if(req.isAuthenticated()) {
-        res.render('register', {user: res.locals.currentUser, isAuthenticated: true});
+        res.redirect('/');
     } else {
         registerController.renderForm(req, res);
     }
diff --git a/views/index.ejs b/views/index.ejs
@@ -15,14 +15,15 @@
                         <h1 class="text-3xl md:text-4xl font-bold text-gray-900">
                             Welcome, <%= locals.user.first_name %> <%= locals.user.last_name %>
                         </h1>
+                        <a href="/logout" class="px-4 py-2 bg-black text-white rounded-md hover:bg-black/80">Logout</a>
                         <div class="w-20 h-1 bg-blue-500 rounded-full"></div>
                     </div>
                     <div class="feed space-y-8 flex flex-col max-w-4xl mx-auto w-full">
                         <% if(locals.posts.length > 0) { %>
-                            <% locals.posts.forEach(post => { %>
-                                <div class="post bg-white p-6 md:p-8 rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-gray-100">
+                            <% locals.posts.forEach( (post, idx) => { %>
+                                <div class="post bg-white p-6 md:p-8 rounded-xl shadow-sm group hover:shadow-md transition-all duration-300 border border-gray-100">
                                     <article class="space-y-4">
-                                        <h2 class="text-xl md:text-2xl font-bold text-gray-900 hover:text-blue-600 transition-colors">
+                                        <h2 class="text-xl md:text-2xl font-bold text-gray-900 group-hover:text-blue-600 transition-colors">
                                             <%= post.title %>
                                         </h2>
                                         <p class="text-md md:text-lg text-gray-700 leading-relaxed">
@@ -35,7 +36,7 @@
                                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                                     </svg>
                                                     <% if(locals.user.is_member || locals.user.id === post.user_id) { %>
-                                                        <time class="text-gray-500" id="createdAt" data-created-at="<%= post.created_at %>"></time>
+                                                        <time class="text-gray-500 created-at" id="createdAt" data-created-at="<%= post.created_at %>"></time>
                                                     <% } else { %>
                                                         <a href="/membership" class="text-blue-500 hover:text-blue-700 hover:underline font-medium">
                                                             Membership Required
@@ -47,7 +48,7 @@
                                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                                                     </svg>
                                                     <% if(locals.user.is_member || locals.user.id === post.user_id) { %>
-                                                        <span class="text-gray-500"><%= user.username %></span>
+                                                        <span class="text-gray-500"><%= postCreators[idx].username %></span>
                                                     <% } else { %>
                                                         <a href="/membership" class="text-blue-500 hover:text-blue-700 hover:underline font-medium">
                                                             Membership Required
@@ -93,34 +94,45 @@
     </body>
     <script>
       document.addEventListener('DOMContentLoaded', function() {
-        const createdAtElement = document.getElementById('createdAt');
-        const createdAt = new Date(createdAtElement.getAttribute('data-created-at'));
-        const now = new Date();
-        const diffInMs = now - createdAt;
-        const diffInSecs = Math.floor(diffInMs / 1000);
-        const diffInMins = Math.floor(diffInSecs / 60);
-        const diffInHours = Math.floor(diffInMins / 60);
-        const diffInDays = Math.floor(diffInHours / 24);
-        const diffInMonths = Math.floor(diffInDays / 30);
-        const diffInYears = Math.floor(diffInDays / 365);
-    
-        let timeAgo = '';
-    
-        if (diffInYears > 0) {
-          timeAgo = diffInYears === 1 ? '1 year ago' : `${diffInYears} years ago`;
-        } else if (diffInMonths > 0) {
-          timeAgo = diffInMonths === 1 ? '1 month ago' : `${diffInMonths} months ago`;
-        } else if (diffInDays > 0) {
-          timeAgo = diffInDays === 1 ? '1 day ago' : `${diffInDays} days ago`;
-        } else if (diffInHours > 0) {
-          timeAgo = diffInHours === 1 ? '1 hour ago' : `${diffInHours} hours ago`;
-        } else if (diffInMins > 0) {
-          timeAgo = diffInMins === 1 ? '1 minute ago' : `${diffInMins} minutes ago`;
-        } else {
-          timeAgo = diffInSecs <= 5 ? 'Just now' : `${diffInSecs} seconds ago`;
+        
+        // FUNCTIONS //
+
+        function updatePostTime(){
+            const createdAtElement = document.querySelectorAll('.created-at');
+            createdAtElement.forEach((element) => {
+                const createdAt = new Date(element.getAttribute('data-created-at'));
+                const now = new Date();
+                const diffInMs = now - createdAt;
+                const diffInSecs = Math.floor(diffInMs / 1000);
+                const diffInMins = Math.floor(diffInSecs / 60);
+                const diffInHours = Math.floor(diffInMins / 60);
+                const diffInDays = Math.floor(diffInHours / 24);
+                const diffInMonths = Math.floor(diffInDays / 30);
+                const diffInYears = Math.floor(diffInDays / 365);
+            
+                let timeAgo = '';
+            
+                if (diffInYears > 0) {
+                timeAgo = diffInYears === 1 ? '1 year ago' : `${diffInYears} years ago`;
+                } else if (diffInMonths > 0) {
+                timeAgo = diffInMonths === 1 ? '1 month ago' : `${diffInMonths} months ago`;
+                } else if (diffInDays > 0) {
+                timeAgo = diffInDays === 1 ? '1 day ago' : `${diffInDays} days ago`;
+                } else if (diffInHours > 0) {
+                timeAgo = diffInHours === 1 ? '1 hour ago' : `${diffInHours} hours ago`;
+                } else if (diffInMins > 0) {
+                timeAgo = diffInMins === 1 ? '1 minute ago' : `${diffInMins} minutes ago`;
+                } else {
+                timeAgo = diffInSecs <= 5 ? 'Just now' : `${diffInSecs} seconds ago`;
+                }
+                element.textContent = timeAgo;
+            });
         }
-    
-        createdAtElement.textContent = timeAgo;
+
+        // FUNCTION CALLS //
+
+        updatePostTime();
+
       });
     </script>
 </html>
diff --git a/views/membership.ejs b/views/membership.ejs
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>WhisperSpace - Membership</title>
+        <link rel="stylesheet" href="/output.css">
+    </head>
+    <body>
+        <wrapper class="w-full flex flex-col items-center">
+            <%- include('partials/header') %>
+            <main class="px-4 py-20 w-full max-w-7xl flex flex-col items-center justify-center">
+                <div class="text-center mb-12">
+                    <h1 class="text-4xl font-bold mb-4">Become a Member</h1>
+                    <p class="text-gray-600 max-w-md mx-auto">
+                        Solve the riddle to unlock your membership.
+                    </p>
+                </div>
+                <% if(locals.errors || locals.sessionErrors ) { %>
+                    <div class="w-full max-w-[400px] mb-8 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
+                        <%- include('partials/authErrors') %>
+                    </div>
+                <% } %>
+                <div class="border border-black px-8 pt-12 pb-6 rounded-md flex flex-col w-full max-w-[400px]">
+                    <div class="mb-6 bg-gray-100 p-4 rounded-md">
+                        <p class="text-gray-800 font-semibold">
+                            I speak without a mouth and hear without ears.
+                            I have no body, but I <br> come alive with wind.
+                            If you look at <br> me backward, I might help you understand what I am.
+                        </p>
+                    </div>
+                    <form action="/membership" method="post" class="w-full max-w-[400px] flex flex-col gap-2">
+                        <input class="p-2 rounded-md border border-gray-300" type="text" id="secret_answer" name="secret_answer" placeholder="Answer">
+                        <input type="submit" class="mt-5 cursor-pointer p-2 rounded-md bg-black text-white hover:bg-black/80" value="Login">
+                    </form>
+                </div>
+            </main>
+        </wrapper>
+    </body>
+</html>
diff --git a/views/partials/header.ejs b/views/partials/header.ejs
@@ -8,7 +8,7 @@
                 <a href="/membership" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700">Become a Member</a>
                 </div>
             <% } else { %>
-                <a href="/login" class="hover:text-gray-600">Login</a>
+                <a href="/login" class=" hover:text-gray-600">Login</a>
                 <a href="/register" class="px-4 py-2 bg-black text-white rounded-md hover:bg-black/80">
                     Register
                 </a>

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@ const loginController = require('../controllers/loginController.js');`
`4`	`4`
`5`	`5`	`loginRouter.get('/', (req, res) => {`
`6`	`6`	`if(req.isAuthenticated()) {`
`7`		`- res.render('login', {user: res.locals.currentUser});`
	`7`	`+ res.redirect('/');`
`8`	`8`	`} else {`
`9`	`9`	`loginController.renderForm(req, res);`
`10`	`10`	`}`
Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@ const registerController = require('../controllers/registerController.js');`
`4`	`4`
`5`	`5`	`registerRouter.get('/', (req, res) => {`
`6`	`6`	`if(req.isAuthenticated()) {`
`7`		`- res.render('register', {user: res.locals.currentUser, isAuthenticated: true});`
	`7`	`+ res.redirect('/');`
`8`	`8`	`} else {`
`9`	`9`	`registerController.renderForm(req, res);`
`10`	`10`	`}`