Revize 77eb11b3
Přidáno uživatelem Dominik Poch před asi 3 roky(ů)
| webapp/components/props.tsx | ||
|---|---|---|
| 1 |
type Props = {
|
|
| 2 |
children: React.ReactNode; |
|
| 3 |
}; |
|
| 4 | ||
| 5 |
export default Props; |
|
| webapp/layouts/loginLayout.tsx | ||
|---|---|---|
| 1 |
import { Layout } from 'antd';
|
|
| 2 |
const { Header, Footer, Sider, Content } = Layout;
|
|
| 3 | ||
| 4 |
import Props from '../components/props'; |
|
| 5 | ||
| 6 |
function LoginLayout(props: Props) {
|
|
| 7 |
return ( |
|
| 8 |
<Layout> |
|
| 9 |
<Content></Content> |
|
| 10 |
<Sider> |
|
| 11 |
<main>{props.children}</main>
|
|
| 12 |
</Sider> |
|
| 13 |
</Layout> |
|
| 14 |
); |
|
| 15 |
} |
|
| 16 | ||
| 17 |
export default LoginLayout; |
|
| webapp/pages/authentication/login.tsx | ||
|---|---|---|
| 1 | 1 |
import { Form, Input, Button } from 'antd';
|
| 2 | 2 |
import { UserOutlined, LockOutlined } from '@ant-design/icons';
|
| 3 | 3 |
import 'antd/dist/antd.css'; |
| 4 |
import LoginLayout from '../../layouts/loginLayout'; |
|
| 4 | 5 | |
| 5 | 6 |
function Login() {
|
| 6 | 7 |
const onFinish = (values: any) => {
|
| ... | ... | |
| 12 | 13 |
}; |
| 13 | 14 | |
| 14 | 15 |
return ( |
| 15 |
<Form |
|
| 16 |
name="login" |
|
| 17 |
onFinish={onFinish}
|
|
| 18 |
onFinishFailed={onFinishFailed}
|
|
| 19 |
autoComplete="off" |
|
| 20 |
> |
|
| 21 |
<Form.Item |
|
| 22 |
name="email" |
|
| 23 |
rules={[{ required: true, message: 'Email musí být zadaný!' }]}
|
|
| 16 |
<LoginLayout> |
|
| 17 |
<Form |
|
| 18 |
name="login" |
|
| 19 |
onFinish={onFinish}
|
|
| 20 |
onFinishFailed={onFinishFailed}
|
|
| 21 |
autoComplete="off" |
|
| 24 | 22 |
> |
| 25 |
<Input |
|
| 26 |
prefix={<UserOutlined className="site-form-item-icon" />}
|
|
| 27 |
placeholder="Email" |
|
| 28 |
/> |
|
| 29 |
</Form.Item> |
|
| 23 |
<Form.Item |
|
| 24 |
name="email" |
|
| 25 |
rules={[{ required: true, message: 'Email musí být zadaný!' }]}
|
|
| 26 |
> |
|
| 27 |
<Input |
|
| 28 |
prefix={<UserOutlined className="site-form-item-icon" />}
|
|
| 29 |
placeholder="Email" |
|
| 30 |
/> |
|
| 31 |
</Form.Item> |
|
| 30 | 32 | |
| 31 |
<Form.Item |
|
| 32 |
name="password" |
|
| 33 |
rules={[{ required: true, message: 'Heslo musí být zadané!' }]}
|
|
| 34 |
> |
|
| 35 |
<Input.Password |
|
| 36 |
prefix={<LockOutlined className="site-form-item-icon" />}
|
|
| 37 |
placeholder="Heslo" |
|
| 38 |
/> |
|
| 39 |
</Form.Item> |
|
| 40 |
<Form.Item> |
|
| 41 |
<Button type="primary" htmlType="submit"> |
|
| 42 |
Přihlásit |
|
| 43 |
</Button> |
|
| 44 |
</Form.Item> |
|
| 45 |
</Form> |
|
| 33 |
<Form.Item |
|
| 34 |
name="password" |
|
| 35 |
rules={[{ required: true, message: 'Heslo musí být zadané!' }]}
|
|
| 36 |
> |
|
| 37 |
<Input.Password |
|
| 38 |
prefix={<LockOutlined className="site-form-item-icon" />}
|
|
| 39 |
placeholder="Heslo" |
|
| 40 |
/> |
|
| 41 |
</Form.Item> |
|
| 42 |
<Form.Item> |
|
| 43 |
<Button type="primary" htmlType="submit"> |
|
| 44 |
Přihlásit |
|
| 45 |
</Button> |
|
| 46 |
</Form.Item> |
|
| 47 |
</Form> |
|
| 48 |
</LoginLayout> |
|
| 46 | 49 |
); |
| 47 | 50 |
} |
| 48 | 51 | |
Také k dispozici: Unified diff
Added layout of the login screen
Created a layout in a separate file and added it to the login screen