init + login

src/pages/Layout.tsx

@@ -0,0 +1,14 @@
+import { Outlet, Navigate } from 'react-router-dom'
+import { isLoggedIn, LoggedIn } from '../authorization'
+
+export function Layout() {
+    return (
+        <div>
+            <h1>Layout</h1>
+            {
+                isLoggedIn() === LoggedIn.No && <Navigate to="/login" replace={true} />
+            }
+            <Outlet />
+        </div>
+    )
+}

src/pages/Login.tsx

@@ -0,0 +1,42 @@
+import { useMemo, useState } from "react"
+import { Navigate } from "react-router-dom"
+import { authorizeLogin, isLoggedIn, LoggedIn } from "../authorization"
+
+export function Login() {
+    var [username, setUsername] = useState("")
+    var [password, setPassword] = useState("")
+    var [loggedIn, setLoggedIn] = useState(isLoggedIn())
+
+    var login = () => {
+        if (username.length === 0 || password.length === 0) {
+            setLoggedIn(LoggedIn.Invalid)
+            return
+        }
+        authorizeLogin(username, password, setLoggedIn)
+    }
+
+    useMemo(() => {
+        if (loggedIn === LoggedIn.Invalid) {
+            setLoggedIn(LoggedIn.No)
+        }
+    }, [username, password])
+
+    return (
+        <div id="login">
+            <div className="form">
+                <input type="text" className={loggedIn === LoggedIn.Invalid ? "error" : ""} onChange={e => setUsername(e.target.value)} />
+                <input type="password" className={loggedIn === LoggedIn.Invalid ? "error" : ""} onChange={e => setPassword(e.target.value)} />
+            </div>
+            <div>
+                <button className="pad svg" onClick={login}>
+                    <svg viewBox="0 0 1000 1000">
+                        <path d="M619.5,899.5l350-350c27.3-27.3,27.3-71.7,0-99l-350-350c-27.3-27.3-71.7-27.3-99,0c-27.3,27.3-27.3,71.7,0,99L751,430H80c-38.7,0-70,31.3-70,70c0,38.7,31.3,70,70,70h671L520.5,800.5C506.8,814.2,500,832.1,500,850c0,17.9,6.8,35.8,20.5,49.5C547.8,926.8,592.2,926.8,619.5,899.5z" />
+                    </svg>
+                </button>
+            </div>
+            {
+                loggedIn === LoggedIn.Yes && <Navigate to="/" replace={true} />
+            }
+        </div>
+    )
+}