51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
import { useState, type FormEvent } from "react";
|
|
|
|
type LoginPageProps = {
|
|
busy: boolean;
|
|
error: string | null;
|
|
onSubmit: (payload: { accessKey: string }) => Promise<void>;
|
|
};
|
|
|
|
export default function LoginPage({ busy, error, onSubmit }: LoginPageProps) {
|
|
const [accessKey, setAccessKey] = useState("");
|
|
|
|
const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault();
|
|
await onSubmit({
|
|
accessKey: accessKey.trim()
|
|
});
|
|
};
|
|
|
|
return (
|
|
<main className="auth-shell">
|
|
<section className="auth-card">
|
|
<div className="eyebrow">Mailserver</div>
|
|
<h1>User management</h1>
|
|
{/* <p className="auth-copy">
|
|
Sign in with the access key configured for this panel.
|
|
</p> */}
|
|
|
|
<form className="stack" onSubmit={handleSubmit}>
|
|
<label className="field">
|
|
<span>Access key</span>
|
|
<input
|
|
type="password"
|
|
value={accessKey}
|
|
onChange={(event) => setAccessKey(event.target.value)}
|
|
autoComplete="current-password"
|
|
autoFocus
|
|
disabled={busy}
|
|
/>
|
|
</label>
|
|
|
|
{error ? <p className="form-error">{error}</p> : null}
|
|
|
|
<button type="submit" className="primary-button" disabled={busy}>
|
|
{busy ? "Signing in..." : "Sign in"}
|
|
</button>
|
|
</form>
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|