Federation restrictions page See merge request soapbox-pub/soapbox-fe!641merge-requests/642/head
Alex Gleason
3 years ago
commit
3cec2d32e6
@ -0,0 +1,177 @@
|
||||
'use strict';
|
||||
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import Icon from 'soapbox/components/icon';
|
||||
|
||||
const hasRestrictions = remoteInstance => {
|
||||
return remoteInstance
|
||||
.get('federation')
|
||||
.deleteAll(['accept', 'reject_deletes', 'report_removal'])
|
||||
.reduce((acc, value) => acc || value, false);
|
||||
};
|
||||
|
||||
const mapStateToProps = state => {
|
||||
return {
|
||||
instance: state.get('instance'),
|
||||
};
|
||||
};
|
||||
|
||||
export default @connect(mapStateToProps)
|
||||
class InstanceRestrictions extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
intl: PropTypes.object.isRequired,
|
||||
remoteInstance: ImmutablePropTypes.map.isRequired,
|
||||
instance: ImmutablePropTypes.map,
|
||||
};
|
||||
|
||||
renderRestrictions = () => {
|
||||
const { remoteInstance } = this.props;
|
||||
const items = [];
|
||||
|
||||
const {
|
||||
avatar_removal,
|
||||
banner_removal,
|
||||
federated_timeline_removal,
|
||||
followers_only,
|
||||
media_nsfw,
|
||||
media_removal,
|
||||
} = remoteInstance.get('federation').toJS();
|
||||
|
||||
const fullMediaRemoval = media_removal && avatar_removal && banner_removal;
|
||||
const partialMediaRemoval = media_removal || avatar_removal || banner_removal;
|
||||
|
||||
if (followers_only) {
|
||||
items.push((
|
||||
<div className='federation-restriction' key='followers_only'>
|
||||
<div className='federation-restriction__icon'>
|
||||
<Icon id='lock' />
|
||||
</div>
|
||||
<div className='federation-restriction__message'>
|
||||
<FormattedMessage
|
||||
id='federation_restriction.followers_only'
|
||||
defaultMessage='Hidden except to followers'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
));
|
||||
} else if (federated_timeline_removal) {
|
||||
items.push((
|
||||
<div className='federation-restriction' key='federated_timeline_removal'>
|
||||
<div className='federation-restriction__icon'>
|
||||
<Icon id='unlock' />
|
||||
</div>
|
||||
<div className='federation-restriction__message'>
|
||||
<FormattedMessage
|
||||
id='federation_restriction.federated_timeline_removal'
|
||||
defaultMessage='Fediverse timeline removal'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
));
|
||||
}
|
||||
|
||||
if (fullMediaRemoval) {
|
||||
items.push((
|
||||
<div className='federation-restriction' key='full_media_removal'>
|
||||
<div className='federation-restriction__icon'>
|
||||
<Icon id='photo' />
|
||||
</div>
|
||||
<div className='federation-restriction__message'>
|
||||
<FormattedMessage
|
||||
id='federation_restriction.full_media_removal'
|
||||
defaultMessage='Full media removal'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
));
|
||||
} else if (partialMediaRemoval) {
|
||||
items.push((
|
||||
<div className='federation-restriction' key='partial_media_removal'>
|
||||
<div className='federation-restriction__icon'>
|
||||
<Icon id='photo' />
|
||||
</div>
|
||||
<div className='federation-restriction__message'>
|
||||
<FormattedMessage
|
||||
id='federation_restriction.partial_media_removal'
|
||||
defaultMessage='Partial media removal'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
));
|
||||
}
|
||||
|
||||
if (!fullMediaRemoval && media_nsfw) {
|
||||
items.push((
|
||||
<div className='federation-restriction' key='media_nsfw'>
|
||||
<div className='federation-restriction__icon'>
|
||||
<Icon id='eye-slash' />
|
||||
</div>
|
||||
<div className='federation-restriction__message'>
|
||||
<FormattedMessage
|
||||
id='federation_restriction.media_nsfw'
|
||||
defaultMessage='Attachments marked NSFW'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
));
|
||||
}
|
||||
|
||||
return items;
|
||||
}
|
||||
|
||||
renderContent = () => {
|
||||
const { instance, remoteInstance } = this.props;
|
||||
if (!instance || !remoteInstance) return null;
|
||||
|
||||
const host = remoteInstance.get('host');
|
||||
const siteTitle = instance.get('title');
|
||||
|
||||
if (remoteInstance.getIn(['federation', 'reject']) === true) {
|
||||
return (
|
||||
<div className='instance-restrictions__message'>
|
||||
<Icon id='close' />
|
||||
<FormattedMessage
|
||||
id='remote_instance.federation_panel.restricted_message'
|
||||
defaultMessage='{siteTitle} blocks all activities from {host}.'
|
||||
values={{ host, siteTitle }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
} else if (hasRestrictions(remoteInstance)) {
|
||||
return [
|
||||
(
|
||||
<div className='instance-restrictions__message'>
|
||||
<FormattedMessage
|
||||
id='remote_instance.federation_panel.some_restrictions_message'
|
||||
defaultMessage='{siteTitle} has placed some restrictions on {host}.'
|
||||
values={{ host, siteTitle }}
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
this.renderRestrictions(),
|
||||
];
|
||||
} else {
|
||||
return (
|
||||
<div className='instance-restrictions__message'>
|
||||
<Icon id='check' />
|
||||
<FormattedMessage
|
||||
id='remote_instance.federation_panel.no_restrictions_message'
|
||||
defaultMessage='{siteTitle} has placed no restrictions on {host}.'
|
||||
values={{ host, siteTitle }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div className='instance-restrictions'>{this.renderContent()}</div>;
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,59 @@
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import PropTypes from 'prop-types';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { makeGetRemoteInstance } from 'soapbox/selectors';
|
||||
import classNames from 'classnames';
|
||||
import InstanceRestrictions from './instance_restrictions';
|
||||
import Icon from 'soapbox/components/icon';
|
||||
|
||||
const getRemoteInstance = makeGetRemoteInstance();
|
||||
|
||||
const mapStateToProps = (state, ownProps) => {
|
||||
return {
|
||||
remoteInstance: getRemoteInstance(state, ownProps.host),
|
||||
};
|
||||
};
|
||||
|
||||
export default @connect(mapStateToProps)
|
||||
class RestrictedInstance extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
host: PropTypes.string.isRequired,
|
||||
}
|
||||
|
||||
state = {
|
||||
expanded: false,
|
||||
}
|
||||
|
||||
toggleExpanded = e => {
|
||||
this.setState({ expanded: !this.state.expanded });
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
render() {
|
||||
const { remoteInstance } = this.props;
|
||||
const { expanded } = this.state;
|
||||
|
||||
return (
|
||||
<div className={classNames('restricted-instance', {
|
||||
'restricted-instance--reject': remoteInstance.getIn(['federation', 'reject']),
|
||||
'restricted-instance--expanded': expanded,
|
||||
})}
|
||||
>
|
||||
<a href='#' className='restricted-instance__header' onClick={this.toggleExpanded}>
|
||||
<div className='restricted-instance__icon'>
|
||||
<Icon id={expanded ? 'caret-down' : 'caret-right'} />
|
||||
</div>
|
||||
<div className='restricted-instance__host'>
|
||||
{remoteInstance.get('host')}
|
||||
</div>
|
||||
</a>
|
||||
<div className='restricted-instance__restrictions'>
|
||||
<InstanceRestrictions remoteInstance={remoteInstance} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,72 @@
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
import PropTypes from 'prop-types';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import Column from '../ui/components/column';
|
||||
import { createSelector } from 'reselect';
|
||||
import { Map as ImmutableMap, OrderedSet as ImmutableOrderedSet } from 'immutable';
|
||||
import RestrictedInstance from './components/restricted_instance';
|
||||
import Accordion from 'soapbox/features/ui/components/accordion';
|
||||
|
||||
const getHosts = createSelector([
|
||||
state => state.getIn(['instance', 'pleroma', 'metadata', 'federation', 'mrf_simple'], ImmutableMap()),
|
||||
], (simplePolicy) => {
|
||||
return simplePolicy
|
||||
.deleteAll(['accept', 'reject_deletes', 'report_removal'])
|
||||
.reduce((acc, hosts) => acc.union(hosts), ImmutableOrderedSet())
|
||||
.sort();
|
||||
});
|
||||
|
||||
const messages = defineMessages({
|
||||
heading: { id: 'column.federation_restrictions', defaultMessage: 'Federation Restrictions' },
|
||||
boxTitle: { id: 'federation_restrictions.explanation_box.title', defaultMessage: 'Instance-specific policies' },
|
||||
boxMessage: { id: 'federation_restrictions.explanation_box.message', defaultMessage: 'Normally servers on the Fediverse can communicate freely. {siteTitle} has imposed restrictions on the following servers.' },
|
||||
});
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
siteTitle: state.getIn(['instance', 'title']),
|
||||
hosts: getHosts(state),
|
||||
});
|
||||
|
||||
export default @connect(mapStateToProps)
|
||||
@injectIntl
|
||||
class FederationRestrictions extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
intl: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
state = {
|
||||
explanationBoxExpanded: true,
|
||||
}
|
||||
|
||||
toggleExplanationBox = setting => {
|
||||
this.setState({ explanationBoxExpanded: setting });
|
||||
}
|
||||
|
||||
render() {
|
||||
const { intl, hosts, siteTitle } = this.props;
|
||||
const { explanationBoxExpanded } = this.state;
|
||||
|
||||
return (
|
||||
<Column icon='gavel' heading={intl.formatMessage(messages.heading)} backBtnSlim>
|
||||
<div className='explanation-box'>
|
||||
<Accordion
|
||||
headline={intl.formatMessage(messages.boxTitle)}
|
||||
expanded={explanationBoxExpanded}
|
||||
onToggle={this.toggleExplanationBox}
|
||||
>
|
||||
{intl.formatMessage(messages.boxMessage, { siteTitle })}
|
||||
</Accordion>
|
||||
|
||||
</div>
|
||||
|
||||
<div className='federation-restrictions'>
|
||||
{hosts.map(host => <RestrictedInstance key={host} host={host} />)}
|
||||
</div>
|
||||
</Column>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,57 @@
|
||||
.federation-restrictions {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.restricted-instance {
|
||||
&__header {
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
text-decoration: none;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
&__icon {
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
&--expanded &__icon i.fa {
|
||||
transform: translateX(-3px);
|
||||
}
|
||||
|
||||
&--reject &__host {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
&__restrictions {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&--expanded &__restrictions {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.instance-restrictions {
|
||||
padding: 5px 0 5px 15px;
|
||||
border-left: 3px solid hsla(var(--primary-text-color_hsl), 0.4);
|
||||
color: var(--primary-text-color--faint);
|
||||
margin-bottom: 15px;
|
||||
|
||||
.federation-restriction {
|
||||
padding: 7px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&__message {
|
||||
margin-bottom: 10px;
|
||||
|
||||
i.fa {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue