Add terms of service (#33055)

app/javascript/mastodon/api/instance.ts

@@ -0,0 +1,11 @@
+import { apiRequestGet } from 'mastodon/api';
+import type {
+  ApiTermsOfServiceJSON,
+  ApiPrivacyPolicyJSON,
+} from 'mastodon/api_types/instance';
+
+export const apiGetTermsOfService = () =>
+  apiRequestGet<ApiTermsOfServiceJSON>('v1/instance/terms_of_service');
+
+export const apiGetPrivacyPolicy = () =>
+  apiRequestGet<ApiPrivacyPolicyJSON>('v1/instance/privacy_policy');

app/javascript/mastodon/api_types/instance.ts

@@ -0,0 +1,9 @@
+export interface ApiTermsOfServiceJSON {
+  updated_at: string;
+  content: string;
+}
+
+export interface ApiPrivacyPolicyJSON {
+  updated_at: string;
+  content: string;
+}

app/javascript/mastodon/features/about/index.jsx

@@ -18,7 +18,7 @@ import Column from 'mastodon/components/column';
 import { Icon  }  from 'mastodon/components/icon';
 import { ServerHeroImage } from 'mastodon/components/server_hero_image';
 import { Skeleton } from 'mastodon/components/skeleton';
-import LinkFooter from 'mastodon/features/ui/components/link_footer';
+import { LinkFooter} from 'mastodon/features/ui/components/link_footer';
 
 const messages = defineMessages({
   title: { id: 'column.about', defaultMessage: 'About' },

app/javascript/mastodon/features/getting_started/index.jsx

@@ -25,7 +25,7 @@ import StarIcon from '@/material-icons/400-24px/star.svg?react';
 import { fetchFollowRequests } from 'mastodon/actions/accounts';
 import Column from 'mastodon/components/column';
 import ColumnHeader from 'mastodon/components/column_header';
-import LinkFooter from 'mastodon/features/ui/components/link_footer';
+import { LinkFooter } from 'mastodon/features/ui/components/link_footer';
 import { identityContextPropShape, withIdentity } from 'mastodon/identity_context';
 import { canManageReports, canViewAdminDashboard } from 'mastodon/permissions';
 

app/javascript/mastodon/features/privacy_policy/index.jsx

@@ -1,65 +0,0 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-
-import { FormattedMessage, FormattedDate, injectIntl, defineMessages } from 'react-intl';
-
-import { Helmet } from 'react-helmet';
-
-import api from 'mastodon/api';
-import Column from 'mastodon/components/column';
-import { Skeleton } from 'mastodon/components/skeleton';
-
-const messages = defineMessages({
-  title: { id: 'privacy_policy.title', defaultMessage: 'Privacy Policy' },
-});
-
-class PrivacyPolicy extends PureComponent {
-
-  static propTypes = {
-    intl: PropTypes.object,
-    multiColumn: PropTypes.bool,
-  };
-
-  state = {
-    content: null,
-    lastUpdated: null,
-    isLoading: true,
-  };
-
-  componentDidMount () {
-    api().get('/api/v1/instance/privacy_policy').then(({ data }) => {
-      this.setState({ content: data.content, lastUpdated: data.updated_at, isLoading: false });
-    }).catch(() => {
-      this.setState({ isLoading: false });
-    });
-  }
-
-  render () {
-    const { intl, multiColumn } = this.props;
-    const { isLoading, content, lastUpdated } = this.state;
-
-    return (
-      <Column bindToDocument={!multiColumn} label={intl.formatMessage(messages.title)}>
-        <div className='scrollable privacy-policy'>
-          <div className='column-title'>
-            <h3><FormattedMessage id='privacy_policy.title' defaultMessage='Privacy Policy' /></h3>
-            <p><FormattedMessage id='privacy_policy.last_updated' defaultMessage='Last updated {date}' values={{ date: isLoading ? <Skeleton width='10ch' /> : <FormattedDate value={lastUpdated} year='numeric' month='short' day='2-digit' /> }} /></p>
-          </div>
-
-          <div
-            className='privacy-policy__body prose'
-            dangerouslySetInnerHTML={{ __html: content }}
-          />
-        </div>
-
-        <Helmet>
-          <title>{intl.formatMessage(messages.title)}</title>
-          <meta name='robots' content='all' />
-        </Helmet>
-      </Column>
-    );
-  }
-
-}
-
-export default injectIntl(PrivacyPolicy);

app/javascript/mastodon/features/privacy_policy/index.tsx

@@ -0,0 +1,90 @@
+import { useState, useEffect } from 'react';
+
+import {
+  FormattedMessage,
+  FormattedDate,
+  useIntl,
+  defineMessages,
+} from 'react-intl';
+
+import { Helmet } from 'react-helmet';
+
+import { apiGetPrivacyPolicy } from 'mastodon/api/instance';
+import type { ApiPrivacyPolicyJSON } from 'mastodon/api_types/instance';
+import { Column } from 'mastodon/components/column';
+import { Skeleton } from 'mastodon/components/skeleton';
+
+const messages = defineMessages({
+  title: { id: 'privacy_policy.title', defaultMessage: 'Privacy Policy' },
+});
+
+const PrivacyPolicy: React.FC<{
+  multiColumn: boolean;
+}> = ({ multiColumn }) => {
+  const intl = useIntl();
+  const [response, setResponse] = useState<ApiPrivacyPolicyJSON>();
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    apiGetPrivacyPolicy()
+      .then((data) => {
+        setResponse(data);
+        setLoading(false);
+        return '';
+      })
+      .catch(() => {
+        setLoading(false);
+      });
+  }, []);
+
+  return (
+    <Column
+      bindToDocument={!multiColumn}
+      label={intl.formatMessage(messages.title)}
+    >
+      <div className='scrollable privacy-policy'>
+        <div className='column-title'>
+          <h3>
+            <FormattedMessage
+              id='privacy_policy.title'
+              defaultMessage='Privacy Policy'
+            />
+          </h3>
+          <p>
+            <FormattedMessage
+              id='privacy_policy.last_updated'
+              defaultMessage='Last updated {date}'
+              values={{
+                date: loading ? (
+                  <Skeleton width='10ch' />
+                ) : (
+                  <FormattedDate
+                    value={response?.updated_at}
+                    year='numeric'
+                    month='short'
+                    day='2-digit'
+                  />
+                ),
+              }}
+            />
+          </p>
+        </div>
+
+        {response && (
+          <div
+            className='privacy-policy__body prose'
+            dangerouslySetInnerHTML={{ __html: response.content }}
+          />
+        )}
+      </div>
+
+      <Helmet>
+        <title>{intl.formatMessage(messages.title)}</title>
+        <meta name='robots' content='all' />
+      </Helmet>
+    </Column>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default PrivacyPolicy;

app/javascript/mastodon/features/terms_of_service/index.tsx

@@ -0,0 +1,95 @@
+import { useState, useEffect } from 'react';
+
+import {
+  FormattedMessage,
+  FormattedDate,
+  useIntl,
+  defineMessages,
+} from 'react-intl';
+
+import { Helmet } from 'react-helmet';
+
+import { apiGetTermsOfService } from 'mastodon/api/instance';
+import type { ApiTermsOfServiceJSON } from 'mastodon/api_types/instance';
+import { Column } from 'mastodon/components/column';
+import { Skeleton } from 'mastodon/components/skeleton';
+import BundleColumnError from 'mastodon/features/ui/components/bundle_column_error';
+
+const messages = defineMessages({
+  title: { id: 'terms_of_service.title', defaultMessage: 'Terms of Service' },
+});
+
+const TermsOfService: React.FC<{
+  multiColumn: boolean;
+}> = ({ multiColumn }) => {
+  const intl = useIntl();
+  const [response, setResponse] = useState<ApiTermsOfServiceJSON>();
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    apiGetTermsOfService()
+      .then((data) => {
+        setResponse(data);
+        setLoading(false);
+        return '';
+      })
+      .catch(() => {
+        setLoading(false);
+      });
+  }, []);
+
+  if (!loading && !response) {
+    return <BundleColumnError multiColumn={multiColumn} errorType='routing' />;
+  }
+
+  return (
+    <Column
+      bindToDocument={!multiColumn}
+      label={intl.formatMessage(messages.title)}
+    >
+      <div className='scrollable privacy-policy'>
+        <div className='column-title'>
+          <h3>
+            <FormattedMessage
+              id='terms_of_service.title'
+              defaultMessage='Terms of Service'
+            />
+          </h3>
+          <p>
+            <FormattedMessage
+              id='privacy_policy.last_updated'
+              defaultMessage='Last updated {date}'
+              values={{
+                date: loading ? (
+                  <Skeleton width='10ch' />
+                ) : (
+                  <FormattedDate
+                    value={response?.updated_at}
+                    year='numeric'
+                    month='short'
+                    day='2-digit'
+                  />
+                ),
+              }}
+            />
+          </p>
+        </div>
+
+        {response && (
+          <div
+            className='privacy-policy__body prose'
+            dangerouslySetInnerHTML={{ __html: response.content }}
+          />
+        )}
+      </div>
+
+      <Helmet>
+        <title>{intl.formatMessage(messages.title)}</title>
+        <meta name='robots' content='all' />
+      </Helmet>
+    </Column>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default TermsOfService;

app/javascript/mastodon/features/ui/components/compose_panel.jsx

@@ -7,10 +7,9 @@ import { changeComposing, mountCompose, unmountCompose } from 'mastodon/actions/
 import ServerBanner from 'mastodon/components/server_banner';
 import ComposeFormContainer from 'mastodon/features/compose/containers/compose_form_container';
 import SearchContainer from 'mastodon/features/compose/containers/search_container';
+import { LinkFooter } from 'mastodon/features/ui/components/link_footer';
 import { identityContextPropShape, withIdentity } from 'mastodon/identity_context';
 
-import LinkFooter from './link_footer';
-
 class ComposePanel extends PureComponent {
   static propTypes = {
     identity: identityContextPropShape,

app/javascript/mastodon/features/ui/components/link_footer.jsx

@@ -1,95 +0,0 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-
-import { FormattedMessage, injectIntl } from 'react-intl';
-
-import { Link } from 'react-router-dom';
-
-import { connect } from 'react-redux';
-
-import { openModal } from 'mastodon/actions/modal';
-import { identityContextPropShape, withIdentity } from 'mastodon/identity_context';
-import { domain, version, source_url, statusPageUrl, profile_directory as profileDirectory } from 'mastodon/initial_state';
-import { PERMISSION_INVITE_USERS } from 'mastodon/permissions';
-
-const mapDispatchToProps = (dispatch) => ({
-  onLogout () {
-    dispatch(openModal({ modalType: 'CONFIRM_LOG_OUT' }));
-
-  },
-});
-
-class LinkFooter extends PureComponent {
-  static propTypes = {
-    identity: identityContextPropShape,
-    multiColumn: PropTypes.bool,
-    onLogout: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
-
-  handleLogoutClick = e => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    this.props.onLogout();
-
-    return false;
-  };
-
-  render () {
-    const { signedIn, permissions } = this.props.identity;
-    const { multiColumn } = this.props;
-
-    const canInvite = signedIn && ((permissions & PERMISSION_INVITE_USERS) === PERMISSION_INVITE_USERS);
-    const canProfileDirectory = profileDirectory;
-
-    const DividingCircle = <span aria-hidden>{' · '}</span>;
-
-    return (
-      <div className='link-footer'>
-        <p>
-          <strong>{domain}</strong>:
-          {' '}
-          <Link to='/about' target={multiColumn ? '_blank' : undefined}><FormattedMessage id='footer.about' defaultMessage='About' /></Link>
-          {statusPageUrl && (
-            <>
-              {DividingCircle}
-              <a href={statusPageUrl} target='_blank' rel='noopener'><FormattedMessage id='footer.status' defaultMessage='Status' /></a>
-            </>
-          )}
-          {canInvite && (
-            <>
-              {DividingCircle}
-              <a href='/invites' target='_blank'><FormattedMessage id='footer.invite' defaultMessage='Invite people' /></a>
-            </>
-          )}
-          {canProfileDirectory && (
-            <>
-              {DividingCircle}
-              <Link to='/directory'><FormattedMessage id='footer.directory' defaultMessage='Profiles directory' /></Link>
-            </>
-          )}
-          {DividingCircle}
-          <Link to='/privacy-policy' target={multiColumn ? '_blank' : undefined}><FormattedMessage id='footer.privacy_policy' defaultMessage='Privacy policy' /></Link>
-        </p>
-
-        <p>
-          <strong>Mastodon</strong>:
-          {' '}
-          <a href='https://joinmastodon.org' target='_blank'><FormattedMessage id='footer.about' defaultMessage='About' /></a>
-          {DividingCircle}
-          <a href='https://joinmastodon.org/apps' target='_blank'><FormattedMessage id='footer.get_app' defaultMessage='Get the app' /></a>
-          {DividingCircle}
-          <Link to='/keyboard-shortcuts'><FormattedMessage id='footer.keyboard_shortcuts' defaultMessage='Keyboard shortcuts' /></Link>
-          {DividingCircle}
-          <a href={source_url} rel='noopener noreferrer' target='_blank'><FormattedMessage id='footer.source_code' defaultMessage='View source code' /></a>
-          {DividingCircle}
-          <span className='version'>v{version}</span>
-        </p>
-      </div>
-    );
-  }
-
-}
-
-export default injectIntl(withIdentity(connect(null, mapDispatchToProps)(LinkFooter)));

app/javascript/mastodon/features/ui/components/link_footer.tsx

@@ -0,0 +1,105 @@
+import { FormattedMessage } from 'react-intl';
+
+import { Link } from 'react-router-dom';
+
+import {
+  domain,
+  version,
+  source_url,
+  statusPageUrl,
+  profile_directory as canProfileDirectory,
+  termsOfServiceEnabled,
+} from 'mastodon/initial_state';
+
+const DividingCircle: React.FC = () => <span aria-hidden>{' · '}</span>;
+
+export const LinkFooter: React.FC<{
+  multiColumn: boolean;
+}> = ({ multiColumn }) => {
+  return (
+    <div className='link-footer'>
+      <p>
+        <strong>{domain}</strong>:{' '}
+        <Link to='/about' target={multiColumn ? '_blank' : undefined}>
+          <FormattedMessage id='footer.about' defaultMessage='About' />
+        </Link>
+        {statusPageUrl && (
+          <>
+            <DividingCircle />
+            <a href={statusPageUrl} target='_blank' rel='noopener noreferrer'>
+              <FormattedMessage id='footer.status' defaultMessage='Status' />
+            </a>
+          </>
+        )}
+        {canProfileDirectory && (
+          <>
+            <DividingCircle />
+            <Link to='/directory'>
+              <FormattedMessage
+                id='footer.directory'
+                defaultMessage='Profiles directory'
+              />
+            </Link>
+          </>
+        )}
+        <DividingCircle />
+        <Link
+          to='/privacy-policy'
+          target={multiColumn ? '_blank' : undefined}
+          rel='privacy-policy'
+        >
+          <FormattedMessage
+            id='footer.privacy_policy'
+            defaultMessage='Privacy policy'
+          />
+        </Link>
+        {termsOfServiceEnabled && (
+          <>
+            <DividingCircle />
+            <Link
+              to='/terms-of-service'
+              target={multiColumn ? '_blank' : undefined}
+              rel='terms-of-service'
+            >
+              <FormattedMessage
+                id='footer.terms_of_service'
+                defaultMessage='Terms of service'
+              />
+            </Link>
+          </>
+        )}
+      </p>
+
+      <p>
+        <strong>Mastodon</strong>:{' '}
+        <a href='https://joinmastodon.org' target='_blank' rel='noreferrer'>
+          <FormattedMessage id='footer.about' defaultMessage='About' />
+        </a>
+        <DividingCircle />
+        <a
+          href='https://joinmastodon.org/apps'
+          target='_blank'
+          rel='noreferrer'
+        >
+          <FormattedMessage id='footer.get_app' defaultMessage='Get the app' />
+        </a>
+        <DividingCircle />
+        <Link to='/keyboard-shortcuts'>
+          <FormattedMessage
+            id='footer.keyboard_shortcuts'
+            defaultMessage='Keyboard shortcuts'
+          />
+        </Link>
+        <DividingCircle />
+        <a href={source_url} rel='noopener noreferrer' target='_blank'>
+          <FormattedMessage
+            id='footer.source_code'
+            defaultMessage='View source code'
+          />
+        </a>
+        <DividingCircle />
+        <span className='version'>v{version}</span>
+      </p>
+    </div>
+  );
+};

app/javascript/mastodon/features/ui/index.jsx

@@ -71,6 +71,7 @@ import {
   Explore,
   About,
   PrivacyPolicy,
+  TermsOfService,
 } from './util/async-components';
 import { ColumnsContextProvider } from './util/columns_context';
 import { WrappedSwitch, WrappedRoute } from './util/react_router_helpers';
@@ -198,6 +199,7 @@ class SwitchingColumnsArea extends PureComponent {
             <WrappedRoute path='/keyboard-shortcuts' component={KeyboardShortcuts} content={children} />
             <WrappedRoute path='/about' component={About} content={children} />
             <WrappedRoute path='/privacy-policy' component={PrivacyPolicy} content={children} />
+            <WrappedRoute path='/terms-of-service' component={TermsOfService} content={children} />
 
             <WrappedRoute path={['/home', '/timelines/home']} component={HomeTimeline} content={children} />
             <Redirect from='/timelines/public' to='/public' exact />

app/javascript/mastodon/features/ui/util/async-components.js

@@ -198,6 +198,10 @@ export function PrivacyPolicy () {
   return import(/*webpackChunkName: "features/privacy_policy" */'../../privacy_policy');
 }
 
+export function TermsOfService () {
+  return import(/*webpackChunkName: "features/terms_of_service" */'../../terms_of_service');
+}
+
 export function NotificationRequests () {
   return import(/*webpackChunkName: "features/notifications/requests" */'../../notifications/requests');
 }

app/javascript/mastodon/initial_state.js

@@ -43,6 +43,8 @@
  * @property {boolean=} use_pending_items
  * @property {string} version
  * @property {string} sso_redirect
+ * @property {string} status_page_url
+ * @property {boolean} terms_of_service_enabled
  */
 
 /**
@@ -115,10 +117,9 @@ export const usePendingItems = getMeta('use_pending_items');
 export const version = getMeta('version');
 export const languages = initialState?.languages;
 export const criticalUpdatesPending = initialState?.critical_updates_pending;
-// @ts-expect-error
 export const statusPageUrl = getMeta('status_page_url');
 export const sso_redirect = getMeta('sso_redirect');
-
+export const termsOfServiceEnabled = getMeta('terms_of_service_enabled');
 /**
  * @returns {string | undefined}
  */

app/javascript/mastodon/locales/en.json

@@ -359,11 +359,11 @@
   "footer.about": "About",
   "footer.directory": "Profiles directory",
   "footer.get_app": "Get the app",
-  "footer.invite": "Invite people",
   "footer.keyboard_shortcuts": "Keyboard shortcuts",
   "footer.privacy_policy": "Privacy policy",
   "footer.source_code": "View source code",
   "footer.status": "Status",
+  "footer.terms_of_service": "Terms of service",
   "generic.saved": "Saved",
   "getting_started.heading": "Getting started",
   "hashtag.admin_moderation": "Open moderation interface for #{name}",
@@ -857,6 +857,7 @@
   "subscribed_languages.target": "Change subscribed languages for {target}",
   "tabs_bar.home": "Home",
   "tabs_bar.notifications": "Notifications",
+  "terms_of_service.title": "Terms of Service",
   "time_remaining.days": "{number, plural, one {# day} other {# days}} left",
   "time_remaining.hours": "{number, plural, one {# hour} other {# hours}} left",
   "time_remaining.minutes": "{number, plural, one {# minute} other {# minutes}} left",

app/javascript/styles/mailer.scss

@@ -173,7 +173,9 @@ table + p {
 }
 
 .email-prose {
-  p {
+  p,
+  ul,
+  ol {
     color: #17063b;
     font-size: 14px;
     line-height: 20px;

app/javascript/styles/mastodon/admin.scss

@@ -253,6 +253,10 @@ $content-width: 840px;
         .time-period {
           padding: 0 10px;
         }
+
+        .back-link {
+          margin-bottom: 0;
+        }
       }
 
       h2 small {
@@ -1940,3 +1944,76 @@ a.sparkline {
     }
   }
 }
+
+.admin {
+  &__terms-of-service {
+    &__container {
+      background: var(--surface-background-color);
+      border-radius: 8px;
+      border: 1px solid var(--background-border-color);
+      overflow: hidden;
+
+      &__header {
+        padding: 16px;
+        font-size: 14px;
+        line-height: 20px;
+        color: $secondary-text-color;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+
+      &__body {
+        background: var(--background-color);
+        padding: 16px;
+        overflow-y: scroll;
+        height: 30vh;
+      }
+    }
+
+    &__history {
+      & > li {
+        border-bottom: 1px solid var(--background-border-color);
+
+        &:last-child {
+          border-bottom: 0;
+        }
+      }
+
+      &__item {
+        padding: 16px 0;
+        padding-bottom: 8px;
+
+        h5 {
+          font-size: 14px;
+          line-height: 20px;
+          font-weight: 600;
+          margin-bottom: 16px;
+        }
+      }
+    }
+  }
+}
+
+.dot-indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 500;
+
+  &__indicator {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: $dark-text-color;
+  }
+
+  &.success {
+    color: $valid-value-color;
+
+    .dot-indicator__indicator {
+      background-color: $valid-value-color;
+    }
+  }
+}