Change interaction modal in web UI (#26075)

Co-authored-by: Eugen Rochko <eugen@zeonfederated.com>

app/chewy/instances_index.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class InstancesIndex < Chewy::Index
+  settings index: { refresh_interval: '30s' }
+
+  index_scope ::Instance.searchable
+
+  root date_detection: false do
+    field :domain, type: 'text', index_prefixes: { min_chars: 1 }
+    field :accounts_count, type: 'long'
+  end
+end

app/controllers/api/v1/instances/peers_controller.rb

@@ -15,7 +15,7 @@ class Api::V1::Instances::PeersController < Api::BaseController
 
   def index
     cache_even_if_authenticated!
-    render_with_cache(expires_in: 1.day) { Instance.where.not(domain: DomainBlock.select(:domain)).pluck(:domain) }
+    render_with_cache(expires_in: 1.day) { Instance.searchable.pluck(:domain) }
   end
 
   private

app/controllers/api/v1/peers/search_controller.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+class Api::V1::Peers::SearchController < Api::BaseController
+  before_action :require_enabled_api!
+  before_action :set_domains
+
+  skip_before_action :require_authenticated_user!, unless: :whitelist_mode?
+  skip_around_action :set_locale
+
+  vary_by ''
+
+  def index
+    cache_even_if_authenticated!
+    render json: @domains
+  end
+
+  private
+
+  def require_enabled_api!
+    head 404 unless Setting.peers_api_enabled && !whitelist_mode?
+  end
+
+  def set_domains
+    return if params[:q].blank?
+
+    if Chewy.enabled?
+      @domains = InstancesIndex.query(function_score: {
+        query: {
+          prefix: {
+            domain: params[:q],
+          },
+        },
+
+        field_value_factor: {
+          field: 'accounts_count',
+          modifier: 'log2p',
+        },
+      }).limit(10).pluck(:domain)
+    else
+      domain = params[:q].strip
+      domain = TagManager.instance.normalize_domain(domain)
+      @domains = Instance.searchable.where(Instance.arel_table[:domain].matches("#{Instance.sanitize_sql_like(domain)}%", false, true)).limit(10).pluck(:domain)
+    end
+  end
+end

app/controllers/authorize_interactions_controller.rb

@@ -3,32 +3,19 @@
 class AuthorizeInteractionsController < ApplicationController
   include Authorization
 
-  layout 'modal'
-
   before_action :authenticate_user!
-  before_action :set_body_classes
   before_action :set_resource
 
   def show
     if @resource.is_a?(Account)
-      render :show
+      redirect_to web_url("@#{@resource.pretty_acct}")
     elsif @resource.is_a?(Status)
       redirect_to web_url("@#{@resource.account.pretty_acct}/#{@resource.id}")
     else
-      render :error
+      not_found
     end
   end
 
-  def create
-    if @resource.is_a?(Account) && FollowService.new.call(current_account, @resource, with_rate_limit: true)
-      render :success
-    else
-      render :error
-    end
-  rescue ActiveRecord::RecordNotFound
-    render :error
-  end
-
   private
 
   def set_resource
@@ -61,8 +48,4 @@ class AuthorizeInteractionsController < ApplicationController
   def uri_param
     params[:uri] || params.fetch(:acct, '').delete_prefix('acct:')
   end
-
-  def set_body_classes
-    @body_classes = 'modal-layout'
-  end
 end

app/controllers/remote_interaction_helper_controller.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+class RemoteInteractionHelperController < ApplicationController
+  vary_by ''
+
+  skip_before_action :require_functional!
+  skip_around_action :set_locale
+  skip_before_action :update_user_sign_in
+
+  content_security_policy do |p|
+    # We inherit the normal `script-src`
+
+    # Set every directive that does not have a fallback
+    p.default_src :none
+    p.form_action :none
+    p.base_uri :none
+
+    # Disable every directive with a fallback to cut on response size
+    p.base_uri false
+    p.font_src false
+    p.img_src false
+    p.style_src false
+    p.media_src false
+    p.frame_src false
+    p.manifest_src false
+    p.connect_src false
+    p.child_src false
+    p.worker_src false
+
+    # Widen the directives that we do need
+    p.frame_ancestors :self
+    p.connect_src :https
+  end
+
+  def index
+    expires_in(5.minutes, public: true, stale_while_revalidate: 30.seconds, stale_if_error: 1.day)
+
+    response.headers['X-Frame-Options'] = 'SAMEORIGIN'
+    response.headers['Referrer-Policy'] = 'no-referrer'
+
+    render layout: 'helper_frame'
+  end
+end

app/controllers/well_known/webfinger_controller.rb

@@ -19,6 +19,7 @@ module WellKnown
 
     def set_account
       username = username_from_resource
+
       @account = begin
         if username == Rails.configuration.x.local_domain
           Account.representative

app/javascript/mastodon/containers/status_container.jsx

@@ -278,7 +278,7 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
       modalProps: {
         type,
         accountId: status.getIn(['account', 'id']),
-        url: status.get('url'),
+        url: status.get('uri'),
       },
     }));
   },

