moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move oauth ConsumersList into its own component

This commit is contained in:
Alex Gleason 2022-08-11 19:46:56 -05:00
parent b7e2d3e0a7
commit 304e9aa880
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
2 changed files with 32 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
app/soapbox/features/auth_login/components/consumers-list.tsx Normal file
View File

@ -0,0 +1,29 @@
import { List as ImmutableList } from 'immutable';
import React from 'react';
import { HStack } from 'soapbox/components/ui';
import { useAppSelector } from 'soapbox/hooks';
import ConsumerButton from './consumer-button';
interface IConsumersList {
}
/** Displays OAuth consumers to log in with. */
const ConsumersList: React.FC<IConsumersList> = () => {
const providers = useAppSelector(state => ImmutableList<string>(state.instance.pleroma.get('oauth_consumer_strategies')));
if (providers.size > 0) {
return (
<HStack space={2}>
{providers.map(provider => (
<ConsumerButton provider={provider} />
))}
</HStack>
);
} else {
return null;
}
};
export default ConsumersList;

15
app/soapbox/features/auth_login/components/login_form.tsx
View File

@ -1,12 +1,10 @@
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, HStack, Input, Stack } from 'soapbox/components/ui';
import { useAppSelector } from 'soapbox/hooks';
import { Button, Form, FormActions, FormGroup, Input, Stack } from 'soapbox/components/ui';
import ConsumerButton from './consumer-button';
import ConsumersList from './consumers-list';
const messages = defineMessages({
username: {
@ -26,7 +24,6 @@ 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>
@ -82,13 +79,7 @@ const LoginForm: React.FC<ILoginForm> = ({ isLoading, handleSubmit }) => {
</FormActions>
</Form>
{(providers.size > 0) && (
<HStack space={2}>
{providers.map(provider => (
<ConsumerButton provider={provider} />
))}
</HStack>
)}
<ConsumersList />
</Stack>
</div>
);