mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-25 04:46:40 +07:00
added action to perform send register request
This commit is contained in:
parent
88ee0601c8
commit
3a11b01c99
6 changed files with 70 additions and 25 deletions
13
src/containers/dialogs/LogianSocialRegisterButtons/index.tsx
Normal file
13
src/containers/dialogs/LogianSocialRegisterButtons/index.tsx
Normal file
|
@ -0,0 +1,13 @@
|
|||
import React, { FC } from 'react';
|
||||
import { Button } from '~/components/input/Button';
|
||||
import styles from './styles.module.scss';
|
||||
|
||||
interface IProps {}
|
||||
|
||||
const LoginSocialRegisterButtons: FC<IProps> = () => (
|
||||
<div className={styles.wrap}>
|
||||
<Button stretchy>Зарегистрироваться</Button>
|
||||
</div>
|
||||
);
|
||||
|
||||
export { LoginSocialRegisterButtons };
|
|
@ -0,0 +1,7 @@
|
|||
.wrap {
|
||||
padding: $gap $gap * 2;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
|
@ -1,4 +1,4 @@
|
|||
import React, { FC, useEffect, useState } from 'react';
|
||||
import React, { FC, FormEvent, useCallback, useEffect, useState } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { IDialogProps } from '~/redux/modal/constants';
|
||||
import { BetterScrollDialog } from '~/containers/dialogs/BetterScrollDialog';
|
||||
|
@ -10,11 +10,13 @@ import styles from './styles.scss';
|
|||
import { selectAuthRegisterSocial } from '~/redux/auth/selectors';
|
||||
import * as AUTH_ACTIONS from '~/redux/auth/actions';
|
||||
import { useCloseOnEscape } from '~/utils/hooks';
|
||||
import { LoginSocialRegisterButtons } from '~/containers/dialogs/LogianSocialRegisterButtons';
|
||||
|
||||
const mapStateToProps = selectAuthRegisterSocial;
|
||||
const mapDispatchToProps = {
|
||||
authSetRegisterSocialErrors: AUTH_ACTIONS.authSetRegisterSocialErrors,
|
||||
authSetRegisterSocial: AUTH_ACTIONS.authSetRegisterSocial,
|
||||
authSendRegisterSocial: AUTH_ACTIONS.authSendRegisterSocial,
|
||||
};
|
||||
|
||||
type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & IDialogProps & {};
|
||||
|
@ -27,10 +29,19 @@ const LoginSocialRegisterDialogUnconnected: FC<Props> = ({
|
|||
|
||||
authSetRegisterSocialErrors,
|
||||
authSetRegisterSocial,
|
||||
authSendRegisterSocial,
|
||||
}) => {
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
|
||||
const onSubmit = useCallback(
|
||||
(event: FormEvent) => {
|
||||
event.preventDefault();
|
||||
authSendRegisterSocial(username, password);
|
||||
},
|
||||
[username, password, authSendRegisterSocial]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (errors.username) authSetRegisterSocialErrors({ username: '' });
|
||||
}, [username]);
|
||||
|
@ -46,32 +57,39 @@ const LoginSocialRegisterDialogUnconnected: FC<Props> = ({
|
|||
useCloseOnEscape(onRequestClose);
|
||||
|
||||
return (
|
||||
<BetterScrollDialog onClose={onRequestClose} width={300} error={error}>
|
||||
<Padder>
|
||||
<div className={styles.wrap}>
|
||||
<Group>
|
||||
<DialogTitle>Добро пожаловать в семью!</DialogTitle>
|
||||
<form onSubmit={onSubmit}>
|
||||
<BetterScrollDialog
|
||||
onClose={onRequestClose}
|
||||
width={300}
|
||||
error={error}
|
||||
footer={<LoginSocialRegisterButtons />}
|
||||
>
|
||||
<Padder>
|
||||
<div className={styles.wrap}>
|
||||
<Group>
|
||||
<DialogTitle>Добро пожаловать в семью!</DialogTitle>
|
||||
|
||||
<InputText handler={setUsername} value={token} title="Token" />
|
||||
<InputText handler={setUsername} value={token} title="Token" />
|
||||
|
||||
<InputText
|
||||
handler={setUsername}
|
||||
value={username}
|
||||
title="Юзернэйм"
|
||||
error={errors.username}
|
||||
/>
|
||||
<InputText
|
||||
handler={setUsername}
|
||||
value={username}
|
||||
title="Юзернэйм"
|
||||
error={errors.username}
|
||||
/>
|
||||
|
||||
<InputText
|
||||
handler={setPassword}
|
||||
value={password}
|
||||
title="Пароль"
|
||||
type="password"
|
||||
error={errors.password}
|
||||
/>
|
||||
</Group>
|
||||
</div>
|
||||
</Padder>
|
||||
</BetterScrollDialog>
|
||||
<InputText
|
||||
handler={setPassword}
|
||||
value={password}
|
||||
title="Пароль"
|
||||
type="password"
|
||||
error={errors.password}
|
||||
/>
|
||||
</Group>
|
||||
</div>
|
||||
</Padder>
|
||||
</BetterScrollDialog>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
@ -150,3 +150,9 @@ export const authSetRegisterSocialErrors = (
|
|||
type: AUTH_USER_ACTIONS.SET_REGISTER_SOCIAL_ERRORS,
|
||||
errors,
|
||||
});
|
||||
|
||||
export const authSendRegisterSocial = (username: string, password: string) => ({
|
||||
type: AUTH_USER_ACTIONS.SEND_REGISTER_SOCIAL,
|
||||
username,
|
||||
password,
|
||||
});
|
||||
|
|
|
@ -35,6 +35,7 @@ export const AUTH_USER_ACTIONS = {
|
|||
|
||||
SET_REGISTER_SOCIAL: 'SET_REGISTER_SOCIAL',
|
||||
SET_REGISTER_SOCIAL_ERRORS: 'SET_REGISTER_SOCIAL_ERRORS',
|
||||
SEND_REGISTER_SOCIAL: 'SEND_REGISTER_SOCIAL',
|
||||
};
|
||||
|
||||
export const USER_ERRORS = {
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
// create-index.ts
|
||||
// create-index.tsx
|
||||
import { Action } from 'redux';
|
||||
|
||||
type Handlers<State, Types extends string, Actions extends Action<Types>> = {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue