Authentication improvements - OAuth Login

client/modules/IDE/components/ErrorModal.jsx

@@ -15,6 +15,19 @@ class ErrorModal extends React.Component {
     );
   }
 
+  oauthError() {
+    const { t, service } = this.props;
+    const serviceLabels = {
+      github: 'GitHub',
+      google: 'Google'
+    };
+    return (
+      <p>
+        {t('ErrorModal.LinkMessage', { serviceauth: serviceLabels[service] })}
+      </p>
+    );
+  }
+
   staleSession() {
     return (
       <p>
@@ -42,6 +55,8 @@ class ErrorModal extends React.Component {
             return this.staleSession();
           } else if (this.props.type === 'staleProject') {
             return this.staleProject();
+          } else if (this.props.type === 'oauthError') {
+            return this.oauthError();
           }
         })()}
       </div>
@@ -52,7 +67,12 @@ class ErrorModal extends React.Component {
 ErrorModal.propTypes = {
   type: PropTypes.string.isRequired,
   closeModal: PropTypes.func.isRequired,
-  t: PropTypes.func.isRequired
+  t: PropTypes.func.isRequired,
+  service: PropTypes.string
+};
+
+ErrorModal.defaultProps = {
+  service: ''
 };
 
 export default withTranslation()(ErrorModal);

client/modules/User/actions.js

@@ -270,3 +270,20 @@ export function removeApiKey(keyId) {
         Promise.reject(new Error(response.data.error));
       });
 }
+
+export function unlinkService(service) {
+  return (dispatch) => {
+    if (!['github', 'google'].includes(service)) return;
+    apiClient.delete(`/auth/${service}`)
+      .then((response) => {
+        dispatch({
+          type: ActionTypes.AUTH_USER,
+          user: response.data
+        });
+      }).catch((error) => {
+        const { response } = error;
+        const message = response.message || response.data.error;
+        dispatch(authError(message));
+      });
+  };
+}

client/modules/User/components/AccountForm.jsx

@@ -115,7 +115,7 @@ AccountForm.propTypes = {
     newPassword: PropTypes.object.isRequired, // eslint-disable-line
   }).isRequired,
   user: PropTypes.shape({
-    verified: PropTypes.number.isRequired,
+    verified: PropTypes.string.isRequired,
     emailVerificationInitiate: PropTypes.bool.isRequired,
   }).isRequired,
   handleSubmit: PropTypes.func.isRequired,

client/modules/User/components/SocialAuthButton.jsx

@@ -2,11 +2,12 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import styled from 'styled-components';
 import { withTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
 
 import { remSize } from '../../../theme';
-
 import { GithubIcon, GoogleIcon } from '../../../common/icons';
 import Button from '../../../common/Button';
+import { unlinkService } from '../actions';
 
 const authUrls = {
   github: '/auth/github',
@@ -23,22 +24,51 @@ const services = {
   google: 'google'
 };
 
+const servicesLabels = {
+  github: 'GitHub',
+  google: 'Google'
+};
+
 const StyledButton = styled(Button)`
   width: ${remSize(300)};
 `;
 
-function SocialAuthButton({ service, t }) {
+function SocialAuthButton({
+  service, linkStyle, isConnected, t
+}) {
   const ServiceIcon = icons[service];
-  const labels = {
-    github: t('SocialAuthButton.Github'),
-    google: t('SocialAuthButton.Google')
-  };
+  const serviceLabel = servicesLabels[service];
+  const loginLabel = t('SocialAuthButton.Login', { serviceauth: serviceLabel });
+  const connectLabel = t('SocialAuthButton.Connect', { serviceauth: serviceLabel });
+  const unlinkLabel = t('SocialAuthButton.Unlink', { serviceauth: serviceLabel });
+  const ariaLabel = t('SocialAuthButton.LogoARIA', { serviceauth: service });
+  const dispatch = useDispatch();
+  if (linkStyle) {
+    if (isConnected) {
+      return (
+        <StyledButton
+          iconBefore={<ServiceIcon aria-label={ariaLabel} />}
+          onClick={() => { dispatch(unlinkService(service)); }}
+        >
+          {unlinkLabel}
+        </StyledButton>
+      );
+    }
+    return (
+      <StyledButton
+        iconBefore={<ServiceIcon aria-label={ariaLabel} />}
+        href={authUrls[service]}
+      >
+        {connectLabel}
+      </StyledButton>
+    );
+  }
   return (
     <StyledButton
-      iconBefore={<ServiceIcon aria-label={t('SocialAuthButton.LogoARIA', { serviceauth: service })} />}
+      iconBefore={<ServiceIcon aria-label={ariaLabel} />}
       href={authUrls[service]}
     >
-      {labels[service]}
+      {loginLabel}
     </StyledButton>
   );
 }
@@ -47,9 +77,16 @@ SocialAuthButton.services = services;
 
 SocialAuthButton.propTypes = {
   service: PropTypes.oneOf(['github', 'google']).isRequired,
+  linkStyle: PropTypes.bool,
+  isConnected: PropTypes.bool,
   t: PropTypes.func.isRequired
 };
 
+SocialAuthButton.defaultProps = {
+  linkStyle: false,
+  isConnected: false
+};
+
 const SocialAuthButtonPublic = withTranslation()(SocialAuthButton);
 SocialAuthButtonPublic.services = services;
 export default SocialAuthButtonPublic;

client/modules/User/pages/AccountView.jsx

@@ -5,15 +5,20 @@ import { bindActionCreators } from 'redux';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import { Helmet } from 'react-helmet';
 import { withTranslation } from 'react-i18next';
+import { withRouter, browserHistory } from 'react-router';
+import { parse } from 'query-string';
 import { updateSettings, initiateVerification, createApiKey, removeApiKey } from '../actions';
 import AccountForm from '../components/AccountForm';
 import apiClient from '../../../utils/apiClient';
 import { validateSettings } from '../../../utils/reduxFormUtils';
 import SocialAuthButton from '../components/SocialAuthButton';
 import APIKeyForm from '../components/APIKeyForm';
 import Nav from '../../../components/Nav';
+import ErrorModal from '../../IDE/components/ErrorModal';
+import Overlay from '../../App/components/Overlay';
 
 function SocialLoginPanel(props) {
+  const { user } = props;
   return (
     <React.Fragment>
       <AccountForm {...props} />
@@ -24,19 +29,37 @@ function SocialLoginPanel(props) {
         {props.t('AccountView.SocialLoginDescription')}
       </p>
       <div className="account__social-stack">
-        <SocialAuthButton service={SocialAuthButton.services.github} />
-        <SocialAuthButton service={SocialAuthButton.services.google} />
+        <SocialAuthButton
+          service={SocialAuthButton.services.github}
+          linkStyle
+          isConnected={!!user.github}
+        />
+        <SocialAuthButton
+          service={SocialAuthButton.services.google}
+          linkStyle
+          isConnected={!!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;
   }
 
   render() {
+    const queryParams = parse(this.props.location.search);
+    const showError = !!queryParams.error;
+    const errorType = queryParams.error;
     const accessTokensUIEnabled = window.process.env.UI_ACCESS_TOKEN_ENABLED;
 
     return (
@@ -47,6 +70,21 @@ class AccountView extends React.Component {
 
         <Nav layout="dashboard" />
 
+        {showError &&
+          <Overlay
+            title={this.props.t('ErrorModal.LinkTitle')}
+            ariaLabel={this.props.t('ErrorModal.LinkTitle')}
+            closeOverlay={() => {
+              browserHistory.push(this.props.location.pathname);
+            }}
+          >
+            <ErrorModal
+              type="oauthError"
+              service={errorType}
+            />
+          </Overlay>
+        }
+
         <main className="account-settings">
           <header className="account-settings__header">
             <h1 className="account-settings__title">{this.props.t('AccountView.Settings')}</h1>
@@ -111,13 +149,17 @@ function asyncValidate(formProps, dispatch, props) {
 AccountView.propTypes = {
   previousPath: PropTypes.string.isRequired,
   theme: PropTypes.string.isRequired,
-  t: PropTypes.func.isRequired
+  t: PropTypes.func.isRequired,
+  location: PropTypes.shape({
+    search: PropTypes.string.isRequired,
+    pathname: PropTypes.string.isRequired
+  }).isRequired
 };
 
-export default withTranslation()(reduxForm({
+export default withTranslation()(withRouter(reduxForm({
   form: 'updateAllSettings',
   fields: ['username', 'email', 'currentPassword', 'newPassword'],
   validate: validateSettings,
   asyncValidate,
   asyncBlurFields: ['username', 'email', 'currentPassword']
-}, mapStateToProps, mapDispatchToProps)(AccountView));
+}, mapStateToProps, mapDispatchToProps)(AccountView)));

client/styles/components/_error-modal.scss

@@ -17,6 +17,10 @@
 
 .error-modal__content {
   padding: #{20 / $base-font-size}rem;
-  padding-top: 0;
+  padding-top: #{40 / $base-font-size}rem;
   padding-bottom: #{60 / $base-font-size}rem;
+  max-width: #{500 / $base-font-size}rem;
+  & p {
+    font-size: #{16 / $base-font-size}rem;
+  }
 }

package.json

@@ -195,6 +195,7 @@
     "primer-tooltips": "^1.5.11",
     "prop-types": "^15.6.2",
     "q": "^1.4.1",
+    "query-string": "^6.13.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-helmet": "^5.1.3",