diff --git a/src/components/main/Header/index.tsx b/src/components/main/Header/index.tsx index d7c3dc39..e1fd0e24 100644 --- a/src/components/main/Header/index.tsx +++ b/src/components/main/Header/index.tsx @@ -28,9 +28,6 @@ type IProps = ReturnType & typeof mapDispatchToProps & { const HeaderUnconnected: FC = memo(({ user: { username, is_user, photo }, showDialog }) => { const onLogin = useCallback(() => showDialog(DIALOGS.LOGIN), [showDialog]); - const onSocialLogin = useCallback(() => { - window.open(API.USER.VKONTAKTE_LOGIN, '', 'width=600,height=400'); - }, []); return (
@@ -40,7 +37,6 @@ const HeaderUnconnected: FC = memo(({ user: { username, is_user, photo }
flow - SOCIAL
{is_user && ( diff --git a/src/components/main/Header/style.scss b/src/components/main/Header/style.scss index c7d96aca..5191d6f4 100644 --- a/src/components/main/Header/style.scss +++ b/src/components/main/Header/style.scss @@ -70,11 +70,16 @@ flex: 0 !important; cursor: pointer; margin-left: $gap; + white-space: nowrap; + box-shadow: inset transparentize($content_bg, 0.8) 0 0 0 1px; + background: transparentize($content_bg, 0.1); + padding: 0 0 0 $gap; } .user_avatar { @include outer_shadow(); + flex: 0 0 32px; width: 32px; height: 32px; background: white; diff --git a/src/containers/dialogs/LoginDialog/index.tsx b/src/containers/dialogs/LoginDialog/index.tsx index 76b7a613..711709fe 100644 --- a/src/containers/dialogs/LoginDialog/index.tsx +++ b/src/containers/dialogs/LoginDialog/index.tsx @@ -1,6 +1,4 @@ -import React, { - FC, FormEvent, useCallback, useEffect, useState -} from 'react'; +import React, { FC, FormEvent, useCallback, useEffect, useState } from 'react'; import { connect } from 'react-redux'; import { ScrollDialog } from '../ScrollDialog'; import { IDialogProps } from '~/redux/modal/constants'; @@ -12,6 +10,7 @@ import { Padder } from '~/components/containers/Padder'; import * as styles from './styles.scss'; import { selectAuthLogin } from '~/redux/auth/selectors'; import * as ACTIONS from '~/redux/auth/actions'; +import { API } from '~/constants/api'; const mapStateToProps = selectAuthLogin; @@ -23,15 +22,25 @@ const mapDispatchToProps = { type IProps = ReturnType & typeof mapDispatchToProps & IDialogProps & {}; const LoginDialogUnconnected: FC = ({ - onRequestClose, error, userSendLoginRequest, userSetLoginError + onRequestClose, + error, + userSendLoginRequest, + userSetLoginError, }) => { const [username, setUserName] = useState(''); const [password, setPassword] = useState(''); - const onSubmit = useCallback((event: FormEvent) => { - event.preventDefault(); - userSendLoginRequest({ username, password }); - }, [userSendLoginRequest, username, password]); + const onSubmit = useCallback( + (event: FormEvent) => { + event.preventDefault(); + userSendLoginRequest({ username, password }); + }, + [userSendLoginRequest, username, password] + ); + + const onSocialLogin = useCallback(() => { + window.open(API.USER.VKONTAKTE_LOGIN, '', 'width=600,height=400'); + }, []); useEffect(() => { if (error) userSetLoginError(null); @@ -40,7 +49,9 @@ const LoginDialogUnconnected: FC = ({ const buttons = ( - ); @@ -49,17 +60,20 @@ const LoginDialogUnconnected: FC = ({ return (
- +

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

-
-
- + + + +
@@ -68,6 +82,9 @@ const LoginDialogUnconnected: FC = ({ ); }; -const LoginDialog = connect(mapStateToProps, mapDispatchToProps)(LoginDialogUnconnected); +const LoginDialog = connect( + mapStateToProps, + mapDispatchToProps +)(LoginDialogUnconnected); export { LoginDialog }; diff --git a/src/containers/dialogs/LoginDialog/styles.scss b/src/containers/dialogs/LoginDialog/styles.scss index bbfc0dd1..cd35152c 100644 --- a/src/containers/dialogs/LoginDialog/styles.scss +++ b/src/containers/dialogs/LoginDialog/styles.scss @@ -1,7 +1,32 @@ +$vk_color: darken(desaturate($blue, 70%), 20%); + .wrap { display: flex; align-items: flex-start; justify-content: center; - padding: 20px 20px 60px 20px; + padding: 20px; margin: auto; + + h2 { + margin-bottom: $gap * 3 !important; + } +} + +.vk { + background: $content_bg; + box-shadow: inset $vk_color 0 0 0 2px; + color: $vk_color; + + svg { + fill: $vk_color; + margin-right: $gap; + width: 24px; + height: 24px; + } +} + +.buttons { + margin: $gap * 2 0 0 0 !important; + padding: $gap * 2 0 0 0; + border-top: 1px solid black; } diff --git a/src/redux/auth/actions.ts b/src/redux/auth/actions.ts index 54b44c51..98602c6f 100644 --- a/src/redux/auth/actions.ts +++ b/src/redux/auth/actions.ts @@ -19,9 +19,9 @@ export const authSetToken = (token: IAuthState['token']) => ({ token, }); -export const gotPostMessage = (message: MessageEvent) => ({ +export const gotPostMessage = ({ token }: { token: string }) => ({ type: AUTH_USER_ACTIONS.GOT_POST_MESSAGE, - message, + token, }); export const authSetUser = (profile: Partial) => ({ diff --git a/src/redux/auth/sagas.ts b/src/redux/auth/sagas.ts index e8a2b13d..59502bbe 100644 --- a/src/redux/auth/sagas.ts +++ b/src/redux/auth/sagas.ts @@ -14,6 +14,9 @@ import { IResultWithStatus } from '../types'; import { IUser } from './types'; import { REHYDRATE, RehydrateAction } from 'redux-persist'; import path from 'ramda/es/path'; +import { selectModal } from '../modal/selectors'; +import { IModalState } from '../modal/reducer'; +import { DIALOGS } from '../modal/constants'; export function* reqWrapper(requestAction, props = {}): ReturnType { const access = yield select(selectToken); @@ -48,9 +51,7 @@ function* sendLoginRequestSaga({ username, password }: ReturnType) { - if (path(['data', 'type'], message) !== 'oauth_login') return; +function* checkUserSaga({ key }: RehydrateAction) { + if (key !== 'auth') return; + yield call(refreshUser); +} - console.log({ message }); +function* gotPostMessageSaga({ token }: ReturnType) { + yield put(authSetToken(token)); + yield call(refreshUser); + + const { is_shown, dialog }: IModalState = yield select(selectModal); + + if (is_shown && dialog === DIALOGS.LOGIN) yield put(modalSetShown(false)); } function* authSaga() { diff --git a/src/redux/store.ts b/src/redux/store.ts index 18b75554..379d47ee 100644 --- a/src/redux/store.ts +++ b/src/redux/store.ts @@ -71,7 +71,11 @@ export function configureStore(): { store: Store; persistor: Persistor } sagaMiddleware.run(flowSaga); sagaMiddleware.run(playerSaga); - window.addEventListener('message', message => store.dispatch(gotPostMessage(message))); + window.addEventListener('message', message => { + if (!message || !message.data || message.data.type !== 'oauth_login' || !message.data.token) + return; + store.dispatch(gotPostMessage({ token: message.data.token })); + }); const persistor = persistStore(store); diff --git a/src/sprites/Sprites.tsx b/src/sprites/Sprites.tsx index 39856ab4..8259c439 100644 --- a/src/sprites/Sprites.tsx +++ b/src/sprites/Sprites.tsx @@ -159,6 +159,18 @@ const Sprites: FC<{}> = () => ( + + + + + + + + + + + + );