feat: WIP, admins only can see a table of users that have logged in the site

client/pages/AdminPage.tsx

@@ -105,6 +105,30 @@ export const AdminPage = ({}) => {
                         <em>Nessuna soluzione ancora da correggere</em>
                     </>
                 )}
+                {user.role === 'admin' && (
+                    <>
+                        <hr />
+                        <div class="subtitle">Utenti</div>
+                        <div class="table" style={{ '--cols': 4 }}>
+                            <div class="cell header">Nome Utente</div>
+                            <div class="cell header">Username Ateneo</div>
+                            <div class="cell header">Ruolo</div>
+                            <div class="cell header last-col">Ultimo Login</div>
+                            <div class="cell">User 1</div>
+                            <div class="cell">user1</div>
+                            <div class="cell">admin</div>
+                            <div class="cell last-col">2/6/2075 20:32</div>
+                            <div class="cell">User 2</div>
+                            <div class="cell">user2</div>
+                            <div class="cell">moderator</div>
+                            <div class="cell last-col">5/12/2102 20:61</div>
+                            <div class="cell last-row">User 3</div>
+                            <div class="cell last-row">user3</div>
+                            <div class="cell last-row">studente</div>
+                            <div class="cell last-row last-col">11/5/2066 20:49</div>
+                        </div>
+                    </>
+                )}
             </main>
         </>
     )

client/styles/main.scss

@@ -494,6 +494,79 @@ main.page-scores {
 // Components
 //
 
+.table {
+    display: grid;
+
+    grid-template-columns: repeat(var(--cols), auto);
+
+    box-shadow: -2px 4px 6px 1px #00000018, 0 0 4px 0px #00000010;
+    border: 1px solid #ddd;
+    border-radius: 0.5rem;
+    background: #ffffff;
+
+    user-select: none;
+
+    overflow: hidden;
+
+    .cell {
+        padding: 0.5rem 1rem;
+
+        border-right: 1px solid #ddd;
+        border-bottom: 1px solid #ddd;
+
+        &.last-col {
+            border-right: none;
+        }
+
+        &.last-row {
+            border-bottom: none;
+        }
+
+        &.header {
+            font-weight: 400;
+
+            padding-right: 1rem;
+
+            background: #f0f0f0;
+
+            display: flex;
+            align-items: center;
+            text-align: center;
+            justify-content: space-between;
+        }
+
+        &:not(.header) {
+            user-select: text;
+        }
+    }
+
+    @media screen and (max-width: $device-s-width), (pointer: coarse) {
+        display: flex;
+        flex-direction: column;
+
+        width: 100%;
+
+        .cell {
+            padding: 0.5rem 0.75rem;
+
+            border-bottom: 1px dashed #ddd;
+            border-right: none;
+
+            &.last-row {
+                border-bottom: 1px dashed #ddd;
+            }
+
+            &.last-col {
+                border-bottom: 1px solid #bbb;
+            }
+
+            &.last-row.last-col {
+                border-bottom: none;
+            }
+        }
+    }
+}
+
 details {
     width: 100%;
     max-width: 80ch;

server/auth.ts

@@ -2,7 +2,7 @@ import { Router } from 'express'
 import { AuthorizationCode } from 'simple-oauth2'
 import fetch from 'node-fetch'
 
-export function setupOauth(r: Router) {
+export function setupOAuth(r: Router) {
     const config = {
         client: {
             id: process.env.OAUTH_CLIENT_ID ?? '',

server/routes.ts

@@ -38,7 +38,7 @@ import {
 import { initialDatabaseValue } from './db/example-data'
 
 import { validateObjectKeys } from '../shared/utils'
-import { setupOauth } from './auth'
+import { setupOAuth } from './auth'
 
 export async function createApiRouter() {
     type SessionId = Opaque<string, string, 'session'>
@@ -73,7 +73,7 @@ export async function createApiRouter() {
 
     const authRouter: Router = express.Router()
 
-    setupOauth(authRouter)
+    setupOAuth(authRouter)
     r.use('/auth', authRouter)
 
     r.get('/api/status', (req, res) => {