diff --git a/app/assets/javascripts/components/features/compose/components/compose_form.jsx b/app/assets/javascripts/components/features/compose/components/compose_form.jsx index 273ebd83f3d..9edc01ed769 100644 --- a/app/assets/javascripts/components/features/compose/components/compose_form.jsx +++ b/app/assets/javascripts/components/features/compose/components/compose_form.jsx @@ -36,6 +36,8 @@ const ComposeForm = React.createClass({ in_reply_to: ImmutablePropTypes.map, media_count: React.PropTypes.number, me: React.PropTypes.number, + needsPrivacyWarning: React.PropTypes.bool, + mentionedDomains: React.PropTypes.array.isRequired, onChange: React.PropTypes.func.isRequired, onSubmit: React.PropTypes.func.isRequired, onCancelReply: React.PropTypes.func.isRequired, @@ -117,16 +119,29 @@ const ComposeForm = React.createClass({ }, render () { - const { intl } = this.props; - let replyArea = ''; - let publishText = ''; - const disabled = this.props.is_submitting || this.props.is_uploading; + const { intl, needsPrivacyWarning, mentionedDomains } = this.props; + 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) { replyArea = ; } - let reply_to_other = !!this.props.in_reply_to && (this.props.in_reply_to.getIn(['account', 'id']) !== this.props.me); + if (needsPrivacyWarning) { + privacyWarning = ( +
+ {mentionedDomains.join(', ')}, domainsCount: mentionedDomains.length }} + /> +
+ ); + } if (this.props.private) { publishText = {intl.formatMessage(messages.publish)}; @@ -142,6 +157,7 @@ const ComposeForm = React.createClass({ + {privacyWarning} {replyArea} { const getStatus = makeGetStatus(); const mapStateToProps = function (state, props) { + const mentionedUsernamesWithDomains = state.getIn(['compose', 'text']).match(/(?:^|[^\/\w])@([a-z0-9_]+@[a-z0-9\.\-]+)/ig); + return { text: state.getIn(['compose', 'text']), suggestion_token: state.getIn(['compose', 'suggestion_token']), @@ -34,6 +36,8 @@ const makeMapStateToProps = () => { in_reply_to: getStatus(state, state.getIn(['compose', 'in_reply_to'])), media_count: state.getIn(['compose', 'media_attachments']).size, me: state.getIn(['compose', 'me']), + needsPrivacyWarning: state.getIn(['compose', 'private']) && mentionedUsernamesWithDomains !== null, + mentionedDomains: mentionedUsernamesWithDomains !== null ? [...new Set(mentionedUsernamesWithDomains.map(item => item.split('@')[2]))] : [] }; }; diff --git a/app/assets/javascripts/components/locales/en.jsx b/app/assets/javascripts/components/locales/en.jsx index ac1c1a7d53e..95962fd7381 100644 --- a/app/assets/javascripts/components/locales/en.jsx +++ b/app/assets/javascripts/components/locales/en.jsx @@ -41,6 +41,7 @@ const en = { "compose_form.sensitive": "Mark media as sensitive", "compose_form.spoiler": "Hide text behind warning", "compose_form.private": "Mark as private", + "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", "navigation_bar.edit_profile": "Edit profile", "navigation_bar.preferences": "Preferences", diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss index f0948b0f39a..247ea3132e9 100644 --- a/app/assets/stylesheets/components.scss +++ b/app/assets/stylesheets/components.scss @@ -78,6 +78,21 @@ 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 { display: block; line-height: 24px;