Add remote mentions warning when composing a private status
parent
2ab7bd13e2
commit
ec521e6bfc
|
@ -36,6 +36,8 @@ const ComposeForm = React.createClass({
|
||||||
in_reply_to: ImmutablePropTypes.map,
|
in_reply_to: ImmutablePropTypes.map,
|
||||||
media_count: React.PropTypes.number,
|
media_count: React.PropTypes.number,
|
||||||
me: React.PropTypes.number,
|
me: React.PropTypes.number,
|
||||||
|
needsPrivacyWarning: React.PropTypes.bool,
|
||||||
|
mentionedDomains: React.PropTypes.array.isRequired,
|
||||||
onChange: React.PropTypes.func.isRequired,
|
onChange: React.PropTypes.func.isRequired,
|
||||||
onSubmit: React.PropTypes.func.isRequired,
|
onSubmit: React.PropTypes.func.isRequired,
|
||||||
onCancelReply: React.PropTypes.func.isRequired,
|
onCancelReply: React.PropTypes.func.isRequired,
|
||||||
|
@ -117,16 +119,29 @@ const ComposeForm = React.createClass({
|
||||||
},
|
},
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { intl } = this.props;
|
const { intl, needsPrivacyWarning, mentionedDomains } = this.props;
|
||||||
let replyArea = '';
|
const disabled = this.props.is_submitting || this.props.is_uploading;
|
||||||
let publishText = '';
|
|
||||||
const disabled = this.props.is_submitting || this.props.is_uploading;
|
let replyArea = '';
|
||||||
|
let publishText = '';
|
||||||
|
let privacyWarning = '';
|
||||||
|
let reply_to_other = !!this.props.in_reply_to && (this.props.in_reply_to.getIn(['account', 'id']) !== this.props.me);
|
||||||
|
|
||||||
if (this.props.in_reply_to) {
|
if (this.props.in_reply_to) {
|
||||||
replyArea = <ReplyIndicator status={this.props.in_reply_to} onCancel={this.props.onCancelReply} />;
|
replyArea = <ReplyIndicator status={this.props.in_reply_to} onCancel={this.props.onCancelReply} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
let reply_to_other = !!this.props.in_reply_to && (this.props.in_reply_to.getIn(['account', 'id']) !== this.props.me);
|
if (needsPrivacyWarning) {
|
||||||
|
privacyWarning = (
|
||||||
|
<div className='compose-form__warning'>
|
||||||
|
<FormattedMessage
|
||||||
|
id='compose_form.privacy_disclaimer'
|
||||||
|
defaultMessage='Your private status will be delivered to mentioned users on {domains}. Do you trust {domainsCount, plural, one {that server} other {those servers}} to not leak your status?'
|
||||||
|
values={{ domains: <strong>{mentionedDomains.join(', ')}</strong>, domainsCount: mentionedDomains.length }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
if (this.props.private) {
|
if (this.props.private) {
|
||||||
publishText = <span><i className='fa fa-lock' /> {intl.formatMessage(messages.publish)}</span>;
|
publishText = <span><i className='fa fa-lock' /> {intl.formatMessage(messages.publish)}</span>;
|
||||||
|
@ -142,6 +157,7 @@ const ComposeForm = React.createClass({
|
||||||
</div>
|
</div>
|
||||||
</Collapsable>
|
</Collapsable>
|
||||||
|
|
||||||
|
{privacyWarning}
|
||||||
{replyArea}
|
{replyArea}
|
||||||
|
|
||||||
<AutosuggestTextarea
|
<AutosuggestTextarea
|
||||||
|
@ -173,13 +189,6 @@ const ComposeForm = React.createClass({
|
||||||
<Toggle checked={this.props.private} onChange={this.handleChangeVisibility} />
|
<Toggle checked={this.props.private} onChange={this.handleChangeVisibility} />
|
||||||
<span className='compose-form__label__text'><FormattedMessage id='compose_form.private' defaultMessage='Mark as private' /></span>
|
<span className='compose-form__label__text'><FormattedMessage id='compose_form.private' defaultMessage='Mark as private' /></span>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<Motion defaultStyle={{ opacity: 0, height: 0 }}, style={{ opacity: spring((this.props.private || reply_to_other) ? 0 : 100), height: spring((this.props.private || reply_to_other) ? 0 : 39.5) }}>
|
|
||||||
<label className='compose-form__label' style={{ height: `${height}px`, overflow: 'hidden', opacity: opacity / 100 }}>
|
|
||||||
<span className='compose-form__label__text'><FormattedMessage id='compose_form.privacy_disclaimer' defaultMessage='Warning: Private posts are not encrypted, and could be read or boosted by instances or people who do not respect post privacy. This is not true privacy. Do not post senstive information.' /></span>
|
|
||||||
</label>
|
|
||||||
}
|
|
||||||
</Motion>
|
|
||||||
|
|
||||||
<Collapsable isVisible={!(this.props.private || reply_to_other)} fullHeight={39.5}>
|
<Collapsable isVisible={!(this.props.private || reply_to_other)} fullHeight={39.5}>
|
||||||
<label className='compose-form__label'>
|
<label className='compose-form__label'>
|
||||||
|
|
|
@ -19,6 +19,8 @@ const makeMapStateToProps = () => {
|
||||||
const getStatus = makeGetStatus();
|
const getStatus = makeGetStatus();
|
||||||
|
|
||||||
const mapStateToProps = function (state, props) {
|
const mapStateToProps = function (state, props) {
|
||||||
|
const mentionedUsernamesWithDomains = state.getIn(['compose', 'text']).match(/(?:^|[^\/\w])@([a-z0-9_]+@[a-z0-9\.\-]+)/ig);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
text: state.getIn(['compose', 'text']),
|
text: state.getIn(['compose', 'text']),
|
||||||
suggestion_token: state.getIn(['compose', 'suggestion_token']),
|
suggestion_token: state.getIn(['compose', 'suggestion_token']),
|
||||||
|
@ -34,6 +36,8 @@ const makeMapStateToProps = () => {
|
||||||
in_reply_to: getStatus(state, state.getIn(['compose', 'in_reply_to'])),
|
in_reply_to: getStatus(state, state.getIn(['compose', 'in_reply_to'])),
|
||||||
media_count: state.getIn(['compose', 'media_attachments']).size,
|
media_count: state.getIn(['compose', 'media_attachments']).size,
|
||||||
me: state.getIn(['compose', 'me']),
|
me: state.getIn(['compose', 'me']),
|
||||||
|
needsPrivacyWarning: state.getIn(['compose', 'private']) && mentionedUsernamesWithDomains !== null,
|
||||||
|
mentionedDomains: mentionedUsernamesWithDomains !== null ? [...new Set(mentionedUsernamesWithDomains.map(item => item.split('@')[2]))] : []
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -41,7 +41,7 @@ const en = {
|
||||||
"compose_form.sensitive": "Mark media as sensitive",
|
"compose_form.sensitive": "Mark media as sensitive",
|
||||||
"compose_form.spoiler": "Hide text behind warning",
|
"compose_form.spoiler": "Hide text behind warning",
|
||||||
"compose_form.private": "Mark as private",
|
"compose_form.private": "Mark as private",
|
||||||
"compose_form.privacy_disclaimer": "Warning: Private posts are not encrypted, and could be read or boosted by instances or people who do not respect post privacy. This is not true privacy. Do not post senstive information."
|
"compose_form.privacy_disclaimer": "Your private status will be delivered to mentioned users on {domains}. Do you trust {domainsCount, plural, one {that server} other {those servers}} to not leak your status?",
|
||||||
"compose_form.unlisted": "Do not display in public timeline",
|
"compose_form.unlisted": "Do not display in public timeline",
|
||||||
"navigation_bar.edit_profile": "Edit profile",
|
"navigation_bar.edit_profile": "Edit profile",
|
||||||
"navigation_bar.preferences": "Preferences",
|
"navigation_bar.preferences": "Preferences",
|
||||||
|
|
|
@ -78,6 +78,21 @@
|
||||||
color: $color1;
|
color: $color1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.compose-form__warning {
|
||||||
|
color: $color2;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
border: 1px solid $color3;
|
||||||
|
padding: 8px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
strong {
|
||||||
|
color: $color5;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.compose-form__label {
|
.compose-form__label {
|
||||||
display: block;
|
display: block;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
|
|
Reference in New Issue