MCSS-92: Self Host QR Code Generator

utmmcss · Jan 12, 2024 · 85b6d7f · 85b6d7f
1 parent 0225c96
commit 85b6d7f
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 89 deletions.
diff --git a/components/Dashboard/ModalQRCode/index.tsx b/components/Dashboard/ModalQRCode/index.tsx
@@ -1,17 +1,14 @@
-import Image from 'next/image'
-import { useState } from 'react'
-
 import CloseIcon from '@mui/icons-material/Close'
 import Alert from '@mui/material/Alert'
 import Box from '@mui/material/Box'
-import CircularProgress from '@mui/material/CircularProgress'
-import Collapse from '@mui/material/Collapse'
 import Dialog from '@mui/material/Dialog'
 import DialogContent from '@mui/material/DialogContent'
 import DialogTitle from '@mui/material/DialogTitle'
 import Grow from '@mui/material/Grow'
 import IconButton from '@mui/material/IconButton'
 
+import { QRCodeSVG } from 'qrcode.react'
+
 type Props = {
   qrCode: string
   open: boolean
@@ -21,17 +18,10 @@ type Props = {
 const ModalQRCode = (props: Props) => {
   const { open, qrCode, setOpen } = props
 
-  const [show, setShow] = useState(false)
-
-  const handleClose = () => {
-    setOpen(false)
-    setShow(false)
-  }
-
   return (
     <Dialog
       open={open}
-      onClose={handleClose}
+      onClose={() => setOpen(false)}
       TransitionComponent={Grow}
       PaperProps={{
         sx: {
@@ -46,7 +36,7 @@ const ModalQRCode = (props: Props) => {
     >
       <DialogTitle sx={{ m: 0, p: 2 }}>My QR Code</DialogTitle>
       <IconButton
-        onClick={handleClose}
+        onClick={() => setOpen(false)}
         sx={{
           position: 'absolute',
           right: 8,
@@ -58,33 +48,9 @@ const ModalQRCode = (props: Props) => {
       </IconButton>
       <DialogContent sx={{ pt: 0 }}>
         <Box component="div" display="flex" flexDirection="column" gap="1rem">
-          <Collapse in={show}>
-            <Alert severity="info">Turn up your brightness for sign-ins.</Alert>
-          </Collapse>
-          <Box
-            component="div"
-            display="flex"
-            alignItems="center"
-            justifyContent="center"
-            position="relative"
-          >
-            <Image
-              src={qrCode}
-              alt="User QR Code"
-              width={0}
-              height={0}
-              sizes="100vw"
-              style={{
-                width: '100%',
-                height: 'auto',
-                aspectRatio: '1 / 1',
-                background: 'white',
-                borderRadius: '0.75rem',
-              }}
-              draggable={false}
-              onLoad={() => setShow(true)}
-            />
-            {!show && <CircularProgress sx={{ position: 'absolute' }} />}
+          <Alert severity="info">Turn up your brightness for sign-ins.</Alert>
+          <Box component="div" display="flex" sx={{ borderRadius: '0.75rem', overflow: 'hidden' }}>
+            <QRCodeSVG value={qrCode} includeMargin style={{ height: 'auto', width: '100%' }} />
           </Box>
         </Box>
       </DialogContent>

diff --git a/components/HomePage/Sponsors/Assets/AWS.tsx b/components/HomePage/Sponsors/Assets/AWS.tsx
@@ -0,0 +1,24 @@
+const AWS = () => {
+  return (
+    <svg height="100%" viewBox="0 0 304 182" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M86.4001 66.4C86.4001 70.1 86.8001 73.1 87.5001 75.3C88.3001 77.5 89.3001 79.9 90.7001 82.5C91.2001 83.3 91.4001 84.1 91.4001 84.8C91.4001 85.8 90.8001 86.8 89.5001 87.8L83.2001 92C82.3001 92.6 81.4001 92.9 80.6001 92.9C79.6001 92.9 78.6001 92.4 77.6001 91.5C76.2001 90 75.0001 88.4 74.0001 86.8C73.0001 85.1 72.0001 83.2 70.9001 80.9C63.1001 90.1 53.3001 94.7 41.5001 94.7C33.1001 94.7 26.4001 92.3 21.5001 87.5C16.6001 82.7 14.1001 76.3 14.1001 68.3C14.1001 59.8 17.1001 52.9 23.2001 47.7C29.3001 42.5 37.4001 39.9 47.7001 39.9C51.1001 39.9 54.6001 40.2 58.3001 40.7C62.0001 41.2 65.8001 42 69.8001 42.9V35.6C69.8001 28 68.2001 22.7 65.1001 19.6C61.9001 16.5 56.5001 15 48.8001 15C45.3001 15 41.7001 15.4 38.0001 16.3C34.3001 17.2 30.7001 18.3 27.2001 19.7C25.6001 20.4 24.4001 20.8 23.7001 21C23.0001 21.2 22.5001 21.3 22.1001 21.3C20.7001 21.3 20.0001 20.3 20.0001 18.2V13.3C20.0001 11.7 20.2001 10.5 20.7001 9.79998C21.2001 9.09998 22.1001 8.39998 23.5001 7.69998C27.0001 5.89998 31.2001 4.39998 36.1001 3.19998C41.0001 1.89998 46.2001 1.29998 51.7001 1.29998C63.6001 1.29998 72.3001 3.99997 77.9001 9.39997C83.4001 14.8 86.2001 23 86.2001 34V66.4H86.4001ZM45.8001 81.6C49.1001 81.6 52.5001 81 56.1001 79.8C59.7001 78.6 62.9001 76.4 65.6001 73.4C67.2001 71.5 68.4001 69.4 69.0001 67C69.6001 64.6 70.0001 61.7 70.0001 58.3V54.1C67.1001 53.4 64.0001 52.8 60.8001 52.4C57.6001 52 54.5001 51.8 51.4001 51.8C44.7001 51.8 39.8001 53.1 36.5001 55.8C33.2001 58.5 31.6001 62.3 31.6001 67.3C31.6001 72 32.8001 75.5 35.3001 77.9C37.7001 80.4 41.2001 81.6 45.8001 81.6ZM126.1 92.4C124.3 92.4 123.1 92.1 122.3 91.4C121.5 90.8 120.8 89.4 120.2 87.5L96.7001 10.2C96.1001 8.19998 95.8001 6.89998 95.8001 6.19998C95.8001 4.59998 96.6001 3.69998 98.2001 3.69998H108C109.9 3.69998 111.2 3.99998 111.9 4.69998C112.7 5.29998 113.3 6.69998 113.9 8.59998L130.7 74.8L146.3 8.59998C146.8 6.59998 147.4 5.29998 148.2 4.69998C149 4.09998 150.4 3.69998 152.2 3.69998H160.2C162.1 3.69998 163.4 3.99998 164.2 4.69998C165 5.29998 165.7 6.69998 166.1 8.59998L181.9 75.6L199.2 8.59998C199.8 6.59998 200.5 5.29998 201.2 4.69998C202 4.09998 203.3 3.69998 205.1 3.69998H214.4C216 3.69998 216.9 4.49998 216.9 6.19998C216.9 6.69998 216.8 7.19998 216.7 7.79998C216.6 8.39998 216.4 9.19998 216 10.3L191.9 87.6C191.3 89.6 190.6 90.9 189.8 91.5C189 92.1 187.7 92.5 186 92.5H177.4C175.5 92.5 174.2 92.2 173.4 91.5C172.6 90.8 171.9 89.5 171.5 87.5L156 23L140.6 87.4C140.1 89.4 139.5 90.7 138.7 91.4C137.9 92.1 136.5 92.4 134.7 92.4H126.1ZM254.6 95.1C249.4 95.1 244.2 94.5 239.2 93.3C234.2 92.1 230.3 90.8 227.7 89.3C226.1 88.4 225 87.4 224.6 86.5C224.2 85.6 224 84.6 224 83.7V78.6C224 76.5 224.8 75.5 226.3 75.5C226.9 75.5 227.5 75.6 228.1 75.8C228.7 76 229.6 76.4 230.6 76.8C234 78.3 237.7 79.5 241.6 80.3C245.6 81.1 249.5 81.5 253.5 81.5C259.8 81.5 264.7 80.4 268.1 78.2C271.5 76 273.3 72.8 273.3 68.7C273.3 65.9 272.4 63.6 270.6 61.7C268.8 59.8 265.4 58.1 260.5 56.5L246 52C238.7 49.7 233.3 46.3 230 41.8C226.7 37.4 225 32.5 225 27.3C225 23.1 225.9 19.4 227.7 16.2C229.5 13 231.9 10.2 234.9 7.99998C237.9 5.69998 241.3 3.99998 245.3 2.79998C249.3 1.59998 253.5 1.09998 257.9 1.09998C260.1 1.09998 262.4 1.19998 264.6 1.49998C266.9 1.79998 269 2.19998 271.1 2.59998C273.1 3.09998 275 3.59998 276.8 4.19998C278.6 4.79998 280 5.39998 281 5.99998C282.4 6.79998 283.4 7.59998 284 8.49998C284.6 9.29998 284.9 10.4 284.9 11.8V16.5C284.9 18.6 284.1 19.7 282.6 19.7C281.8 19.7 280.5 19.3 278.8 18.5C273.1 15.9 266.7 14.6 259.6 14.6C253.9 14.6 249.4 15.5 246.3 17.4C243.2 19.3 241.6 22.2 241.6 26.3C241.6 29.1 242.6 31.5 244.6 33.4C246.6 35.3 250.3 37.2 255.6 38.9L269.8 43.4C277 45.7 282.2 48.9 285.3 53C288.4 57.1 289.9 61.8 289.9 67C289.9 71.3 289 75.2 287.3 78.6C285.5 82 283.1 85 280 87.4C276.9 89.9 273.2 91.7 268.9 93C264.4 94.4 259.7 95.1 254.6 95.1Z"
+        fill="#252F3E"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M273.5 143.7C240.6 168 192.8 180.9 151.7 180.9C94.1 180.9 42.2 159.6 2.99999 124.2C-0.100014 121.4 2.69999 117.6 6.39999 119.8C48.8 144.4 101.1 159.3 155.2 159.3C191.7 159.3 231.8 151.7 268.7 136.1C274.2 133.6 278.9 139.7 273.5 143.7Z"
+        fill="#FF9900"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M287.2 128.1C283 122.7 259.4 125.5 248.7 126.8C245.5 127.2 245 124.4 247.9 122.3C266.7 109.1 297.6 112.9 301.2 117.3C304.8 121.8 300.2 152.7 282.6 167.5C279.9 169.8 277.3 168.6 278.5 165.6C282.5 155.7 291.4 133.4 287.2 128.1Z"
+        fill="#FF9900"
+      />
+    </svg>
+  )
+}
+
+export default AWS
diff --git a/components/HomePage/Sponsors/Assets/FDM.tsx b/components/HomePage/Sponsors/Assets/FDM.tsx
diff --git a/components/HomePage/Sponsors/index.tsx b/components/HomePage/Sponsors/index.tsx
@@ -5,9 +5,9 @@ import Grid from '@mui/material/Grid'
 import Tooltip from '@mui/material/Tooltip'
 import Typography from '@mui/material/Typography'
 
+import AWS from '@/components/HomePage/Sponsors/Assets/AWS'
 import BigDataAIHub from '@/components/HomePage/Sponsors/Assets/BigDataAIHub'
 import Echo3D from '@/components/HomePage/Sponsors/Assets/Echo3D'
-import FDM from '@/components/HomePage/Sponsors/Assets/FDM'
 import ICUBE from '@/components/HomePage/Sponsors/Assets/ICUBE'
 import MCSS from '@/components/HomePage/Sponsors/Assets/MCSS'
 import MLH from '@/components/HomePage/Sponsors/Assets/MLH'
@@ -103,14 +103,11 @@ const Sponsors = () => {
       >
         <Sponsor name="Major League Hacking" logo={<MLH />} link="https://mlh.io" tier="bronze" />
         <Sponsor
-          name="University of Toronto"
-          logo={<UofT />}
-          link="https://utoronto.ca"
+          name="Amazon Web Services"
+          logo={<AWS />}
+          link="https://aws.amazon.com"
           tier="bronze"
         />
-        {false && (
-          <Sponsor name="FDM Group" logo={<FDM />} link="https://fdmgroup.com" tier="bronze" />
-        )}
         <Sponsor name="Echo3D" logo={<Echo3D />} link="https://echo3d.com" tier="bronze" />
         <Sponsor
           name="Big Data AI Hub"
@@ -124,6 +121,12 @@ const Sponsors = () => {
           link="https://standoutstickers.com"
           tier="bronze"
         />
+        <Sponsor
+          name="University of Toronto"
+          logo={<UofT />}
+          link="https://utoronto.ca"
+          tier="bronze"
+        />
       </Grid>
       <Typography variant="h2">...and more to come!</Typography>
     </Container>

diff --git a/hooks/User/useUserGet.ts b/hooks/User/useUserGet.ts
@@ -17,7 +17,6 @@ export const useUserGet = (props?: Props) => {
     refetchOnWindowFocus: false,
     onSuccess: (data) => {
       data.user.avatar = getAvatar(data.user)
-      data.user.qr_code = getQRCode(data.user.qr_code)
       data.user.verified = true
       props?.onSuccess?.()
     },
@@ -39,7 +38,3 @@ const getAvatar = (user: User) => {
     return `https://cdn.discordapp.com/embed/avatars/${index}.png`
   }
 }
-
-const getQRCode = (qrCode: string) => {
-  return `https://chart.googleapis.com/chart?cht=qr&chl=${qrCode}&chs=500x500`
-}
diff --git a/next.config.js b/next.config.js
@@ -22,11 +22,6 @@ const nextConfig = {
         hostname: 'cdn.discordapp.com',
         pathname: '/**',
       },
-      {
-        protocol: 'https',
-        hostname: 'chart.googleapis.com',
-        pathname: '/chart/**',
-      },
     ],
   },
 }

diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
     "mui-tel-input": "^5.0.0",
     "next": "13.5.4",
     "next-pwa": "^5.6.0",
+    "qrcode.react": "^3.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.48.2",

diff --git a/yarn.lock b/yarn.lock
@@ -4125,6 +4125,11 @@ punycode@^2.1.0:
   resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz"
   integrity sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==
 
+qrcode.react@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-3.1.0.tgz#5c91ddc0340f768316fbdb8fff2765134c2aecd8"
+  integrity sha512-oyF+Urr3oAMUG/OiOuONL3HXM+53wvuH3mtIWQrYmsXoAq0DkvZp2RYUWFSMFtbdOpuS++9v+WAkzNVkMlNW6Q==
+
 queue-microtask@^1.2.2:
   version "1.2.3"
   resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz"