Add unauthenticated redirects, logout button and improve UI

packages/client/package-lock.json

@@ -12977,6 +12977,21 @@
         "use-sidecar": "^1.0.1"
       }
     },
+    "react-icons": {
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-3.11.0.tgz",
+      "integrity": "sha512-JRgiI/vdF6uyBgyZhVyYJUZAop95Sy4XDe/jmT3R/bKliFWpO/uZBwvSjWEdxwzec7SYbEPNPck0Kff2tUGM2Q==",
+      "requires": {
+        "camelcase": "^5.0.0"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "5.3.1",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
+        }
+      }
+    },
     "react-is": {
       "version": "17.0.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz",

packages/client/package.json

@@ -23,6 +23,7 @@
     "npm": "^6.14.8",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-icons": "^3.11.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.0",
     "react-three-fiber": "^5.2.1",

packages/client/src/3d/Phantom.tsx

@@ -1,6 +1,5 @@
 // @ts-nocheck
 import React, { useEffect, useRef } from 'react'
-import { extend } from 'react-three-fiber'
 import { Vector3, Euler } from 'three'
 
 import api, { Transform } from '../store'

packages/client/src/components/DisconnectButton.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import {
+  Button,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverCloseButton,
+  PopoverContent,
+  PopoverHeader,
+  PopoverTrigger,
+  ButtonProps,
+  Link,
+} from '@chakra-ui/react'
+
+const DisconnectButton: React.FC<ButtonProps> = (props) => {
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <Button variant="ghost" color="gray.500" size="sm" {...props}>
+          Desconectarse
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        <PopoverArrow />
+        <PopoverCloseButton />
+        <PopoverHeader>Confirmación</PopoverHeader>
+        <PopoverBody textAlign="center">
+          ¿Estás segur@ de que querés desconectarte?
+        </PopoverBody>
+        <Link
+          href="/auth/logout"
+          display="block"
+          textAlign="center"
+          fontWeight="bold"
+          color="red.500"
+          size="sm"
+          py="0.5rem"
+          textDecoration="none"
+          _hover={{
+            backgroundColor: 'red.50',
+          }}
+        >
+          Desconectarse
+        </Link>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export default DisconnectButton

packages/client/src/components/Error.tsx

@@ -2,6 +2,8 @@ import React from 'react'
 import useStore from '../store'
 import { Box, Heading, Link, Stack, Text } from '@chakra-ui/react'
 
+import DisconnectButton from './DisconnectButton'
+
 const Error: React.FC = () => {
   const error = useStore((state) => state.error)
 
@@ -28,16 +30,34 @@ const Error: React.FC = () => {
       align="center"
       w="100%"
       spacing="1rem"
+      position="relative"
+    >
+      <Box
+        position="absolute"
+        bottom={0}
+        right={50}
+        left={50}
+        textAlign="center"
+        pb="2rem"
       >
+        <DisconnectButton />
+      </Box>
       <Heading mb="2rem">¡Oh no! </Heading>
-      <Box textAlign="center">
+      <Box textAlign="center" px="2rem">
         <Text>{errorText()}</Text>
         <Text mb="2rem">
           Por favor,{' '}
-          <Link onClick={() => reloadPage()}>clickeá acá para recargar la página </Link>
+          <Link
+            onClick={() => reloadPage()}
+            fontWeight="bold"
+            pading="0.5rem"
+            _hover={{ backgroundColor: 'gray.100' }}
+          >
+            clickeá acá para recargar la página{' '}
+          </Link>
         </Text>
       </Box>
-      <Text as="small">
+      <Text as="small" px="2rem" textAlign="center">
         Si el problema persiste, envía un correo electrónico a{' '}
         <Link href="mailto:ianmethyst@gmail.com">ianmethyst@gmail.com</Link>
       </Text>

packages/client/src/components/Login.tsx

@@ -1,8 +1,18 @@
 import React from 'react'
-import { Heading, Stack, Link, Spacer, Text } from '@chakra-ui/react'
+import { RiExternalLinkLine } from 'react-icons/ri'
+import { Heading, Stack, Link, Spacer, chakra } from '@chakra-ui/react'
+
+import useLogin from '../hooks/useLogin'
+import { Redirect } from 'react-router-dom'
 
 const Login: React.FC = () => {
-  return (
+  const { response, isLoading } = useLogin<{ authenticated: boolean }>('auth/check')
+
+  if (isLoading || !response) return null
+
+  return response.authenticated ? (
+    <Redirect to="/museo" />
+  ) : (
     <Stack h="100vh" direction="column" justify="center" align="center" w="100%">
       <Spacer />
       <Heading w="100%" mb="2rem" textAlign="center">
@@ -14,9 +24,23 @@ const Login: React.FC = () => {
         <Link href="/auth/google">ingresar con google</Link>
       </Stack>
       <Spacer />
-      <Text textAlign="center" pb="2rem">
-        Desarrollado por <Link>Ian Mancini</Link> para <Link> Artimañas 2020 </Link>
-      </Text>
+      <Link
+        fontWeight="bold"
+        textAlign="center"
+        mb="1.5rem"
+        p="0.5rem 1rem"
+        _hover={{ backgroundColor: 'gray.100' }}
+        color="gray.500"
+        textDecoration="none"
+        href="https://taller5.ludicc.cc/artimañas2020"
+        isExternal
+        display="flex"
+      >
+        Llevado a cabo por Ian Mancini para Artimañas 2020{' '}
+        <chakra.span ml="0.5em">
+          <RiExternalLinkLine />
+        </chakra.span>
+      </Link>
     </Stack>
   )
 }

packages/client/src/components/MenuOverlay.tsx

@@ -9,8 +9,12 @@ import {
   Button,
   Kbd,
   useToast,
+  Spacer,
+  Flex,
 } from '@chakra-ui/react'
 
+import DisconnectButton from './DisconnectButton'
+
 import useStore from '../store'
 
 const MenuOverlay: React.FC = () => {
@@ -38,16 +42,18 @@ const MenuOverlay: React.FC = () => {
 
   return (
     <>
-      <Modal isOpen={!pointerLocked} onClose={() => undefined}>
+      <Modal isOpen={!pointerLocked} onClose={() => undefined} size="xl">
         <ModalOverlay />
         <ModalContent>
           <ModalHeader>museo.red</ModalHeader>
-          <ModalBody>
+          <ModalBody mb="2rem" mx="2rem" textAlign="center">
             Usa las teclas <Kbd>W</Kbd>, <Kbd>A</Kbd>, <Kbd>S</Kbd> y <Kbd>D</Kbd> para
             moverte. Usá el mouse para mirar alrededor
           </ModalBody>
-          <ModalFooter>
-            <Button colorScheme="blue" mx="auto" onClick={lockControls}>
+          <ModalFooter as={Flex}>
+            <DisconnectButton colorScheme="gray" />
+            <Spacer />
+            <Button colorScheme="blue" onClick={lockControls} size="lg">
               Continuar
             </Button>
           </ModalFooter>

packages/client/src/components/Museo.tsx

@@ -9,14 +9,21 @@ import Error from './Error'
 import Scene from '../3d'
 
 import useStore, { UserTransforms } from '../store'
+import useLogin from '../hooks/useLogin'
+import { Redirect } from 'react-router-dom'
 
 const Museo: React.FC = () => {
+  const { response, isLoading } = useLogin<{ authenticated: boolean }>('auth/check')
+
   const setSocket = useStore((state) => state.setSocket)
   const setError = useStore((state) => state.setError)
   const error = useStore((state) => state.error)
   const setUserTransforms = useStore((state) => state.setUserTransforms)
 
   useEffect(() => {
+    if (!response || isLoading) {
+      return
+    }
     const socket = io()
     setSocket(socket)
 
@@ -29,9 +36,13 @@ const Museo: React.FC = () => {
       socket.close()
       setSocket(null)
     }
-  }, [])
+  }, [response, isLoading])
 
-  return (
+  if (isLoading || !response) return null
+
+  return response.authenticated === false ? (
+    <Redirect to="/" />
+  ) : (
     <Box w="100vw" h="100vh">
       {error ? (
         <Error />

packages/client/src/hooks/useLogin.ts

@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react'
+
+function useLogin<T>(url: string) {
+  const [response, setResponse] = useState<T>()
+  const [error, setError] = useState(null)
+  const [isLoading, setIsLoading] = useState(true)
+  useEffect(() => {
+    const fetchData = async () => {
+      setIsLoading(true)
+      try {
+        const res = await fetch(url)
+        const json = await res.json()
+        setResponse(json)
+        setIsLoading(false)
+      } catch (error) {
+        setError(error)
+      }
+    }
+    fetchData()
+  }, [])
+  return { response, error, isLoading }
+}
+
+export default useLogin

packages/client/src/store.ts

@@ -5,8 +5,8 @@ import { Socket } from 'socket.io-client'
 type Error = null | 'SOCKET'
 
 export type Transform = {
-  position?: number[]
-  rotation?: number[]
+  position: number[]
+  rotation: number[]
 }
 
 type userId = string

packages/server/src/auth/middleware.js

@@ -2,7 +2,7 @@ const ensureAuthenticated = (req, res, next) => {
   if (req.isAuthenticated()) {
     return next()
   } else {
-    return res.redirect('/')
+    return res.json({ authenticated: false })
   }
 }
 

packages/server/src/auth/passport.js

@@ -9,6 +9,7 @@ import UserModel from '../models/user'
 import { facebookRouter, facebookStrategy } from './providers/facebook'
 import { googleRouter, googleStrategy } from './providers/google'
 import { twitterRouter, twitterStrategy } from './providers/twitter'
+import ensureAuthenticated from './middleware'
 
 export function initPassport() {
   passport.serializeUser((user, done) => {
@@ -30,3 +31,12 @@ export const authRouter = Router()
 authRouter.use(facebookRouter)
 authRouter.use(twitterRouter)
 authRouter.use(googleRouter)
+
+authRouter.get('/logout', function (req, res) {
+  req.logout()
+  res.redirect('/')
+})
+
+authRouter.get('/check', ensureAuthenticated, function (req, res) {
+  res.json({ authenticated: true })
+})