postdown/islands/LoginFrame.tsx

import { useEffect, useState } from "preact/hooks";
import Input from "../components/form/Input.tsx";
import Button from "../components/form/Button.tsx";
import ThemeToggle from "./ThemeToggle.tsx";

interface LoginFrameProps {
  mode: "login" | "register";
}

export default function LoginFrame(props: LoginFrameProps) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [emailError, setEmailError] = useState(false);
  const [passwordError, setPasswordError] = useState(false);
  const [confirmPasswordError, setConfirmPasswordError] = useState(false);

  const checkUserLogin = async () => {
    const resp = await fetch("/api/user/login");
    const respJson = await resp.json();
    if (respJson.success) {
      // Redirect to main page if valid
      location.href = "/";
      return true;
    }
    return false;
  };

  const doUserLogin = async () => {
    const resp = await fetch("/api/user/login", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        email,
        password,
      }),
    });
    const respJson = await resp.json();
    if (respJson.success) {
      location.href = "/";
      return true;
    }
    return false;
  };

  const doUserRegister = async () => {
    const resp = await fetch("/api/user/register", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        email,
        password,
      }),
    });
    const respJson = await resp.json();
    if (respJson.success) {
      location.href = "/login";
      return true;
    }
    return false;
  };

  useEffect(() => {
    props.mode === "login" && checkUserLogin();
  }, []);

  const onSubmit = async () => {
    globalThis.$loading?.show();

    // Do request
    if (email && password && props.mode === "login") {
      await doUserLogin();
    } else if (
      email &&
      password &&
      confirmPassword &&
      props.mode === "register"
    ) {
      if (password !== confirmPassword) {
        setConfirmPasswordError(true);
      } else {
        await doUserRegister();
      }
    }

    // Set error
    if (!email) {
      setEmailError(true);
    }
    if (!password) {
      setPasswordError(true);
    }
    if (!confirmPassword && props.mode === "register") {
      setConfirmPasswordError(true);
    }
    globalThis.$loading?.hide();
  };

  return (
    <div className="w-[375px] mt-4 box-border p-4 text-gray-800 dark:text-gray-100 flex flex-col relative">
      <div className="absolute top-0 right-0">
        <ThemeToggle />
      </div>
      <Input
        label="Email"
        error={emailError}
        type="text"
        placeholder="Your email"
        value={email}
        onInput={(e) => {
          setEmailError(false);
          setEmail((e.target as HTMLInputElement).value);
        }}
      />
      <Input
        label="Password"
        error={passwordError}
        type="password"
        placeholder="Your password"
        value={password}
        onInput={(e) => {
          setPasswordError(false);
          setPassword((e.target as HTMLInputElement).value);
        }}
        onKeyDown={(e) => {
          if (e.key === "Enter") {
            onSubmit();
          }
        }}
      />
      {props.mode === "register"
        ? (
          <Input
            label="Confirm Password"
            error={confirmPasswordError}
            type="password"
            placeholder="Confirm your password"
            value={confirmPassword}
            onInput={(e) => {
              setConfirmPasswordError(false);
              setConfirmPassword((e.target as HTMLInputElement).value);
            }}
            onKeyDown={(e) => {
              if (e.key === "Enter") {
                onSubmit();
              }
            }}
          />
        )
        : null}
      <Button
        variant="primary"
        className="h-[38px] mt-2 mb-2"
        type="button"
        onClick={onSubmit}
      >
        {props.mode === "register" ? "Register" : "Sign in"}
      </Button>
      <Button
        type="button"
        onClick={() => {
          location.href = props.mode === "register" ? "/login" : "/register";
        }}
      >
        {props.mode === "register" ? "Go Login" : "Go Register"}
      </Button>
    </div>
  );
}