147 lines
4.2 KiB
TypeScript
147 lines
4.2 KiB
TypeScript
import { FormattedMessage } from 'react-intl';
|
|
|
|
import { createSelector } from '@reduxjs/toolkit';
|
|
|
|
import { animated, useSpring } from '@react-spring/web';
|
|
|
|
import { me } from 'mastodon/initial_state';
|
|
import { useAppSelector } from 'mastodon/store';
|
|
import type { RootState } from 'mastodon/store';
|
|
import { HASHTAG_PATTERN_REGEX } from 'mastodon/utils/hashtags';
|
|
import { MENTION_PATTERN_REGEX } from 'mastodon/utils/mentions';
|
|
|
|
const selector = createSelector(
|
|
(state: RootState) => state.compose.get('privacy') as string,
|
|
(state: RootState) => !!state.accounts.getIn([me, 'locked']),
|
|
(state: RootState) => state.compose.get('text') as string,
|
|
(state: RootState) => state.compose.get('searchability') as string,
|
|
(state: RootState) => state.compose.get('limited_scope') as string,
|
|
(privacy, locked, text, searchability, limited_scope) => ({
|
|
needsLockWarning: privacy === 'private' && !locked,
|
|
hashtagWarning:
|
|
!['public', 'public_unlisted', 'login'].includes(privacy) &&
|
|
(privacy !== 'unlisted' || searchability !== 'public') &&
|
|
HASHTAG_PATTERN_REGEX.test(text),
|
|
directMessageWarning: privacy === 'direct',
|
|
searchabilityWarning: searchability === 'limited',
|
|
mentionWarning:
|
|
['mutual', 'circle', 'limited'].includes(privacy) &&
|
|
MENTION_PATTERN_REGEX.test(text),
|
|
limitedPostWarning:
|
|
['mutual', 'circle'].includes(privacy) && !limited_scope,
|
|
}),
|
|
);
|
|
|
|
export const Warning = () => {
|
|
const {
|
|
needsLockWarning,
|
|
hashtagWarning,
|
|
directMessageWarning,
|
|
searchabilityWarning,
|
|
mentionWarning,
|
|
limitedPostWarning,
|
|
} = useAppSelector(selector);
|
|
if (needsLockWarning) {
|
|
return (
|
|
<WarningMessage>
|
|
<FormattedMessage
|
|
id='compose_form.lock_disclaimer'
|
|
defaultMessage='Your account is not {locked}. Anyone can follow you to view your follower-only posts.'
|
|
values={{
|
|
locked: (
|
|
<a href='/settings/profile'>
|
|
<FormattedMessage
|
|
id='compose_form.lock_disclaimer.lock'
|
|
defaultMessage='locked'
|
|
/>
|
|
</a>
|
|
),
|
|
}}
|
|
/>
|
|
</WarningMessage>
|
|
);
|
|
}
|
|
|
|
if (hashtagWarning) {
|
|
return (
|
|
<WarningMessage>
|
|
<FormattedMessage
|
|
id='compose_form.hashtag_warning'
|
|
defaultMessage="This post won't be listed under any hashtag as it is unlisted. Only public posts can be searched by hashtag."
|
|
/>
|
|
</WarningMessage>
|
|
);
|
|
}
|
|
|
|
if (directMessageWarning) {
|
|
return (
|
|
<WarningMessage>
|
|
<FormattedMessage
|
|
id='compose_form.encryption_warning'
|
|
defaultMessage='Posts on Mastodon are not end-to-end encrypted. Do not share any dangerous information over Mastodon.'
|
|
/>{' '}
|
|
<a href='/terms' target='_blank'>
|
|
<FormattedMessage
|
|
id='compose_form.direct_message_warning_learn_more'
|
|
defaultMessage='Learn more'
|
|
/>
|
|
</a>
|
|
</WarningMessage>
|
|
);
|
|
}
|
|
|
|
if (searchabilityWarning) {
|
|
return (
|
|
<WarningMessage>
|
|
<FormattedMessage
|
|
id='compose_form.searchability_warning'
|
|
defaultMessage='Self only searchability is not available other mastodon servers. Others can search your post.'
|
|
/>
|
|
</WarningMessage>
|
|
);
|
|
}
|
|
|
|
if (mentionWarning) {
|
|
return (
|
|
<WarningMessage>
|
|
<FormattedMessage
|
|
id='compose_form.mention_warning'
|
|
defaultMessage='When you add a mention to a limited post, the person you are mentioning can also see this post.'
|
|
/>
|
|
</WarningMessage>
|
|
);
|
|
}
|
|
|
|
if (limitedPostWarning) {
|
|
return (
|
|
<WarningMessage>
|
|
<FormattedMessage
|
|
id='compose_form.limited_post_warning'
|
|
defaultMessage='Limited posts are NOT reached Misskey, normal Mastodon or so on.'
|
|
/>
|
|
</WarningMessage>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
};
|
|
|
|
export const WarningMessage: React.FC<React.PropsWithChildren> = ({
|
|
children,
|
|
}) => {
|
|
const styles = useSpring({
|
|
from: {
|
|
opacity: 0,
|
|
transform: 'scale(0.85, 0.75)',
|
|
},
|
|
to: {
|
|
opacity: 1,
|
|
transform: 'scale(1, 1)',
|
|
},
|
|
});
|
|
return (
|
|
<animated.div className='compose-form__warning' style={styles}>
|
|
{children}
|
|
</animated.div>
|
|
);
|
|
};
|