feur

pages/components/heading.tsx

@@ -1,9 +1,11 @@
 /** @jsx jsx */
 
-import { jsx } from "https://deno.land/x/hono@v4.3.10/middleware.ts"
+import { PropsWithChildren, jsx } from "https://deno.land/x/hono@v4.3.10/middleware.ts"
 import { _css } from "../../lib/utils.ts";
+import { User } from "../../lib/storage.ts";
 
-export default function Heading() {
+// 
+export default function Heading({ username }: PropsWithChildren<{username: string | null}>) {
     return (
         <header style={_css({
             width: "100vw",
@@ -32,6 +34,7 @@ export default function Heading() {
                 <MenuItem name="Content" location="/home"/>
                 <MenuItem name="About" location="/about"/>
                 <MenuItem name="User" location="/user"/>
+                {(username !== null) && <MenuItem name={`Logout (${username})`} location="/api/logout" />}
             </div>
         </header>
     )

pages/components/login.tsx

@@ -7,6 +7,7 @@ export default function Login() {
         <form action="/api/login" method="post">
             <input type="text" name="login"/>
             <input type="password" name="password"/>
+            <input type="submit" value="login" />
         </form>
     )
 }

pages/home.tsx

@@ -4,11 +4,16 @@ import { jsx } from "https://deno.land/x/hono@v4.3.10/middleware.ts"
 import { BasePage } from "./components/base.tsx"
 import Main from "./components/main.tsx";
 import Heading from "./components/heading.tsx";
+import { get_user } from "../lib/auth.ts";
+import { Context } from "https://deno.land/x/hono@v4.3.10/mod.ts";
+import { FeurEnv } from "../main.ts";
+import { BlankInput } from "https://deno.land/x/hono@v4.3.10/types.ts";
 
-export default function HomePage() {
+export default async function HomePage(context: Context<FeurEnv, string, BlankInput>) {
+    const user = await get_user(context);
     return (
     <BasePage name="Home">
-        <Heading></Heading>
+        <Heading username={await user?.get("username") ?? null}></Heading>
         <Main>Main</Main>
     </BasePage>
     )

pages/user.tsx

@@ -0,0 +1,24 @@
+/** @jsx jsx */
+
+import { jsx } from "https://deno.land/x/hono@v4.3.10/middleware.ts"
+import { BasePage } from "./components/base.tsx";
+import Heading from "./components/heading.tsx";
+import Main from "./components/main.tsx";
+import Login from "./components/login.tsx";
+import { User } from "../lib/storage.ts";
+import { Context } from "https://deno.land/x/hono@v4.3.10/mod.ts";
+import { FeurEnv } from "../main.ts";
+import { BlankInput } from "https://deno.land/x/hono@v4.3.10/types.ts";
+import { get_user } from "../lib/auth.ts";
+
+export default async function UserPage(context: Context<FeurEnv, string, BlankInput>) {
+    const user = await get_user(context);
+    if (user === null) return context.text("Must be logged.", 401);
+    return context.html(
+    <BasePage name="Login">
+        <Main>
+            <h1>Logged as {await user.get("username")}</h1>
+        </Main>
+    </BasePage>
+    )
+}