Hide oauth buttons if the keys are not set

Lokiedu · Nov 13, 2017 · 4bd03a9 · 4bd03a9
1 parent 8767760
commit 4bd03a9
Show file tree

Hide file tree

Showing 4 changed files with 143 additions and 71 deletions.
diff --git a/src/components/login/form.js b/src/components/login/form.js
@@ -29,6 +29,13 @@ import AltButton from '../alt-button';
 import Button from '../button';
 import FormField from '../form/field';
 import { openOauthPopup } from '../../utils/auth';
+import {
+  FACEBOOK_AUTH_ENABLED,
+  GOOGLE_AUTH_ENABLED,
+  TWITTER_AUTH_ENABLED,
+  GITHUB_AUTH_ENABLED,
+  ANY_OAUTH_ENABLED,
+} from '../../consts/auth';
 
 const hiddenStyle = { display: 'none' };
 
@@ -157,44 +164,56 @@ export class LoginFormV2 extends React.Component {
             />
           </div>
         </div>
-        <div className="form__subheader form__background--bright form__subheader--section">
-          {t('login.quick')}
-        </div>
+
+        {ANY_OAUTH_ENABLED &&
+          <div className="form__subheader form__background--bright form__subheader--section">
+            {t('login.quick')}
+          </div>
+        }
+
         <div className="form__background--bright form__alt">
-          <AltButton
-            icon={getIconProps('facebook-official')}
-            theme="list"
-            onClick={this.handleFacebook}
-          >
-            Facebook
-          </AltButton>
-
-          <AltButton
-            className="margin--all_top"
-            icon={getIconProps('google')}
-            theme="list"
-            onClick={this.handleGoogle}
-          >
-            Google
-          </AltButton>
-
-          <AltButton
-            className="margin--all_top"
-            icon={getIconProps('twitter')}
-            theme="list"
-            onClick={this.handleTwitter}
-          >
-            Twitter
-          </AltButton>
-
-          <AltButton
-            className="margin--all_top"
-            icon={getIconProps('github')}
-            theme="list"
-            onClick={this.handleGithub}
-          >
-            Github
-          </AltButton>
+          {FACEBOOK_AUTH_ENABLED &&
+            <AltButton
+              icon={getIconProps('facebook-official')}
+              theme="list"
+              onClick={this.handleFacebook}
+            >
+              Facebook
+            </AltButton>
+          }
+
+          {GOOGLE_AUTH_ENABLED &&
+            <AltButton
+              className="margin--all_top"
+              icon={getIconProps('google')}
+              theme="list"
+              onClick={this.handleGoogle}
+            >
+              Google
+            </AltButton>
+          }
+
+          {TWITTER_AUTH_ENABLED &&
+            <AltButton
+              className="margin--all_top"
+              icon={getIconProps('twitter')}
+              theme="list"
+              onClick={this.handleTwitter}
+            >
+              Twitter
+            </AltButton>
+          }
+
+          {GITHUB_AUTH_ENABLED &&
+            <AltButton
+              className="margin--all_top"
+              icon={getIconProps('github')}
+              theme="list"
+              onClick={this.handleGithub}
+            >
+              Github
+            </AltButton>
+          }
 
           <Link
             className={AltButton.defaultClassName.concat(' margin--all_top form__alt-item--theme_paper')}

diff --git a/src/components/register/v2/form.js b/src/components/register/v2/form.js
@@ -32,6 +32,13 @@ import Button from '../../button';
 import FormField from '../../form/field';
 import { openOauthPopup } from '../../../utils/auth';
 import * as Utils from '../utils';
+import {
+  FACEBOOK_AUTH_ENABLED,
+  GOOGLE_AUTH_ENABLED,
+  TWITTER_AUTH_ENABLED,
+  GITHUB_AUTH_ENABLED,
+  ANY_OAUTH_ENABLED,
+} from '../../../consts/auth';
 import SignupSuccessMessage from './success';
 
 const hiddenStyle = { display: 'none' };
@@ -392,41 +399,57 @@ export class SignupFormV2 extends React.Component {
             />
           </div>
         </div>
-        <div className="form__subheader form__subheader--section form__background--bright">
-          {t('signup.quick')}
-        </div>
+
+        {ANY_OAUTH_ENABLED &&
+          <div className="form__subheader form__subheader--section form__background--bright">
+            {t('signup.quick')}
+          </div>
+        }
+
         <div className="form__background--bright form__alt">
-          <AltButton
-            icon={getIconProps('facebook-official')}
-            theme="list"
-            onClick={this.handleFacebook}
-          >
-            Facebook
-          </AltButton>
-          <AltButton
-            className="margin--all_top"
-            icon={getIconProps('google')}
-            theme="list"
-            onClick={this.handleGoogle}
-          >
-            Google
-          </AltButton>
-          <AltButton
-            className="margin--all_top"
-            icon={getIconProps('twitter')}
-            theme="list"
-            onClick={this.handleTwitter}
-          >
-            Twitter
-          </AltButton>
-          <AltButton
-            className="margin--all_top"
-            icon={getIconProps('github')}
-            theme="list"
-            onClick={this.handleGithub}
-          >
-            Github
-          </AltButton>
+          {FACEBOOK_AUTH_ENABLED &&
+            <AltButton
+              icon={getIconProps('facebook-official')}
+              theme="list"
+              onClick={this.handleFacebook}
+            >
+              Facebook
+            </AltButton>
+          }
+
+          {GOOGLE_AUTH_ENABLED &&
+            <AltButton
+              className="margin--all_top"
+              icon={getIconProps('google')}
+              theme="list"
+              onClick={this.handleGoogle}
+            >
+              Google
+            </AltButton>
+          }
+
+          {TWITTER_AUTH_ENABLED &&
+            <AltButton
+              className="margin--all_top"
+              icon={getIconProps('twitter')}
+              theme="list"
+              onClick={this.handleTwitter}
+            >
+              Twitter
+            </AltButton>
+          }
+
+          {GITHUB_AUTH_ENABLED &&
+            <AltButton
+              className="margin--all_top"
+              icon={getIconProps('github')}
+              theme="list"
+              onClick={this.handleGithub}
+            >
+              Github
+            </AltButton>
+          }
+
           <Link
             className={AltButton.defaultClassName.concat(' margin--all_top form__alt-item--theme_paper')}
             to={pushLogin}

diff --git a/src/consts/auth.js b/src/consts/auth.js
@@ -0,0 +1,26 @@
+/*
+ This file is a part of libertysoil.org website
+ Copyright (C) 2015  Loki Education (Social Enterprise)
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU Affero General Public License for more details.
+
+ You should have received a copy of the GNU Affero General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+// Defined in the webpack config
+export const FACEBOOK_AUTH_ENABLED = process.env.FACEBOOK_AUTH_ENABLED;
+export const GOOGLE_AUTH_ENABLED = process.env.GOOGLE_AUTH_ENABLED;
+export const TWITTER_AUTH_ENABLED = process.env.TWITTER_AUTH_ENABLED;
+export const GITHUB_AUTH_ENABLED = process.env.GITHUB_AUTH_ENABLED;
+export const ANY_OAUTH_ENABLED = FACEBOOK_AUTH_ENABLED ||
+  GOOGLE_AUTH_ENABLED ||
+  TWITTER_AUTH_ENABLED ||
+  GITHUB_AUTH_ENABLED;
diff --git a/webpack/base-config.js b/webpack/base-config.js
@@ -23,6 +23,10 @@ const config = {
   plugins: skipFalsy([
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': opts.dev ? '"development"' : '"production"',
+      'process.env.FACEBOOK_AUTH_ENABLED': !!process.env.FACEBOOK_CLIENT_ID,
+      'process.env.GOOGLE_AUTH_ENABLED': !!process.env.GOOGLE_CLIENT_ID,
+      'process.env.TWITTER_AUTH_ENABLED': !!process.env.TWITTER_CONSUMER_KEY,
+      'process.env.GITHUB_AUTH_ENABLED': !!process.env.GITHUB_CLIENT_ID,
     }),
     opts.dev && new webpack.HotModuleReplacementPlugin(),
     opts.dev && new webpack.NoEmitOnErrorsPlugin(),