76 lines
3.0 KiB
TypeScript
76 lines
3.0 KiB
TypeScript
import { FormLayout } from "../../components/ContentGrid";
|
|
import { useId, useState } from "react";
|
|
import type { ApiSettings, AuthActionUiCapability, LoginResponse } from "../../types";
|
|
import { login } from "../../api/auth";
|
|
import Button from "../../components/Button";
|
|
import Dialog from "../../components/Dialog";
|
|
import FormField from "../../components/FormField";
|
|
import PasswordField from "../../components/PasswordField";
|
|
import DismissibleAlert from "../../components/DismissibleAlert";
|
|
import { usePlatformUiCapability } from "../../platform/ModuleContext";
|
|
import { Suspense } from "react";
|
|
|
|
export default function LoginModal({
|
|
settings,
|
|
onClose,
|
|
onLogin,
|
|
title = "i18n:govoplan-core.sign_in.ada2e9e9",
|
|
message
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}: {settings: ApiSettings;onClose: () => void;onLogin: (response: LoginResponse) => void;title?: string;message?: string;}) {
|
|
const [email, setEmail] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [error, setError] = useState("");
|
|
const [busy, setBusy] = useState(false);
|
|
const formId = useId();
|
|
const authActions = usePlatformUiCapability<AuthActionUiCapability>("auth.actions");
|
|
const LoginHelp = authActions?.LoginHelp;
|
|
|
|
async function submit(event: React.FormEvent) {
|
|
event.preventDefault();
|
|
setError("");
|
|
setBusy(true);
|
|
try {
|
|
const response = await login(settings, { email, password });
|
|
onLogin(response);
|
|
onClose();
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : String(err));
|
|
} finally {
|
|
setPassword("");
|
|
setBusy(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Dialog
|
|
open
|
|
title={title}
|
|
onClose={onClose}
|
|
footer={
|
|
<>
|
|
<Button type="button" onClick={onClose}>i18n:govoplan-core.cancel.77dfd213</Button>
|
|
<Button type="submit" form={formId} variant="primary" disabled={busy}>{busy ? "i18n:govoplan-core.signing_in.c66b2adc" : "i18n:govoplan-core.sign_in.ada2e9e9"}</Button>
|
|
</>
|
|
}>
|
|
|
|
<FormLayout columns={1} collapseAt="standard" id={formId} className="" onSubmit={submit}>
|
|
{message && <DismissibleAlert tone="info" dismissible={false}>{message}</DismissibleAlert>}
|
|
{error && <DismissibleAlert tone="danger" resetKey={error}>{error}</DismissibleAlert>}
|
|
<FormField label="i18n:govoplan-core.email.84add5b2" helpContextId="access.authentication.email" helpModuleId="access">
|
|
<input data-help-context-id="access.authentication.email" data-help-module-id="access" type="email" value={email} autoComplete="username" onChange={(e) => setEmail(e.target.value)} />
|
|
</FormField>
|
|
<FormField label="i18n:govoplan-core.password.8be3c943" helpContextId="access.authentication.password" helpModuleId="access">
|
|
<PasswordField helpContextId="access.authentication.password" helpModuleId="access" value={password} autoComplete="current-password" onValueChange={setPassword} />
|
|
</FormField>
|
|
</FormLayout>
|
|
{LoginHelp && <Suspense fallback={null}><LoginHelp settings={settings} onNavigate={onClose} /></Suspense>}
|
|
</Dialog>);
|
|
|
|
}
|