Add inert oauth consumer buttons

app/soapbox/features/auth_login/components/consumer-button.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { useIntl, defineMessages } from 'react-intl';
+
+import { IconButton, Tooltip } from 'soapbox/components/ui';
+
+const messages = defineMessages({
+  tooltip: { id: 'oauth_consumer.tooltip', defaultMessage: 'Sign in with {provider}' },
+});
+
+/** Map between OAuth providers and brand icons. */
+const BRAND_ICONS: Record<string, string> = {
+  twitter: require('@tabler/icons/brand-twitter.svg'),
+  facebook: require('@tabler/icons/brand-facebook.svg'),
+  google: require('@tabler/icons/brand-google.svg'),
+  microsoft: require('@tabler/icons/brand-windows.svg'),
+  slack: require('@tabler/icons/brand-slack.svg'),
+  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,
+}
+
+/** OAuth consumer button for logging in with a third-party service. */
+const ConsumerButton: React.FC<IConsumerButton> = ({ provider }) => {
+  const intl = useIntl();
+  const icon = BRAND_ICONS[provider] || require('@tabler/icons/key.svg');
+
+  return (
+    <Tooltip text={intl.formatMessage(messages.tooltip, { provider: capitalize(provider) })}>
+      <IconButton
+        className='p-2.5 border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500'
+        iconClassName='w-6 h-6'
+        src={icon}
+      />
+    </Tooltip>
+  );
+};
+
+export default ConsumerButton;

app/soapbox/features/auth_login/components/login_form.tsx

@@ -1,8 +1,12 @@
+import { List as ImmutableList } from 'immutable';
 import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
+import { Button, Form, FormActions, FormGroup, HStack, Input, Stack } from 'soapbox/components/ui';
+import { useAppSelector } from 'soapbox/hooks';
+
+import ConsumerButton from './consumer-button';
 
 const messages = defineMessages({
   username: {
@@ -22,6 +26,7 @@ interface ILoginForm {
 
 const LoginForm: React.FC<ILoginForm> = ({ isLoading, handleSubmit }) => {
   const intl = useIntl();
+  const providers = useAppSelector(state => ImmutableList<string>(state.instance.pleroma.get('oauth_consumer_strategies')));
 
   return (
     <div>
@@ -29,7 +34,7 @@ const LoginForm: React.FC<ILoginForm> = ({ isLoading, handleSubmit }) => {
         <h1 className='text-center font-bold text-2xl'><FormattedMessage id='login_form.header' defaultMessage='Sign In' /></h1>
       </div>
 
-      <div className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto'>
+      <Stack className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto' space={3}>
         <Form onSubmit={handleSubmit}>
           <FormGroup labelText={intl.formatMessage(messages.username)}>
             <Input
@@ -76,7 +81,15 @@ const LoginForm: React.FC<ILoginForm> = ({ isLoading, handleSubmit }) => {
             </Button>
           </FormActions>
         </Form>
-      </div>
+
+        {(providers.size > 0) && (
+          <HStack space={2}>
+            {providers.map(provider => (
+              <ConsumerButton provider={provider} />
+            ))}
+          </HStack>
+        )}
+      </Stack>
     </div>
   );
 };