Merge pull request #95 from mitmedialab/dsjen/permissions-info

Added descriptions for Facebook and Twitter access
mitmedialab · Jan 11, 2019 · 4e213f2 · 4e213f2
2 parents a5e0551 + 6bf1ec8
commit 4e213f2
Show file tree

Hide file tree

Showing 12 changed files with 111 additions and 110 deletions.
diff --git 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
@@ -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,89 +51,110 @@ 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 (
+      <div>
         <FacebookLogin
           appId={this.props.twitter_data.facebookAppId}
           autoLoad={false}
           fields="name,email,picture"
           scope="public_profile,user_friends,email,user_posts,user_likes"
           callback={this.responseFacebook}
           tag="button"
-          cssClass={facebookButtonClass}
-          textButton={facebookButtonText}
+          cssClass={buttonProps.buttonClass}
+          textButton={buttonProps.buttonText}
           isDisabled={this.state.facebookSuccess}
           disableMobileRedirect={false}
-          icon={<i className={`button-icon ${FBIcon}`} />}
-        />);
+          icon={<i className={`button-icon ${buttonProps.buttonIcon}`} />}
+        />
+        <p><small>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.</small></p>
+      </div>
+    );
+  }
+
+  getTwitterButton = () => {
+    const buttonProps = this.getButtonDefaults(this.state.twitterSuccess, 'Twitter');
+    if (this.state.twitterError) {
+      buttonProps.buttonText = 'Error authenticating twitter. Please try again ';
+    }
+    return (
+      <div>
+        <button onClick={this.onTwitterButtonClick} className={buttonProps.buttonClass} >
+          {buttonProps.buttonText} <i className={`button-icon ${buttonProps.buttonIcon}`} />
+        </button>
+        <p><small>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.</small></p>
+      </div>
+    );
+  }
+
+  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 = (<div />);
+      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 (
       <div className="facebook_twitter_buttons">
-        <button onClick={this.onTwitterButtonClick} className={twitterButtonClass} >
-          {twitterButtonText} <i className={`button-icon ${twitterIcon}`} />
-        </button>
-        {fbButton}
+        {this.getTwitterButton()}
+        {isFacebookEnabled && this.getFacebookButton()}
       </div>
     );
   }
 }
 
-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
diff --git a/client/app/components/Login/Login.js b/client/app/components/Login/Login.js
@@ -109,7 +109,7 @@ class Login extends Component {
                 <hr />
 
                 <div>
-                  <p>Don&apos;t have an account yet?</p>
+                  <p className="registration-description">Don&apos;t have an account yet?</p>
                   <p>
                     <Link to="/register">
                       <button className="button button_wide"> Click here to Register</button>

diff --git 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 <Redirect to="/" />;
   }
-  // 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 = (
-      <div className="profile_content_twitter authorized">
+      <div className="profile-content authorized">
         <p>
           <b>Twitter</b>:
           <a href={`https://twitter.com/@${user.twitter_name}`}>{`@${user.twitter_name}`}</a>
@@ -43,7 +41,7 @@ const Profile = (props) => {
     );
   } else {
     twitterContent = (
-      <div className="profile_content_twitter unauthorized">
+      <div className="profile-content unauthorized">
         <p>
           <b>Twitter</b>: Not Connected
         </p>
@@ -52,28 +50,28 @@ const Profile = (props) => {
   }
   if (user.facebook_authorized) {
     facebookContent = (
-      <div className="profile_content_facebook">
+      <div className="profile-content">
         <p>
           <b>Facebook</b>:
-          <a href={`https://facebook.com/@${user.facebook_name}`}>{user.facebook_name}</a>
+          <a href={`https://facebook.com/@${user.facebook_name}`}> {user.facebook_name}</a>
         </p>
       </div>
     );
   } else {
     facebookContent = (
-      <div className="profile_content_facebook unauthorized">
+      <div className="profile-content unauthorized">
         <p>
           <b>Facebook</b>: Not Connected
         </p>
       </div>
     );
   }
   return (
-    <div className={'page'}>
-      <div className={'profile-content'}>
+    <div className="page">
+      <div className="profile-content">
         <div className="create_account_screen">
           <div className="create_account_form">
-            <div className={'row header'} >
+            <div className="row header" >
               <img className="profile-img" src={avatar} alt={accountName} />
               <div className="profile-info">
                 <h3>{accountName}</h3>
@@ -101,6 +99,7 @@ const Profile = (props) => {
                 <Link to="/feed">
                   <button className="button button_wide"> Back to my feed</button>
                 </Link>
+                <p className="profile-privacy-description"><small>See our <Link to={'/privacy'}> privacy policy</Link> for more information.</small></p>
               </div>
             </div>
           </div>

diff --git 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
@@ -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; } }
+//$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
@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 
 const RegisterSuccess = () => (
   <div>
-    <p>
+    <p className="registration-description">
       You are all set to start using Gobo!
       <br />
       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
@@ -22,7 +22,7 @@ class SelectPersona extends Component {
   render() {
     return (
       <div>
-        <p>
+        <p className="registration-description">
           To tailor your feed, tell us a little about what type of news you read.
           <br />
           Scan the names of popular news sites below and click on the one you read most.