#135: switch register/login buttons in UserBar depending on current page

This commit is contained in:
SleepWalker
2016-06-05 13:31:17 +03:00
parent d0bfa9fdb8
commit e0ab116a9a
5 changed files with 40 additions and 7 deletions

View File

@@ -1,3 +1,4 @@
{ {
"register": "Join" "register": "Join",
"login": "Sign in"
} }

View File

@@ -1,4 +1,4 @@
import React, { Component } from 'react'; import React, { Component, PropTypes } from 'react';
import { Link } from 'react-router'; import { Link } from 'react-router';
import { FormattedMessage as Message } from 'react-intl'; import { FormattedMessage as Message } from 'react-intl';
@@ -15,19 +15,41 @@ import LoggedInPanel from './LoggedInPanel';
export default class Userbar extends Component { export default class Userbar extends Component {
static displayName = 'Userbar'; static displayName = 'Userbar';
static propTypes = { static propTypes = {
user: userShape user: userShape,
guestAction: PropTypes.oneOf(['register', 'login'])
};
static defaultProps = {
guestAction: 'register'
}; };
render() { render() {
const { user } = this.props; const { user } = this.props;
let { guestAction } = this.props;
switch (guestAction) {
case 'login':
guestAction = (
<Link to="/login" className={buttons.blue}>
<Message {...messages.login} />
</Link>
);
break;
case 'register':
default:
guestAction = (
<Link to="/register" className={buttons.blue}>
<Message {...messages.register} />
</Link>
);
break;
}
return ( return (
<div className={styles.userbar}> <div className={styles.userbar}>
{user.isGuest {user.isGuest
? ( ? (
<Link to="/register" className={buttons.blue}> guestAction
<Message {...messages.register} />
</Link>
) )
: ( : (
<LoggedInPanel {...this.props} /> <LoggedInPanel {...this.props} />

View File

@@ -114,6 +114,7 @@
"components.profile.preferencesDescription": "Here you can change the key preferences of your account. Please note that all actions must be confirmed by entering a password.", "components.profile.preferencesDescription": "Here you can change the key preferences of your account. Please note that all actions must be confirmed by entering a password.",
"components.profile.projectRules": "project rules", "components.profile.projectRules": "project rules",
"components.profile.twoFactorAuth": "Two factor auth", "components.profile.twoFactorAuth": "Two factor auth",
"components.userbar.login": "Sign in",
"components.userbar.logout": "Logout", "components.userbar.logout": "Logout",
"components.userbar.register": "Join", "components.userbar.register": "Join",
"pages.root.siteName": "Ely.by", "pages.root.siteName": "Ely.by",

View File

@@ -114,6 +114,7 @@
"components.profile.preferencesDescription": "Здесь вы можете сменить ключевые параметры вашего аккаунта. Обратите внимание, что для всех действий необходимо подтверждение при помощи ввода пароля.", "components.profile.preferencesDescription": "Здесь вы можете сменить ключевые параметры вашего аккаунта. Обратите внимание, что для всех действий необходимо подтверждение при помощи ввода пароля.",
"components.profile.projectRules": "правилам проекта", "components.profile.projectRules": "правилам проекта",
"components.profile.twoFactorAuth": "Двухфакторная аутентификация", "components.profile.twoFactorAuth": "Двухфакторная аутентификация",
"components.userbar.login": "Вход",
"components.userbar.logout": "Выход", "components.userbar.logout": "Выход",
"components.userbar.register": "Регистрация", "components.userbar.register": "Регистрация",
"pages.root.siteName": "Ely.by", "pages.root.siteName": "Ely.by",

View File

@@ -12,6 +12,8 @@ import styles from './root.scss';
import messages from './RootPage.intl.json'; import messages from './RootPage.intl.json';
function RootPage(props) { function RootPage(props) {
const isRegisterPage = props.location.pathname === '/register';
return ( return (
<div className={styles.root}> <div className={styles.root}>
<div id="view-port" className={classNames(styles.viewPort, { <div id="view-port" className={classNames(styles.viewPort, {
@@ -23,7 +25,10 @@ function RootPage(props) {
<Message {...messages.siteName} /> <Message {...messages.siteName} />
</Link> </Link>
<div className={styles.userbar}> <div className={styles.userbar}>
<Userbar {...props} onLogout={props.logout} /> <Userbar {...props}
onLogout={props.logout}
guestAction={isRegisterPage ? 'login' : 'register'}
/>
</div> </div>
</div> </div>
</div> </div>
@@ -38,6 +43,9 @@ function RootPage(props) {
RootPage.displayName = 'RootPage'; RootPage.displayName = 'RootPage';
RootPage.propTypes = { RootPage.propTypes = {
location: PropTypes.shape({
pathname: PropTypes.string
}).isRequired,
children: PropTypes.element, children: PropTypes.element,
logout: PropTypes.func.isRequired, logout: PropTypes.func.isRequired,
isPopupActive: PropTypes.bool isPopupActive: PropTypes.bool