diff --git a/src/containers/dialogs/LoginDialog/index.tsx b/src/containers/dialogs/LoginDialog/index.tsx index 6f19c8b8..486c48fa 100644 --- a/src/containers/dialogs/LoginDialog/index.tsx +++ b/src/containers/dialogs/LoginDialog/index.tsx @@ -1,7 +1,6 @@ -import React, { FC, FormEvent, useCallback, useEffect, useState, useMemo } from 'react'; +import React, { FC, FormEvent, useCallback, useEffect, useMemo, useState } from 'react'; import { connect } from 'react-redux'; -import { IDialogProps } from '~/redux/modal/constants'; -import { DIALOGS } from '~/redux/modal/constants'; +import { DIALOGS, IDialogProps } from '~/redux/modal/constants'; import { useCloseOnEscape } from '~/utils/hooks'; import { Group } from '~/components/containers/Group'; import { InputText } from '~/components/input/InputText'; @@ -16,8 +15,12 @@ import * as ACTIONS from '~/redux/auth/actions'; import * as MODAL_ACTIONS from '~/redux/modal/actions'; import { ISocialProvider } from '~/redux/auth/types'; import { Grid } from '~/components/containers/Grid'; +import pick from 'ramda/es/pick'; +import { LoginDialogButtons } from '~/containers/dialogs/LoginDialogButtons'; -const mapStateToProps = selectAuthLogin; +const mapStateToProps = state => ({ + ...pick(['error', 'is_registering'], selectAuthLogin(state)), +}); const mapDispatchToProps = { userSendLoginRequest: ACTIONS.userSendLoginRequest, @@ -29,8 +32,9 @@ const mapDispatchToProps = { type IProps = ReturnType & typeof mapDispatchToProps & IDialogProps & {}; const LoginDialogUnconnected: FC = ({ - onRequestClose, error, + + onRequestClose, userSendLoginRequest, userSetLoginError, authLoginWithSocial, @@ -88,63 +92,39 @@ const LoginDialogUnconnected: FC = ({ return () => window.removeEventListener('message', onMessage); }, [onMessage]); - const buttons = useMemo( - () => ( - - - - - - - - - - ), - [openOauthWindow] - ); - useCloseOnEscape(onRequestClose); return (
- - -
- -

РЕШИТЕЛЬНО ВОЙТИ

+
+ } + > + +
+ +

РЕШИТЕЛЬНО ВОЙТИ

- + - + - -
-
-
-
+ + +
+ + +
); }; diff --git a/src/containers/dialogs/LoginDialog/styles.scss b/src/containers/dialogs/LoginDialog/styles.scss index fe5f8b35..94d06962 100644 --- a/src/containers/dialogs/LoginDialog/styles.scss +++ b/src/containers/dialogs/LoginDialog/styles.scss @@ -1,6 +1,8 @@ $secondary_color: darken(desaturate($blue, 100%), 30%); $vk_color: $secondary_color; +.dialog {} + .wrap { display: flex; align-items: flex-start; @@ -37,14 +39,6 @@ $vk_color: $secondary_color; border-top: 1px solid black; } -.footer { - padding: $gap; - - button { - // text-align: left; - } -} - .links { font: $font_14_regular; text-align: center; diff --git a/src/containers/dialogs/LoginDialogButtons/index.tsx b/src/containers/dialogs/LoginDialogButtons/index.tsx new file mode 100644 index 00000000..7cc63492 --- /dev/null +++ b/src/containers/dialogs/LoginDialogButtons/index.tsx @@ -0,0 +1,29 @@ +import React, { FC, MouseEventHandler } from 'react'; +import { Button } from '~/components/input/Button'; +import { Grid } from '~/components/containers/Grid'; +import { Group } from '~/components/containers/Group'; +import styles from './styles.scss'; + +interface IProps { + openOauthWindow: (provider: string) => MouseEventHandler; +} + +const LoginDialogButtons: FC = ({ openOauthWindow }) => ( + + + + + + + + + +); + +export { LoginDialogButtons }; diff --git a/src/containers/dialogs/LoginDialogButtons/styles.scss b/src/containers/dialogs/LoginDialogButtons/styles.scss new file mode 100644 index 00000000..ee2a09fc --- /dev/null +++ b/src/containers/dialogs/LoginDialogButtons/styles.scss @@ -0,0 +1,3 @@ +.footer { + padding: $gap; +} diff --git a/src/redux/auth/reducer.ts b/src/redux/auth/reducer.ts index f8ebbb11..82d1823b 100644 --- a/src/redux/auth/reducer.ts +++ b/src/redux/auth/reducer.ts @@ -20,6 +20,7 @@ const INITIAL_STATE: IAuthState = { login: { error: null, is_loading: false, + is_registering: true, }, profile: { diff --git a/src/redux/auth/types.ts b/src/redux/auth/types.ts index 40f7f4ba..2763ee9d 100644 --- a/src/redux/auth/types.ts +++ b/src/redux/auth/types.ts @@ -46,6 +46,7 @@ export type IAuthState = Readonly<{ login: { error: string; is_loading: boolean; + is_registering: boolean; }; profile: {