umami/components/forms/TrackingCodeForm.js

40 lines
1.3 KiB
JavaScript
Raw Normal View History

2020-08-08 05:36:57 +02:00
import React, { useRef } from 'react';
2020-09-06 02:27:01 +02:00
import { FormattedMessage } from 'react-intl';
2021-01-14 09:34:51 +01:00
import { useRouter } from 'next/router';
2020-08-08 05:36:57 +02:00
import Button from 'components/common/Button';
import FormLayout, { FormButtons, FormRow } from 'components/layout/FormLayout';
2020-09-18 22:40:46 +02:00
import CopyButton from 'components/common/CopyButton';
2020-08-08 05:36:57 +02:00
2020-08-15 10:17:15 +02:00
export default function TrackingCodeForm({ values, onClose }) {
2020-08-08 05:36:57 +02:00
const ref = useRef();
2021-01-14 09:34:51 +01:00
const { basePath } = useRouter();
2020-08-08 05:36:57 +02:00
return (
<FormLayout>
<p>
2020-09-06 02:27:01 +02:00
<FormattedMessage
id="message.track-stats"
defaultMessage="To track stats for {target}, place the following code in the {head} section of your website."
values={{ head: '<head>', target: <b>{values.name}</b> }}
/>
2020-08-08 05:36:57 +02:00
</p>
<FormRow>
<textarea
ref={ref}
rows={3}
cols={60}
2020-08-17 06:28:54 +02:00
spellCheck={false}
2021-01-14 09:34:51 +01:00
defaultValue={`<script async defer data-website-id="${values.website_uuid}" src="${document.location.origin}${basePath}/umami.js"></script>`}
2020-08-08 05:36:57 +02:00
readOnly
/>
</FormRow>
<FormButtons>
2020-09-18 22:40:46 +02:00
<CopyButton type="submit" variant="action" element={ref} />
2020-09-06 02:27:01 +02:00
<Button onClick={onClose}>
2020-10-13 07:53:59 +02:00
<FormattedMessage id="label.cancel" defaultMessage="Cancel" />
2020-09-06 02:27:01 +02:00
</Button>
2020-08-08 05:36:57 +02:00
</FormButtons>
</FormLayout>
);
}