48 lines
1.9 KiB
TypeScript
48 lines
1.9 KiB
TypeScript
import { Button, Center, Input, Spinner } from "@chakra-ui/react";
|
||
import "../../resources/styles/loginPage.scss"
|
||
import { observer } from "mobx-react"
|
||
import { LoginPageStore } from "./LoginPageStore";
|
||
|
||
const store = new LoginPageStore();
|
||
export const LoginPage = observer(() => {
|
||
return (
|
||
<div className="container_wrapper">
|
||
<div className="login_container">
|
||
<h1>Вход</h1>
|
||
{store.isLoading
|
||
? <>
|
||
<div style={{
|
||
height: 128,
|
||
display: 'flex',
|
||
justifyContent: 'center',
|
||
alignItems: 'center'
|
||
}}>
|
||
<Spinner size="xl" />
|
||
</div>
|
||
</>
|
||
: <>
|
||
<Input
|
||
placeholder="Логин"
|
||
value={store.login}
|
||
onChange={e => store.setLogin(e.target.value)}
|
||
marginBottom={5} />
|
||
<Input
|
||
placeholder="Пароль"
|
||
type="password"
|
||
marginBottom={7}
|
||
value={store.password}
|
||
onChange={e => store.setPassword(e.target.value)} />
|
||
</>}
|
||
<Center paddingBottom={7}>
|
||
<Button
|
||
onClick={() => store.handleLogin()}
|
||
isLoading={store.isLoading}
|
||
loadingText={"Захожу..."}
|
||
variant='outline'
|
||
size='md'
|
||
width={100}>Войти
|
||
</Button>
|
||
</Center>
|
||
</div>
|
||
</div>);
|
||
}) |