From 17f1b9548b1bbb16d985941bff148a983ee0870a Mon Sep 17 00:00:00 2001
From: Andrew Plummer <plummer.andrew@gmail.com>
Date: Sat, 27 Apr 2024 06:58:30 +0800
Subject: [PATCH] hide auth buttons unless configured

---
 services/web/Dockerfile.dev                   |  1 -
 .../web/src/components/Auth/Apple/utils.js    |  4 +++
 services/web/src/components/Auth/Federated.js | 36 +++++++++++++------
 .../web/src/components/Auth/Google/utils.js   |  4 +++
 .../web/src/screens/Auth/Login/EmailOtp.js    |  3 +-
 .../web/src/screens/Auth/Login/Passkey.js     |  3 +-
 .../web/src/screens/Auth/Login/Password.js    |  3 +-
 .../web/src/screens/Auth/Login/PhoneOtp.js    |  3 +-
 services/web/src/screens/Auth/Signup.js       |  3 +-
 9 files changed, 39 insertions(+), 21 deletions(-)

diff --git a/services/web/Dockerfile.dev b/services/web/Dockerfile.dev
index 51fafff7..1429efd8 100644
--- a/services/web/Dockerfile.dev
+++ b/services/web/Dockerfile.dev
@@ -13,7 +13,6 @@ COPY . .
 
 RUN --mount=type=cache,target=/root/.yarn YARN_CACHE_FOLDER=/root/.yarn yarn install --frozen-lockfile
 
-
 EXPOSE 2200
 
 CMD ["yarn", "start"]
diff --git a/services/web/src/components/Auth/Apple/utils.js b/services/web/src/components/Auth/Apple/utils.js
index 1bb827b8..aceacba4 100644
--- a/services/web/src/components/Auth/Apple/utils.js
+++ b/services/web/src/components/Auth/Apple/utils.js
@@ -7,6 +7,10 @@ import { APP_URL, APPLE_SERVICE_ID } from 'utils/env';
 const SCRIPT_URL =
   'https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js';
 
+export function canShowAppleSignin() {
+  return !!APPLE_SERVICE_ID;
+}
+
 export async function initialize() {
   await loadScript(SCRIPT_URL);
   AppleID.auth.init({
diff --git a/services/web/src/components/Auth/Federated.js b/services/web/src/components/Auth/Federated.js
index cad09ecc..f30237b6 100644
--- a/services/web/src/components/Auth/Federated.js
+++ b/services/web/src/components/Auth/Federated.js
@@ -1,17 +1,33 @@
+import React from 'react';
+import { Divider } from 'semantic';
+
+import { canShowGoogleSignin } from 'components/Auth/Google/utils';
+import { canShowAppleSignin } from 'components/Auth/Apple/utils';
+
 import GoogleButton from './Google/SignInButton';
 import AppleButton from './Apple/SignInButton';
 
 export default function FederatedLogin(props) {
+  const showApple = canShowAppleSignin();
+  const showGoogle = canShowGoogleSignin();
+
+  if (!showApple && !showGoogle) {
+    return null;
+  }
+
   return (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap: '10px',
-      }}>
-      <GoogleButton small {...props} />
-      <AppleButton small {...props} />
-    </div>
+    <React.Fragment>
+      <Divider horizontal>Or</Divider>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: '10px',
+        }}>
+        {showGoogle && <GoogleButton small {...props} />}
+        {showApple && <AppleButton small {...props} />}
+      </div>
+    </React.Fragment>
   );
 }
diff --git a/services/web/src/components/Auth/Google/utils.js b/services/web/src/components/Auth/Google/utils.js
index 1586bd08..84f1d5b9 100644
--- a/services/web/src/components/Auth/Google/utils.js
+++ b/services/web/src/components/Auth/Google/utils.js
@@ -6,6 +6,10 @@ import { request } from 'utils/api';
 
 const SCRIPT_URL = 'https://accounts.google.com/gsi/client?hl=en-US';
 