app/javascript/mastodon/features/account_timeline/containers/header_container.jsx

@@ -83,7 +83,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
       modalProps: {
         type: 'follow',
         accountId: account.get('id'),
-        url: account.get('url'),
+        url: account.get('uri'),
       },
     }));
   },

app/javascript/mastodon/features/compose/components/search.jsx

@@ -139,10 +139,6 @@ class Search extends PureComponent {
     this.setState({ expanded: false, selectedOption: -1 });
   };
 
-  findTarget = () => {
-    return this.searchForm;
-  };
-
   handleHashtagClick = () => {
     const { router } = this.context;
     const { value, onClickSearchResult } = this.props;

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

@@ -1,95 +1,296 @@
 import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
+import React from 'react';
 
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
 import classNames from 'classnames';
 
 import { connect } from 'react-redux';
 
+import { throttle, escapeRegExp } from 'lodash';
+
 import { openModal, closeModal } from 'mastodon/actions/modal';
+import api from 'mastodon/api';
+import Button from 'mastodon/components/button';
 import { Icon }  from 'mastodon/components/icon';
 import { registrationsOpen } from 'mastodon/initial_state';
 
+const messages = defineMessages({
+  loginPrompt: { id: 'interaction_modal.login.prompt', defaultMessage: 'Domain of your home server, e.g. mastodon.social' },
+});
+
 const mapStateToProps = (state, { accountId }) => ({
   displayNameHtml: state.getIn(['accounts', accountId, 'display_name_html']),
-  signupUrl: state.getIn(['server', 'server', 'registrations', 'url'], null) || '/auth/sign_up',
 });
 
 const mapDispatchToProps = (dispatch) => ({
   onSignupClick() {
-    dispatch(closeModal({
-      modalType: undefined,
-      ignoreFocus: false,
-    }));
-    dispatch(openModal({ modalType: 'CLOSED_REGISTRATIONS' }));
+    dispatch(closeModal());
+    dispatch(openModal('CLOSED_REGISTRATIONS'));
   },
 });
 
-class Copypaste extends PureComponent {
+const PERSISTENCE_KEY = 'mastodon_home';
+
+const isValidDomain = value => {
+  const url = new URL('https:///path');
+  url.hostname = value;
+  return url.hostname === value;
+};
+
+const valueToDomain = value => {
+  // If the user starts typing an URL
+  if (/^https?:\/\//.test(value)) {
+    try {
+      const url = new URL(value);
+
+      // Consider that if there is a path, the URL is more meaningful than a bare domain
+      if (url.pathname.length > 1) {
+        return '';
+      }
+
+      return url.host;
+    } catch {
+      return undefined;
+    }
+  // If the user writes their full handle including username
+  } else if (value.includes('@')) {
+    if (value.replace(/^@/, '').split('@').length > 2) {
+      return undefined;
+    }
+    return '';
+  }
+
+  return value;
+};
+
+const addInputToOptions = (value, options) => {
+  value = value.trim();
+
+  if (value.includes('.') && isValidDomain(value)) {
+    return [value].concat(options.filter((x) => x !== value));
+  }
+
+  return options;
+};
+
+class LoginForm extends React.PureComponent {
 
   static propTypes = {
-    value: PropTypes.string,
+    resourceUrl: PropTypes.string,
+    intl: PropTypes.object.isRequired,
   };
 
   state = {
-    copied: false,
+    value: localStorage ? (localStorage.getItem(PERSISTENCE_KEY) || '') : '',
+    expanded: false,
+    selectedOption: -1,
+    isLoading: false,
+    isSubmitting: false,
+    error: false,
+    options: [],
+    networkOptions: [],
   };
 
   setRef = c => {
     this.input = c;
   };
 
-  handleInputClick = () => {
-    this.setState({ copied: false });
-    this.input.focus();
-    this.input.select();
-    this.input.setSelectionRange(0, this.input.value.length);
+  handleChange = ({ target }) => {
+    this.setState(state => ({ value: target.value, isLoading: true, error: false, options: addInputToOptions(target.value, state.networkOptions) }), () => this._loadOptions());
   };
 
-  handleButtonClick = () => {
-    const { value } = this.props;
-    navigator.clipboard.writeText(value);
-    this.input.blur();
-    this.setState({ copied: true });
-    this.timeout = setTimeout(() => this.setState({ copied: false }), 700);
+  handleMessage = (event) => {
+    const { resourceUrl } = this.props;
+
+    if (event.origin !== window.origin || event.source !== this.iframeRef.contentWindow) {
+      return;
+    }
+
+    if (event.data?.type === 'fetchInteractionURL-failure') {
+      this.setState({ isSubmitting: false, error: true });
+    } else if (event.data?.type === 'fetchInteractionURL-success') {
+      if (/^https?:\/\//.test(event.data.template)) {
+        if (localStorage) {
+          localStorage.setItem(PERSISTENCE_KEY, event.data.uri_or_domain);
+        }
+
+        window.location.href = event.data.template.replace('{uri}', encodeURIComponent(resourceUrl));
+      } else {
+        this.setState({ isSubmitting: false, error: true });
+      }
+    }
   };
 
-  componentWillUnmount () {
-    if (this.timeout) clearTimeout(this.timeout);
+  componentDidMount () {
+    window.addEventListener('message', this.handleMessage);
   }
 
+  componentWillUnmount () {
+    window.removeEventListener('message', this.handleMessage);
+  }
+
+  handleSubmit = () => {
+    const { value } = this.state;
+
+    this.setState({ isSubmitting: true });
+
+    this.iframeRef.contentWindow.postMessage({
+      type: 'fetchInteractionURL',
+      uri_or_domain: value.trim(),
+    }, window.origin);
+  };
+
+  setIFrameRef = (iframe) => {
+    this.iframeRef = iframe;
+  }
+
+  handleFocus = () => {
+    this.setState({ expanded: true });
+  };
+
+  handleBlur = () => {
+    this.setState({ expanded: false });
+  };
+
+  handleKeyDown = (e) => {
+    const { options, selectedOption } = this.state;
+
+    switch(e.key) {
+    case 'ArrowDown':
+      e.preventDefault();
+
+      if (options.length > 0) {
+        this.setState({ selectedOption: Math.min(selectedOption + 1, options.length - 1) });
+      }
+
+      break;
+    case 'ArrowUp':
+      e.preventDefault();
+
+      if (options.length > 0) {
+        this.setState({ selectedOption: Math.max(selectedOption - 1, -1) });
+      }
+
+      break;
+    case 'Enter':
+      e.preventDefault();
+
+      if (selectedOption === -1) {
+        this.handleSubmit();
+      } else if (options.length > 0) {
+        this.setState({ value: options[selectedOption], error: false }, () => this.handleSubmit());
+      }
+
+      break;
+    }
+  };
+
+  handleOptionClick = e => {
+    const index  = Number(e.currentTarget.getAttribute('data-index'));
+    const option = this.state.options[index];
+
+    e.preventDefault();
+    this.setState({ selectedOption: index, value: option, error: false }, () => this.handleSubmit());
+  };
+
+  _loadOptions = throttle(() => {
+    const { value } = this.state;
+
+    const domain = valueToDomain(value.trim());
+
+    if (typeof domain === 'undefined') {
+      this.setState({ options: [], networkOptions: [], isLoading: false, error: true });
+      return;
+    }
+
+    if (domain.length === 0) {
+      this.setState({ options: [], networkOptions: [], isLoading: false });
+      return;
+    }
+
+    api().get('/api/v1/peers/search', { params: { q: domain } }).then(({ data }) => {
+      if (!data) {
+        data = [];
+      }
+
+      this.setState((state) => ({ networkOptions: data, options: addInputToOptions(state.value, data), isLoading: false }));
+    }).catch(() => {
+      this.setState({ isLoading: false });
+    });
+  }, 200, { leading: true, trailing: true });
+
   render () {
-    const { value } = this.props;
-    const { copied } = this.state;
+    const { intl } = this.props;
+    const { value, expanded, options, selectedOption, error, isSubmitting } = this.state;
+    const domain = (valueToDomain(value) || '').trim();
+    const domainRegExp = new RegExp(`(${escapeRegExp(domain)})`, 'gi');
+    const hasPopOut = domain.length > 0 && options.length > 0;
 
     return (
-      <div className={classNames('copypaste', { copied })}>
-        <input
-          type='text'
-          ref={this.setRef}
-          value={value}
-          readOnly
-          onClick={this.handleInputClick}
+      <div className={classNames('interaction-modal__login', { focused: expanded, expanded: hasPopOut, invalid: error })}>
+
+        <iframe
+          ref={this.setIFrameRef}
+          style={{display: 'none'}}
+          src='/remote_interaction_helper'
+          sandbox='allow-scripts allow-same-origin'
+          title='remote interaction helper'
         />
 
-        <button className='button' onClick={this.handleButtonClick}>
-          {copied ? <FormattedMessage id='copypaste.copied' defaultMessage='Copied' /> : <FormattedMessage id='copypaste.copy' defaultMessage='Copy' />}
-        </button>
+        <div className='interaction-modal__login__input'>
+          <input
+            ref={this.setRef}
+            type='text'
+            value={value}
+            placeholder={intl.formatMessage(messages.loginPrompt)}
+            aria-label={intl.formatMessage(messages.loginPrompt)}
+            autoFocus
+            onChange={this.handleChange}
+            onFocus={this.handleFocus}
+            onBlur={this.handleBlur}
+            onKeyDown={this.handleKeyDown}
+          />
+
+          <Button onClick={this.handleSubmit} disabled={isSubmitting}><FormattedMessage id='interaction_modal.login.action' defaultMessage='Take me home' /></Button>
+        </div>
+
+        {hasPopOut && (
+          <div className='search__popout'>
+            <div className='search__popout__menu'>
+              {options.map((option, i) => (
+                <button key={option} onMouseDown={this.handleOptionClick} data-index={i} className={classNames('search__popout__menu__item', { selected: selectedOption === i })}>
+                  {option.split(domainRegExp).map((part, i) => (
+                    part.toLowerCase() === domain.toLowerCase() ? (
+                      <mark key={i}>
+                        {part}
+                      </mark>
+                    ) : (
+                      <span key={i}>
+                        {part}
+                      </span>
+                    )
+                  ))}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
       </div>
     );
   }
 
 }
 
-class InteractionModal extends PureComponent {
+const IntlLoginForm = injectIntl(LoginForm);
+
+class InteractionModal extends React.PureComponent {
 
   static propTypes = {
     displayNameHtml: PropTypes.string,
     url: PropTypes.string,
     type: PropTypes.oneOf(['reply', 'reblog', 'favourite', 'follow']),
     onSignupClick: PropTypes.func.isRequired,
-    signupUrl: PropTypes.string.isRequired,
   };
 
   handleSignupClick = () => {
@@ -97,7 +298,7 @@ class InteractionModal extends PureComponent {
   };
 
   render () {
-    const { url, type, displayNameHtml, signupUrl } = this.props;
+    const { url, type, displayNameHtml } = this.props;
 
     const name = <bdi dangerouslySetInnerHTML={{ __html: displayNameHtml }} />;
 
@@ -130,13 +331,13 @@ class InteractionModal extends PureComponent {
 
     if (registrationsOpen) {
       signupButton = (
-        <a href={signupUrl} className='button button--block button-tertiary'>
+        <a href='/auth/sign_up' className='link-button'>
           <FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' />
         </a>
       );
     } else {
       signupButton = (
-        <button className='button button--block button-tertiary' onClick={this.handleSignupClick}>
+        <button className='link-button' onClick={this.handleSignupClick}>
           <FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' />
         </button>
       );
@@ -146,22 +347,13 @@ class InteractionModal extends PureComponent {
       <div className='modal-root__modal interaction-modal'>
         <div className='interaction-modal__lead'>
           <h3><span className='interaction-modal__icon'>{icon}</span> {title}</h3>
-          <p>{actionDescription} <FormattedMessage id='interaction_modal.preamble' defaultMessage="Since Mastodon is decentralized, you can use your existing account hosted by another Mastodon server or compatible platform if you don't have an account on this one." /></p>
+          <p>{actionDescription} <strong><FormattedMessage id='interaction_modal.sign_in' defaultMessage='You are not logged in to this server. Where is your account hosted?' /></strong></p>
         </div>
 
-        <div className='interaction-modal__choices'>
-          <div className='interaction-modal__choices__choice'>
-            <h3><FormattedMessage id='interaction_modal.on_this_server' defaultMessage='On this server' /></h3>
-            <a href='/auth/sign_in' className='button button--block'><FormattedMessage id='sign_in_banner.sign_in' defaultMessage='Login' /></a>
-            {signupButton}
-          </div>
+        <IntlLoginForm resourceUrl={url} />
 
-          <div className='interaction-modal__choices__choice'>
-            <h3><FormattedMessage id='interaction_modal.on_another_server' defaultMessage='On a different server' /></h3>
-            <p><FormattedMessage id='interaction_modal.other_server_instructions' defaultMessage='Copy and paste this URL into the search field of your favorite Mastodon app or the web interface of your Mastodon server.' /></p>
-            <Copypaste value={url} />
-          </div>
-        </div>
+        <p className='hint'><FormattedMessage id='interaction_modal.sign_in_hint' defaultMessage="Tip: That's the website where you signed up. If you don't remember, look for the welcome e-mail in your inbox. You can also enter your full username! (e.g. @Mastodon@mastodon.social)" /></p>
+        <p><FormattedMessage id='interaction_modal.no_account_yet' defaultMessage='Not on Mastodon?' /> {signupButton}</p>
       </div>
     );
   }

app/javascript/mastodon/features/picture_in_picture/components/footer.jsx

@@ -91,7 +91,7 @@ class Footer extends ImmutablePureComponent {
         modalProps: {
           type: 'reply',
           accountId: status.getIn(['account', 'id']),
-          url: status.get('url'),
+          url: status.get('uri'),
         },
       }));
     }
@@ -113,7 +113,7 @@ class Footer extends ImmutablePureComponent {
         modalProps: {
           type: 'favourite',
           accountId: status.getIn(['account', 'id']),
-          url: status.get('url'),
+          url: status.get('uri'),
         },
       }));
     }
@@ -142,7 +142,7 @@ class Footer extends ImmutablePureComponent {
         modalProps: {
           type: 'reblog',
           accountId: status.getIn(['account', 'id']),
-          url: status.get('url'),
+          url: status.get('uri'),
         },
       }));
     }

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

@@ -252,7 +252,7 @@ class Status extends ImmutablePureComponent {
         modalProps: {
           type: 'favourite',
           accountId: status.getIn(['account', 'id']),
-          url: status.get('url'),
+          url: status.get('uri'),
         },
       }));
     }
@@ -289,7 +289,7 @@ class Status extends ImmutablePureComponent {
         modalProps: {
           type: 'reply',
           accountId: status.getIn(['account', 'id']),
-          url: status.get('url'),
+          url: status.get('uri'),
         },
       }));
     }
@@ -319,7 +319,7 @@ class Status extends ImmutablePureComponent {
         modalProps: {
           type: 'reblog',
           accountId: status.getIn(['account', 'id']),
-          url: status.get('url'),
+          url: status.get('uri'),
         },
       }));
     }

app/javascript/mastodon/locales/en.json

@@ -191,7 +191,6 @@
   "conversation.open": "View conversation",
   "conversation.with": "With {names}",
   "copypaste.copied": "Copied",
-  "copypaste.copy": "Copy",
   "copypaste.copy_to_clipboard": "Copy to clipboard",
   "directory.federated": "From known fediverse",
   "directory.local": "From {domain} only",
@@ -311,10 +310,13 @@
   "interaction_modal.description.follow": "With an account on Mastodon, you can follow {name} to receive their posts in your home feed.",
   "interaction_modal.description.reblog": "With an account on Mastodon, you can boost this post to share it with your own followers.",
   "interaction_modal.description.reply": "With an account on Mastodon, you can respond to this post.",
+  "interaction_modal.login.action": "Take me home",
+  "interaction_modal.login.prompt": "Domain of your home server, e.g. mastodon.social",
+  "interaction_modal.no_account_yet": "Not on Mastodon?",
   "interaction_modal.on_another_server": "On a different server",
   "interaction_modal.on_this_server": "On this server",
