Merge pull request #167 from WatWowMap/landing-page

Landing/Home Page

Author: versx

src/configs/config.example.json

@@ -6,6 +6,13 @@
     "locale": "en",
     "style": "dark",
     "sessionSecret": "98ki^e72~!@#(85o3kXLI*#c9wu5l!Z",
+    "homepage": {
+        "enabled": false,
+        "title": "Welcome to MapJS",
+        "descriptionLine1": "The best place to find Pokemon, Raids, Quests, and more!",
+        "descriptionLine2": "Please login or join our Discord for more info...",
+        "discordInvite": "https://discord.gg/yourInvite"
+    },
     "map": {
         "startLat": 0,
         "startLon": 0,

src/configs/default.json

@@ -22,6 +22,13 @@
         "url": "",
         "maxScouts": 15
     },
+    "homepage": {
+        "enabled": false,
+        "title": "Welcome to MapJS",
+        "descriptionLine1": "The best place to find Pokemon, Raids, Quests, and more!",
+        "descriptionLine2": "Please login or join our Discord for more info...",
+        "discordInvite": "https://discord.gg/yourInvite"
+    },
     "map": {
         "startLat": 0,
         "startLon": 0,

src/index.js

@@ -127,7 +127,16 @@ if (config.discord.enabled) {
 
 // Login middleware
 app.use(async (req, res, next) => {
-    if (config.discord.enabled && (req.path === '/api/discord/login' || req.path === '/login')) {
+    // If Discord auth enabled and visiting any of the following
+    // endpoint paths, allow viewing the endpoint
+    if (config.discord.enabled &&
+        (
+            req.path === '/api/discord/login' ||
+            req.path === '/login' ||
+            req.path === '/blocked' ||
+            (config.homepage && req.path === '/home')
+        )
+    ) {
         return next();
     }
     const healthcheckHeader = req.get('Healthcheck-Secret');
@@ -141,15 +150,23 @@ app.use(async (req, res, next) => {
         }
         if (!req.session.valid) {
             console.error('Invalid user authenticated', req.session.user_id);
-            res.redirect('/login');
+            if (config.homepage) {
+                res.redirect('/home');
+            } else {
+                res.redirect('/login');
+            }
             return;
         }
         const perms = req.session.perms;
         defaultData.hide_map = !perms.map;
         if (defaultData.hide_map) {
             // No view map permissions, go to login screen
             console.error('Invalid view map permissions for user', req.session.user_id);
-            res.redirect('/login');
+            if (config.homepage) {
+                res.redirect('/home');
+            } else {
+                res.redirect('/login');
+            }
             return;
         }
         defaultData.hide_pokemon = !perms.pokemon;
@@ -170,7 +187,11 @@ app.use(async (req, res, next) => {
         defaultData.hide_devices = !perms.devices;
         return next();
     }
-    res.redirect('/login');
+    if (config.homepage) {
+        res.redirect('/home');
+    } else {
+        res.redirect('/login');
+    }
 });
 
 // UI routes

src/routes/discord.js

@@ -43,6 +43,7 @@ router.get('/callback', catchAsyncErrors(async (req, res) => {
         req.session.username = `${user.username}#${user.discriminator}`;
         const perms = await DiscordClient.getPerms(user);
         req.session.perms = perms;
+        const blocked = perms.blocked;
         const valid = perms.map !== false;
         req.session.valid = valid;
         req.session.save();
@@ -105,18 +106,25 @@ router.get('/callback', catchAsyncErrors(async (req, res) => {
             ],
             timestamp: new Date(),
         };
-        let redirect = '/login';
+        let redirect;
         if (valid) {
             console.log(user.id, 'Authenticated successfully.');
             embed.title = 'Success';
             embed.description = 'User Successfully Authenticated';
             embed.color = 0x00FF00;
             redirect = `/?token=${response.data.access_token}`;
+        } else if (blocked) {
+            // User is in blocked Discord server(s)
+            console.warn(user.id, 'Blocked due to', blocked);
+            embed.title = 'Blocked';
+            embed.description = 'User Blocked Due to ' + blocked;
+            embed.color = 0xFF0000;
+            redirect = '/blocked';
         } else {
             // Not in Discord server(s) and/or have required roles to view map
             console.warn(user.id, 'Not authorized to access map');
+            redirect = config.homepage ? '/home' : '/login';
         }
-
         await DiscordClient.sendMessage(config.discord.logChannelId, {embed: embed});
         res.redirect(redirect);
     }).catch(error => {

src/routes/ui.js

@@ -17,8 +17,11 @@ if (config.discord.enabled) {
     });
 
     router.get('/logout', (req, res) => {
-        req.session.destroy();
-        res.redirect('/login');
+        if (config.homepage.enabled) {
+            res.redirect('/home');
+        } else {
+            res.redirect('/login');
+        }
     });
 }
 
@@ -29,6 +32,27 @@ router.get(['/', '/index'], async (req, res) => {
     res.render('index', data);
 });
 
+if (config.homepage.enabled) {
+    router.get('/home', (req, res) => {
+        const data = {};
+        data.discord_invite = config.homepage.discordInvite;
+        data.map_title = config.homepage.title;
+        data.description_1 = config.homepage.descriptionLine1;
+        data.description_2 = config.homepage.descriptionLine2;
+        res.render('home', data);
+    });
+}
+
+router.get('/blocked', (req, res) => {
+    const data = {};
+    data.discord_invite = config.discord.invite;
+    if (req.session.username) {
+        data.guild_name = req.session.perms.blocked;
+        data.username = req.session.username;
+    }
+    res.render('blocked', data);
+});
+
 // Location endpoints
 router.get('/@/:lat/:lon', async (req, res) => {
     res.setHeader('Content-Type', 'text/html');

src/services/discord.js

@@ -37,7 +37,7 @@ class DiscordClient {
     async getGuilds() {
         const guilds = await oauth.getUserGuilds(this.accessToken);
         const guildIds = Array.from(guilds, x => BigInt(x.id).toString());
-        return guildIds;
+        return [guildIds, guilds];
     }
 
     async getUserRoles(guildId, userId) {
@@ -74,7 +74,7 @@ class DiscordClient {
     }
 
     async getPerms(user) {
-        const perms = {
+        var perms = {
             map: false,
             pokemon: false,
             raids: false,
@@ -94,7 +94,7 @@ class DiscordClient {
             weather: false,
             devices: false
         };
-        const guilds = await this.getGuilds();
+        const [guilds, guildsFull] = await this.getGuilds();
         if (config.discord.allowedUsers.includes(user.id)) {
             Object.keys(perms).forEach((key) => perms[key] = true);
             console.log(`User ${user.username}#${user.discriminator} (${user.id}) in allowed users list, skipping guild and role check.`);
@@ -108,6 +108,7 @@ class DiscordClient {
             if (guilds.includes(guildId)) {
                 // If so, user is not granted access
                 blocked = true;
+                perms['blocked'] = guildsFull.find(x => x.id === guildId).name;
                 break;
             }
         }

src/views/blocked.mustache

@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <style>
+            html,
+            body {
+                height: 85%;
+                width: 100%;
+                margin: 0px;
+                background-color: #2c2f33;
+                background-image: url('/img/discord.png');
+            }
+
+            .background {
+                background-image:url("/img/landing.png");
+                background-position: center;
+                background-repeat: no-repeat;
+                background-size: cover;
+                height: 95%;
+                border: 2px solid #7289da;
+                display: block;
+                margin-left: auto;
+                margin-right: auto;
+            }
+
+            #transbox {
+                background-color:rgba(255,255,255,0.8);
+                padding:20px;
+                border-radius: 20px;
+            }
+
+            .title {
+                text-align:center;
+                font-size: 2em;
+                color: #3C5FA3;
+                font-weight: bold;
+                font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            }
+
+            .container {
+                width: 90%;
+                margin: 0 auto;
+                padding: 30px;
+                border-radius: 10px;
+            }
+
+            .clearfix:after {
+                visibility:hidden;
+                display:block;
+                content:"";
+                clear:both;
+                height:0;
+            }
+
+            .description {
+                text-align:center;
+                opacity: 0.5;
+                color: #000000;
+                margin-left: 10px;
+                margin-bottom: 10px;
+                white-space: pre-wrap;
+                font-weight: bold;
+                font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            }
+
+            .make-center {
+                text-align: center;
+                padding: 20px 0;
+            }
+
+            .square_btn{
+                display: inline-block;
+                padding: 7px 20px;
+                border: solid 3px black;
+                border-radius: 25px;
+                text-decoration: none;
+                color: #FFF;
+                background-image: -webkit-linear-gradient(45deg, #7289da 0%, #4d6cdb 100%);
+                background-image: linear-gradient(45deg, #7289da 0%, #4d6cdb 100%);
+                transition: .4s;
+            }
+
+            .square_btn:hover {
+                background-image: -webkit-linear-gradient(45deg, #7289da 0%, #3659d8 100%);
+                background-image: linear-gradient(45deg, #7289da 0%, #3659d8 100%);
+            }
+
+            a {
+                font-weight: bold;
+                font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="container clearfix background">
+            <div id="transbox">
+              <title>Access denied</title>
+              <div class="title">Access denied!</div><br>
+                <div class="description">{{username}} has been blocked for being a member of {{guild_name}}.
+Please join our discord for more info.</div>
+                <div class="make-center">
+                    <a href="/login" class="square_btn">Login</a>&nbsp;&nbsp;<a href="{{discord_invite}}" class="square_btn">Join Our Discord</a>
+                </div>
+            </div>
+        </div>
+        </body>
+    </body>
+</html> 
+
+<!--created by anonymous All images are copyright and belong to their respective owners, 
+this document is for educational purpose-->