@rtbjs/use-state/dist/esm/pages/login.page/login.page.js

`@rtbjs/use-state` is a state management tool that can act as a local state and be easily turned into a global redux state. It is an innovative approach to state management that combines the advantages of both React's useState and Redux's state management

import { __assign } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect } from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import { toast } from 'react-toastify';
import { useLoginUserMutation } from '../../redux/api/auth-api';
import { Form, Input, Typography } from 'antd';
import { useIsFormSubmittable } from '../../components/ui/form/use-is-form-submittable';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Container, SubmitButton } from './login.page.styles';
var LoginPage = function () {
    var _a;
    // 👇 API Login Mutation
    var _b = useLoginUserMutation(), loginUser = _b[0], _c = _b[1], isLoading = _c.isLoading, isError = _c.isError, error = _c.error, isSuccess = _c.isSuccess;
    var navigate = useNavigate();
    var location = useLocation();
    var from = ((_a = location.state) === null || _a === void 0 ? void 0 : _a.from.pathname) || '/';
    useEffect(function () {
        if (isSuccess) {
            toast.success('You successfully logged in');
            form.resetFields();
            navigate(from);
        }
        if (isError) {
            if (Array.isArray(error.data.error)) {
                error.data.error.forEach(function (el) {
                    return toast.error(el.message, {
                        position: 'top-right'
                    });
                });
            }
            else {
                toast.error(error.data.message, {
                    position: 'top-right'
                });
                var redirectTo = error.data.redirectTo;
                if (redirectTo)
                    navigate("/".concat(redirectTo));
            }
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [isLoading]);
    var onSubmitHandler = function (values) {
        loginUser(values);
    };
    var form = Form.useForm()[0];
    var isSubmittable = useIsFormSubmittable({ form: form }).isSubmittable;
    return (_jsxs(Container, { children: [_jsx(Typography.Title, { children: "Welcome to ToolBox" }), _jsx(Typography.Paragraph, { children: " Please login" }), _jsxs(Form, __assign({ name: "login", style: {
                    maxWidth: 300
                }, onFinish: onSubmitHandler, autoComplete: "off", form: form }, { children: [_jsx(Form.Item, __assign({ name: "email", messageVariables: { name: 'Email' }, rules: [{ required: true, type: 'email' }] }, { children: _jsx(Input, { prefix: _jsx(UserOutlined, { className: "site-form-item-icon" }), placeholder: "Username" }) })), _jsx(Form.Item, __assign({ name: "password", messageVariables: { name: 'Password' }, rules: [{ required: true, min: 8, max: 32 }] }, { children: _jsx(Input, { prefix: _jsx(LockOutlined, { className: "site-form-item-icon" }), type: "password", placeholder: "Password" }) })), _jsx(Form.Item, { children: _jsx(Typography.Link, { children: _jsx(Link, __assign({ to: "/forgotpassword" }, { children: "Forgot password" })) }) }), _jsx(Form.Item, { children: _jsx(SubmitButton, __assign({ type: "primary", htmlType: "submit", disabled: !isSubmittable }, { children: "Login" })) }), "Or", ' ', _jsx(Typography.Link, { children: _jsx(Link, __assign({ to: "/register" }, { children: "Sign Up here" })) })] }))] }));
};
export { LoginPage };
//# sourceMappingURL=login.page.js.map