52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
import React, { useState } from "react";
|
|
import { useAuth } from "components/Login/authcontext";
|
|
|
|
const LoginBox: React.FC = () => {
|
|
const [password, setPassword] = useState("");
|
|
const [focused, setFocused] = useState(false);
|
|
const { login, loginFailed } = 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`;
|
|
|
|
function handleSubmit(e: React.SyntheticEvent): void {
|
|
e.preventDefault();
|
|
login(password);
|
|
setPassword("");
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{loginFailed ? (
|
|
<div className="text-red-600">Invalid credentials.</div>
|
|
) : null}
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
<div>
|
|
<label htmlFor="password" className="relative">
|
|
<span className={passwordLabelClassName}>Password</span>
|
|
</label>
|
|
<input
|
|
name="password"
|
|
type="password"
|
|
value={password}
|
|
onFocus={() => setFocused(true)}
|
|
onBlur={() => setFocused(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"
|
|
/>
|
|
</div>
|
|
<input
|
|
type="submit"
|
|
value="Log In"
|
|
className="w-full px-4 py-2 font-sans font-semibold text-white bg-purple-700 focus:outline-none focus:ring-4 focus:ring-purple-300 rounded-lg"
|
|
/>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LoginBox;
|