From f2fc3698773e5e40a49ebdf22e02050c1b1538c1 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 11 Aug 2022 22:06:38 -0500
Subject: [PATCH] Allow configuring authProvider in place of registrations

---
 .../auth_login/components/consumer-button.tsx |  7 +---
 app/soapbox/features/landing_page/index.tsx   | 36 +++++++++++++++++--
 .../normalizers/soapbox/soapbox_config.ts     |  1 +
 app/soapbox/utils/strings.ts                  |  7 ++++
 4 files changed, 42 insertions(+), 9 deletions(-)
 create mode 100644 app/soapbox/utils/strings.ts

diff --git a/app/soapbox/features/auth_login/components/consumer-button.tsx b/app/soapbox/features/auth_login/components/consumer-button.tsx
index 8ce78e799..0f003e98a 100644
--- a/app/soapbox/features/auth_login/components/consumer-button.tsx
+++ b/app/soapbox/features/auth_login/components/consumer-button.tsx
@@ -4,6 +4,7 @@ import { useIntl, defineMessages } from 'react-intl';
 import { prepareRequest } from 'soapbox/actions/consumer-auth';
 import { IconButton, Tooltip } from 'soapbox/components/ui';
 import { useAppDispatch } from 'soapbox/hooks';
+import { capitalize } from 'soapbox/utils/strings';
 
 const messages = defineMessages({
   tooltip: { id: 'oauth_consumer.tooltip', defaultMessage: 'Sign in with {provider}' },
@@ -19,12 +20,6 @@ const BRAND_ICONS: Record<string, string> = {
   github: require('@tabler/icons/brand-github.svg'),
 };
 
-/** Capitalize the first letter of a string. */
-// https://stackoverflow.com/a/1026087
-function capitalize(str: string) {
-  return str.charAt(0).toUpperCase() + str.slice(1);
-}
-
 interface IConsumerButton {
   provider: string,
 }
diff --git a/app/soapbox/features/landing_page/index.tsx b/app/soapbox/features/landing_page/index.tsx
index dcb9afd36..a5b0e58e8 100644
--- a/app/soapbox/features/landing_page/index.tsx
+++ b/app/soapbox/features/landing_page/index.tsx
@@ -1,12 +1,15 @@
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 
+import { prepareRequest } from 'soapbox/actions/consumer-auth';
 import { Button, Card, CardBody, Stack, Text } from 'soapbox/components/ui';
 import VerificationBadge from 'soapbox/components/verification_badge';
 import RegistrationForm from 'soapbox/features/auth_login/components/registration_form';
-import { useAppSelector, useFeatures, useSoapboxConfig } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector, useFeatures, useSoapboxConfig } from 'soapbox/hooks';
+import { capitalize } from 'soapbox/utils/strings';
 
 const LandingPage = () => {
+  const dispatch = useAppDispatch();
   const features = useFeatures();
   const soapboxConfig = useSoapboxConfig();
   const pepeEnabled = soapboxConfig.getIn(['extensions', 'pepe', 'enabled']) === true;
@@ -40,6 +43,29 @@ const LandingPage = () => {
     return <RegistrationForm />;
   };
 
+  /** Display login button for external provider. */
+  const renderProvider = () => {
+    const { authProvider } = soapboxConfig;
+
+    return (
+      <Stack space={3}>
+        <Stack>
+          <Text size='2xl' weight='bold' align='center'>
+            <FormattedMessage id='registrations.get_started' defaultMessage="Let's get started!" />
+          </Text>
+        </Stack>
+
+        <Button onClick={() => dispatch(prepareRequest(authProvider))} theme='primary' block>
+          <FormattedMessage
+            id='oauth_consumer.tooltip'
+            defaultMessage='Sign in with {provider}'
+            values={{ provider: capitalize(authProvider) }}
+          />
+        </Button>
+      </Stack>
+    );
+  };
+
   /** Pepe API registrations are open */
   const renderPepe = () => {
     return (
@@ -47,7 +73,9 @@ const LandingPage = () => {
         <VerificationBadge className='h-16 w-16 mx-auto' />
 
         <Stack>
-          <Text size='2xl' weight='bold' align='center'>Let&apos;s get started!</Text>
+          <Text size='2xl' weight='bold' align='center'>
+            <FormattedMessage id='registrations.get_started' defaultMessage="Let's get started!" />
+          </Text>
           <Text theme='muted' align='center'>Social Media Without Discrimination</Text>
         </Stack>
 
@@ -58,7 +86,9 @@ const LandingPage = () => {
 
   // Render registration flow depending on features
   const renderBody = () => {
-    if (pepeEnabled && pepeOpen) {
+    if (soapboxConfig.authProvider) {
+      return renderProvider();
+    } else if (pepeEnabled && pepeOpen) {
       return renderPepe();
     } else if (features.accountCreation && instance.registrations) {
       return renderOpen();
diff --git a/app/soapbox/normalizers/soapbox/soapbox_config.ts b/app/soapbox/normalizers/soapbox/soapbox_config.ts
index 6e9a2c745..a471401c5 100644
--- a/app/soapbox/normalizers/soapbox/soapbox_config.ts
+++ b/app/soapbox/normalizers/soapbox/soapbox_config.ts
@@ -71,6 +71,7 @@ export const CryptoAddressRecord = ImmutableRecord({
 export const SoapboxConfigRecord = ImmutableRecord({
   ads: ImmutableList<Ad>(),
   appleAppId: null,
+  authProvider: '',
   logo: '',
   logoDarkMode: null,
   banner: '',
diff --git a/app/soapbox/utils/strings.ts b/app/soapbox/utils/strings.ts
new file mode 100644
index 000000000..c1c8e08bc
--- /dev/null
+++ b/app/soapbox/utils/strings.ts
@@ -0,0 +1,7 @@
+/** Capitalize the first letter of a string. */
+// https://stackoverflow.com/a/1026087
+function capitalize(str: string) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+export { capitalize };