Merge pull request #896 from WatWowMap/blocked-signed-in-info

feat: show signed in info when blocked
WatWowMap · Dec 29, 2023 · 683af54 · 683af54
2 parents a00187a + 12e30ac
commit 683af54
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 53 deletions.
diff --git a/packages/locales/lib/human/en.json b/packages/locales/lib/human/en.json
@@ -677,5 +677,7 @@
   "partner_color": "Partner Color",
   "disable": "Disable {{- name}}",
   "profiling": "Profiling",
-  "showcase_block": "Blocked due to a showcase"
+  "showcase_block": "Blocked due to a showcase",
+  "signed_in_as": "Signed In As",
+  "missing_map_perm": "You do not have permission to view the map."
 }
diff --git a/packages/locales/lib/human/pl.json b/packages/locales/lib/human/pl.json
@@ -1 +1,4 @@
-{}
+{
+  "signed_in_as": "Zalogowano jako",
+  "missing_map_perm": "Nie masz uprawnień by wyświetlić mapę."
+}
diff --git a/server/src/services/DiscordClient.js b/server/src/services/DiscordClient.js
@@ -285,10 +285,20 @@ class DiscordClient {
           guildArray.length === 1
             ? `${guildArray.join(', ')} & ${lastGuild}`
             : lastGuild
-        return done(null, undefined, { blockedGuilds: guildString })
+        return done(null, undefined, {
+          blockedGuilds: guildString,
+          username: discordUser.username,
+          id: discordUser.id,
+          avatar: discordUser.avatar,
+        })
       }
       if (discordUser.perms.map === false) {
-        return done(null, undefined, { message: 'access_denied' })
+        return done(null, undefined, {
+          message: 'access_denied',
+          username: discordUser.username,
+          id: discordUser.id,
+          avatar: discordUser.avatar,
+        })
       }
       if (discordUser) {
         delete discordUser.guilds

diff --git a/src/components/layout/auth/Blocked.jsx b/src/components/layout/auth/Blocked.jsx
@@ -1,73 +1,109 @@
 // @ts-check
-/* eslint-disable react/no-array-index-key */
 import React from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import Grid from '@mui/material/Unstable_Grid2'
 import Typography from '@mui/material/Typography'
 import Button from '@mui/material/Button'
+import Avatar from '@mui/material/Avatar'
+import Card from '@mui/material/Card'
+import CardActions from '@mui/material/CardActions'
+import CardContent from '@mui/material/CardContent'
+import CardHeader from '@mui/material/CardHeader'
+import Box from '@mui/material/Box'
+import List from '@mui/material/List'
+import ListItem from '@mui/material/ListItem'
+import ListItemIcon from '@mui/material/ListItemIcon'
+import ListItemText from '@mui/material/ListItemText'
+
 import { useStatic } from '@hooks/useStore'
 
 import DiscordLogin from './Discord'
+import ThemeToggle from '../general/ThemeToggle'
+import { I } from '../general/I'
 
 export default function Blocked() {
   const { t } = useTranslation()
   const { info } = useParams()
   const navigate = useNavigate()
   const discordInvite = useStatic((s) => s.config?.links?.discordInvite)
-
   const queryParams = new URLSearchParams(info)
   const blockedGuilds = queryParams.get('blockedGuilds')
+  const username = queryParams.get('username')
+  const avatar = queryParams.get('avatar')
+  const id = queryParams.get('id')
 
   return (
-    <Grid
-      container
+    <Box
+      display="flex"
       justifyContent="center"
       alignItems="center"
       height="100cqh"
-      py={10}
+      width="100%"
     >
-      <Grid xs={11}>
-        <Typography variant="h3" align="center">
-          {t('access')} {t('denied')}!
-        </Typography>
-      </Grid>
-
-      {blockedGuilds && (
-        <Grid xs={11}>
-          <Typography variant="h6" align="center">
-            {t('on_block_msg')} {blockedGuilds}
-          </Typography>
-        </Grid>
-      )}
-
-      {discordInvite && (
-        <Grid xs={11}>
-          <Typography variant="h6" align="center">
-            {t('on_block_join_discord')}
+      <Box position="absolute" top={10} right={10}>
+        <ThemeToggle />
+      </Box>
+      <Card elevation={10}>
+        {username && avatar && id && (
+          <CardHeader
+            sx={{ px: 4, pt: 4 }}
+            avatar={
+              <Avatar
+                src={`https://cdn.discordapp.com/avatars/${id}/${avatar}.webp?size=96`}
+                alt={username}
+              />
+            }
+            title={t('signed_in_as')}
+            subheader={username}
+          />
+        )}
+        <CardContent sx={{ mx: 2 }}>
+          <Typography variant="h3" align="center" pb={2}>
+            {t('access')} {t('denied')}!
           </Typography>
-        </Grid>
-      )}
-      <Grid
-        xs={discordInvite ? 6 : 11}
-        sm={discordInvite ? 4 : 11}
-        md={discordInvite ? 3 : 11}
-        textAlign="center"
-      >
-        <Button
-          variant="contained"
-          color="primary"
-          onClick={() => navigate('/')}
-          size="large"
-        >
-          {t('go_back')}
-        </Button>
-      </Grid>
-      {discordInvite && (
-        <Grid xs={6} sm={4} md={3} textAlign="center">
-          <DiscordLogin href={discordInvite}>join</DiscordLogin>
-        </Grid>
-      )}
-    </Grid>
+          {blockedGuilds ? (
+            <>
+              <Typography variant="body1" align="center">
+                {t('on_block_msg')}:
+              </Typography>
+              <List>
+                {blockedGuilds.split(',').map((guild) => (
+                  <ListItem key={guild} sx={{ ml: 2 }}>
+                    <ListItemIcon>
+                      <I className="fab fa-discord" size="small" />
+                    </ListItemIcon>
+                    <ListItemText primary={guild} />
+                  </ListItem>
+                ))}
+              </List>
+            </>
+          ) : (
+            <Typography variant="body1" align="center">
+              {t('missing_map_perm')}
+            </Typography>
+          )}
+          {discordInvite && (
+            <Typography variant="body1" align="center">
+              {t('on_block_join_discord')}
+            </Typography>
+          )}
+        </CardContent>
+        <CardActions sx={{ p: 4 }}>
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={() => navigate('/')}
+            size="small"
+          >
+            {t('go_back')}
+          </Button>
+          {discordInvite && (
+            <DiscordLogin href={discordInvite} size="small">
+              join
+            </DiscordLogin>
+          )}
+        </CardActions>
+      </Card>
+    </Box>
   )
 }
diff --git a/src/components/layout/auth/Discord.jsx b/src/components/layout/auth/Discord.jsx
@@ -6,14 +6,15 @@ import { I } from '../general/I'
 
 /**
  *
- * @param {{ children?: string, href?: string, size?: import('@mui/material').ButtonProps['size'], bgcolor?: string }} props
+ * @param {{ children?: string, bgcolor?: string } & import('@mui/material/Button').ButtonProps} props
  * @returns {JSX.Element}
  */
 export default function DiscordLogin({
   href = '/auth/discord/callback',
   children = 'login',
   size = 'large',
   bgcolor = 'discord.main',
+  ...props
 }) {
   const { t } = useTranslation()
 
@@ -23,7 +24,8 @@ export default function DiscordLogin({
       bgcolor={bgcolor}
       size={size}
       href={href}
-      startIcon={<I className="fab fa-discord" size={size} />}
+      startIcon={<I className="fab fa-discord" size={size} color="white" />}
+      {...props}
     >
       {t(children)}
     </Button>