postdown/islands/HomeBar.tsx

import Input from "../components/form/Input.tsx";
import Button from "../components/form/Button.tsx";
import ThemeToggle from "./ThemeToggle.tsx";

interface HomeBarProps {
  name: string;
}

const settingsData: { [key: string]: string } = {};

export default function HomeBar(props: HomeBarProps) {
  const doNewPost = async () => {
    globalThis.$loading?.show();
    const resp = await fetch("/api/post", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        title: "",
        content: "",
      }),
    });
    const respJson = await resp.json();
    if (respJson.success) {
      location.href = `/${respJson.data}`;
      return true;
    }
    return false;
  };

  const doLogout = async () => {
    const resp = await fetch("/api/user/logout");
    const respJson = await resp.json();
    if (respJson.success) {
      location.href = "/login";
      return true;
    }
    return false;
  };

  const showReset = () => {
    settingsData["old"] = "";
    settingsData["new"] = "";
    settingsData["repeat"] = "";
    globalThis.$modal?.show(
      "Reset password",
      <div>
        <Input
          label="Old password"
          type="password"
          placeholder="Old password"
          value={settingsData["old"]}
          onInput={(e) => {
            settingsData["old"] = (e.target as HTMLInputElement).value;
          }}
        />
        <Input
          label="New password"
          type="password"
          placeholder="New password"
          value={settingsData["new"]}
          onInput={(e) => {
            settingsData["new"] = (e.target as HTMLInputElement).value;
          }}
        />
        <Input
          label="Repeat new password"
          type="password"
          placeholder="Repeat new password"
          value={settingsData["repeat"]}
          onInput={(e) => {
            settingsData["repeat"] = (e.target as HTMLInputElement).value;
          }}
        />
      </div>,
      [
        {
          text: "Confirm",
          onClick: async () => {
            if (
              settingsData["old"] && settingsData["new"] &&
              settingsData["repeat"] &&
              settingsData["new"] === settingsData["repeat"]
            ) {
              const resp = await fetch("/api/user/reset", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                  old: settingsData["old"],
                  new: settingsData["new"],
                }),
              });
              const respJson = await resp.json();
              if (respJson.success) {
                globalThis.$modal?.hide();
              }
            }
          },
        },
      ],
    );
  };

  return (
    <div className="flex items-center justify-between">
      <Button
        type="button"
        onClick={doNewPost}
      >
        New Post
      </Button>
      <div className="flex items-center">
        <span>{props.name}</span>
        <Button
          type="button"
          className="ml-2"
          onClick={showReset}
        >
          Password
        </Button>
        <Button
          type="button"
          className="ml-2"
          onClick={doLogout}
        >
          Logout
        </Button>
        <span className="ml-3">
          <ThemeToggle />
        </span>
      </div>
    </div>
  );
}