61 lines
2.3 KiB
TypeScript
61 lines
2.3 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='mx-auto max-w-sm' space={2}>
|
||
<img
|
||
className='mx-auto w-32'
|
||
src={require('assets/images/group.svg')}
|
||
alt=''
|
||
/>
|
||
<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;
|