134 lines
4.8 KiB
TypeScript
134 lines
4.8 KiB
TypeScript
import React, { FC, useState } from 'react';
|
|
import { Form, FormInstance, notification } from 'antd';
|
|
import { AUTH_USER } from '../../../constants/common';
|
|
import { getRegister } from '../../../actions/auth';
|
|
import { setPersonData } from '../../../actions/profile';
|
|
import { CustomInput } from '../../view/CustomInput';
|
|
import { CustomInputPassword } from '../../view/CustomInputPassword';
|
|
import { FilledButton } from '../../view/FilledButton';
|
|
import { OutlinedButton } from '../../view/OutlinedButton';
|
|
|
|
type RegisterProps = {
|
|
form: FormInstance;
|
|
locale: string;
|
|
updateMode: (mode: 'enter' | 'register' | 'reset' | 'finish') => void;
|
|
updateToken: (token: string) => void;
|
|
handleCancel: () => void;
|
|
};
|
|
|
|
export const RegisterContent: FC<RegisterProps> = ({
|
|
form,
|
|
updateMode,
|
|
locale,
|
|
updateToken,
|
|
handleCancel
|
|
}) => {
|
|
const [isLoading, setIsLoading] = useState<boolean>(false);
|
|
|
|
const onRegister = () => {
|
|
form.validateFields().then(() => {
|
|
const { login, password } = form.getFieldsValue();
|
|
setIsLoading(true);
|
|
getRegister(locale)
|
|
.then(({ data }) => {
|
|
if (data.jwtToken) {
|
|
setPersonData( { login, password, role: 'client', languagesLinks: [] }, locale, data.jwtToken)
|
|
.then(({ data: profile }) => {
|
|
updateToken(data.jwtToken);
|
|
localStorage.setItem(AUTH_USER, profile.userData.id.toString());
|
|
handleCancel();
|
|
})
|
|
.catch((error) => {
|
|
notification.error({
|
|
message: 'Error',
|
|
description: error?.response?.data?.errors?.toString()
|
|
});
|
|
});
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
notification.error({
|
|
message: 'Error',
|
|
description: error?.response?.data?.errMessage
|
|
});
|
|
})
|
|
.finally(() => {
|
|
setIsLoading(false);
|
|
})
|
|
});
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Form form={form} autoComplete="off" style={{ display: 'flex', gap: 16, flexDirection: 'column' }}>
|
|
<Form.Item
|
|
name="login"
|
|
noStyle
|
|
rules={[
|
|
{
|
|
type: 'email',
|
|
message: 'The input is not valid E-mail'
|
|
},
|
|
{
|
|
required: true,
|
|
message: 'Please input your E-mail'
|
|
}
|
|
]}
|
|
>
|
|
<CustomInput
|
|
size="small"
|
|
placeholder="E-mail"
|
|
type="email"
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="password"
|
|
noStyle
|
|
rules={[{
|
|
required: true,
|
|
message: 'Please input your password'
|
|
}]}
|
|
>
|
|
<CustomInputPassword
|
|
size="small"
|
|
placeholder="Password"
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="confirmPassword"
|
|
noStyle
|
|
dependencies={['password']}
|
|
hasFeedback
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: 'Please confirm your password',
|
|
},
|
|
({ getFieldValue }) => ({
|
|
validator(_, value) {
|
|
if (!value || getFieldValue('password') === value) {
|
|
return Promise.resolve();
|
|
}
|
|
return Promise.reject(new Error('The new password that you entered do not match'));
|
|
},
|
|
}),
|
|
]}
|
|
>
|
|
<CustomInputPassword
|
|
size="small"
|
|
placeholder="Confirm password"
|
|
/>
|
|
</Form.Item>
|
|
</Form>
|
|
<FilledButton
|
|
type="primary"
|
|
onClick={onRegister}
|
|
loading={isLoading}
|
|
>
|
|
Register
|
|
</FilledButton>
|
|
<OutlinedButton onClick={() => updateMode('enter')}>Enter</OutlinedButton>
|
|
</>
|
|
);
|
|
};
|