diff --git a/client/app/components/App/app.scss b/client/app/components/App/app.scss index f5a386cc..2a1de019 100755 --- a/client/app/components/App/app.scss +++ b/client/app/components/App/app.scss @@ -140,7 +140,6 @@ h1 { .page { padding: 0em 2em; - word-break: break-all; } .card { @@ -180,7 +179,6 @@ button { } a, a:hover, a:focus, a:active a:visited{ - color: $text-color; text-decoration: none; } diff --git a/client/app/components/FacebookTwitterButtons/FacebookTwitterButtons.js b/client/app/components/FacebookTwitterButtons/FacebookTwitterButtons.js index b85a6afb..62b5b313 100644 --- a/client/app/components/FacebookTwitterButtons/FacebookTwitterButtons.js +++ b/client/app/components/FacebookTwitterButtons/FacebookTwitterButtons.js @@ -7,15 +7,6 @@ import { getAuthUrl, waitForTwitterCallback, fetchFacebookAppId } from '../../ac import { postFacebookResponseToServer } from '../../utils/apiRequests'; -const propTypes = { - dispatch: PropTypes.func.isRequired, - twitter_data: PropTypes.object.isRequired, - facebookConnected: PropTypes.bool, - twitterConnected: PropTypes.bool, - auth: PropTypes.object, - // onFinish: PropTypes.func.isRequired, -}; - const MAX_POLLS = 120; class FacebookTwitterButtons extends Component { @@ -29,9 +20,6 @@ class FacebookTwitterButtons extends Component { polling: false, pollCount: 0, }; - this.responseFacebook = this.responseFacebook.bind(this); - this.onTwitterButtonClick = this.onTwitterButtonClick.bind(this); - this.facebookAppId = ''; } componentWillMount() { @@ -43,7 +31,6 @@ class FacebookTwitterButtons extends Component { nextProps.twitter_data.oauth_url != null) { if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { // redirect to twitter auth - console.log(nextProps.twitter_data.oauth_url); window.location.replace(nextProps.twitter_data.oauth_url); } else { window.open(nextProps.twitter_data.oauth_url, '_blank', 'width=500,height=500'); @@ -64,62 +51,31 @@ class FacebookTwitterButtons extends Component { clearTimeout(this.timeout); } - onTwitterButtonClick() { + onTwitterButtonClick = () => { this.props.dispatch(getAuthUrl()); this.startPoll(); this.setState({ polling: true }); } - startPoll() { - if (this.state.pollCount > MAX_POLLS) { - this.setState({ twitterError: true }); - } else { - this.timeout = setTimeout(() => this.props.dispatch(waitForTwitterCallback()), 1000); - this.setState({ pollCount: this.state.pollCount + 1 }); - } - } - - responseFacebook(response) { - console.log(response); - if ('name' in response) { - this.setState({ facebookSuccess: true }); - // dispatch response to server - postFacebookResponseToServer(response); - } - this.isDone(); - } - isDone() { - if (this.state.facebookSuccess && this.state.twitterSuccess) { - // this.props.onFinish() + getConnectButtonClass = (success) => { + let buttonClass = 'button button_wide '; + if (success) { + buttonClass += 'disabled'; } + return buttonClass; } - render() { - let facebookButtonClass = 'button button_wide '; - let twitterButtonClass = 'button button_wide '; + getButtonDefaults = (success, platformName) => ({ + buttonClass: this.getConnectButtonClass(success), + buttonText: success ? `${platformName} Connected` : `Connect your ${platformName}`, + buttonIcon: success ? 'icon-tick' : '', + }) - if (this.state.facebookSuccess) { - facebookButtonClass += 'disabled'; - } - - if (this.state.twitterSuccess) { - twitterButtonClass += 'disabled'; - } - const successIcon = 'icon-tick'; - const addIcon = 'icon-plus'; - - const FBIcon = this.state.facebookSuccess ? successIcon : addIcon; - const twitterIcon = this.state.twitterSuccess ? successIcon : addIcon; - - const facebookButtonText = this.state.facebookSuccess ? 'Facebook Connected' : 'Connect your Facebook'; - let twitterButtonText = this.state.twitterSuccess ? 'Twitter Connected' : 'Connect your Twitter'; - if (this.state.twitterError) { - twitterButtonText = 'Error authenticating twitter. Please try again '; - } - let fbButton; - if (this.props.twitter_data.isFacebookEnabled && this.props.twitter_data.facebookAppId) { - fbButton = ( + getFacebookButton = () => { + const buttonProps = this.getButtonDefaults(this.state.facebookSuccess, 'Facebook'); + return ( +
} - />); + icon={} + /> +

