import React, { useState } from "react"; import { useAuth } from "components/Login/AuthContext"; import Head from "next/head"; const LoginBox: React.FC = () => { const [password, setPassword] = useState(""); const [focused, setFocused] = useState(false); const [loginFailed, setLoginFailed] = useState(false); const { loggedIn, login } = useAuth(); const passwordLabelClassName = `absolute inset-y-0 left-0 px-4 font-sans text-gray-600 ${ focused || password ? "transform scale-75 -translate-y-5 -translate-x-2" : "" } transition-transform pointer-events-none`; const handleSubmit = async (e: React.SyntheticEvent) => { e.preventDefault(); if (!loggedIn) { const loginSuccessful = await login(password); if (!loginSuccessful) { setLoginFailed(true); setPassword(""); } } }; return (