diff --git a/src/containers/dialogs/LogianSocialRegisterButtons/index.tsx b/src/containers/dialogs/LogianSocialRegisterButtons/index.tsx new file mode 100644 index 00000000..abd051d5 --- /dev/null +++ b/src/containers/dialogs/LogianSocialRegisterButtons/index.tsx @@ -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 = () => ( +
+ +
+); + +export { LoginSocialRegisterButtons }; diff --git a/src/containers/dialogs/LogianSocialRegisterButtons/styles.scss b/src/containers/dialogs/LogianSocialRegisterButtons/styles.scss new file mode 100644 index 00000000..4dd8a181 --- /dev/null +++ b/src/containers/dialogs/LogianSocialRegisterButtons/styles.scss @@ -0,0 +1,7 @@ +.wrap { + padding: $gap $gap * 2; + + button { + width: 100%; + } +} diff --git a/src/containers/dialogs/LoginSocialRegisterDialog/index.tsx b/src/containers/dialogs/LoginSocialRegisterDialog/index.tsx index 67397156..75b51114 100644 --- a/src/containers/dialogs/LoginSocialRegisterDialog/index.tsx +++ b/src/containers/dialogs/LoginSocialRegisterDialog/index.tsx @@ -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 mapDispatchToProps & IDialogProps & {}; @@ -27,10 +29,19 @@ const LoginSocialRegisterDialogUnconnected: FC = ({ 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 = ({ useCloseOnEscape(onRequestClose); return ( - - -
- - Добро пожаловать в семью! +
+ } + > + +
+ + Добро пожаловать в семью! - + - + - - -
-
-
+ + +
+
+
+ ); }; diff --git a/src/redux/auth/actions.ts b/src/redux/auth/actions.ts index b5301bdf..4c03ae04 100644 --- a/src/redux/auth/actions.ts +++ b/src/redux/auth/actions.ts @@ -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, +}); diff --git a/src/redux/auth/constants.ts b/src/redux/auth/constants.ts index 65d67476..82a58918 100644 --- a/src/redux/auth/constants.ts +++ b/src/redux/auth/constants.ts @@ -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 = { diff --git a/src/utils/reducer.ts b/src/utils/reducer.ts index 23774312..7af01e2d 100644 --- a/src/utils/reducer.ts +++ b/src/utils/reducer.ts @@ -1,4 +1,4 @@ -// create-index.ts +// create-index.tsx import { Action } from 'redux'; type Handlers> = {