const DeleteMyAccountStep2 = props => (
<div className={styles.step}>
<p className={styles.description}>
{t('delete_request.step_2.description')}
</p>
<p className={styles.description}>
{t('delete_request.step_2.to_download')}
<strong className={styles.block}>
{t('delete_request.step_2.path')}
</strong>
</p>
<div className={cn(styles.actions)}>
<Button
className={cn(styles.button, styles.cancel)}
onClick={props.cancel}
>
{t('delete_request.cancel')}
</Button>
<Button
className={cn(styles.button, styles.proceed)}
onClick={props.goToNextStep}
>
{t('delete_request.proceed')}
</Button>
</div>
</div>
);
const BanUserDialog = ({ showBanDialog, closeBanDialog, banUser }) => (
<Dialog
open={showBanDialog}
className={cn(styles.dialog, 'talk-ban-user-dialog')}
>
<span className={styles.close} onClick={closeBanDialog}>
×
</span>
<h2>{t('talk-plugin-moderation-actions.ban_user_dialog_headline')}</h2>
<h3>{t('talk-plugin-moderation-actions.ban_user_dialog_sub')}</h3>
<p className={styles.copy}>
{t('talk-plugin-moderation-actions.ban_user_dialog_copy')}
</p>
<div className={styles.buttons}>
<Button
cStyle="cancel"
onClick={closeBanDialog}
className={cn(styles.cancel, 'talk-ban-user-dialog-button-cancel')}
raised
>
{t('talk-plugin-moderation-actions.ban_user_dialog_cancel')}
</Button>
<Button
cStyle="black"
onClick={banUser}
className={cn(styles.confirm, 'talk-ban-user-dialog-button-confirm')}
raised
>
{t('talk-plugin-moderation-actions.ban_user_dialog_yes')}
</Button>
</div>
</Dialog>
);
render() {
const { alreadyTagged, deleteTag, comment, asset } = this.props;
return alreadyTagged ? (
<span
className={cn(styles.tag, styles.featured)}
onClick={deleteTag}
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
>
<Icon name="star_outline" className={cn(styles.tagIcon)} />
{!this.state.on
? t('talk-plugin-featured-comments.featured')
: t('talk-plugin-featured-comments.un_feature')}
</span>
) : (
<span
className={cn(styles.tag, { [styles.featured]: alreadyTagged })}
onClick={() => this.openFeaturedDialog(comment, asset)}
>
<Icon name="star_outline" className={cn(styles.tagIcon)} />
{alreadyTagged
? t('talk-plugin-featured-comments.featured')
: t('talk-plugin-featured-comments.feature')}
</span>
);
}
const IgnoreUserSection = ({ ignoredUsers, stopIgnoringUser }) => (
<section className={'talk-plugin-ignore-user-section'}>
<h3>{t('talk-plugin-ignore-user.section_title')}</h3>
{!ignoredUsers.length && (
<p className={styles.blank}>{t('talk-plugin-ignore-user.blank_info')}</p>
)}
{!!ignoredUsers.length && (
<div>
<p>{t('talk-plugin-ignore-user.section_info')}</p>
<ul className={styles.list}>
{ignoredUsers.map(({ username, id }) => (
<li className={styles.listItem} key={id}>
<span className={styles.username}>{username}</span>
<button
onClick={() => stopIgnoringUser({ id })}
className={styles.button}
>
{t('talk-plugin-ignore-user.stop_ignoring')}
</button>
</li>
))}
</ul>
</div>
)}
</section>
);
export const FakeComment = ({ username, created_at, body }) => (
<div className={styles.root}>
<span className={styles.authorName}>{username}</span>
<CommentTimestamp created_at={created_at} />
<div className={styles.body}>{body}</div>
<div className={styles.footer}>
<div>
<button className={styles.button}>
<span className={styles.label}>{t('like')}</span>
<Icon name="thumb_up" className={styles.icon} />
</button>
<button className={styles.button}>
<span className={styles.label}>{t('reply')}</span>
<Icon name="reply" className={styles.icon} />
</button>
</div>
<div>
<button className={styles.button}>
<span className={styles.label}>{t('permalink')}</span>
<Icon name="link" className={styles.icon} />
</button>
<button className={styles.button}>
<span className={styles.label}>{t('report')}</span>
<Icon name="flag" className={styles.icon} />
</button>
</div>
</div>
</div>
);
render() {
const { count, alreadyReacted } = this.props;
return (
<div className={cn(styles.container, `${plugin}-container`)}>
<button
className={cn(
styles.button,
{ [styles.loved]: alreadyReacted },
`${plugin}-button`
)}
onClick={this.handleClick}
>
<span className={cn(`${plugin}-label`, styles.label)}>
{t(
alreadyReacted
? 'talk-plugin-love.loved'
: 'talk-plugin-love.love'
)}
</span>
<Icon name="favorite" className={cn(`${plugin}-icon`, styles.icon)} />
<span className={`${plugin}-count`}>{count > 0 && count}</span>
</button>
</div>
);
}
const EmailVerificationBannerInfo = ({ onResendEmailVerification }) => (
<Banner icon="email" title={t('talk-plugin-notifications.banner_info.title')}>
<p>
{t('talk-plugin-notifications.banner_info.text')}
<a
className={styles.link}
onClick={() => {
onResendEmailVerification();
return false;
}}
>
{t('talk-plugin-notifications.banner_info.verify_now')}
</a>
</p>
</Banner>
);
const ToxicLabel = ({ comment: { actions, toxicity } }) => (
<CommentDetail
icon={'error'}
header={t('talk-plugin-toxic-comments.toxic_comment')}
info={getInfo(toxicity, actions)}
/>
);
const FeaturedDialog = ({
showFeaturedDialog,
closeFeaturedDialog,
postTag,
}) => {
const onPerform = async () => {
await postTag();
await closeFeaturedDialog();
};
return (
<Dialog
className={cn(styles.dialog, 'talk-featured-dialog')}
id="talkFeaturedDialog"
open={showFeaturedDialog}
onCancel={closeFeaturedDialog}
>
<span className={styles.close} onClick={closeFeaturedDialog}>
×
</span>
<h2 className={styles.header}>
{t('talk-plugin-featured-comments.feature_comment')}
</h2>
<div className={styles.content}>
{t('talk-plugin-featured-comments.are_you_sure')}
</div>
<div className={styles.buttons}>
<Button
className={cn(styles.cancel, 'talk-featured-dialog-button-cancel')}
cStyle="cancel"
onClick={closeFeaturedDialog}
raised
>
{t('talk-plugin-featured-comments.cancel')}
</Button>
<Button
className={cn(styles.perform, 'talk-featured-dialog-button-confirm')}
cStyle="black"
onClick={onPerform}
raised
>
{t('talk-plugin-featured-comments.yes_feature_comment')}
</Button>
</div>
</Dialog>
);
};
const Menu = ({ className = '', children }) => (
<div className={cn(styles.menu, className)}>
<h3 className={styles.headline}>
{t('talk-plugin-moderation-actions.moderation_actions')}
</h3>
{children}
</div>
);
const RejectCommentAction = ({ rejectComment }) => (
<button
className={cn(styles.button, 'talk-plugin-moderation-actions-reject')}
onClick={rejectComment}
>
<Icon name="clear" className={styles.icon} />
{t('talk-plugin-moderation-actions.reject_comment')}
</button>
);
const getInfo = (toxicity, actions) => {
const toxic = isToxic(actions);
let text = t('talk-plugin-toxic-comments.unlikely');
if (toxicity > 0.8) {
text = t('talk-plugin-toxic-comments.highly_likely');
} else if (toxicity >= 0.7) {
text = t('talk-plugin-toxic-comments.likely');
} else if (toxicity >= 0.5) {
text = t('talk-plugin-toxic-comments.possibly');
}
return (
<div>
{text}
<span className={cn(styles.info, { [styles.toxic]: toxic })}>
{Math.round(toxicity * 100)}%
</span>
</div>
);
};
{ignoredUsers.map(({ username, id }) => (
<li className={styles.listItem} key={id}>
<span className={styles.username}>{username}</span>
<button
onClick={() => stopIgnoringUser({ id })}
className={styles.button}
>
{t('talk-plugin-ignore-user.stop_ignoring')}
</button>
</li>
))}
fieldValidation = (value, type, name) => {
if (!value.length) {
this.addError({
[name]: t('talk-plugin-local-auth.change_password.required_field'),
});
} else if (!validate[type](value)) {
this.addError({ [name]: errorMsj[type] });
} else {
this.removeError(name);
}
};
const External = ({ slot }) => (
<IfSlotIsNotEmpty slot={slot}>
<div>
<div className={styles.external}>
<Slot fill={slot} className={styles.slot} />
</div>
<div className={styles.separator}>
<h1>{t('talk-plugin-auth.login.or')}</h1>
</div>
</div>
</IfSlotIsNotEmpty>
);
render() {
return (
<label className={styles.label}>
<input
type="checkbox"
onChange={this.handleChange}
checked={this.props.checked}
className={styles.input}
/>
{t('hide_off_topic')}
</label>
);
}
equalityValidation = (field, field2) => {
const cond = this.state.formData[field] === this.state.formData[field2];
if (!cond) {
this.addError({
[field2]: t(
'talk-plugin-local-auth.change_password.passwords_dont_match'
),
});
} else {
this.removeError(field2);
}
return cond;
};
render() {
return (
<div>
<span className={styles.close} onClick={this.cancel}>
×
</span>
<h1 className={styles.title}>
{t('talk-plugin-local-auth.change_email.confirm_email_change')}
</h1>
<div className={styles.content}>
<p className={styles.description}>
{t('talk-plugin-local-auth.change_email.description')}
</p>
<div className={styles.emailChange}>
<span className={styles.item}>
{t('talk-plugin-local-auth.change_email.old_email')}:{' '}
{this.props.email}
</span>
<span className={styles.item}>
{t('talk-plugin-local-auth.change_email.new_email')}:{' '}
{this.props.formData.newEmail}
</span>
</div>
<form onSubmit={this.confirmChanges}>
<InputField
id="confirmPassword"
label={t('talk-plugin-local-auth.change_email.enter_password')}
name="confirmPassword"
type="password"
onChange={this.onChange}
value={this.state.formData.confirmPassword}
hasError={this.hasError('confirmPassword')}
errorMsg={this.getError('confirmPassword')}
showError={this.state.showError}
columnDisplay
/>
<div className={styles.bottomActions}>
<Button
className={styles.cancel}
onClick={this.cancel}
type="button"
>
{t('talk-plugin-local-auth.change_email.cancel')}
</Button>
<Button className={styles.confirmChanges} type="submit">
{t('talk-plugin-local-auth.change_email.confirm_change')}
</Button>
</div>
</form>
</div>
</div>
);
}
const SignInButton = ({ isLoggedIn, showSignInDialog }) => (
<div className="talk-stream-auth-sign-in-button">
{!isLoggedIn ? (
<Button
id="coralSignInButton"
className={styles.button}
onClick={showSignInDialog}
full
>
{t('talk-plugin-auth.login.sign_in_to_comment')}
</Button>
) : null}
</div>
);
this.spamPostHook = this.props.registerHook('postSubmit', result => {
const actions = result.createComment.actions;
if (
actions &&
actions.some(
({ __typename, reason }) =>
__typename === 'FlagAction' && reason === 'SPAM_COMMENT'
)
) {
this.props.notify('error', t('talk-plugin-akismet.still_spam'));
}
// Reset `checked` after comment was successfully posted.
this.checked = false;
});
handleSubmit = async ({ email, password }) => {
const { attachLocalAuth } = this.props;
try {
await attachLocalAuth({
email,
password,
});
this.props.notify(
'success',
t('talk-plugin-local-auth.add_email.added.alert')
);
this.goToNextStep();
} catch (err) {
this.props.notify('error', getErrorMessages(err));
}
};
onForgotPassword = async () => {
const {
root: {
me: { email },
},
} = this.props;
try {
await this.props.forgotPassword(email);
this.props.notify(
'success',
t('talk-plugin-local-auth.change_password.forgot_password_sent')
);
} catch (err) {
this.props.notify('error', getErrorMessages(err));
}
this.clearForm();
this.disableEditing();
};
{Object.keys(summaries).map(reason => (
<li key={reason}>
{t(`flags.reasons.comment.${reason.toLowerCase()}`)} ({
summaries[reason].count
})
<ul className={styles.subDetail}>
{summaries[reason].actions.map(action => (
<li key={action.user.id}>
{action.user && (
<a
className={styles.username}
onClick={() => viewUserDetail(action.user.id)}
>
{action.user.username}
</a>
)}
{action.message}
</li>
))}
</ul>
</li>
))}
deleteReaction = () => {
if (this.duringMutation) {
return;
}
this.duringMutation = true;
// If the current user is suspended, do nothing.
if (!can(this.props.user, 'INTERACT_WITH_COMMUNITY')) {
notify('error', t('error.NOT_AUTHORIZED'));
return;
}
return this.props
.deleteReaction(this.props.comment)
.then(result => {
this.duringMutation = false;
return result;
})
.catch(err => {
this.duringMutation = false;
throw err;
});
};
onSave = async e => {
e.preventDefault();
if (this.isSubmitBlocked()) {
return;
}
const { oldPassword, newPassword } = this.state.formData;
try {
await this.props.changePassword({
oldPassword,
newPassword,
});
this.props.notify(
'success',
t('talk-plugin-local-auth.change_password.changed_password_msg')
);
this.clearForm();
this.disableEditing();
} catch (err) {
this.props.notify('error', getErrorMessages(err));
}
};
const SettingsToggle = createSettingsToggle('onFeatured', () =>
t('talk-plugin-notifications-category-featured.toggle_description')
export default () => {
return (
<FacebookButton>{t('talk-plugin-facebook-auth.sign_up')}</FacebookButton>
);
};
render() {
const { comment, asset, root } = this.props;
const slotPassthrough = { comment, asset, root };
return (
<div className={cn(styles.root, `${pluginName}-comment`)}>
<Slot
component={'blockquote'}
className={cn(styles.quote, `${pluginName}-comment-body`)}
fill="commentContent"
defaultComponent={CommentContent}
passthrough={slotPassthrough}
size={1}
/>
<div className={cn(`${pluginName}-comment-username-box`)}>
<Slot
className={cn(styles.username, `${pluginName}-comment-username`)}
fill="commentAuthorName"
defaultComponent={CommentAuthorName}
passthrough={slotPassthrough}
inline
/>
<Slot
fill="commentTimestamp"
defaultComponent={CommentTimestamp}
className={cn(styles.timestamp, `${pluginName}-comment-timestamp`)}
passthrough={{ created_at: comment.created_at, ...slotPassthrough }}
inline
/>
</div>
<footer className={cn(styles.footer, `${pluginName}-comment-footer`)}>
<div
className={cn(
'talk-embed-stream-comment-actions-container-left',
styles.reactionsContainer,
`${pluginName}-comment-reactions`
)}
>
<Slot
fill="commentReactions"
passthrough={slotPassthrough}
inline
/>
<FeaturedButton root={root} comment={comment} asset={asset} />
</div>
<div
className={cn(
'talk-embed-stream-comment-actions-container-right',
styles.actionsContainer,
`${pluginName}-comment-actions`
)}
>
<button
className={cn(styles.goTo, `${pluginName}-comment-go-to`)}
onClick={this.viewComment}
>
<Icon name="forum" className={styles.repliesIcon} />{' '}
{comment.replyCount} |{' '}
{t('talk-plugin-featured-comments.go_to_conversation')}{' '}
<Icon name="keyboard_arrow_right" className={styles.goToIcon} />
</button>
</div>
</footer>
</div>
);
}
const EmailVerificationBannerSuccess = ({ email }) => (
<Banner title={t('talk-plugin-notifications.banner_success.title')} success>
<p>{t('talk-plugin-notifications.banner_success.text', email)}</p>
</Banner>
);
const EmailVerificationBannerError = ({ errorMessage }) => (
<Banner title={t('talk-plugin-notifications.banner_error.title')} error>
<p>{t('talk-plugin-notifications.banner_error.text')}</p>
<p>{errorMessage}</p>
</Banner>
);