diff --git a/src/components/Player/Player.jsx b/src/components/Player/Player.jsx index 5791c3f76b..ee0bd4c1f8 100644 --- a/src/components/Player/Player.jsx +++ b/src/components/Player/Player.jsx @@ -14,6 +14,7 @@ import TableFilterForm from './TableFilterForm'; import PlayerHeader from './Header/PlayerHeader'; // import Error from '../Error'; import playerPages from './playerPages'; +import PlayerProfilePrivate from './PlayerProfilePrivate'; class RequestLayer extends React.Component { static propTypes = { @@ -32,6 +33,7 @@ class RequestLayer extends React.Component { playerName: PropTypes.string, playerLoading: PropTypes.bool, strings: PropTypes.shape({}), + isPlayerProfilePublic: PropTypes.bool, } componentDidMount() { @@ -53,7 +55,7 @@ class RequestLayer extends React.Component { } render() { - const { location, match, strings } = this.props; + const { location, match, strings, isPlayerProfilePublic } = this.props; const { playerId } = this.props.match.params; if (Long.fromString(playerId).greaterThan('76561197960265728')) { this.props.history.push(`/players/${Long.fromString(playerId).subtract('76561197960265728')}`); @@ -67,23 +69,35 @@ class RequestLayer extends React.Component { {!this.props.playerLoading && }
- -
-
- - {page ? page.content(playerId, match.params, location) : } +
+ {isPlayerProfilePublic ? ( +
+ + {page ? page.content(playerId, match.params, location) : } +
+ ) : ( + + )} ); } } -const mapStateToProps = state => ({ - playerName: (state.app.player.data.profile || {}).personaname, - playerLoading: (state.app.player.loading), - officialPlayerName: (state.app.player.data.profile || {}).name, - strings: state.app.strings, -}); +const mapStateToProps = state => { + const playerProfile = state.app.player.data.profile || {}; + const loggedInUser = state.app.metadata.data.user || {}; + + return { + playerName: playerProfile.personaname, + playerLoading: state.app.player.loading, + officialPlayerName: playerProfile.name, + strings: state.app.strings, + isPlayerProfilePublic: !!playerProfile.name + || !playerProfile.fh_unavailable + || (playerProfile.fh_unavailable && loggedInUser.account_id === playerProfile.account_id) + } +}; const mapDispatchToProps = dispatch => ({ getPlayer: playerId => dispatch(getPlayer(playerId)), diff --git a/src/components/Player/PlayerProfilePrivate/index.jsx b/src/components/Player/PlayerProfilePrivate/index.jsx new file mode 100644 index 0000000000..230b2656c0 --- /dev/null +++ b/src/components/Player/PlayerProfilePrivate/index.jsx @@ -0,0 +1,70 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; +import styled from 'styled-components'; +import Button from '@material-ui/core/Button'; +import LockIcon from '@material-ui/icons/Lock'; +import config from '../../../config'; + +const Styled = styled.div` +text-align: center; +padding-top: 5%; + +.playerProfilePrivateTitle { + font-size: 2rem; + margin-bottom: 1%; + display: flex; + justify-content: center; + align-items: center; +} + +.lockIcon { + font-size: 1.8rem; + margin-right: 2%; +} + +.playerProfilePrivateDescription { + margin-bottom: 2%; +} + +.signInWithSteamButton { + border: solid 1px #FFFFFF; + color: #FFFFFF; + padding: 1% 2%; +} +` + +const PlayerProfilePrivate = ({ strings }) => { + const handleButtonClick = () => { + window.location.href = `${config.VITE_API_HOST}/login`; + }; + const playerProfilePrivateTitle = (strings.player_profile_private_title || "").toUpperCase(); + + return ( + +
+
+ +
{playerProfilePrivateTitle}
+
+
{strings.player_profile_private_description}
+ +
+
+ ); +} + +PlayerProfilePrivate.propTypes = { + strings: PropTypes.shape({}), +} + +const mapStateToProps = state => ({ + strings: state.app.strings, +}) + +export default connect(mapStateToProps)(PlayerProfilePrivate); \ No newline at end of file diff --git a/src/components/Player/playerPages.jsx b/src/components/Player/playerPages.jsx index 79dadf7f95..13c342fc62 100644 --- a/src/components/Player/playerPages.jsx +++ b/src/components/Player/playerPages.jsx @@ -90,7 +90,8 @@ const playerPages = strings => [{ content: (playerId, routeParams, location) => (), }]; -export default (playerId, strings) => playerPages(strings).map(page => ({ +export default (playerId, strings, isPlayerProfilePublic) => playerPages(strings).map(page => ({ ...page, route: `/players/${playerId}/${page.key}`, + disabled: !isPlayerProfilePublic, })); diff --git a/src/lang/en-US.json b/src/lang/en-US.json index 722c9454ea..0370d5c06b 100644 --- a/src/lang/en-US.json +++ b/src/lang/en-US.json @@ -1203,5 +1203,8 @@ "killed": "killed", "team_courier": "{team}'s courier", "slain_roshan": "Have slain Roshan", - "drew_first_blood": "Drew First Blood" + "drew_first_blood": "Drew First Blood", + "player_profile_private_title": "This profile is private" , + "player_profile_private_description": "If this is your profile, sign in with Steam in order to view your statistics.", + "sign_in_with_steam": "Sign in with Steam" }