-  "interaction_modal.other_server_instructions": "Copy and paste this URL into the search field of your favorite Mastodon app or the web interface of your Mastodon server.",
-  "interaction_modal.preamble": "Since Mastodon is decentralized, you can use your existing account hosted by another Mastodon server or compatible platform if you don't have an account on this one.",
+  "interaction_modal.sign_in": "You are not logged in to this server. Where is your account hosted?",
+  "interaction_modal.sign_in_hint": "Tip: That's the website where you signed up. If you don't remember, look for the welcome e-mail in your inbox. You can also enter your full username! (e.g. @Mastodon@mastodon.social)",
   "interaction_modal.title.favourite": "Favorite {name}'s post",
   "interaction_modal.title.follow": "Follow {name}",
   "interaction_modal.title.reblog": "Boost {name}'s post",

app/javascript/packs/remote_interaction_helper.ts

@@ -0,0 +1,172 @@
+/*
+
+This script is meant to to be used in an `iframe` with the sole purpose of doing webfinger queries
+client-side without being restricted by a strict `connect-src` Content-Security-Policy directive.
+
+It communicates with the parent window through message events that are authenticated by origin,
+and performs no other task.
+
+*/
+
+import './public-path';
+
+import axios from 'axios';
+
+interface JRDLink {
+  rel: string;
+  template?: string;
+  href?: string;
+}
+
+const isJRDLink = (link: unknown): link is JRDLink =>
+  typeof link === 'object' &&
+  link !== null &&
+  'rel' in link &&
+  typeof link.rel === 'string' &&
+  (!('template' in link) || typeof link.template === 'string') &&
+  (!('href' in link) || typeof link.href === 'string');
+
+const findLink = (rel: string, data: unknown): JRDLink | undefined => {
+  if (
+    typeof data === 'object' &&
+    data !== null &&
+    'links' in data &&
+    data.links instanceof Array
+  ) {
+    return data.links.find(
+      (link): link is JRDLink => isJRDLink(link) && link.rel === rel,
+    );
+  } else {
+    return undefined;
+  }
+};
+
+const findTemplateLink = (data: unknown) =>
+  findLink('http://ostatus.org/schema/1.0/subscribe', data)?.template;
+
+const fetchInteractionURLSuccess = (
+  uri_or_domain: string,
+  template: string,
+) => {
+  window.parent.postMessage(
+    {
+      type: 'fetchInteractionURL-success',
+      uri_or_domain,
+      template,
+    },
+    window.origin,
+  );
+};
+
+const fetchInteractionURLFailure = () => {
+  window.parent.postMessage(
+    {
+      type: 'fetchInteractionURL-failure',
+    },
+    window.origin,
+  );
+};
+
+const isValidDomain = (value: string) => {
+  const url = new URL('https:///path');
+  url.hostname = value;
+  return url.hostname === value;
+};
+
+// Attempt to find a remote interaction URL from a domain
+const fromDomain = (domain: string) => {
+  const fallbackTemplate = `https://${domain}/authorize_interaction?uri={uri}`;
+
+  axios
+    .get(`https://${domain}/.well-known/webfinger`, {
+      params: { resource: `https://${domain}` },
+    })
+    .then(({ data }) => {
+      const template = findTemplateLink(data);
+      fetchInteractionURLSuccess(domain, template ?? fallbackTemplate);
+      return;
+    })
+    .catch(() => {
+      fetchInteractionURLSuccess(domain, fallbackTemplate);
+    });
+};
+
+// Attempt to find a remote interaction URL from an arbitrary URL
+const fromURL = (url: string) => {
+  const domain = new URL(url).host;
+  const fallbackTemplate = `https://${domain}/authorize_interaction?uri={uri}`;
+
+  axios
+    .get(`https://${domain}/.well-known/webfinger`, {
+      params: { resource: url },
+    })
+    .then(({ data }) => {
+      const template = findTemplateLink(data);
+      fetchInteractionURLSuccess(url, template ?? fallbackTemplate);
+      return;
+    })
+    .catch(() => {
+      fromDomain(domain);
+    });
+};
+
+// Attempt to find a remote interaction URL from a `user@domain` string
+const fromAcct = (acct: string) => {
+  acct = acct.replace(/^@/, '');
+
+  const segments = acct.split('@');
+
+  if (segments.length !== 2 || !segments[0] || !isValidDomain(segments[1])) {
+    fetchInteractionURLFailure();
+    return;
+  }
+
+  const domain = segments[1];
+  const fallbackTemplate = `https://${domain}/authorize_interaction?uri={uri}`;
+
+  axios
+    .get(`https://${domain}/.well-known/webfinger`, {
+      params: { resource: `acct:${acct}` },
+    })
+    .then(({ data }) => {
+      const template = findTemplateLink(data);
+      fetchInteractionURLSuccess(acct, template ?? fallbackTemplate);
+      return;
+    })
+    .catch(() => {
+      // TODO: handle host-meta?
+      fromDomain(domain);
+    });
+};
+
+const fetchInteractionURL = (uri_or_domain: string) => {
+  if (/^https?:\/\//.test(uri_or_domain)) {
+    fromURL(uri_or_domain);
+  } else if (uri_or_domain.includes('@')) {
+    fromAcct(uri_or_domain);
+  } else {
+    fromDomain(uri_or_domain);
+  }
+};
+
+window.addEventListener('message', (event: MessageEvent<unknown>) => {
+  // Check message origin
+  if (
+    !window.origin ||
+    window.parent !== event.source ||
+    event.origin !== window.origin
+  ) {
+    return;
+  }
+
+  if (
+    event.data &&
+    typeof event.data === 'object' &&
+    'type' in event.data &&
+    event.data.type === 'fetchInteractionURL' &&
+    'uri_or_domain' in event.data &&
+    typeof event.data.uri_or_domain === 'string'
+  ) {
+    fetchInteractionURL(event.data.uri_or_domain);
+  }
+});