+export function canShowGoogleSignin() {
+  return !!GOOGLE_CLIENT_ID;
+}
+
 export async function initialize(callback) {
   await loadScript(SCRIPT_URL);
   google.accounts.id.initialize({
diff --git a/services/web/src/screens/Auth/Login/EmailOtp.js b/services/web/src/screens/Auth/Login/EmailOtp.js
index a11d3216..8efbeaa4 100644
--- a/services/web/src/screens/Auth/Login/EmailOtp.js
+++ b/services/web/src/screens/Auth/Login/EmailOtp.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { Segment, Divider, Grid, Form } from 'semantic';
+import { Segment, Grid, Form } from 'semantic';
 
 import { withSession } from 'stores';
 
@@ -94,7 +94,6 @@ export default class EmailOtpLogin extends React.Component {
                 disabled={loading}
               />
             </Form>
-            <Divider horizontal>Or</Divider>
             <Federated />
           </Segment>
           <Segment secondary>
diff --git a/services/web/src/screens/Auth/Login/Passkey.js b/services/web/src/screens/Auth/Login/Passkey.js
index 44d0b8f3..e48c547b 100644
--- a/services/web/src/screens/Auth/Login/Passkey.js
+++ b/services/web/src/screens/Auth/Login/Passkey.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { Segment, Divider, Grid, Form, Message } from 'semantic';
+import { Segment, Grid, Form, Message } from 'semantic';
 
 import { withSession } from 'stores';
 
@@ -111,7 +111,6 @@ export default class PasskeyLogin extends React.Component {
                 loading={loading}
                 disabled={loading}
               />
-              <Divider horizontal>Or</Divider>
               <Federated
                 onVerifyStart={this.onVerifyStart}
                 onVerifyStop={this.onVerifyStop}
diff --git a/services/web/src/screens/Auth/Login/Password.js b/services/web/src/screens/Auth/Login/Password.js
index 76d0b7fc..f6068571 100644
--- a/services/web/src/screens/Auth/Login/Password.js
+++ b/services/web/src/screens/Auth/Login/Password.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { Segment, Divider, Grid, Form, Message } from 'semantic';
+import { Segment, Grid, Form, Message } from 'semantic';
 
 import { withSession } from 'stores';
 
@@ -113,7 +113,6 @@ export default class PasswordLogin extends React.Component {
                 loading={loading}
                 disabled={loading}
               />
-              <Divider horizontal>Or</Divider>
               <Federated
                 onVerifyStart={this.onVerifyStart}
                 onVerifyStop={this.onVerifyStop}
diff --git a/services/web/src/screens/Auth/Login/PhoneOtp.js b/services/web/src/screens/Auth/Login/PhoneOtp.js
index a6d255be..4045c49f 100644
--- a/services/web/src/screens/Auth/Login/PhoneOtp.js
+++ b/services/web/src/screens/Auth/Login/PhoneOtp.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { Segment, Divider, Grid, Form } from 'semantic';
+import { Segment, Grid, Form } from 'semantic';
 
 import { withSession } from 'stores';
 
@@ -95,7 +95,6 @@ export default class PhoneOtpLogin extends React.Component {
                 disabled={loading}
               />
             </Form>
-            <Divider horizontal>Or</Divider>
             <Federated />
           </Segment>
           <Segment secondary>
diff --git a/services/web/src/screens/Auth/Signup.js b/services/web/src/screens/Auth/Signup.js
index 9e60cad9..fe8149f1 100644
--- a/services/web/src/screens/Auth/Signup.js
+++ b/services/web/src/screens/Auth/Signup.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Form, Segment, Grid, Checkbox, Divider } from 'semantic';
+import { Form, Segment, Grid, Checkbox } from 'semantic';
 import { Link } from 'react-router-dom';
 
 import { withSession } from 'stores';
@@ -246,7 +246,6 @@ export default class PasswordSignup extends React.Component {
 
               {!this.isFederated() && (
                 <React.Fragment>
-                  <Divider horizontal>Or</Divider>
                   <Federated
                     onVerifyStart={this.onVerifyStart}
                     onVerifyStop={this.onVerifyStop}