Connect to Facebook to allow Gobo to read Facebook pages that you like. Gobo displays public posts from liked pages for you to filter. Unfortunately we cannot display posts on your feed from your friends.

+
+ ); + } + + getTwitterButton = () => { + const buttonProps = this.getButtonDefaults(this.state.twitterSuccess, 'Twitter'); + if (this.state.twitterError) { + buttonProps.buttonText = 'Error authenticating twitter. Please try again '; + } + return ( +
+ +

Connect to Twitter to allow Gobo to read tweets from your timeline. Gobo displays up to 500 of the most recent posts from your feed for you to filter.

+
+ ); + } + + isDone() { + if (this.state.facebookSuccess && this.state.twitterSuccess) { + // this.props.onFinish() + } + } + + responseFacebook = (response) => { + if ('name' in response) { + this.setState({ facebookSuccess: true }); + // dispatch response to server + postFacebookResponseToServer(response); + } + this.isDone(); + } + + startPoll() { + if (this.state.pollCount > MAX_POLLS) { + this.setState({ twitterError: true }); } else { - fbButton = (
); + this.timeout = setTimeout(() => this.props.dispatch(waitForTwitterCallback()), 1000); + this.setState({ pollCount: this.state.pollCount + 1 }); } + } + + render() { + const isFacebookEnabled = this.props.twitter_data.isFacebookEnabled && this.props.twitter_data.facebookAppId; return (
- - {fbButton} + {this.getTwitterButton()} + {isFacebookEnabled && this.getFacebookButton()}
); } } -FacebookTwitterButtons.propTypes = propTypes; +FacebookTwitterButtons.defaultProps = { + facebookConnected: false, + twitterConnected: false, +}; + +FacebookTwitterButtons.propTypes = { + dispatch: PropTypes.func.isRequired, + twitter_data: PropTypes.object.isRequired, + facebookConnected: PropTypes.bool, + twitterConnected: PropTypes.bool, + auth: PropTypes.object.isRequired, +}; export default connect(state => ({ twitter_data: state.twitterLogin, auth: state.auth }))(FacebookTwitterButtons); diff --git a/client/app/components/FacebookTwitterButtons/facebook_twitter_buttons.scss b/client/app/components/FacebookTwitterButtons/facebook_twitter_buttons.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/client/app/components/Login/Login.js b/client/app/components/Login/Login.js index 968876b6..2e21ed3b 100644 --- a/client/app/components/Login/Login.js +++ b/client/app/components/Login/Login.js @@ -109,7 +109,7 @@ class Login extends Component {
-

Don't have an account yet?

+

Don't have an account yet?

diff --git a/client/app/components/Profile/Profile.js b/client/app/components/Profile/Profile.js index d5b73368..39803acd 100644 --- a/client/app/components/Profile/Profile.js +++ b/client/app/components/Profile/Profile.js @@ -19,9 +19,7 @@ const Profile = (props) => { if (!props.auth.isAuthenticated) { return ; } - // todo: remove inline styles const user = props.auth.user; - // console.log(user) const avatar = user.facebook_picture_url || user.avatar || '/images/avatar.png'; let twitterContent; let facebookContent; @@ -33,7 +31,7 @@ const Profile = (props) => { } if (user.twitter_authorized) { twitterContent = ( -

+

Twitter: {`@${user.twitter_name}`} @@ -43,7 +41,7 @@ const Profile = (props) => { ); } else { twitterContent = ( -

+

Twitter: Not Connected

@@ -52,16 +50,16 @@ const Profile = (props) => { } if (user.facebook_authorized) { facebookContent = ( -
+ ); } else { facebookContent = ( -
+

Facebook: Not Connected

@@ -69,11 +67,11 @@ const Profile = (props) => { ); } return ( -
-
+
+
-
+
{accountName}

{accountName}

@@ -101,6 +99,7 @@ const Profile = (props) => { +

See our privacy policy for more information.

diff --git a/client/app/components/Profile/profile.scss b/client/app/components/Profile/profile.scss index 101912f9..031d9620 100644 --- a/client/app/components/Profile/profile.scss +++ b/client/app/components/Profile/profile.scss @@ -1,18 +1,15 @@ .profile-content { + $large-buffer: $padding-large-vertical * 2; + max-width: 900px; margin: 0 auto; - p { - text-align: left !important; - margin-bottom: 0px !important; - } - - .profile_content_twitter { - margin-top: 20px; + .create_account_screen { + margin-bottom: 0px; } - .profile_content_facebook { - margin-top: 20px; + .profile-content { + margin-top: $large-buffer; } .header { @@ -26,14 +23,14 @@ .profile-img { display: inline-block; max-height: 140px; - /* vertical-align: top; */ + vertical-align: top; padding-left: 20px; padding-top: 60px; } .profile-info { display: inline-block; - padding: 20px; + padding: $large-buffer; h3 { margin-top: 0; @@ -42,7 +39,11 @@ } .facebook_twitter_buttons { - margin-bottom: 40px; + margin-bottom: $padding-large-vertical; + } + + .profile-privacy-description { + margin-top: $large-buffer; } } diff --git a/client/app/components/Register/register.scss b/client/app/components/Register/register.scss index 0f16aadf..a63df45a 100644 --- a/client/app/components/Register/register.scss +++ b/client/app/components/Register/register.scss @@ -38,8 +38,11 @@ $button-default-color: #fff; font-weight: 100; letter-spacing: .7px; color: $text-color; - text-align: center; + } + + .registration-description { margin: 0 0 30px 0; + text-align: center; } .checkbox_group { @@ -193,4 +196,4 @@ $button-default-color: #fff; //$-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } //$-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } -//$keyframes fadeIn { from { opacity:0; } to { opacity:1; } } \ No newline at end of file +//$keyframes fadeIn { from { opacity:0; } to { opacity:1; } } diff --git a/client/app/components/Register/registerSteps/RegisterSuccess.js b/client/app/components/Register/registerSteps/RegisterSuccess.js index d85bcae7..32132fe7 100644 --- a/client/app/components/Register/registerSteps/RegisterSuccess.js +++ b/client/app/components/Register/registerSteps/RegisterSuccess.js @@ -3,7 +3,7 @@ import { Link } from 'react-router-dom'; const RegisterSuccess = () => (
-

+

You are all set to start using Gobo!
Go ahead and check out your feed diff --git a/client/app/components/Register/registerSteps/SelectPersona.js b/client/app/components/Register/registerSteps/SelectPersona.js index 09090bc5..0fe6af35 100644 --- a/client/app/components/Register/registerSteps/SelectPersona.js +++ b/client/app/components/Register/registerSteps/SelectPersona.js @@ -22,7 +22,7 @@ class SelectPersona extends Component { render() { return (

-

+

To tailor your feed, tell us a little about what type of news you read.
Scan the names of popular news sites below and click on the one you read most. diff --git a/client/app/components/Register/registerSteps/SignupEmailPassword.js b/client/app/components/Register/registerSteps/SignupEmailPassword.js index 49a06cee..389f9803 100644 --- a/client/app/components/Register/registerSteps/SignupEmailPassword.js +++ b/client/app/components/Register/registerSteps/SignupEmailPassword.js @@ -44,8 +44,6 @@ class SignupEmailPassword extends Component { && this.refs.password.isValid() && this.refs.passwordConfirm.isValid(); - // console.log(canProceed, this.refs.password.isValid(), this.refs.passwordConfirm.isValid()); - if (canProceed) { this.props.dispatch(registerUser(this.state.email, this.state.password)); } else { @@ -84,11 +82,8 @@ class SignupEmailPassword extends Component { render() { return (

-
- -

Register with email and password

- +

Register with email and password

- - - diff --git a/client/app/components/Register/registerSteps/SocialAuth.js b/client/app/components/Register/registerSteps/SocialAuth.js index e16a5051..f0434693 100644 --- a/client/app/components/Register/registerSteps/SocialAuth.js +++ b/client/app/components/Register/registerSteps/SocialAuth.js @@ -9,7 +9,7 @@ const propTypes = { const SocialAuth = props => (
-

+

Please Authenticate to your Facebook and Twitter
accounts so we can show you your feed diff --git a/client/app/constants/index.js b/client/app/constants/index.js index 3ee7a23c..751942f2 100644 --- a/client/app/constants/index.js +++ b/client/app/constants/index.js @@ -18,6 +18,6 @@ export const DELETE_USER_REQUEST = 'DELETE_USER_REQUEST'; export const DELETE_USER_SUCCESS = 'DELETE_USER_SUCCESS'; export const DELETE_USER_FAILURE = 'DELETE_USER_FAILURE'; -export const VERSION = 'v1.6.0'; +export const VERSION = 'v1.7.0'; export const API_URL = ''; // process.env.NODE_ENV === 'production' ? '': 'http://localhost:5000/'