87 lines
2.5 KiB
TypeScript
87 lines
2.5 KiB
TypeScript
import { Box, Button, Flex, Image, Text } from '@chakra-ui/react';
|
|
|
|
import avatar from '@/assets/images/avatar_generic.svg';
|
|
import { PageLayout } from '@/components/Layout/PageLayout';
|
|
import { FormInput } from '@/components/form/FormInput';
|
|
import { FormPassword } from '@/components/form/FormPassword';
|
|
import { useFormidable } from '@/components/formidable/FormidableConfig';
|
|
import { FormidableForm } from '@/components/formidable/FormidableForm';
|
|
|
|
import { useLogin } from './useLogin';
|
|
|
|
type LoginFormInputs = {
|
|
login: string;
|
|
password: string;
|
|
};
|
|
|
|
export const SignInPage = () => {
|
|
const form = useFormidable<LoginFormInputs>({
|
|
initialValues: {
|
|
login: '',
|
|
password: '',
|
|
},
|
|
configuration: {
|
|
enableModifyNotification: false,
|
|
enableReset: false,
|
|
},
|
|
});
|
|
const { connect, lastError, isConnectionLoading } = useLogin();
|
|
|
|
const onSubmit = () => {
|
|
connect(form.values.login, form.values.password);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{/* <TopBar title="Login" /> */}
|
|
<PageLayout>
|
|
<Flex marginX="auto" width="full" height="90%" direction="column">
|
|
<Box
|
|
bg="white"
|
|
padding="30px"
|
|
shadow="md"
|
|
width="400px"
|
|
margin="auto"
|
|
background={{ _light: 'gray.50', _dark: 'gray.800' }}
|
|
>
|
|
<Text
|
|
width="100%"
|
|
textAlign="center"
|
|
fontWeight="bold"
|
|
fontSize="25px"
|
|
>
|
|
Sign-In
|
|
</Text>
|
|
<Image
|
|
marginX="auto"
|
|
marginY="10px"
|
|
src={avatar}
|
|
width="128px"
|
|
height="128px"
|
|
borderRadius="100%"
|
|
/>
|
|
<FormidableForm form={form} onSubmit={onSubmit}>
|
|
<Flex align="center" justify="center" direction="column">
|
|
{lastError && <Text colorPalette="@danger">{lastError}</Text>}
|
|
<FormInput name="login" isRequired label="Username" />
|
|
<FormPassword name="password" isRequired label="Password" />
|
|
<Button
|
|
marginLeft="55%"
|
|
marginTop="10px"
|
|
variant="solid"
|
|
background="green"
|
|
width="45%"
|
|
disabled={isConnectionLoading}
|
|
type="submit"
|
|
>
|
|
Login
|
|
</Button>
|
|
</Flex>
|
|
</FormidableForm>
|
|
</Box>
|
|
</Flex>
|
|
</PageLayout>
|
|
</>
|
|
);
|
|
};
|