86 lines
3.1 KiB
TypeScript
86 lines
3.1 KiB
TypeScript
import type { FC } from 'react';
|
||
|
||
import { FormattedMessage } from 'react-intl';
|
||
|
||
import { CopyLinkField } from '@/mastodon/components/form_fields/copy_link_field';
|
||
import { Icon } from '@/mastodon/components/icon';
|
||
import { createAppSelector, useAppSelector } from '@/mastodon/store';
|
||
import ExpandArrowIcon from '@/material-icons/400-24px/expand_more.svg?react';
|
||
|
||
import type { DialogModalProps } from '../../ui/components/dialog_modal';
|
||
import { DialogModal } from '../../ui/components/dialog_modal';
|
||
|
||
import classes from './styles.module.scss';
|
||
|
||
const selectAccountUrl = createAppSelector(
|
||
[(state) => state.meta.get('me') as string, (state) => state.accounts],
|
||
(accountId, accounts) => {
|
||
const account = accounts.get(accountId);
|
||
return account?.get('url') ?? '';
|
||
},
|
||
);
|
||
|
||
export const VerifiedModal: FC<DialogModalProps> = ({ onClose }) => {
|
||
const accountUrl = useAppSelector(selectAccountUrl);
|
||
|
||
return (
|
||
<DialogModal
|
||
onClose={onClose}
|
||
title={
|
||
<FormattedMessage
|
||
id='account_edit.verified_modal.title'
|
||
defaultMessage='How to add a verified link'
|
||
/>
|
||
}
|
||
noCancelButton
|
||
>
|
||
<FormattedMessage
|
||
id='account_edit.verified_modal.details'
|
||
defaultMessage='Add credibility to your Mastodon profile by verifying links to personal websites. Here’s how it works:'
|
||
tagName='p'
|
||
/>
|
||
|
||
<ol className={classes.verifiedSteps}>
|
||
<li>
|
||
<CopyLinkField
|
||
label={
|
||
<FormattedMessage
|
||
id='account_edit.verified_modal.step1.header'
|
||
defaultMessage='Copy the HTML code below and paste into the header of your website'
|
||
tagName='h2'
|
||
/>
|
||
}
|
||
value={`<a rel="me" href="${accountUrl}">Mastodon</a>`}
|
||
/>
|
||
<details className={classes.details}>
|
||
<summary>
|
||
<FormattedMessage
|
||
id='account_edit.verified_modal.invisible_link.summary'
|
||
defaultMessage='How do I make the link invisible?'
|
||
/>
|
||
<Icon icon={ExpandArrowIcon} id='arrow' />
|
||
</summary>
|
||
<FormattedMessage
|
||
id='account_edit.verified_modal.invisible_link.details'
|
||
defaultMessage='Add the link to your header. The important part is rel="me" which prevents impersonation on websites with user-generated content. You can even use a link tag in the header of the page instead of {tag}, but the HTML must be accessible without executing JavaScript.'
|
||
values={{ tag: <code><a></code> }}
|
||
/>
|
||
</details>
|
||
</li>
|
||
<li>
|
||
<FormattedMessage
|
||
id='account_edit.verified_modal.step2.header'
|
||
defaultMessage='Add your website as a custom field'
|
||
tagName='h2'
|
||
/>
|
||
<FormattedMessage
|
||
id='account_edit.verified_modal.step2.details'
|
||
defaultMessage='If you’ve already added your website as a custom field, you’ll need to delete and re-add it to trigger verification.'
|
||
tagName='p'
|
||
/>
|
||
</li>
|
||
</ol>
|
||
</DialogModal>
|
||
);
|
||
};
|