@rtbjs/use-state
Version:
`@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
69 lines • 4.56 kB
JavaScript
import { __assign } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useRegisterUserMutation } from '../redux/api/auth-api';
import { toast } from 'react-toastify';
import { Form, Input, Typography } from 'antd';
import { useIsFormSubmittable } from '../components/ui/form/use-is-form-submittable';
import { Container, SubmitButton } from './login.page/login.page.styles';
import { LockOutlined, MailOutlined, UserOutlined } from '@ant-design/icons';
var RegisterPage = function () {
var form = Form.useForm()[0];
// 👇 Calling the Register Mutation
var _a = useRegisterUserMutation(), registerUser = _a[0], _b = _a[1], isLoading = _b.isLoading, isSuccess = _b.isSuccess, error = _b.error, isError = _b.isError, data = _b.data;
var navigate = useNavigate();
useEffect(function () {
if (isSuccess) {
toast.success(data === null || data === void 0 ? void 0 : data.message);
navigate('/verifyemail');
}
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'
});
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isLoading]);
var onSubmitHandler = function (values) {
// 👇 Executing the RegisterUser Mutation
registerUser(values);
};
var isSubmittable = useIsFormSubmittable({ form: form }).isSubmittable;
return (_jsxs(Container, { children: [_jsx(Typography.Title, { children: "Create an account" }), _jsxs(Form, __assign({ name: "login", style: {
maxWidth: 300
}, onFinish: onSubmitHandler, autoComplete: "off", form: form }, { children: [_jsx(Form.Item, __assign({ name: "name", messageVariables: { name: 'Name' }, rules: [{ required: true, min: 3, max: 100 }] }, { children: _jsx(Input, { prefix: _jsx(UserOutlined, {}), placeholder: "Name" }) })), _jsx(Form.Item, __assign({ name: "email", messageVariables: { name: 'Email' }, rules: [
{
type: 'email',
message: 'The input is not valid E-mail!'
},
{
required: true,
message: 'Please input your E-mail!'
},
] }, { children: _jsx(Input, { prefix: _jsx(MailOutlined, {}), placeholder: "Email" }) })), _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, __assign({ name: "passwordConfirm", rules: [
{ required: true, message: 'Please confirm your password!' },
function (_a) {
var getFieldValue = _a.getFieldValue;
return ({
validator: function (_, value) {
if (!value || getFieldValue('password') === value) {
return Promise.resolve();
}
return Promise.reject(new Error('The new password that you entered do not match!'));
}
});
},
], dependencies: ['password'], hasFeedback: true }, { children: _jsx(Input, { prefix: _jsx(LockOutlined, { className: "site-form-item-icon" }), type: "password", placeholder: "Confirm password" }) })), _jsx(Form.Item, { children: _jsx(SubmitButton, __assign({ type: "primary", htmlType: "submit", disabled: !isSubmittable }, { children: "Sign up" })) }), "Already have an account?", ' ', _jsx(Typography.Link, { children: _jsx(Link, __assign({ to: "/login" }, { children: "Login" })) })] }))] }));
};
export default RegisterPage;
//# sourceMappingURL=register.page.js.map