57 lines
2.2 KiB
TypeScript
57 lines
2.2 KiB
TypeScript
import React from 'react';
|
|
import { FormattedMessage } from 'react-intl';
|
|
|
|
import { changeGroupEditorPrivacy } from 'soapbox/actions/groups';
|
|
import List, { ListItem } from 'soapbox/components/list';
|
|
import { Form, FormGroup, Stack, Text } from 'soapbox/components/ui';
|
|
import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
|
|
|
|
const PrivacyStep = () => {
|
|
const dispatch = useAppDispatch();
|
|
|
|
const locked = useAppSelector((state) => state.group_editor.locked);
|
|
|
|
const onChangePrivacy = (value: boolean) => {
|
|
dispatch(changeGroupEditorPrivacy(value));
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Stack className='max-w-sm mx-auto' space={2}>
|
|
<Text size='3xl' weight='bold' align='center'>
|
|
<FormattedMessage id='manage_group.get_started' defaultMessage="Let's get started!" />
|
|
</Text>
|
|
<Text size='lg' theme='muted' align='center'>
|
|
<FormattedMessage id='manage_group.tagline' defaultMessage='Groups connect you with others based on shared interests.' />
|
|
</Text>
|
|
</Stack>
|
|
<Form>
|
|
<FormGroup
|
|
labelText={<FormattedMessage id='manage_group.privacy.label' defaultMessage='Privacy settings' />}
|
|
>
|
|
<List>
|
|
<ListItem
|
|
label={<FormattedMessage id='manage_group.privacy.public.label' defaultMessage='Public' />}
|
|
hint={<FormattedMessage id='manage_group.privacy.public.hint' defaultMessage='Discoverable. Anyone can join.' />}
|
|
onSelect={() => onChangePrivacy(false)}
|
|
isSelected={!locked}
|
|
/>
|
|
|
|
<ListItem
|
|
label={<FormattedMessage id='manage_group.privacy.private.label' defaultMessage='Private (Owner approval required)' />}
|
|
hint={<FormattedMessage id='manage_group.privacy.private.hint' defaultMessage='Discoverable. Users can join after their request is approved.' />}
|
|
onSelect={() => onChangePrivacy(true)}
|
|
isSelected={locked}
|
|
/>
|
|
</List>
|
|
</FormGroup>
|
|
<Text size='sm' theme='muted' align='center'>
|
|
<FormattedMessage id='manage_group.privacy.hint' defaultMessage='These settings cannot be changed later.' />
|
|
</Text>
|
|
</Form>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default PrivacyStep;
|