Show error popup when linking OAuth accounts

Author: catarak

client/modules/IDE/components/ErrorModal.jsx

@@ -15,6 +15,15 @@ class ErrorModal extends React.Component {
     );
   }
 
+  oauthError() {
+    return (
+      <p>
+        {'There was an error linking your GitHub account. This account has already been linked'}
+        {' to another account.'}
+      </p>
+    );
+  }
+
   staleSession() {
     return (
       <p>
@@ -42,6 +51,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>

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/pages/AccountView.jsx

@@ -5,13 +5,17 @@ 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;
@@ -53,6 +57,9 @@ class AccountView extends React.Component {
   }
 
   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 (
@@ -63,6 +70,20 @@ class AccountView extends React.Component {
 
         <Nav layout="dashboard" />
 
+        {showError &&
+          <Overlay
+            title="Error Linking Account"
+            ariaLabel="OAuth Error"
+            closeOverlay={() => {
+              browserHistory.push(this.props.location.pathname);
+            }}
+          >
+            <ErrorModal
+              type="oauthError"
+            />
+          </Overlay>
+        }
+
         <main className="account-settings">
           <header className="account-settings__header">
             <h1 className="account-settings__title">{this.props.t('AccountView.Settings')}</h1>
@@ -127,13 +148,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-lock.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",

package.json

@@ -140,7 +140,7 @@ app.get('/auth/github/callback', (req, res, next) => {
   passport.authenticate('github', { failureRedirect: '/login' }, (err, user) => {
     if (err) {
       // use query string param to show error;
-      res.redirect('/account');
+      res.redirect('/account?error=github');
       return;
     }
 
@@ -159,7 +159,7 @@ app.get('/auth/google/callback', (req, res, next) => {
   passport.authenticate('google', { failureRedirect: '/login' }, (err, user) => {
     if (err) {
       // use query string param to show error;
-      res.redirect('/account');
+      res.redirect('/account?error=google');
       return;
     }