Aggiunte tante cose

_frontend/index.html

@@ -1,59 +1,24 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
+    <head>
-    <meta charset="UTF-8">
+        <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    
-    <title>Homepage</title>
 
-    <link rel="preconnect" href="https://fonts.googleapis.com">
+        <title>Homepage</title>
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&display=swap" rel="stylesheet">
 
-    <link rel="stylesheet" href="/styles/main.scss">
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
-</head>
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<body>
+        <link
-    <main>
+            href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&display=swap"
-        <div class="sidebar">
+            rel="stylesheet"
-            <div class="logo">Storage</div>
+        />
-            <div class="items">
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
-                <div class="item">
+
-                    <div class="label">
+        <link rel="stylesheet" href="/styles/main.scss" />
-                        Dashboard
+    </head>
-                    </div>
+    <body>
-                </div>
+        <main></main>
-                <div class="item">
+        <script type="module" src="/src/main.jsx"></script>
-                    <div class="label">
+    </body>
-                        Buckets
+</html>
-                    </div>
-                    <div class="children">
-                        <div class="item">
-                            <div class="label">Bucket 1</div>
-                        </div>
-                        <div class="item">
-                            <div class="label">Bucket 2</div>
-                        </div>
-                        <div class="item">
-                            <div class="label">Bucket 3</div>
-                        </div>
-                        <div class="item">
-                            <div class="label">Bucket 4</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="main-content">
-            <header>
-                <div class="group">
-                    <div class="label">Dashboard</div>
-                </div>
-                <div class="group">
-                    <div class="label">Login</div>
-                </div>
-            </header>
-        </div>
-    </main>
-</body>
-</html>

_frontend/server.js

