aswi20220x00-gitlab/webapp/pages/login/index.tsx @ 5bc3f7c5

import 'antd/dist/antd.css';
import { Button, Form, Input } from 'antd';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { LoggedUserContext } from '../../contexts/LoggedUserContext';
import { LoginLayout } from '../../layouts/LoginLayout';
import { useContext } from 'react';
import { useRouter } from 'next/router';
import { ShowToast } from '../../utils/alerts';
import { getTokenData } from '../../utils/login';
import { LoginResponse } from '../../api';

/**
 * Creates a login screen.
 * @returns Html structure of the login screen.
 */
function Login() {
    const { login, role } = useContext(LoggedUserContext);
    const router = useRouter();

    /**
     * Handles submission a form when its fields were successfully validated.
     * @param values Fields of the login form.
     */
    const onFinish = async (values: any) => {
        const loginRes = await login(values.username, values.password);

        if (!loginRes) {
            ShowToast(
                'Chybně zadané heslo nebo uživatelské jméno',
                'error',
                3000,
                'top-end'
            );
        } else {
            let data: LoginResponse | null = await getTokenData();
            ShowToast('Přihlášení proběhlo úspěšně', 'success', 3000, 'top-end');
            if (data?.role === 'ADMINISTRATOR') {
                await router.push('/documents/admin');
            } else if (data?.role === 'ANNOTATOR') {
                await router.push('/documents/annotator');
            }
        }
    };

    /**
     * Handles submission a form when its validation failed.
     * @param errorInfo Validation errors.
     */
    const onFinishFailed = (errorInfo: any) => {
        ShowToast('Zadané údaje nejsou validní', 'error', 3000, 'top-end');
    };

    return (
        <LoginLayout>
            <Form
                name="login"
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <Form.Item
                    name="username"
                    rules={[
                        {
                            required: true,
                            message: 'Prosím zadejte své uživatelské jméno',
                        },
                    ]}
                >
                    <Input
                        prefix={<UserOutlined className="site-form-item-icon" />}
                        placeholder="Uživatelské jméno"
                    />
                </Form.Item>

                <Form.Item
                    name="password"
                    rules={[{ required: true, message: 'Prosím zadejte své heslo' }]}
                >
                    <Input.Password
                        prefix={<LockOutlined className="site-form-item-icon" />}
                        placeholder="Heslo"
                    />
                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit" className="w-100">
                        Přihlásit
                    </Button>
                </Form.Item>
            </Form>
        </LoginLayout>
    );
}

export default Login;