Revert "reset changes"

This reverts commit fd0e556eb15a6262627d36aaffad73eaa940669b.

src/client/js/components/LoginForm.jsx

@@ -14,6 +14,7 @@ class LoginForm extends React.Component {
     super(props);
 
     this.switchForm = this.switchForm.bind(this);
+    this.handleLoginWithExternalAuth = this.handleLoginWithExternalAuth.bind(this);
     this.renderLocalOrLdapLoginForm = this.renderLocalOrLdapLoginForm.bind(this);
     this.renderExternalAuthLoginForm = this.renderExternalAuthLoginForm.bind(this);
     this.renderExternalAuthInput = this.renderExternalAuthInput.bind(this);
@@ -42,6 +43,10 @@ class LoginForm extends React.Component {
     }
   }
 
+  handleLoginWithExternalAuth(e) {
+    this.props.loginContainer.loginWithExternalAuth(e.currentTarget.id);
+  }
+
   renderLocalOrLdapLoginForm() {
     const { t, csrf } = this.props;
 
@@ -88,22 +93,17 @@ class LoginForm extends React.Component {
   }
 
   renderExternalAuthInput(auth) {
-    const { t, csrf } = this.props;
+    const { t } = this.props;
     return (
       <div key={auth} className="input-group justify-content-center d-flex mt-5">
-        {/* [TODO][GW-2112] use onClick, and delete form tag */}
-        <form role="form" action={`/passport/${auth}`} className="d-inline-flex flex-column">
-          {/* [TODO][GW-2112] An AppContainer gets csrf data */}
-          <input type="hidden" name="_csrf" value={csrf} />
-          <button type="submit" className="btn btn-fill px-0 py-2" id={auth}>
-            <div className="eff"></div>
-            <span className="btn-label p-3">
-              <i className={`fa fa-${auth}`}></i>
-            </span>
-            <span className="btn-label-text p-3">{t('Sign in')}</span>
-          </button>
-          <div className="small text-center">by {auth} Account</div>
-        </form>
+        <button type="button" className="btn btn-fill px-0 py-2" id={auth} onClick={this.handleLoginWithExternalAuth}>
+          <div className="eff"></div>
+          <span className="btn-label p-3">
+            <i className={`fa fa-${auth}`}></i>
+          </span>
+          <span className="btn-label-text p-3">{t('Sign in')}</span>
+        </button>
+        <div className="small text-center">by {auth} Account</div>
       </div>
     );
   }

src/client/js/services/LoginContainer.js

@@ -60,4 +60,21 @@ export default class LoginForm extends Container {
     }
   }
 
+  async loginWithExternalAuth(auth) {
+    try {
+      const axios = require('axios').create({
+        headers: {
+          'Content-Type': 'application/json',
+          'X-Requested-With': 'XMLHttpRequest',
+        },
+        responseType: 'json',
+      });
+      await axios.get(`/passport/${auth}`, { params: { csrf: this.appContainer.csrfToken } });
+    }
+    catch (err) {
+      logger.error(err);
+      toastError(new Error(`Failed to access ${auth} login page`));
+    }
+  }
+
 }