@@ -35,4 +35,8 @@ async function createServer(customHtmlRoutes) {
 
 createServer({
     '/': './index.html',
+    '/api-keys': './index.html',
+    '/admin': './index.html',
+    '/buckets': './index.html',
+    '/buckets/:bucket': './index.html',
 })

_frontend/src/components/Icon.jsx

@@ -0,0 +1 @@
+export const Icon = ({ name }) => <span class="material-symbols-outlined">{name}</span>

_frontend/src/components/MainContent.jsx

@@ -0,0 +1,61 @@
+import { useStore } from '../context.jsx'
+import { changeCase } from '../util.jsx'
+
+import { Icon } from './Icon.jsx'
+
+import { AdminPanel } from '../pages/Admin.jsx'
+import { ApiKeys } from '../pages/ApiKeys.jsx'
+import { Login } from '../pages/Login.jsx'
+import { Dashboard } from '../pages/Dashboard.jsx'
+
+export const MainContent = () => {
+    const { setSidebarVisible, route, user } = useStore()
+
+    const Route =
+        {
+            index: Dashboard,
+            login: Login,
+            admin: AdminPanel,
+            apiKeys: ApiKeys,
+        }[route.id] || (() => <>Error</>)
+
+    return (
+        <div class={`main-content route-${changeCase('camel', 'dash', route.id)}`}>
+            <header>
+                <div class="group">
+                    {user === 'admin' && (
+                        <div
+                            class="button icon flat"
+                            onClick={() => setSidebarVisible(value => !value)}
+                        >
+                            <Icon name="menu" />
+                        </div>
+                    )}
+                    <div class="label">
+                        {route.id === 'bucket' ? (
+                            <>
+                                Bucket / <code>{route.params.bucket}</code>
+                            </>
+                        ) : (
+                            route.name
+                        )}
+                    </div>
+                </div>
+                {user === 'admin' ? (
+                    <div class="label">{user}</div>
+                ) : (
+                    route.id !== 'login' && (
+                        <div class="group">
+                            <a class="button flat" href="/login">
+                                Login
+                            </a>
+                        </div>
+                    )
+                )}
+            </header>
+            <div class="content">
+                <Route />
+            </div>
+        </div>
+    )
+}

_frontend/src/components/PieChartWidget.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'preact/hooks'
-import { hashCode } from '../util.js'
+import { hashCode } from '../util.jsx'
 
 const CANVAS_SIZE = 350
 
@@ -15,8 +15,13 @@ export const PieChartWidget = ({ title, parts, labels, total }) => {
         if (canvasRef.current) {
             const $canvas = canvasRef.current
 
-            $canvas.style.width = `${CANVAS_SIZE}px`
+            const size = Math.min($canvas.offsetWidth, $canvas.offsetHeight)
-            $canvas.style.height = `${CANVAS_SIZE}px`
+
+            $canvas.width = size * 2
+            $canvas.height = size * 2
+
+            $canvas.style.width = `${size}px`
+            $canvas.style.height = `${size}px`
 
             const width = $canvas.width / 2
             const height = $canvas.height / 2
@@ -75,7 +80,7 @@ export const PieChartWidget = ({ title, parts, labels, total }) => {
         <>
             <div class="title">{title}</div>
             <div class="content">
-                <canvas ref={canvasRef} width={CANVAS_SIZE * 2} height={CANVAS_SIZE * 2}></canvas>
+                <canvas ref={canvasRef}></canvas>
             </div>
         </>
     )

_frontend/src/components/Sidebar.jsx

@@ -0,0 +1,95 @@
+import { useState } from 'preact/hooks'
+import { Icon } from './Icon.jsx'
+import { useStore } from '../context.jsx'
+
+const SidebarDropdownItem = ({ icon, label, children }) => {
+    const [collapsed, setCollapsed] = useState(false)
+
+    return (
+        <div class="item dropdown">
+            <div class="label" onClick={() => setCollapsed(x => !x)}>
+                <div class="row">
+                    <div class="row-group">
+                        <span class="icon">
+                            <Icon name={icon} />
+                        </span>
+                        <span>{label}</span>
+                    </div>
+                    <div class="row-group">
+                        <span class="icon">
+                            <Icon name={collapsed ? 'expand_more' : 'expand_less'} />
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div class={collapsed ? 'children collapsed' : 'children'}>{children}</div>
+        </div>
+    )
+}
+
+export const Sidebar = () => {
+    const { sidebarVisibile, buckets, user } = useStore()
+
+    return (
+        user === 'admin' && (
+            <div class={'sidebar' + (sidebarVisibile ? '' : ' collapsed')}>
+                <div class="logo">Storage</div>
+                <div class="items">
+                    <div class="item single">
+                        <a href="/" class="label">
+                            <div class="row">
+                                <div class="row-group">
+                                    <Icon name="dashboard" />
+                                    <div class="text">Dashboard</div>
+                                </div>
+                            </div>
+                        </a>
+                    </div>
+                    <div class="item single">
+                        <a href="/admin" class="label">
+                            <div class="row">
+                                <div class="row-group">
+                                    <Icon name="security" />
+                                    <div class="text">Admin Panel</div>
+                                </div>
+                            </div>
+                        </a>
+                    </div>
+                    <div class="item single">
+                        <a href="/api-keys" class="label">
+                            <div class="row">
+                                <div class="row-group">
+                                    <Icon name="key" />
+                                    <div class="text">API Keys</div>
+                                </div>
+                            </div>
+                        </a>
+                    </div>
+                    <hr />
+                    <div class="item single">
+                        <a href="/buckets" class="label">
+                            <div class="row">
+                                <div class="row-group">
+                                    <Icon name="database" />
+                                    <div class="text">Buckets</div>
+                                </div>
+                            </div>
+                        </a>
+                    </div>
+                    {buckets.map(bucket => (
+                        <div class="item">
+                            <a href={'/buckets/' + bucket} class="label">
+                                <div class="row">
+                                    <div class="row-group">
+                                        <Icon name="view_list" />
+                                        <div>{bucket}</div>
+                                    </div>
+                                </div>
+                            </a>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        )
+    )
+}

_frontend/src/components/Toasts.jsx

@@ -0,0 +1,35 @@
+import { useStore } from '../context.jsx'
+
+let globalToastId = 0
+
+export const Toasts = () => {
+    const { toasts } = useStore()
+
+    return (
+        <div class="toasts">
+            {toasts.map(({ i, removed, message }) => (
+                <div key={i} class={removed ? 'toast removed' : 'toast'}>
+                    {message}
+                </div>
+            ))}
+        </div>
+    )
+}
+
+const cleanToasts = setToasts => {
+    setToasts(ts => ts.filter((t, i) => !t.removed))
+}
+
+export const showToast = (_toasts, setToasts) => message => {
+    const toast = { i: globalToastId++, removed: false, message }
+
+    setTimeout(() => {
+        setToasts(ts => ts.map(t => (t === toast ? { ...t, removed: true } : t)))
+    }, 3000)
+
+    setTimeout(() => {
+        cleanToasts(setToasts)
+    }, 4000)
+
+    setToasts(ts => [...ts.slice(-5), toast])
+}

_frontend/src/components/Widget.jsx

@@ -0,0 +1,17 @@
+import { MessageWidget } from './MessageWidget.jsx'
+import { PieChartWidget } from './PieChartWidget.jsx'
+
+const WidgetTypes = {
+    pie: PieChartWidget,
+    message: MessageWidget,
+}
+
+export const Widget = ({ type, value }) => {
+    const CustomWidget = WidgetTypes[type]
+
+    return (
+        <div class={'widget ' + type}>
+            <CustomWidget {...value} />
+        </div>
+    )
+}

_frontend/src/context.jsx

@@ -0,0 +1,8 @@
+import { createContext } from 'preact'
+import { useContext } from 'preact/hooks'
+
+export const Store = createContext(null)
+
+export function useStore() {
+    return useContext(Store)
+}

_frontend/src/home.jsx

@@ -1,53 +0,0 @@
-import { render } from 'preact'
-import { useEffect, useState } from 'preact/hooks'
-import { MessageWidget } from './components/MessageWidget.jsx'
-import { PieChartWidget } from './components/PieChartWidget.jsx'
-import { useUser } from './util.js'
-
-const WidgetTypes = {
-    pie: PieChartWidget,
-    message: MessageWidget,
-}
-
-const Widget = ({ type, value }) => {
-    const CustomWidget = WidgetTypes[type]
-
-    return (
-        <div class={'widget ' + type}>
-            <CustomWidget {...value} />
-        </div>
-    )
-}
-
-const App = () => {
-    const user = useUser()
-
-    const [widgets, setWidgets] = useState([])
-
-    useEffect(() => {
-        fetch('/api/dashboard-state')
-            .then(res => res.json())
-            .then(state => setWidgets(state.widgets))
-            .catch(e => console.error(e))
-    }, [])
-
-    return (
-        <>
-            <header>
-                <div class="logo">Dashboard</div>
-                <div class="spacer">&bull;</div>
-                <div class="machine">space.phc.dm.unipi.it</div>
-            </header>
-            <p>
-                (Viewing page as <b>{user}</b>)
-            </p>
-            <div class="widgets">
-                {widgets.map(w => (
-                    <Widget {...w} />
-                ))}
-            </div>
-        </>
-    )
-}
-
-render(<App />, document.querySelector('main'))

_frontend/src/main.jsx

@@ -0,0 +1,86 @@
+import { render } from 'preact'
+import { useEffect, useState } from 'preact/hooks'
+import { AdminPanel } from './pages/Admin.jsx'
+import { ApiKeys } from './pages/ApiKeys.jsx'
+import { Icon } from './components/Icon.jsx'
+import { Login } from './pages/Login.jsx'
+import { Store, useStore } from './context.jsx'
+import { changeCase, useRouter, useUser } from './util.jsx'
+import { Dashboard } from './pages/Dashboard.jsx'
+import { showToast, Toasts } from './components/Toasts.jsx'
+import { Sidebar } from './components/Sidebar.jsx'
+import { MainContent } from './components/MainContent.jsx'
+
+const App = () => {
+    const [id, route, routeParams] = useRouter({
+        index: {
+            pattern: '/',
+            name: 'Dashboard',
+        },
+        login: {
+            pattern: '/login',
+            name: 'Login',
+        },
+        admin: {
+            pattern: '/admin',
+            name: 'Admin',
+        },
+        apiKeys: {
+            pattern: '/api-keys',
+            name: 'API Keys',
+        },
+        buckets: {
+            pattern: '/buckets',
+            name: 'Buckets',
+        },
+        bucket: {
+            pattern: '/buckets/:bucket',
+            name: 'Bucket',
+        },
+    })
+
+    const user = useUser(user => {
+        if (id !== 'login' && user !== 'admin') {
+            location.href = '/login'
+        }
+    })
+
+    const [toasts, setToasts] = useState([])
+    const [sidebarVisibile, setSidebarVisible] = useState(true)
+
+    const [buckets, setBuckets] = useState([])
+    useEffect(() => {
+        fetch('/api/buckets')
+            .then(res => res.json())
+            .then(value => setBuckets(value))
+    }, [])
+
+    const context = {
+        // Auth
+        user,
+        // Sidebar
+        sidebarVisibile,
+        setSidebarVisible,
+        buckets,
+        // Toasts
+        toasts,
+        setToasts,
+        showToast: showToast(toasts, setToasts),
+        // Routing
+        route: {
+            ...route,
+            id,
+            params: routeParams,
+        },
+    }
+
+    return (
+        <Store.Provider value={context}>
+            <Sidebar />
+            <MainContent />
+            <Toasts />
+        </Store.Provider>
+    )
+}
+
+render(<App />, document.querySelector('main'))

_frontend/src/pages/Admin.jsx

@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'preact/hooks'
+
+export const AdminPanel = () => {
+    const [text, setText] = useState('')
+
+    useEffect(() => {
+        fetch('/api/dashboard-state')
+            .then(res => res.json())
+            .then(state => setText(JSON.stringify(state, null, 2)))
+    }, [])
+
+    const onSubmit = async e => {
+        const formatted = JSON.stringify(JSON.parse(text), null, 2)
+
+        const res = await fetch('/api/dashboard-state', {
+            headers: { 'Content-Type': 'application/json' },
+            method: 'POST',
+            body: text,
+        })
+
+        if (!res.ok) {
+            alert('An error occurred while updating the state!')
+        }
+
+        setText(formatted)
+    }
+
+    return (
+        <form>
+            <div class="fill title">Dashboard State</div>
+            <textarea
+                class="fill mono"
+                name="state"
+                cols="80"
+                rows="20"
+                value={text}
+                onInput={e => setText(e.target.value)}
+            ></textarea>
+            <div class="fill center">
+                <button type="button" onClick={onSubmit}>
+                    Update
+                </button>
+            </div>
+        </form>
+    )
+}

_frontend/src/pages/ApiKeys.jsx

@@ -0,0 +1,91 @@
+import { useEffect, useState } from 'preact/hooks'
+import { Icon } from '../components/Icon.jsx'
+import { useStore } from '../context.jsx'
+
+export const ApiKeys = () => {
+    const { showToast } = useStore()
+
+    const [keys, setKeys] = useState([])
+
+    useEffect(() => {
+        fetch('/api/api-keys')
+            .then(res => res.json())
+            .then(value => setKeys(value))
+            .catch(e => console.error(e))
+    }, [])
+
+    const createKey = async () => {
+        const res = await fetch('/api/api-keys', { method: 'POST' })
+        if (!res.ok) {
+            showToast('Errore!')
+        }
+
+        const key = await res.json()
+
+        setKeys(keys => [...keys, key])
+    }
+
+    const removeKey = async key => {
+        const res = await fetch('/api/api-keys/' + key, { method: 'DELETE' })
+
+        if (res.ok) {
+            showToast('Chiave rimossa')
+            setKeys(keys => keys.filter(k => k !== key))
+        } else {
+            showToast('Errore!')
+        }
+    }
+
+    const copyKey = async key => {
+        await navigator.clipboard.writeText(key)
+        showToast(
+            <>
+                Copiata <code>{key}</code> negli appunti
+            </>
+        )
+    }
+
+    return (
+        <>
+            <div class="panel">
+                <div class="row">
+                    <div class="row-group">
+                        <div class="title">API Keys</div>
+                    </div>
+                    <div class="row-group">
+                        <button class="icon" onClick={() => createKey()}>
+                            <Icon name="add" />
+                        </button>
+                    </div>
+                </div>
+                <div class="table">
+                    <div class="cells" style="grid-template-columns: 1fr auto;">
+                        {/* Header */}
+                        <div class="header">Chiave</div>
+                        <div class="header">Opzioni</div>
+                        {/* Rows */}
+                        {keys.map(key => {
+                            return (
+                                <>
+                                    <div class="name">
+                                        <button class="flat" onClick={() => copyKey(key)}>
+                                            {key}
+                                        </button>
+                                    </div>
+                                    <div class="options">
+                                        <button
+                                            class="icon delete flat"
+                                            onClick={() => removeKey(key)}
+                                        >
+                                            <Icon name="delete" />
+                                        </button>
+                                    </div>
+                                </>
+                            )
+                        })}
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}

_frontend/src/pages/Dashboard.jsx

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'preact/hooks'
+import { Widget } from '../components/Widget.jsx'
+
+export const Dashboard = () => {
+    const [widgets, setWidgets] = useState([])
+
+    useEffect(() => {
+        fetch('/api/dashboard-state')
+            .then(res => res.json())
+            .then(state => setWidgets(state.widgets))
+    }, [])
+
+    return (
+        <div class="widgets">
+            {widgets.map(w => (
+                <Widget {...w} />
+            ))}
+        </div>
+    )
+}

_frontend/src/pages/Login.jsx

@@ -0,0 +1,12 @@
+export const Login = () => {
+    return (
+        <form action="/api/login" method="POST">
+            <div class="fill title">Login</div>
+            <label for="login-password">Password</label>
+            <input type="password" name="password" id="login-password" autoComplete="password" />
+            <div class="fill center">
+                <button type="submit">Accedi</button>
+            </div>
+        </form>
+    )
+}

_frontend/src/util.js

@@ -1,30 +0,0 @@
-import { useEffect, useState } from 'preact/hooks'
-
-export function hashCode(s) {
-    s = s.toString() + "seed iniziale dell'hash"
-
-    let hash = 0
-
-    if (s.length === 0) return hash
-
-    for (let i = 0; i < s.length; i++) {
-        const chr = s.charCodeAt(i)
-        hash = (hash << 5) - hash + chr
-        hash |= 0
-    }
-
-    return Math.abs(hash)
-}
-
-export function useUser() {
-    const [user, setUser] = useState(null)
-
-    useEffect(() => {
-        fetch('/api/current-user')
-            .then(res => res.json())
-            .then(value => setUser(value))
-            .catch(e => console.error(e))
-    }, [])
-
-    return user
-}

_frontend/src/util.jsx

@@ -0,0 +1,67 @@
+import { toChildArray } from 'preact'
+import { useCallback, useEffect, useState } from 'preact/hooks'
+
+export function hashCode(s) {
+    s = s.toString() + "seed iniziale dell'hash"
+
+    let hash = 0
+
+    if (s.length === 0) return hash
+
+    for (let i = 0; i < s.length; i++) {
+        const chr = s.charCodeAt(i)
+        hash = (hash << 5) - hash + chr
+        hash |= 0
+    }
+
+    return Math.abs(hash)
+}
+
+export function useUser(onLoginStateChanged) {
+    const [user, setUser] = useState(null)
+
+    useEffect(() => {
+        fetch('/api/current-user')
+            .then(res => res.json())
+            .then(value => {
+                setUser(value)
+                onLoginStateChanged(value)
+            })
+            .catch(e => console.error(e))
+    }, [])
+
+    return user
+}
+
+function matchPattern(pattern, url) {
+    const r = `^${pattern.replace(/:([a-zA-Z0-9\_\-]+)/g, '(?<$1>.+?)')}$`
+    return new RegExp(r).exec(url)
+}
+
+export const useRouter = routes => {
+    for (const [id, route] of Object.entries(routes)) {
+        const m = matchPattern(route.pattern, location.pathname)
+        if (m) {
+            return [id, route, m.groups]
+        }
+    }
+
+    return ['unknown', { id: 'unknown' }, {}]
+}
+
+//
+// Change Case Utility
+//
+
+const fromCaseMap = {
+    camel: s => s.split(/(?=[A-Z])/),
+    // ...
+}
+const toCaseMap = {
+    dash: parts => parts.map(p => p.toLowerCase()).join('-'),
+    // ...
+}
+
+export function changeCase(from, to, s) {
+    return toCaseMap[to](fromCaseMap[from](s))
+}

_frontend/styles/main.scss

@@ -5,18 +5,21 @@
 }
 
 :root {
-    --bg-100: #ffffff;
+    --bg-light-100: #ffffff;
-    --bg-500: #f0f0f0;
+    --bg-light-500: #f0f0f0;
-    --bg-600: #e0e0e0;
+    --bg-light-600: #e0e0e0;
+    --bg-light-700: #d0d0d0;
 
-    --bg-2-400: #666;
+    --bg-dark-400: #55555f;
-    --bg-2-500: #38383d;
+    --bg-dark-500: #38383d;
 
-    --fg-400: #3d3d3d;
+    --fg-light-400: #3d3d3d;
-    --fg-500: #333;
+    --fg-light-500: #333;
 
-    --fg-2-500: #ddd;
+    --fg-dark-300: #505050;
+    --fg-dark-500: #ddd;
 
+    --ft-mono: 'JetBrains Mono', monospace;
     --ft-sans: 'Open Sans', sans-serif;
 
     --ft-sans-wt-light: 300;
@@ -33,8 +36,8 @@ body {
     font-family: var(--ft-sans);
     font-size: 16px;
 
-    color: var(--fg-500);
+    color: var(--fg-light-500);
-    background: var(--bg-500);
+    background: var(--bg-light-500);
 }
 
 //
@@ -43,48 +46,162 @@ body {
 
 main {
     display: flex;
+    z-index: 0;
 
     .sidebar {
+        transition: all 150ms ease-in-out;
+
+        &.collapsed {
+            width: 0;
+            min-width: 0;
+        }
+
+        user-select: none;
+
         display: flex;
         flex-direction: column;
 
-        padding: 1rem;
+        // padding: 0.5rem 1rem 0 0.5rem;
         min-height: 100vh;
-        min-width: 15rem;
 
-        color: var(--fg-2-500);
+        min-width: 13rem;
-        background: var(--bg-2-500);
+        width: 25vw;
+        max-width: 25rem;
+
+        overflow-x: hidden;
+
+        color: var(--fg-dark-500);
+        background: var(--bg-dark-500);
 
         font-size: 18px;
 
-        z-index: -1;
+        z-index: 1;
+
+        flex-shrink: 0;
+
+        .logo {
+            font-size: 24px;
+            font-weight: var(--ft-sans-wt-light);
+
+            margin: 1rem;
+        }
+
+        & > .items {
+            margin: 0.5rem;
+
+            & > .item > .label {
+                min-width: 170px;
+            }
+        }
+
+        .items {
+            display: flex;
+            flex-direction: column;
+
+            gap: 0.25rem;
+
+            & > .item > .label {
+                font-weight: var(--ft-sans-wt-bold);
+            }
+
+            hr {
+                margin: 0;
+                padding: 0;
+                width: 100%;
+                height: 1px;
+
+                border: none;
+                background: var(--fg-dark-300);
+            }
+
+            .item {
+                &.dropdown {
+                    cursor: pointer;
+
+                    & .item > .label {
+                        font-size: 16px;
+
+                        margin-left: 1.75rem;
+                    }
+                }
+
+                & > .children {
+                    padding-top: 0.25rem;
+
+                    display: flex;
+                    flex-direction: column;
+
+                    &.collapsed {
+                        display: none;
+                    }
+                }
+            }
+
+            .label {
+                padding: 0.5rem;
+                border-radius: 0.25rem;
+
+                display: flex;
+
+                min-width: 10rem;
+
+                .icon {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+
+                &:hover {
+                    background: var(--bg-dark-400);
+                }
+            }
+        }
     }
 
     .main-content {
-        width: 100%;
+        display: flex;
-        background: var(--bg-500);
+        flex-direction: column;
+        align-items: center;
+
+        flex-grow: 1;
+
+        height: 100vh;
+        overflow-y: auto;
+
+        background: var(--bg-light-500);
         box-shadow: 0 0 2rem 0 #00000022;
 
+        z-index: 2;
+
         header {
             width: 100%;
 
+            min-height: 3rem;
+
             display: flex;
             align-items: center;
             justify-content: space-between;
 
-            padding: 1rem;
+            padding: 0.5rem 1rem 0.5rem 0.5rem;
             gap: 0.75rem;
 
-            background: var(--bg-100);
+            background: var(--bg-light-100);
-            border-bottom: 1px solid var(--bg-600);
+            border-bottom: 1px solid var(--bg-light-600);
 
-            color: var(--fg-400);
+            color: var(--fg-light-400);
 
             vertical-align: middle;
 
-            .logo {
+            .group {
-                font-size: 32px;
+                display: flex;
-                font-weight: var(--ft-sans-wt-bold);
+                align-items: center;
+
+                gap: 0.5rem;
+            }
+
+            .label {
+                font-size: 18px;
+                font-weight: var(--ft-sans-wt-light);
             }
 
             .machine {
@@ -93,45 +210,228 @@ main {
             }
         }
 
-        .widgets {
+        & > .content {
             display: flex;
-            justify-content: center;
+            flex-direction: column;
-            align-items: start;
+            align-items: center;
 
-            flex-wrap: wrap;
+            flex-grow: 1;
-            gap: 2rem;
 
-            max-width: 120ch;
+            padding: 1rem 1rem 0 1rem;
-
-            .widget {
-                background: var(--bg-100);
-                border: 1px solid var(--bg-600);
-                padding: 1rem;
-
-                min-height: 10rem;
-                max-width: 50ch;
-
-                .title {
-                    font-weight: var(--ft-sans-wt-bold);
-
-                    code {
-                        font-weight: normal;
-                    }
-                }
-
-                &.todo {
-                    width: 300px;
-                    height: 200px;
-                }
-            }
         }
     }
 }
 
+//
+// Utilities
+//
+
+@keyframes toast-fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 0.95;
+    }
+}
+
+@keyframes toast-fade-out {
+    from {
+        opacity: 0.95;
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+.row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    flex-grow: 1;
+
+    gap: 0.5rem;
+
+    .row-group {
+        display: flex;
+        align-items: center;
+
+        gap: 0.5rem;
+    }
+}
+
+//
+// Components
+//
+
+.panel {
+    background: var(--bg-light-100);
+    border: 1px solid var(--bg-light-600);
+    padding: 1rem;
+
+    display: flex;
+    flex-direction: column;
+
+    gap: 0.5rem;
+
+    & .title {
+        font-weight: var(--ft-sans-wt-bold);
+    }
+}
+
+.table {
+    & > .header {
+        display: flex;
+        justify-content: space-between;
+    }
+    & > .cells {
+        display: grid;
+        align-items: center;
+
+        gap: 0.25rem 0.5rem;
+
+        .header {
+            display: flex;
+            align-items: center;
+
+            min-height: 2.25rem;
+            font-weight: var(--ft-sans-wt-bold);
+        }
+
+        & > div {
+            min-width: 4rem;
+        }
+    }
+}
+
+form {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 1rem;
+
+    align-items: center;
+
+    @extend .panel;
+
+    label {
+        justify-self: end;
+    }
+
+    .fill {
+        grid-column: span 2;
+    }
+
+    .title {
+        font-weight: var(--ft-sans-wt-bold);
+    }
+
+    .center {
+        justify-self: center;
+    }
+}
+
+//
+// Controls
+//
+
+a,
+a:hover,
+a:visited {
+    text-decoration: none;
+    color: inherit;
+}
+
+button,
+.button {
+    border: none;
+    background: none;
+    font-family: var(--ft-sans);
+    font-size: 16px;
+
+    color: var(--fg-light-500);
+    text-decoration: none;
+
+    cursor: pointer;
+
+    --size: 2.25rem;
+
+    height: var(--size);
+    padding: 0 0.75rem;
+
+    border-radius: 2px;
+
+    display: flex;
+    align-items: center;
+
+    &.icon {
+        display: flex;
+        justify-content: center;
+
+        width: var(--size);
+    }
+
+    &.flat {
+        &:hover {
+            background: #00000018;
+        }
+    }
+
+    &:not(.flat) {
+        border: 1px solid var(--bg-light-700);
+        background: var(--bg-light-600);
+
+        &:hover {
+            background: var(--bg-light-700);
+        }
+    }
+}
+
+input[type='text'],
+input[type='password'],
+textarea {
+    border: 1px solid var(--bg-light-700);
+    background: var(--bg-light-100);
+
+    font-family: var(--ft-sans);
+    font-size: 16px;
+
+    color: var(--fg-light-500);
+
+    border-radius: 2px;
+
+    white-space: pre;
+    overflow-wrap: normal;
+    overflow-x: scroll;
+
+    &.mono {
+        font-size: 90%;
+        font-family: var(--ft-mono);
+    }
+}
+
+textarea {
+    padding: 0.5rem;
+}
+
+input[type='text'],
+input[type='password'] {
+    padding: 0 0.5rem;
+    --size: 2.25rem;
+
+    height: var(--size);
+
+    display: flex;
+    align-items: center;
+}
 //
 // Typography
 //
 
+.material-symbols-outlined {
+    font-size: 22px;
+}
+
 b {
     font-weight: var(--ft-sans-wt-bold);
 }
@@ -144,6 +444,10 @@ p {
     }
 }
 
+code {
+    font-size: 95%;
+}
+
 $base-font-size: 16px;
 $heading-scale: 1.33;
 
@@ -169,3 +473,118 @@ $heading-scale: 1.33;
         line-height: 1.5;
     }
 }
+
+//
+// Routes
+//
+
+.route-index {
+    & > .content {
+        width: 100%;
+        max-width: 1300px;
+    }
+
+    .widgets {
+        // display: flex;
+        // flex-direction: row;
+        // flex-wrap: wrap;
+
+        width: 100%;
+
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+
+        justify-content: center;
+
+        gap: 1rem;
+
+        .widget {
+            @extend .panel;
+
+            min-height: 10rem;
+
+            &.pie {
+                grid-row: span 2;
+
+                & > .content {
+                    place-content: center;
+                }
+            }
+
+            & > .content {
+                flex-grow: 1;
+                display: grid;
+
+                & > canvas {
+                    min-width: 250px;
+                    min-height: 250px;
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+        }
+    }
+}
+
+.route-api-keys {
+    .table {
+        min-width: 30rem;
+
+        .name {
+            button {
+                font-family: var(--ft-mono);
+            }
+        }
+
+        .options {
+            display: flex;
+            justify-content: end;
+            gap: 0.5rem;
+
+            .delete {
+                color: #e62929;
+
+                &:hover {
+                    background: #e629291d;
+                }
+            }
+        }
+    }
+}
+
+.toasts {
+    position: absolute;
+    z-index: 10;
+
+    left: 50%;
+    transform: translateX(-50%);
+
+    bottom: 1rem;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    gap: 0.25rem;
+
+    transition: all 150ms linear;
+
+    font-size: 15px;
+
+    .toast {
+        background: #38383d;
+        color: var(--fg-dark-500);
+
+        padding: 0.5rem 1rem;
+        border-radius: 0.5rem;
+
+        opacity: 0.95;
+
+        animation: toast-fade-in 250ms ease-out;
+        transition: opacity 250ms ease-in;
+
+        &.removed {
+            opacity: 0;
+        }
+    }
+}

database/database.go

@@ -8,6 +8,7 @@ import (
 	"os"
 
 	"git.phc.dm.unipi.it/phc/storage/store"
+	"git.phc.dm.unipi.it/phc/storage/utils"
 	"golang.org/x/exp/slices"
 )
 
@@ -26,6 +27,13 @@ type Database interface {
 	GetDashboardState() (DashboardState, error)
 	SetDashboardState(DashboardState) error
 
+	// API Keys
+
+	CreateAPIKey() (string, error)
+	CheckAPIKey(key string) error
+	RemoveAPIKey(key string) error
+	AllAPIKeys() ([]string, error)
+
 	// Bucket Operations
 
 	CreateBucket(bucket string, options ...any) error
@@ -57,6 +65,8 @@ type jsonDB struct {
 
 	DashboardState DashboardState         `json:"dashboardState"`
 	Buckets        map[string]*jsonBucket `json:"buckets"`
+
+	APIKeys []string `json:"api-keys"`
 }
 
 func NewJSON(file string) Database {
@@ -67,6 +77,7 @@ func NewJSON(file string) Database {
 			Widgets: []MonitorWidget{},
 		},
 		Buckets: map[string]*jsonBucket{},
+		APIKeys: []string{},
 	}
 
 	err := db.load()
@@ -77,6 +88,18 @@ func NewJSON(file string) Database {
 	return db
 }
 
+// func writeTransaction[T any](db *jsonDB, transactionFunc func(db *jsonDB) (T, error)) (T, error) {
+// 	var zero T
+// 	if err := db.load(); err != nil {
+// 		return zero, err
+// 	}
+// 	v, err := transactionFunc(db)
+// 	if err := db.store(); err != nil {
+// 		return zero, err
+// 	}
+// 	return v, err
+// }
+
 func (db *jsonDB) setup() error {
 	if _, err := os.Stat(db.file); !os.IsNotExist(err) {
 		return nil
@@ -134,21 +157,85 @@ func (db *jsonDB) load() error {
 }
 
 func (db *jsonDB) GetDashboardState() (DashboardState, error) {
-	db.load()
+	if err := db.load(); err != nil {
+		return DashboardState{}, err
+	}
 
 	return db.DashboardState, nil
 }
 
 func (db *jsonDB) SetDashboardState(state DashboardState) error {
-	db.load()
+	if err := db.load(); err != nil {
+		return err
+	}
+
 	db.DashboardState = state
 
-	db.store()
+	if err := db.store(); err != nil {
+		return err
+	}
+
+	return nil
+}
+
+func (db *jsonDB) CreateAPIKey() (string, error) {
+	if err := db.load(); err != nil {
+		return "", err
+	}
+
+	key := utils.GenerateRandomString(32)
+	db.APIKeys = append(db.APIKeys, key)
+
+	if err := db.store(); err != nil {
+		return "", err
+	}
+
+	return key, nil
+}
+
+func (db *jsonDB) AllAPIKeys() ([]string, error) {
+	if err := db.load(); err != nil {
+		return nil, err
+	}
+
+	return db.APIKeys, nil
+}
+
+func (db *jsonDB) CheckAPIKey(key string) error {
+	if err := db.load(); err != nil {
+		return err
+	}
+
+	if !slices.Contains(db.APIKeys, key) {
+		return fmt.Errorf("the given API key %q is invalid", key)
+	}
+
+	return nil
+}
+
+func (db *jsonDB) RemoveAPIKey(key string) error {
+	if err := db.load(); err != nil {
+		return err
+	}
+
+	i := slices.Index(db.APIKeys, key)
+	if i == -1 {
+		return fmt.Errorf("the given API key %q is invalid", key)
+	}
+
+	db.APIKeys = append(db.APIKeys[:i], db.APIKeys[i+1:]...)
+
+	if err := db.store(); err != nil {
+		return err
+	}
+
 	return nil
 }
 
 func (db *jsonDB) CreateBucket(bucket string, options ...any) error {
-	db.load()
+	if err := db.load(); err != nil {
+		return err
+	}
 
 	if _, found := db.Buckets[bucket]; found {
 		return fmt.Errorf("bucket named %q already present", bucket)
@@ -165,12 +252,17 @@ func (db *jsonDB) CreateBucket(bucket string, options ...any) error {
 
 	db.Buckets[bucket] = bi
 
-	db.store()
+	if err := db.store(); err != nil {
+		return err
+	}
+
 	return nil
 }
 
 func (db *jsonDB) DeleteBucket(bucket string) error {
-	db.load()
+	if err := db.load(); err != nil {
+		return err
+	}
 
 	if _, found := db.Buckets[bucket]; !found {
 		return fmt.Errorf("bucket named %q not found", bucket)
@@ -180,12 +272,17 @@ func (db *jsonDB) DeleteBucket(bucket string) error {
 
 	log.Printf("The bucket named %q was removed but its files are still on disk", bucket)
 
-	db.store()
+	if err := db.store(); err != nil {
+		return err
+	}
+
 	return nil
 }
 
 func (db *jsonDB) AllBuckets() ([]string, error) {
-	db.load()
+	if err := db.load(); err != nil {
+		return nil, err
+	}
 
 	buckets := make([]string, 0, len(db.Buckets))
 
@@ -197,7 +294,9 @@ func (db *jsonDB) AllBuckets() ([]string, error) {
 }
 
 func (db *jsonDB) CreateBucketObject(bucket string, r io.Reader) (string, error) {
-	db.load()
+	if err := db.load(); err != nil {
+		return "", err
+	}
 
 	b, found := db.Buckets[bucket]
 	if !found {
@@ -211,24 +310,34 @@ func (db *jsonDB) CreateBucketObject(bucket string, r io.Reader) (string, error)
 
 	b.Objects = append(b.Objects, id)
 
-	db.store()
+	if err := db.store(); err != nil {
+		return "", err
+	}
+
 	return id, err
 }
 
 func (db *jsonDB) SetBucketObject(bucket, id string, r io.Reader) error {
-	db.load()
+	if err := db.load(); err != nil {
+		return err
+	}
 
 	b, found := db.Buckets[bucket]
 	if !found {
 		return fmt.Errorf("bucket named %q not found", bucket)
 	}
 
-	db.store()
+	if err := db.store(); err != nil {
+		return err
+	}
+
 	return store.Update(b.Path, db.PrefixSize, id, r)
 }
 
 func (db *jsonDB) GetBucketObject(bucket, id string, w io.Writer) error {
-	db.load()
+	if err := db.load(); err != nil {
+		return err
+	}
 
 	b, found := db.Buckets[bucket]
 	if !found {
@@ -239,7 +348,9 @@ func (db *jsonDB) GetBucketObject(bucket, id string, w io.Writer) error {
 }
 
 func (db *jsonDB) DeleteBucketObject(bucket, id string) error {
-	db.load()
+	if err := db.load(); err != nil {
+		return err
+	}
 
 	b, found := db.Buckets[bucket]
 	if !found {
@@ -253,12 +364,17 @@ func (db *jsonDB) DeleteBucketObject(bucket, id string) error {
 	i := slices.Index(b.Objects, id)
 	b.Objects = append(b.Objects[:i], b.Objects[i+1:]...)
 
-	db.store()
+	if err := db.store(); err != nil {
+		return err
+	}
+
 	return nil
 }
 
 func (db *jsonDB) AllBucketObjects(bucket string) ([]string, error) {
-	db.load()
+	if err := db.load(); err != nil {
+		return nil, err
+	}
 
 	b, found := db.Buckets[bucket]
 	if !found {
@@ -272,6 +388,9 @@ func (db *jsonDB) AllBucketObjects(bucket string) ([]string, error) {
 
 	b.Objects = objects
 
-	db.store()
+	if err := db.store(); err != nil {
+		return nil, err
+	}
+
 	return b.Objects, nil
 }

routes/api.go

@@ -13,7 +13,23 @@ import (
 )
 
 func (r *Router) Api(api fiber.Router) {
-	sessions := map[string]struct{}{}
+	adminSessions := map[string]struct{}{}
+
+	isAdminMiddleware := func(c *fiber.Ctx) error {
+		if _, found := adminSessions[c.Cookies("sid")]; !found {
+			return fmt.Errorf("invalid session token")
+		}
+
+		return c.Next()
+	}
+	isAPIKeyMiddleware := func(c *fiber.Ctx) error {
+		if _, isAdmin := adminSessions[c.Cookies("sid")]; !isAdmin { // if admin continue
+			if err := r.Database.CheckAPIKey(c.Cookies("token")); err != nil { // otherwise also check api token
+				return err
+			}
+		}
+		return c.Next()
+	}
 
 	api.Post("/login", func(c *fiber.Ctx) error {
 		var form struct {
@@ -24,19 +40,21 @@ func (r *Router) Api(api fiber.Router) {
 			return err
 		}
 
-		if form.Password == config.AdminPassword {
+		if form.Password != config.AdminPassword {
-			token := utils.GenerateRandomString(32)
+			return c.JSON("invalid credentials")
-			sessions[token] = struct{}{}
-
-			c.Cookie(&fiber.Cookie{
-				Name:    "sid",
-				Value:   token,
-				Path:    "/",
-				Expires: time.Now().Add(3 * 24 * time.Hour),
-			})
 		}
 
-		return c.JSON("ok")
+		token := utils.GenerateRandomString(32)
+		adminSessions[token] = struct{}{}
+
+		c.Cookie(&fiber.Cookie{
+			Name:    "sid",
+			Value:   token,
+			Path:    "/",
+			Expires: time.Now().Add(3 * 24 * time.Hour),
+		})
+
+		return c.Redirect("/")
 	})
 
 	api.Get("/status", func(c *fiber.Ctx) error {
@@ -44,7 +62,7 @@ func (r *Router) Api(api fiber.Router) {
 	})
 
 	api.Get("/current-user", func(c *fiber.Ctx) error {
-		if _, found := sessions[c.Cookies("sid")]; !found {
+		if _, found := adminSessions[c.Cookies("sid")]; !found {
 			return c.JSON("anonymous")
 		}
 
@@ -60,102 +78,157 @@ func (r *Router) Api(api fiber.Router) {
 		return c.JSON(state)
 	})
 
-	api.Post("/dashboard-state", func(c *fiber.Ctx) error {
+	api.Post("/dashboard-state",
-		if _, found := sessions[c.Cookies("sid")]; !found {
+		isAdminMiddleware,
-			return fmt.Errorf("invalid session token")
+		func(c *fiber.Ctx) error {
-		}
 
-		var state database.DashboardState
+			var state database.DashboardState
 
-		if err := c.BodyParser(&state); err != nil {
+			if err := c.BodyParser(&state); err != nil {
-			return err
+				return err
-		}
+			}
 
-		if err := r.Database.SetDashboardState(state); err != nil {
+			if err := r.Database.SetDashboardState(state); err != nil {
-			return err
+				return err
-		}
+			}
 
-		return c.JSON("ok")
+			return c.JSON("ok")
-	})
-
-	api.Get("/buckets", func(c *fiber.Ctx) error {
-		buckets, err := r.Database.AllBuckets()
-		if err != nil {
-			return err
-		}
-
-		return c.JSON(buckets)
-	})
-
-	api.Post("/buckets", func(c *fiber.Ctx) error {
-		var req struct {
-			Bucket string `json:"bucket"`
-			Path   string `json:"path"`
-		}
-
-		log.Printf("%v", string(c.Body()))
-
-		if err := c.BodyParser(&req); err != nil {
-			return err
-		}
-
-		opts := []any{}
-		if req.Path != "" {
-			opts = append(opts, req.Path)
-		}
-
-		if err := r.Database.CreateBucket(req.Bucket, opts...); err != nil {
-			return err
-		}
-
-		return c.JSON("ok")
-	})
-
-	api.Get("/buckets/:bucket", func(c *fiber.Ctx) error {
-		bucket := c.Params("bucket")
-
-		objects, err := r.Database.AllBucketObjects(bucket)
-		if err != nil {
-			return err
-		}
-
-		return c.JSON(objects)
-	})
-
-	api.Post("/buckets/:bucket", func(c *fiber.Ctx) error {
-		bucket := c.Params("bucket")
-
-		ff, err := c.FormFile("file")
-		if err != nil {
-			return err
-		}
-
-		mf, err := ff.Open()
-		if err != nil {
-			return err
-		}
-
-		id, err := r.Database.CreateBucketObject(bucket, mf)
-		if err != nil {
-			return err
-		}
-
-		return c.JSON(fiber.Map{
-			"bucket": bucket,
-			"id":     id,
 		})
-	})
 
-	api.Get("/buckets/:bucket/:id", func(c *fiber.Ctx) error {
+	api.Get("/buckets",
-		bucket := c.Params("bucket")
+		isAdminMiddleware,
-		id := c.Params("id")
+		func(c *fiber.Ctx) error {
+			buckets, err := r.Database.AllBuckets()
+			if err != nil {
+				return err
+			}
 
-		buf := &bytes.Buffer{}
+			return c.JSON(buckets)
+		})
 
-		if err := r.Database.GetBucketObject(bucket, id, buf); err != nil {
+	api.Post("/buckets",
-			return err
+		isAdminMiddleware,
-		}
+		func(c *fiber.Ctx) error {
+			var req struct {
+				Bucket string `json:"bucket"`
+				Path   string `json:"path"`
+			}
 
-		return c.SendStream(buf)
+			log.Printf("%v", string(c.Body()))
-	})
+
+			if err := c.BodyParser(&req); err != nil {
+				return err
+			}
+
+			opts := []any{}
+			if req.Path != "" {
+				opts = append(opts, req.Path)
+			}
+
+			if err := r.Database.CreateBucket(req.Bucket, opts...); err != nil {
+				return err
+			}
+
+			return c.JSON("ok")
+		})
+
+	api.Get("/buckets/:bucket",
+		isAPIKeyMiddleware,
+		func(c *fiber.Ctx) error {
+			bucket := c.Params("bucket")
+
+			objects, err := r.Database.AllBucketObjects(bucket)
+			if err != nil {
+				return err
+			}
+
+			return c.JSON(objects)
+		})
+
+	api.Post("/buckets/:bucket",
+		isAPIKeyMiddleware,
+		func(c *fiber.Ctx) error {
+			bucket := c.Params("bucket")
+
+			ff, err := c.FormFile("file")
+			if err != nil {
+				return err
+			}
+
+			mf, err := ff.Open()
+			if err != nil {
+				return err
+			}
+
+			id, err := r.Database.CreateBucketObject(bucket, mf)
+			if err != nil {
+				return err
+			}
+
+			return c.JSON(fiber.Map{
+				"bucket": bucket,
+				"id":     id,
+			})
+		})
+
+	api.Get("/buckets/:bucket/:id",
+		isAPIKeyMiddleware,
+		func(c *fiber.Ctx) error {
+			bucket := c.Params("bucket")
+			id := c.Params("id")
+
+			buf := &bytes.Buffer{}
+
+			if err := r.Database.GetBucketObject(bucket, id, buf); err != nil {
+				return err
+			}
+
+			return c.SendStream(buf)
+		})
+
+	//
+	// API Keys
+	//
+
+	api.Get("/api-keys",
+		isAdminMiddleware,
+		func(c *fiber.Ctx) error {
+			apiKeys, err := r.Database.AllAPIKeys()
+			if err != nil {
+				return err
+			}
+
+			return c.JSON(apiKeys)
+		})
+
+	api.Post("/api-keys",
+		isAdminMiddleware,
+		func(c *fiber.Ctx) error {
+			key, err := r.Database.CreateAPIKey()
+			if err != nil {
+				return err
+			}
+
+			return c.JSON(key)
+		})
+
+	api.Delete("/api-keys/:key",
+		isAdminMiddleware,
+		func(c *fiber.Ctx) error {
+			if err := r.Database.RemoveAPIKey(c.Params("key")); err != nil {
+				return err
+			}
+
+			return c.JSON("ok")
+		})
+
+	api.Get("/api-keys/:key",
+		isAdminMiddleware,
+		func(c *fiber.Ctx) error {
+			if err := r.Database.CheckAPIKey(c.Params("key")); err != nil {
+				return err
+			}
+
+			return c.JSON("valid")
+		})
 }