app/javascript/styles/mastodon/components.scss

@@ -8356,13 +8356,13 @@ noscript {
 .interaction-modal {
   max-width: 90vw;
   width: 600px;
-  background: $ui-base-color;
+  background: var(--modal-background-color);
+  border: 1px solid var(--modal-border-color);
   border-radius: 8px;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: visible;
   position: relative;
   display: block;
-  padding: 20px;
+  padding: 40px;
 
   h3 {
     font-size: 22px;
@@ -8371,63 +8371,100 @@ noscript {
     text-align: center;
   }
 
+  p {
+    font-size: 17px;
+    line-height: 22px;
+    color: $darker-text-color;
+
+    strong {
+      color: $primary-text-color;
+      font-weight: 700;
+    }
+  }
+
+  p.hint {
+    margin-bottom: 14px;
+    font-size: 14px;
+  }
+
   &__icon {
     color: $highlight-text-color;
     margin: 0 5px;
   }
 
   &__lead {
-    padding: 20px;
-    text-align: center;
+    margin-bottom: 20px;
 
     h3 {
       margin-bottom: 15px;
     }
-
-    p {
-      font-size: 17px;
-      line-height: 22px;
-      color: $darker-text-color;
-    }
   }
 
-  &__choices {
-    display: flex;
+  &__login {
+    position: relative;
+    margin-bottom: 20px;
 
-    &__choice {
-      flex: 0 0 auto;
-      width: 50%;
-      box-sizing: border-box;
-      padding: 20px;
+    &__input {
+      @include search-input;
 
-      h3 {
-        margin-bottom: 20px;
-      }
+      border: 1px solid lighten($ui-base-color, 8%);
+      padding: 4px 6px;
+      color: $primary-text-color;
+      font-size: 16px;
+      line-height: 18px;
+      display: flex;
+      align-items: center;
 
-      p {
-        color: $darker-text-color;
-        margin-bottom: 20px;
+      input {
+        background: transparent;
+        color: inherit;
+        font: inherit;
+        border: 0;
+        padding: 15px - 4px 15px - 6px;
+        flex: 1 1 auto;
+
+        &::placeholder {
+          color: lighten($darker-text-color, 4%);
+        }
+
+        &:focus {
+          outline: 0;
+        }
       }
 
       .button {
-        margin-bottom: 10px;
-
-        &:last-child {
-          margin-bottom: 0;
-        }
+        flex: 0 0 auto;
       }
     }
+
+    .search__popout {
+      margin-top: -1px;
+      padding-top: 5px;
+      padding-bottom: 5px;
+      border: 1px solid lighten($ui-base-color, 8%);
+    }
+
+    &.focused &__input {
+      border-color: $highlight-text-color;
+      background: lighten($ui-base-color, 4%);
+    }
+
+    &.invalid &__input {
+      border-color: $error-red;
+    }
+
+    &.expanded .search__popout {
+      display: block;
+    }
+
+    &.expanded &__input {
+      border-radius: 4px 4px 0 0;
+    }
   }
 
-  @media screen and (max-width: $no-gap-breakpoint - 1px) {
-    &__choices {
-      display: block;
-
-      &__choice {
-        width: auto;
-        margin-bottom: 20px;
-      }
-    }
+  .link-button {
+    font-size: inherit;
+    display: inline;
   }
 }
 

app/javascript/styles/mastodon/variables.scss

@@ -96,4 +96,6 @@ $font-monospace: 'mastodon-font-monospace' !default;
   --dropdown-background-color: #{lighten($ui-base-color, 4%)};
   --dropdown-shadow: 0 20px 25px -5px #{rgba($base-shadow-color, 0.25)},
     0 8px 10px -6px #{rgba($base-shadow-color, 0.25)};
+  --modal-background-color: #{darken($ui-base-color, 4%)};
+  --modal-border-color: #{lighten($ui-base-color, 4%)};
 }

app/javascript/types/resources.ts

@@ -33,6 +33,7 @@ interface AccountApiResponseValues {
   note: string;
   statuses_count: number;
   url: string;
+  uri: string;
   username: string;
 }
 

app/lib/importer/instances_index_importer.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+class Importer::InstancesIndexImporter < Importer::BaseImporter
+  def import!
+    index.adapter.default_scope.find_in_batches(batch_size: @batch_size) do |tmp|
+      in_work_unit(tmp) do |instances|
+        bulk = Chewy::Index::Import::BulkBuilder.new(index, to_index: instances).bulk_body
+
+        indexed = bulk.count { |entry| entry[:index] }
+        deleted = bulk.count { |entry| entry[:delete] }
+
+        Chewy::Index::Import::BulkRequest.new(index).perform(bulk)
+
+        [indexed, deleted]
+      end
+    end
+
+    wait!
+  end
+
+  private
+
+  def index
+    InstancesIndex
+  end
+end

app/lib/webfinger_resource.rb

@@ -11,6 +11,8 @@ class WebfingerResource
 
   def username
     case resource
+    when %r{\A(https?://)?#{instance_actor_regexp}/?\Z}
+      Rails.configuration.x.local_domain
     when /\Ahttps?/i
       username_from_url
     when /@/
@@ -22,6 +24,13 @@ class WebfingerResource
 
   private
 
+  def instance_actor_regexp
+    hosts = [Rails.configuration.x.local_domain, Rails.configuration.x.web_domain]
+    hosts.concat(Rails.configuration.x.alternate_domains) if Rails.configuration.x.alternate_domains.present?
+
+    Regexp.union(hosts)
+  end
+
   def username_from_url
     if account_show_page?
       path_params[:username]

app/models/instance.rb

@@ -21,6 +21,7 @@ class Instance < ApplicationRecord
     belongs_to :unavailable_domain # skipcq: RB-RL1031
   end
 
+  scope :searchable, -> { where.not(domain: DomainBlock.select(:domain)) }
   scope :matches_domain, ->(value) { where(arel_table[:domain].matches("%#{value}%")) }
   scope :by_domain_and_subdomains, ->(domain) { where("reverse('.' || domain) LIKE reverse(?)", "%.#{domain}") }
 

app/serializers/rest/account_serializer.rb

@@ -5,7 +5,7 @@ class REST::AccountSerializer < ActiveModel::Serializer
   include FormattingHelper
 
   attributes :id, :username, :acct, :display_name, :locked, :bot, :discoverable, :group, :created_at,
-             :note, :url, :avatar, :avatar_static, :header, :header_static,
+             :note, :url, :uri, :avatar, :avatar_static, :header, :header_static,
              :followers_count, :following_count, :statuses_count, :last_status_at
 
   has_one :moved_to_account, key: :moved, serializer: REST::AccountSerializer, if: :moved_and_not_nested?
@@ -66,6 +66,10 @@ class REST::AccountSerializer < ActiveModel::Serializer
     ActivityPub::TagManager.instance.url_for(object)
   end
 
+  def uri
+    ActivityPub::TagManager.instance.uri_for(object)
+  end
+
   def avatar
     full_asset_url(object.suspended? ? object.avatar.default_url : object.avatar_original_url)
   end

app/serializers/webfinger_serializer.rb

@@ -22,6 +22,7 @@ class WebfingerSerializer < ActiveModel::Serializer
       [
         { rel: 'http://webfinger.net/rel/profile-page', type: 'text/html', href: about_more_url(instance_actor: true) },
         { rel: 'self', type: 'application/activity+json', href: instance_actor_url },
+        { rel: 'http://ostatus.org/schema/1.0/subscribe', template: "#{authorize_interaction_url}?uri={uri}" },
       ]
     else
       [

app/views/authorize_interactions/_post_follow_actions.html.haml

@@ -1,4 +0,0 @@
-.post-follow-actions
-  %div= link_to t('authorize_follow.post_follow.web'), web_url("@#{@resource.pretty_acct}"), class: 'button button--block'
-  %div= link_to t('authorize_follow.post_follow.return'), ActivityPub::TagManager.instance.url_for(@resource), class: 'button button--block'
-  %div= t('authorize_follow.post_follow.close')

app/views/authorize_interactions/error.html.haml

@@ -1,3 +0,0 @@
-.form-container
-  .flash-message#error_explanation
-    = t('authorize_follow.error')

app/views/authorize_interactions/show.html.haml

@@ -1,24 +0,0 @@
-- content_for :page_title do
-  = t('authorize_follow.title', acct: @resource.pretty_acct)
-
-.form-container
-  .follow-prompt
-    = render 'application/card', account: @resource
-
-  - if current_account.following?(@resource)
-    .flash-message
-      %strong
-        = t('authorize_follow.already_following')
-
-    = render 'post_follow_actions'
-  - elsif current_account.requested?(@resource)
-    .flash-message
-      %strong
-        = t('authorize_follow.already_requested')
-
-    = render 'post_follow_actions'
-  - else
-    = form_tag authorize_interaction_path, method: :post, class: 'simple_form' do
-      = hidden_field_tag :action, :follow
-      = hidden_field_tag :acct, @resource.acct
-      = button_tag t('authorize_follow.follow'), type: :submit

app/views/authorize_interactions/success.html.haml

@@ -1,13 +0,0 @@
-- content_for :page_title do
-  = t('authorize_follow.title', acct: @resource.pretty_acct)
-
-.form-container
-  .follow-prompt
-    - if @resource.locked?
-      %h2= t('authorize_follow.follow_request')
-    - else
-      %h2= t('authorize_follow.following')
-
-    = render 'application/card', account: @resource
-
-  = render 'post_follow_actions'

app/views/layouts/helper_frame.html.haml

@@ -0,0 +1,8 @@
+!!! 5
+%html
+  %head
+    %meta{ charset: 'utf-8' }/
+
+    = javascript_pack_tag 'common', crossorigin: 'anonymous'
+
+    = yield :header_tags

app/views/remote_interaction_helper/index.html.haml

@@ -0,0 +1,4 @@
+- content_for :header_tags do
+  %meta{ name: 'robots', content: 'noindex' }/
+
+  = javascript_pack_tag 'remote_interaction_helper', crossorigin: 'anonymous'

app/workers/scheduler/instance_refresh_scheduler.rb

@@ -7,5 +7,6 @@ class Scheduler::InstanceRefreshScheduler
 
   def perform
     Instance.refresh
+    InstancesIndex.import if Chewy.enabled?
   end
 end