Added some pages

frontend/src/components/Problem.jsx

@@ -1,11 +1,14 @@
+import { Link } from '../Router.jsx'
 import { Markdown } from './Markdown.jsx'
 
-export const Problem = ({ title, content }) => {
+export const Problem = ({ id, content }) => {
     return (
         <div class="problem">
             <div class="problem-header">
                 <div class="problem-title">
-                    <Markdown source={title} />
+                    <Link page={`/problem/:id`} params={{ id }}>
+                        Problema {id}
+                    </Link>
                 </div>
             </div>
             <div class="problem-content">

frontend/src/hooks.jsx

@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'preact/hooks'
+
+export const useUser = () => {
+    const [username, setUsername] = useState(null)
+
+    useEffect(async () => {
+        const res = await fetch(`/api/current-user`, {
+            credentials: 'include',
+        })
+        const username = await res.json()
+        setUsername(username)
+    }, [])
+
+    return { username }
+}

frontend/src/main.jsx

@@ -5,7 +5,6 @@ import { Router } from './Router.jsx'
 import { HomePage } from './pages/Home.jsx'
 import { LoginPage } from './pages/Login.jsx'
 import { ProblemPage } from './pages/Problem.jsx'
-import { NewSolutionPage } from './pages/NewSolution.jsx'
 
 render(
     <Router
@@ -13,7 +12,6 @@ render(
             '/': HomePage,
             '/login': LoginPage,
             '/problem/:id': ProblemPage,
-            '/problem/:id/new-solution': NewSolutionPage,
         }}
     />,
     document.body

frontend/src/pages/Home.jsx

@@ -1,26 +1,45 @@
-import { computed, useSignal } from '@preact/signals'
-import { Markdown } from '../components/Markdown.jsx'
+import { Problem } from '../components/Problem.jsx'
+import { useUser } from '../hooks.jsx'
 import { Link } from '../Router.jsx'
 
 export const HomePage = () => {
+    const { username } = useUser()
+
+    const logout = async () => {
+        await fetch(`/api/logout`, {
+            method: 'POST',
+        })
+
+        location.reload()
+    }
+
+    const problems = Array.from({ length: 20 }, (_, i) => ({
+        id: i + 1,
+        content:
+            `Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto porro commodi cumque ratione sequi reiciendis corrupti a eius praesentium.\n`.repeat(
+                ((i + 2) % 4) + 1
+            ),
+    }))
+
     return (
         <main class="home">
             <div class="logo">PHC / Problemi</div>
+            <div class="subtitle">
+                {username ? (
+                    <>
+                        Logged in as {username} (
+                        <span class="link" onClick={() => logout()}>
+                            Logout
+                        </span>
+                        )
+                    </>
+                ) : (
+                    <Link page={`/login`}>Login</Link>
+                )}
+            </div>
             <div class="board">
-                {Array.from({ length: 20 }).map(({} = {}, i) => (
-                    <div class="problem" style={{ '--size': ((7 * i) % 4) + 2 }}>
-                        <div class="problem-header">
-                            <div class="problem-title">Problema {i + 1}</div>
-                        </div>
-                        <div class="problem-content">
-                            {Array.from({ length: ((7 * i) % 4) + 1 }).map(({} = {}) => (
-                                <p>
-                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo
-                                    minima doloremque nihil ducimus qui reiciendis. Provident, odit?
-                                </p>
-                            ))}
-                        </div>
-                    </div>
+                {problems.map(p => (
+                    <Problem {...p} />
                 ))}
             </div>
         </main>

frontend/src/pages/Login.jsx

@@ -1,9 +1,41 @@
+import { useState } from 'preact/hooks'
 import { Link } from '../Router.jsx'
 
 export const LoginPage = () => {
+    const [username, setUsername] = useState('')
+
+    const login = async () => {
+        await fetch(`/api/login`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                username,
+            }),
+        })
+
+        location.href = '/#/'
+    }
+
     return (
-        <p>
-            Login Page or <Link page="/">go back home</Link>
-        </p>
+        <main class="login">
+            <div class="logo">PHC / Problemi</div>
+            <div class="subtitle">Accedi</div>
+
+            <div class="form">
+                <label for="login-username">Username</label>
+                <input
+                    id="login-username"
+                    type="text"
+                    value={username}
+                    onInput={e => setUsername(e.target.value)}
+                />
+
+                <div class="fill">
+                    <button onClick={() => login()}>Accedi</button>
+                </div>
+            </div>
+        </main>
     )
 }

frontend/src/pages/NewSolution.jsx

@@ -1,61 +0,0 @@
-import { useEffect, useRef, useState } from 'preact/hooks'
-import { Markdown } from '../components/Markdown.jsx'
-
-export const NewSolutionPage = ({ params: { id } }) => {
-    const [source, setSource] = useState('')
-    const editorRef = useRef()
-
-    const sendSolution = async () => {
-        const res = await fetch(`/api/problem/${id}/new-solution`, {
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            credentials: 'include',
-            body: JSON.stringify({
-                source,
-            }),
-        })
-
-        console.log(await res.json())
-    }
-
-    useEffect(() => {
-        if (editorRef.current) {
-            editorRef.current.style.height = 'auto'
-            editorRef.current.style.height = editorRef.current.scrollHeight + 'px'
-        }
-    }, [source])
-
-    return (
-        <main class="new-solution">
-            <div class="logo">PHC / Problemi</div>
-
-            <div class="subtitle">Nuova soluzione per il problema #{id}</div>
-            <div class="solution-editor">
-                <div class="editor">
-                    <h1>Editor</h1>
-                    <textarea
-                        onInput={e => setSource(e.target.value)}
-                        value={source}
-                        cols="60"
-                        ref={editorRef}
-                        placeholder="Scrivi una nuova soluzione..."
-                    ></textarea>
-                </div>
-                <div class="preview">
-                    <h1>Preview</h1>
-                    <div class="preview-content">
-                        {source.length ? (
-                            <Markdown source={source} />
-                        ) : (
-                            <div class="placeholder">Scrivi una nuova soluzione...</div>
-                        )}
-                    </div>
-                </div>
-            </div>
-            <div class="submit-solution">
-                <button onClick={sendSolution}>Invia Soluzione</button>
-            </div>
-        </main>
-    )
-}

frontend/src/pages/Problem.jsx

@@ -1,14 +1,74 @@
-import { Link } from '../Router.jsx'
+import { useEffect, useRef, useState } from 'preact/hooks'
+import { Markdown } from '../components/Markdown.jsx'
+import { Problem } from '../components/Problem.jsx'
 
 export const ProblemPage = ({ params: { id }, query }) => {
+    const [source, setSource] = useState('')
+    const editorRef = useRef()
+
+    const sendSolution = async () => {
+        const res = await fetch(`/api/problem/${id}/new-solution`, {
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            credentials: 'include',
+            body: JSON.stringify({
+                source,
+            }),
+        })
+
+        console.log(await res.json())
+    }
+
+    useEffect(() => {
+        if (editorRef.current) {
+            // settare questo ad "auto" toglie l'altezza al contenitore che passa alla sua
+            // dimensione minima iniziale, ciò serve per permettere all'autosize della textarea di
+            // crescere e ridursi ma ha il problema che resetta lo scroll della pagina che deve
+            // essere preservato a mano
+            const oldScrollY = window.scrollY
+            editorRef.current.style.height = 'auto'
+            editorRef.current.style.height = editorRef.current.scrollHeight + 'px'
+            window.scrollTo(0, oldScrollY)
+        }
+    }, [source])
+
     return (
-        <>
-            <p>
-                Problem <code>{id}</code> with options <code>{JSON.stringify(query)}</code>
-            </p>
-            <p>
-                <Link page="/">Go back home</Link>
-            </p>
-        </>
+        <main class="problem">
+            <div class="logo">PHC / Problemi</div>
+            <div class="subtitle">Testo del problema</div>
+            <Problem
+                id={id}
+                content={`Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto porro commodi cumque ratione sequi reiciendis corrupti a eius praesentium.\n\n`.repeat(
+                    5
+                )}
+            />
+            <div class="subtitle">Invia una soluzione al problema</div>
+            <div class="solution-editor">
+                <div class="editor">
+                    <h1>Editor</h1>
+                    <textarea
+                        onInput={e => setSource(e.target.value)}
+                        value={source}
+                        cols="60"
+                        ref={editorRef}
+                        placeholder="Scrivi una nuova soluzione..."
+                    ></textarea>
+                </div>
+                <div class="preview">
+                    <h1>Preview</h1>
+                    <div class="preview-content">
+                        {source.trim().length ? (
+                            <Markdown source={source} />
+                        ) : (
+                            <div class="placeholder">Scrivi una nuova soluzione...</div>
+                        )}
+                    </div>
+                </div>
+            </div>
+            <div class="submit-solution">
+                <button onClick={sendSolution}>Invia Soluzione</button>
+            </div>
+        </main>
     )
 }

frontend/styles/main.scss

@@ -1,3 +1,6 @@
+$device-s-width: 640px;
+$device-m-width: 1200px;
+
 // Normalize
 
 *,
@@ -14,11 +17,85 @@ body {
     margin: 0;
 
     font-family: 'Lato', sans-serif;
+    font-weight: 300;
     font-size: 20px;
 
     line-height: 1;
 }
 
+textarea {
+    border: none;
+    outline: gray;
+
+    width: 100%;
+
+    padding: 1rem;
+
+    box-shadow: -2px 4px 8px 1px #00000020, -1px 1px 1px 0px #00000010;
+    border-radius: 0.25rem;
+    background: #ffffff;
+}
+
+label {
+    font-weight: 400;
+}
+
+input[type='text'] {
+    border: none;
+    outline: gray;
+
+    width: 100%;
+
+    padding: 0.5rem;
+
+    box-shadow: -2px 4px 4px 0 #00000020;
+    border-radius: 0.25rem;
+    background: #ffffff;
+
+    font-family: 'Lato';
+    font-weight: 400;
+    font-size: 18px;
+    color: #555;
+}
+
+button {
+    cursor: pointer;
+
+    font-family: 'Lato';
+    font-weight: 600;
+    font-size: 18px;
+    color: #555;
+
+    border: 1px solid #c8c8c8;
+    padding: 0.5rem 2rem;
+
+    box-shadow: -2px 4px 16px 0 #00000010, -2px 4px 4px 0 #00000010;
+    border-radius: 0.25rem;
+
+    background: linear-gradient(180deg, #f0f0f0, #dfdfdf 20%, #d8d8d8 80%, #c0c0c0);
+
+    transition: all 100ms ease-in;
+
+    &:hover {
+        border: 1px solid #c4c4c4;
+        box-shadow: -2px 4px 20px 4px #00000010, -2px 4px 6px 2px #00000010;
+        background: linear-gradient(180deg, #f8f8f8, #e4e4e4 20%, #e4e4e4 80%, #c8c8c8);
+    }
+}
+
+.link,
+a,
+a:visited {
+    cursor: pointer;
+
+    color: #3a9999;
+    text-decoration: none;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
 // Typography
 
 p {
@@ -60,18 +137,6 @@ $heading-scale: 1.25;
     }
 }
 
-$device-s-width: 640px;
-
-// Not on mobile
-@media screen and (min-width: $device-s-width) and (pointer: fine) {
-    // ...
-}
-
-// On mobile
-@media screen and (max-width: $device-s-width), (pointer: coarse) {
-    // ...
-}
-
 //
 // Components
 //
@@ -99,34 +164,75 @@ body {
     align-items: center;
 
     background: #f8f8f8;
+}
 
-    main {
-        padding: 1rem;
-        width: 100%;
+main {
+    padding: 2rem 2rem 6rem;
+    width: 100%;
 
-        display: flex;
-        flex-direction: column;
-        align-items: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    gap: 2rem;
+
+    .logo {
+        // font-size: 42px;
+        // font-family: 'EB Garamond';
+        // font-weight: 600;
+        font-size: 38px;
+        font-family: 'Lato';
+        font-weight: 300;
+    }
+
+    .subtitle {
+        font-size: 24px;
     }
 }
 
-.logo {
-    // font-size: 42px;
-    // font-family: 'EB Garamond';
-    // font-weight: 600;
-    font-size: 38px;
-    font-family: 'Lato';
-    font-weight: 300;
-}
-
 main.home {
-    padding-top: 2rem;
-    gap: 2rem;
+    .board {
+        width: 100%;
+
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(60ch, 1fr));
+        gap: 2rem;
+    }
 }
 
-main.new-solution {
-    padding-top: 2rem;
-    gap: 2rem;
+//
+// Components
+//
+
+main {
+    .problem {
+        padding: 1rem;
+        // border: 1px solid #ddd;
+
+        box-shadow: -2px 4px 8px 1px #00000020, -1px 1px 1px 0px #00000010;
+        border-radius: 0.5rem;
+        background: #ffffff;
+
+        display: grid;
+        grid-template-rows: auto 1fr;
+        gap: 0.5rem;
+
+        max-width: 80ch;
+
+        .problem-header {
+            display: grid;
+            grid-template-columns: auto;
+
+            .problem-title {
+                font-size: 24px;
+                font-weight: 700;
+            }
+        }
+
+        .problem-content {
+            @extend .text-body;
+        }
+    }
 
     .solution-editor {
         display: grid;
@@ -154,21 +260,10 @@ main.new-solution {
                 font-family: 'DM Mono', monospace;
                 font-size: 18px;
 
-                border: none;
-                outline: gray;
-
-                width: 100%;
-
-                padding: 1rem;
-
-                box-shadow: -2px 4px 8px 1px #00000020, -1px 1px 1px 0px #00000010;
-                border-radius: 0.25rem;
-                background: #ffffff;
-
                 resize: none;
                 overflow-y: hidden;
 
-                min-height: 10rem;
+                min-height: 8rem;
             }
         }
 
@@ -192,52 +287,63 @@ main.new-solution {
             }
         }
     }
-}
 
-.board {
-    width: 100%;
+    .form {
+        min-width: 50ch;
 
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(50ch, 1fr));
-    grid-auto-rows: 3rem;
-    gap: 1rem;
-}
-
-//
-// Components
-//
-
-.problem {
-    padding: 1rem;
-    // border: 1px solid #ddd;
-
-    box-shadow: -2px 4px 8px 1px #00000020, -1px 1px 1px 0px #00000010;
-    border-radius: 0.25rem;
-    background: #ffffff;
-
-    grid-row: span var(--size);
-
-    overflow-y: auto;
-
-    display: grid;
-    grid-template-rows: auto 1fr;
-    gap: 0.5rem;
-
-    .problem-header {
         display: grid;
-        grid-template-columns: auto;
+        grid-template-columns: auto 1fr;
 
-        .problem-title {
-            font-size: 24px;
-            font-weight: 700;
+        // border: 2px solid #ccc;
+        border-radius: 1rem;
+
+        box-shadow: -2px 4px 16px 4px #00000018, -2px 4px 4px 1px #00000018;
+
+        padding: 1.5rem 2rem 1rem;
+        gap: 1rem;
+
+        align-items: center;
+
+        .fill {
+            grid-column: span 2;
+            justify-self: center;
         }
     }
-
-    .problem-content {
-        @extend .text-body;
-    }
 }
 
 .math-inline {
     font-size: 95%;
 }
+
+//
+// Mobile
+//
+
+// Not on mobile
+@media screen and (min-width: $device-s-width) and (pointer: fine) {
+    // ...
+}
+
+// On mobile
+@media screen and (max-width: $device-s-width), (pointer: coarse) {
+    main {
+        .solution-editor {
+            grid-template-columns: auto;
+            grid-template-rows: auto auto;
+        }
+    }
+}
+
+@media screen and (max-width: $device-m-width), (pointer: coarse) {
+    main {
+        .solution-editor {
+            grid-template-columns: auto;
+            grid-template-rows: auto auto;
+
+            .preview,
+            .editor {
+                justify-self: center;
+            }
+        }
+    }
+}

frontend/vite.config.js

@@ -6,7 +6,7 @@ export default defineConfig({
     server: {
         port: 3000,
         proxy: {
-            '/api': 'localhost:4000/api',
+            '/api': 'http://localhost:4000',
         },
     },
     plugins: [preactPlugin()],