implementato logout e riutilizzo sessione

Unipisa · Aug 31, 2023 · c7f7e8e · c7f7e8e
1 parent de2f5f4
commit c7f7e8e
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 25 deletions.
diff --git a/api/router.js b/api/router.js
@@ -58,7 +58,7 @@ if (env.OAUTH2_CLIENT_ID) {
 
 router.post('/login', function(req, res) {
     const user = req.user || null
-    res.send({data: { user }})
+    res.send({ user })
 })
 
 async function loginController(req) {
@@ -75,7 +75,8 @@ router.post('/login/password',
     response_envelope(loginController))
 
 if (process.env.OAUTH2_CLIENT_ID) {
-    router.get('/login/oauth2', passport.authenticate('oauth2'))
+    router.get('/login/oauth2', 
+        passport.authenticate('oauth2'))
 }
 
 router.get('/login/oauth2/callback',
@@ -87,10 +88,11 @@ router.get('/login/oauth2/callback',
     })
 
 router.post('/logout', function(req, res) {
+    console.log("CALLING LOGOUT")
     req.logout(function(err) {
+        console.log("CALLED LOGOUT")
         if (err) { return next(err) }
-        // res.redict('/login')
-        res.send({ "user": null })
+        res.send({ user: null })
     })
 })
 

diff --git a/frontend/src/components/TopBar.js b/frontend/src/components/TopBar.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import { Link } from "react-router-dom"
+import { Button } from 'react-bootstrap'
 import { useEngine } from '../modules/engine'
 
 
@@ -35,21 +36,20 @@ export default function TopBar() {
                 <div className="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
                     <div className="dropdown-item">
                         Collegato come <strong>{ engine.user.username }</strong> 
-                        { engine.user.admin? "(amministratore)" : "" }
+                        { engine.user.admin? " (amministratore)" : "" }
                     </div>
-                    <div className="dropdown-divider"></div>
-
-                                            <Link className="dropdown-item" to={`/users/${engine.user.id}`}>
+                    <div className="dropdown-divider" />
+                        <Link className="dropdown-item" to={`/users/${engine.user.id}`}>
                             <svg className="svg-inline--fa fa-user fa-w-14 fa-sm fa-fw mr-2 text-gray-400" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"></path></svg>
                             I miei documenti
                         </Link >
-                        <div className="dropdown-divider"></div>
-                            <Link className="dropdown-item" to="/users/logout">
-                            <svg className="svg-inline--fa fa-user fa-w-14 fa-lg mx-2" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
-                                <path fill="currentColor" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"></path>
-                            </svg>Logout
-                    </Link >
-                </div>
+                        <div className="dropdown-divider" />
+                            <Button className="dropdown-item" onClick={engine.logout}>
+                                <svg className="svg-inline--fa fa-user fa-w-14 fa-lg mx-2" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
+                                    <path fill="currentColor" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"></path>
+                                </svg>Logout
+                            </Button>
+                    </div>
             </li>
 
     </ul>

diff --git a/frontend/src/modules/engine.js b/frontend/src/modules/engine.js
@@ -21,6 +21,7 @@ export function useCreateEngine() {
             callback: null
         },
         user: null,
+        connected: false,
     })
 
     const queryClient=useQueryClient()
@@ -163,13 +164,10 @@ export function useCreateEngine() {
         connect: async () => {
             try {
                 let { user } = await api.post('/login')
-
-                setState(s => ({...s, user }))
-
-                return config
+                setState(s => ({...s, user, connected: true }))
             } catch(err) {
+                setState(s => ({...s, user: null, connected: false }))
                 console.error(err)
-                return null
             }
         },
 
@@ -201,9 +199,8 @@ export function useCreateEngine() {
         },
 
         logout: async () => {
-            await api.post("logout")
+            await api.post("/logout")
             setState(s => ({...s, user: null}))
-            return true
         },
     }
 }

diff --git a/frontend/src/pages/SinglePage.js b/frontend/src/pages/SinglePage.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React, { useState, useEffect } from "react"
 import {
     BrowserRouter, Routes, Route, Link
 } from "react-router-dom"
@@ -27,6 +27,7 @@ import Flash from "../components/Flash"
 import NavBar from '../components/NavBar'
 import TopBar from '../components/TopBar'
 import Footer from '../components/Footer'
+import LoadingMessage from '../components/LoadingMessage'
 
 import {QueryClient, QueryClientProvider } from 'react-query'
 
@@ -42,8 +43,10 @@ function SinglePageInternal () {
     const engine = useCreateEngine()
     // engine.sync(useState(engine.state))
     const modalConfirmData = engine.state.modalConfirmData
-    console.log("SinglePageInternal", JSON.stringify(engine.state))
-    console.log(!!engine.user)
+
+    useEffect(engine.connect, [])
+    if (!engine.state.connected) return <LoadingMessage>connecting...</LoadingMessage>
+
     if (!engine.user) return <EngineProvider value={engine}><Login /></EngineProvider>
     return <EngineProvider value={engine}>
         <div id="wrapper">