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 (
Login
CSC Logo

linklist

Log in to continue to your Linklist admin

{loginFailed ? (
Invalid credentials.
) : null}
setFocused(true)} onBlur={() => { setFocused(false); setLoginFailed(false); }} onChange={(event) => setPassword(event.target.value)} className="bg-transparent p-4 border border-gray-300 leading-snug focus:outline-none focus:border-gray-500 rounded" />
); }; export default LoginBox;