diff --git a/src/components/main/UserButton/index.tsx b/src/components/main/UserButton/index.tsx index e965e102..b31acbc2 100644 --- a/src/components/main/UserButton/index.tsx +++ b/src/components/main/UserButton/index.tsx @@ -22,9 +22,9 @@ const UserButton: FC = ({ user: { username, photo }, authOpenProfile, on authOpenProfile(username, 'settings'); }, [authOpenProfile, username]); - // const onMessagesOpen = useCallback(() => { - // authOpenProfile(username, 'messages'); - // }, [authOpenProfile, username]); + const onAccountsOpen = useCallback(() => { + authOpenProfile(username, 'accounts'); + }, [authOpenProfile, username]); return (
@@ -42,6 +42,7 @@ const UserButton: FC = ({ user: { username, photo }, authOpenProfile, on
Профиль
Настройки
+
Аккаунты
Выдох
diff --git a/src/components/profile/ProfileAccounts/index.tsx b/src/components/profile/ProfileAccounts/index.tsx new file mode 100644 index 00000000..7760457e --- /dev/null +++ b/src/components/profile/ProfileAccounts/index.tsx @@ -0,0 +1,120 @@ +import React, { FC, Fragment, useCallback, useEffect } from 'react'; +import { ISocialProvider } from '~/redux/auth/types'; +import styles from './styles.scss'; +import { Placeholder } from '~/components/placeholders/Placeholder'; +import { Icon } from '~/components/input/Icon'; +import { Button } from '~/components/input/Button'; +import { Group } from '~/components/containers/Group'; +import * as AUTH_ACTIONS from '~/redux/auth/actions'; +import { selectAuthProfile } from '~/redux/auth/selectors'; +import { IState } from '~/redux/store'; +import { connect } from 'react-redux'; +import { API } from '~/constants/api'; + +const mapStateToProps = (state: IState) => selectAuthProfile(state).socials; +const mapDispatchToProps = { + authGetSocials: AUTH_ACTIONS.authGetSocials, + authDropSocial: AUTH_ACTIONS.authDropSocial, +}; + +type IProps = ReturnType & typeof mapDispatchToProps & {}; + +const SOCIAL_ICONS: Record = { + vkontakte: 'vk', + google: 'google', +}; + +const ProfileAccountsUnconnected: FC = ({ + authGetSocials, + authDropSocial, + accounts, + is_loading, +}) => { + const onMessage = useCallback(event => { + if (event?.data?.type !== 'oauth_attach' || !event?.data?.payload?.token) return; + const token = event?.data?.payload?.token; + console.log('GOT TOKEN!!!', token); + }, []); + + const openOauthWindow = useCallback( + (provider: ISocialProvider) => () => { + console.log(API.USER.OAUTH_WINDOW(provider)); + window.open(API.USER.OAUTH_WINDOW(provider), '', 'width=600,height=400'); + }, + [] + ); + + useEffect(() => { + authGetSocials(); + }, [authGetSocials]); + + useEffect(() => { + window.addEventListener('message', onMessage); + return () => window.removeEventListener('message', onMessage); + }, [onMessage]); + + return ( + + +

+ Ты можешь входить в Убежище, используя аккаунты на других сайтах вместо ввода логина и + пароля. +

+ +

+ Мы честно украдём и будем хранить твои имя, фото и адрес на этом сайте, но никому о них не + расскажем. +

+ + + {is_loading && ( +
+ {[...new Array(accounts.length || 1)].map((_, i) => ( + + + + + ))} +
+ )} + + {!is_loading && accounts.length > 0 && ( +
+ {!is_loading && + accounts.map(it => ( +
+
+
+ +
+
+ +
{it.name}
+ +
+ authDropSocial(it.provider, it.id)} /> +
+
+ ))} +
+ )} + + + + + + + + ); +}; + +const ProfileAccounts = connect(mapStateToProps, mapDispatchToProps)(ProfileAccountsUnconnected); + +export { ProfileAccounts }; diff --git a/src/components/profile/ProfileAccounts/styles.scss b/src/components/profile/ProfileAccounts/styles.scss new file mode 100644 index 00000000..8665f601 --- /dev/null +++ b/src/components/profile/ProfileAccounts/styles.scss @@ -0,0 +1,80 @@ +.wrap { + padding: $gap; +} + +.list { + padding: $gap; + box-shadow: inset transparentize(white, 0.9) 0 0 0 2px; + border-radius: $radius; +} + +.buttons { + background: transparentize(black, 0.8); + border-radius: $radius; + padding: $gap / 2; + display: flex; + align-items: center; + justify-content: flex-end; +} + +.add { + //background-color: $content_bg !important; +} + +.loader { + display: grid; + grid-row-gap: $gap; + grid-column-gap: $gap * 4; + grid-template-columns: 1fr 32px; + + & > div { + height: 48px; + width: auto; + } +} + +.account { + display: grid; + grid-template-columns: 20px auto 20px; + grid-column-gap: $gap * 1.5; + align-items: center; + + &__photo { + width: 28px; + height: 28px; + background: 50% 50% no-repeat; + background-size: cover; + border-radius: 2px; + position: relative; + } + + &__provider { + position: absolute; + right: -2px; + bottom: -8px; + background: $content_bg; + } + + &__name { + font: $font_16_semibold; + padding-left: $gap / 2; + } + + &__drop { + cursor: pointer; + opacity: 0.5; + transition: opacity 0.25s; + fill: $red; + display: flex; + align-items: center; + + &:hover { + opacity: 1; + } + } +} + +.info { + padding: $gap; + font: $font_14_regular; +} diff --git a/src/components/profile/ProfileSettings/index.tsx b/src/components/profile/ProfileSettings/index.tsx index 15925a5d..d0f9f9eb 100644 --- a/src/components/profile/ProfileSettings/index.tsx +++ b/src/components/profile/ProfileSettings/index.tsx @@ -10,7 +10,7 @@ import { InputText } from '~/components/input/InputText'; import reject from 'ramda/es/reject'; import * as AUTH_ACTIONS from '~/redux/auth/actions'; import { ERROR_LITERAL } from '~/constants/errors'; -import { ProfileSettingsSocials } from '~/components/profile/ProfileSettingsSocials'; +import { ProfileAccounts } from '~/components/profile/ProfileAccounts'; const mapStateToProps = state => ({ user: selectAuthUser(state), @@ -20,8 +20,6 @@ const mapStateToProps = state => ({ const mapDispatchToProps = { authPatchUser: AUTH_ACTIONS.authPatchUser, authSetProfile: AUTH_ACTIONS.authSetProfile, - authGetSocials: AUTH_ACTIONS.authGetSocials, - authDropSocial: AUTH_ACTIONS.authDropSocial, }; type IProps = ReturnType & typeof mapDispatchToProps & {}; @@ -31,8 +29,6 @@ const ProfileSettingsUnconnected: FC = ({ profile: { patch_errors, socials }, authPatchUser, authSetProfile, - authGetSocials, - authDropSocial, }) => { const [password, setPassword] = useState(''); const [new_password, setNewPassword] = useState(''); @@ -74,26 +70,21 @@ const ProfileSettingsUnconnected: FC = ({ return (
- + + -