problemi/client/pages/LoginPage.tsx

import { route } from 'preact-router'

import { useState } from 'preact/hooks'
import { prependBaseUrl } from '../api.js'
import { Header } from '../components/Header.jsx'
import { useUserFunctions } from '../hooks/useCurrentUser.js'

export const LoginPage = () => {
    const [username, setUsername] = useState('')
    const { login } = useUserFunctions()

    const handleLogin = async () => {
        await login(username)
        route(prependBaseUrl('/'))
    }

    return (
        <>
            <Header />
            <main class="page-login">
                <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 instanceof HTMLInputElement ? e.target.value : '')}
                        onKeyDown={e => e.key === 'Enter' && handleLogin()}
                    />

                    <div class="fill">
                        <button onClick={handleLogin}>Accedi</button>
                    </div>
                </div>
            </main>
        </>
    )
}