// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
// SPDX-License-Identifier: Apache-2.0
import { Anchor, Center, Group, Stack, Text, TextInput, Title } from '@mantine/core';
import type { LoginAuthenticationResponse } from '@medplum/core';
import { normalizeOperationOutcome } from '@medplum/core';
import type { OperationOutcome } from '@medplum/fhirtypes';
import { useMedplum } from '@medplum/react-hooks';
import type { JSX } from 'react';
import { useState } from 'react';
import { Form } from '../Form/Form';
import { SubmitButton } from '../Form/SubmitButton';
import { Logo } from '../Logo/Logo';
import { getErrorsForInput } from '../utils/outcomes';
export interface NewProjectFormProps {
readonly login: string;
readonly handleAuthResponse: (response: LoginAuthenticationResponse) => void;
}
export function NewProjectForm(props: NewProjectFormProps): JSX.Element {
const medplum = useMedplum();
const [outcome, setOutcome] = useState<OperationOutcome | undefined>();
return (
<Form
onSubmit={async (formData: Record<string, string>) => {
try {
props.handleAuthResponse(
await medplum.startNewProject({
login: props.login,
projectName: formData.projectName,
})
);
} catch (err) {
setOutcome(normalizeOperationOutcome(err));
}
}}
>
<Center style={{ flexDirection: 'column' }}>
<Logo size={32} />
<Title>Create project</Title>
</Center>
<Stack gap="xl">
<TextInput
name="projectName"
label="Project Name"
placeholder="My Project"
required={true}
autoFocus={true}
error={getErrorsForInput(outcome, 'projectName')}
/>
<Text c="dimmed" size="xs">
By clicking submit you agree to the Medplum{' '}
<Anchor href="https://www.medplum.com/privacy">Privacy Policy</Anchor>
{' and '}
<Anchor href="https://www.medplum.com/terms">Terms of Service</Anchor>.
</Text>
</Stack>
<Group justify="flex-end" mt="xl" wrap="nowrap">
<SubmitButton>Create project</SubmitButton>
</Group>
</Form>
);
}
