Revize deed893a
Přidáno uživatelem Dominik Poch před asi 3 roky(ů)
| webapp/pages/authentication/login.tsx | ||
|---|---|---|
| 1 |
import { Form, Input, Button } from 'antd';
|
|
| 2 |
import { UserOutlined, LockOutlined } from '@ant-design/icons';
|
|
| 3 |
import 'antd/dist/antd.css'; |
|
| 4 |
import LoginLayout from '../../layouts/loginLayout'; |
|
| 5 |
|
|
| 6 |
/** |
|
| 7 |
* Creates a login screen. |
|
| 8 |
* @returns Html structure of the login screen. |
|
| 9 |
*/ |
|
| 10 |
function Login() {
|
|
| 11 |
/** |
|
| 12 |
* Handles submission a form when its fields were successfully validated. |
|
| 13 |
* @param values Fields of the login form. |
|
| 14 |
*/ |
|
| 15 |
const onFinish = (values: any) => {
|
|
| 16 |
/** |
|
| 17 |
@todo: delete login form log when login API is implemented |
|
| 18 |
**/ |
|
| 19 |
console.log('Values of the login form: ', values);
|
|
| 20 |
}; |
|
| 21 |
|
|
| 22 |
/** |
|
| 23 |
* Handles submission a form when its validation failed. |
|
| 24 |
* @param errorInfo Validation errors. |
|
| 25 |
*/ |
|
| 26 |
const onFinishFailed = (errorInfo: any) => {
|
|
| 27 |
/** |
|
| 28 |
@todo: delete log when error handling is implemented |
|
| 29 |
**/ |
|
| 30 |
console.log('Errors: ', errorInfo);
|
|
| 31 |
}; |
|
| 32 |
|
|
| 33 |
return ( |
|
| 34 |
<LoginLayout> |
|
| 35 |
<Form |
|
| 36 |
name="login" |
|
| 37 |
onFinish={onFinish}
|
|
| 38 |
onFinishFailed={onFinishFailed}
|
|
| 39 |
autoComplete="off" |
|
| 40 |
> |
|
| 41 |
<Form.Item |
|
| 42 |
name="username" |
|
| 43 |
rules={[
|
|
| 44 |
{
|
|
| 45 |
required: true, |
|
| 46 |
message: 'Prosím zadejte své uživatelské jméno', |
|
| 47 |
}, |
|
| 48 |
]} |
|
| 49 |
> |
|
| 50 |
<Input |
|
| 51 |
prefix={<UserOutlined className="site-form-item-icon" />}
|
|
| 52 |
placeholder="Uživatelské jméno" |
|
| 53 |
/> |
|
| 54 |
</Form.Item> |
|
| 55 |
|
|
| 56 |
<Form.Item |
|
| 57 |
name="password" |
|
| 58 |
rules={[{ required: true, message: 'Prosím zadejte své heslo' }]}
|
|
| 59 |
> |
|
| 60 |
<Input.Password |
|
| 61 |
prefix={<LockOutlined className="site-form-item-icon" />}
|
|
| 62 |
placeholder="Heslo" |
|
| 63 |
/> |
|
| 64 |
</Form.Item> |
|
| 65 |
<Form.Item> |
|
| 66 |
<Button type="primary" htmlType="submit" className="w-100"> |
|
| 67 |
Přihlásit |
|
| 68 |
</Button> |
|
| 69 |
</Form.Item> |
|
| 70 |
</Form> |
|
| 71 |
</LoginLayout> |
|
| 72 |
); |
|
| 73 |
} |
|
| 74 |
|
|
| 75 |
export default Login; |
|
| webapp/pages/login/index.tsx | ||
|---|---|---|
| 1 |
import { Form, Input, Button } from 'antd';
|
|
| 2 |
import { UserOutlined, LockOutlined } from '@ant-design/icons';
|
|
| 3 |
import 'antd/dist/antd.css'; |
|
| 4 |
import { LoginLayout } from '../../layouts/loginLayout';
|
|
| 5 |
|
|
| 6 |
/** |
|
| 7 |
* Creates a login screen. |
|
| 8 |
* @returns Html structure of the login screen. |
|
| 9 |
*/ |
|
| 10 |
function Login() {
|
|
| 11 |
/** |
|
| 12 |
* Handles submission a form when its fields were successfully validated. |
|
| 13 |
* @param values Fields of the login form. |
|
| 14 |
*/ |
|
| 15 |
const onFinish = (values: any) => {
|
|
| 16 |
/** |
|
| 17 |
@todo: delete login form log when login API is implemented |
|
| 18 |
**/ |
|
| 19 |
console.log('Values of the login form: ', values);
|
|
| 20 |
}; |
|
| 21 |
|
|
| 22 |
/** |
|
| 23 |
* Handles submission a form when its validation failed. |
|
| 24 |
* @param errorInfo Validation errors. |
|
| 25 |
*/ |
|
| 26 |
const onFinishFailed = (errorInfo: any) => {
|
|
| 27 |
/** |
|
| 28 |
@todo: delete log when error handling is implemented |
|
| 29 |
**/ |
|
| 30 |
console.log('Errors: ', errorInfo);
|
|
| 31 |
}; |
|
| 32 |
|
|
| 33 |
return ( |
|
| 34 |
<LoginLayout> |
|
| 35 |
<Form |
|
| 36 |
name="login" |
|
| 37 |
onFinish={onFinish}
|
|
| 38 |
onFinishFailed={onFinishFailed}
|
|
| 39 |
autoComplete="off" |
|
| 40 |
> |
|
| 41 |
<Form.Item |
|
| 42 |
name="username" |
|
| 43 |
rules={[
|
|
| 44 |
{
|
|
| 45 |
required: true, |
|
| 46 |
message: 'Prosím zadejte své uživatelské jméno', |
|
| 47 |
}, |
|
| 48 |
]} |
|
| 49 |
> |
|
| 50 |
<Input |
|
| 51 |
prefix={<UserOutlined className="site-form-item-icon" />}
|
|
| 52 |
placeholder="Uživatelské jméno" |
|
| 53 |
/> |
|
| 54 |
</Form.Item> |
|
| 55 |
|
|
| 56 |
<Form.Item |
|
| 57 |
name="password" |
|
| 58 |
rules={[{ required: true, message: 'Prosím zadejte své heslo' }]}
|
|
| 59 |
> |
|
| 60 |
<Input.Password |
|
| 61 |
prefix={<LockOutlined className="site-form-item-icon" />}
|
|
| 62 |
placeholder="Heslo" |
|
| 63 |
/> |
|
| 64 |
</Form.Item> |
|
| 65 |
<Form.Item> |
|
| 66 |
<Button type="primary" htmlType="submit" className="w-100"> |
|
| 67 |
Přihlásit |
|
| 68 |
</Button> |
|
| 69 |
</Form.Item> |
|
| 70 |
</Form> |
|
| 71 |
</LoginLayout> |
|
| 72 |
); |
|
| 73 |
} |
|
| 74 |
|
|
| 75 |
export default Login; |
|
Také k dispozici: Unified diff
Changed a route of the login page
Changed the route from /authentication/login to /login