55 lines
1.8 KiB
TypeScript
55 lines
1.8 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='Privacy settings'
|
||
|
|
>
|
||
|
|
<List>
|
||
|
|
<ListItem
|
||
|
|
label='Public'
|
||
|
|
hint='Discoverable. Anyone can join.'
|
||
|
|
onSelect={() => onChangePrivacy(false)}
|
||
|
|
isSelected={!locked}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<ListItem
|
||
|
|
label='Private (Owner approval required)'
|
||
|
|
hint='Discoverable. Users can join after their request is approved.'
|
||
|
|
onSelect={() => onChangePrivacy(true)}
|
||
|
|
isSelected={locked}
|
||
|
|
/>
|
||
|
|
</List>
|
||
|
|
</FormGroup>
|
||
|
|
<Text size='sm' theme='muted' align='center'>These settings cannot be changed later.</Text>
|
||
|
|
</Form>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default PrivacyStep;
|