[#915] Update copy on Settings page

Author: catarak

client/modules/User/components/SocialAuthButton.jsx

@@ -17,6 +17,17 @@ const labels = {
   google: 'Login with Google'
 };
 
+const linkLabels = {
+  github: {
+    connect: 'Connect GitHub Account',
+    connected: 'Re-link GitHub Account'
+  },
+  google: {
+    connect: 'Connect Google Account',
+    connected: 'Re-link Google Account'
+  }
+};
+
 const icons = {
   github: GithubIcon,
   google: GoogleIcon
@@ -31,22 +42,35 @@ const StyledButton = styled(Button)`
   width: ${remSize(300)};
 `;
 
-function SocialAuthButton({ service }) {
+function SocialAuthButton({ service, link, connected }) {
   const ServiceIcon = icons[service];
+  let label;
+  if (link) {
+    label = connected ? linkLabels[service].connected : linkLabels[service].connect;
+  } else {
+    label = labels[service];
+  }
   return (
     <StyledButton
       iconBefore={<ServiceIcon aria-label={`${service} logo`} />}
       href={authUrls[service]}
     >
-      {labels[service]}
+      {label}
     </StyledButton>
   );
 }
 
 SocialAuthButton.services = services;
 
 SocialAuthButton.propTypes = {
-  service: PropTypes.oneOf(['github', 'google']).isRequired
+  service: PropTypes.oneOf(['github', 'google']).isRequired,
+  link: PropTypes.bool,
+  connected: PropTypes.bool
+};
+
+SocialAuthButton.defaultProps = {
+  link: false,
+  connected: false
 };
 
 export default SocialAuthButton;

client/modules/User/pages/AccountView.jsx

@@ -13,21 +13,37 @@ import APIKeyForm from '../components/APIKeyForm';
 import Nav from '../../../components/Nav';
 
 function SocialLoginPanel(props) {
+  const { user } = props;
   return (
     <React.Fragment>
       <AccountForm {...props} />
       <h2 className="form-container__divider">Social Login</h2>
       <p className="account__social-text">
-        Use your GitHub or Google account to log into the p5.js Web Editor.
+        Use your GitHub or Google account to login to the p5.js Web Editor.
       </p>
       <div className="account__social-stack">
-        <SocialAuthButton service={SocialAuthButton.services.github} />
-        <SocialAuthButton service={SocialAuthButton.services.google} />
+        <SocialAuthButton
+          service={SocialAuthButton.services.github}
+          link
+          connected={!!user.github}
+        />
+        <SocialAuthButton
+          service={SocialAuthButton.services.google}
+          link
+          connected={!!user.google}
+        />
       </div>
     </React.Fragment>
   );
 }
 
+SocialLoginPanel.propTypes = {
+  user: PropTypes.shape({
+    github: PropTypes.string,
+    google: PropTypes.string
+  }).isRequired
+};
+
 class AccountView extends React.Component {
   componentDidMount() {
     document.body.className = this.props.theme;

server/controllers/user.controller.js

@@ -18,7 +18,9 @@ export function userResponse(user) {
     apiKeys: user.apiKeys,
     verified: user.verified,
     id: user._id,
-    totalSize: user.totalSize
+    totalSize: user.totalSize,
+    github: user.github,
+    google: user.google
   };
 }
 

server/models/user.js

@@ -50,6 +50,7 @@ const userSchema = new Schema({
   verifiedToken: String,
   verifiedTokenExpires: Date,
   github: { type: String },
+  google: { type: String },
   email: { type: String, unique: true },
   tokens: Array,
   apiKeys: { type: [apiKeySchema] },