Merge branch 'remote_follow' into 'develop'

Remote follow

See merge request soapbox-pub/soapbox-fe!436

app/soapbox/features/account/components/header.js

@@ -292,19 +292,16 @@ class Header extends ImmutablePureComponent {
               </div>
             }
 
-            {
-              me &&
-              <div className='account__header__extra__buttons'>
-                <ActionButton account={account} />
-                {account.get('id') !== me && account.getIn(['pleroma', 'accepts_chat_messages'], false) === true &&
-                  <Button className='button-alternative-2' onClick={this.props.onChat}>
-                    <Icon id='comment' />
-                    <FormattedMessage id='account.message' defaultMessage='Message' />
-                  </Button>
-                }
-                <DropdownMenuContainer items={menu} icon='ellipsis-v' size={24} direction='right' />
-              </div>
-            }
+            <div className='account__header__extra__buttons'>
+              <ActionButton account={account} />
+              {me && account.get('id') !== me && account.getIn(['pleroma', 'accepts_chat_messages'], false) === true &&
+                <Button className='button-alternative-2' onClick={this.props.onChat}>
+                  <Icon id='comment' />
+                  <FormattedMessage id='account.message' defaultMessage='Message' />
+                </Button>
+              }
+              {me && <DropdownMenuContainer items={menu} icon='ellipsis-v' size={24} direction='right' />}
+            </div>
 
           </div>
         </div>

app/soapbox/features/ui/components/action_button.js

@@ -16,6 +16,7 @@ import {
 const messages = defineMessages({
   unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
   follow: { id: 'account.follow', defaultMessage: 'Follow' },
+  remote_follow: { id: 'account.remote_follow', defaultMessage: 'Remote follow' },
   requested: { id: 'account.requested', defaultMessage: 'Awaiting approval. Click to cancel follow request' },
   requested_small: { id: 'account.requested_small', defaultMessage: 'Awaiting approval' },
   unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
@@ -81,24 +82,42 @@ class ActionButton extends ImmutablePureComponent {
 
   render() {
     const { account, intl, me, small } = this.props;
-    let actionBtn = null;
+    const empty = <></>;
 
-    if (!account || !me) return actionBtn;
+    if (!me) {
+      // Remote follow
+      return (<form method='POST' action='/main/ostatus'>
+        <input type='hidden' name='nickname' value={account.get('username')} />
+        <input type='hidden' name='profile' value='' />
+        <Button className='logo-button' text={intl.formatMessage(messages.remote_follow)} click='submit' />
+      </form>);
+    }
 
     if (me !== account.get('id')) {
       if (!account.get('relationship')) { // Wait until the relationship is loaded
-        //
+        return empty;
       } else if (account.getIn(['relationship', 'requested'])) {
-        actionBtn = <Button className='logo-button' text={small ? intl.formatMessage(messages.requested_small) : intl.formatMessage(messages.requested)} onClick={this.handleFollow} />;
+        // Awaiting acceptance
+        return <Button className='logo-button' text={small ? intl.formatMessage(messages.requested_small) : intl.formatMessage(messages.requested)} onClick={this.handleFollow} />;
       } else if (!account.getIn(['relationship', 'blocking'])) {
-        actionBtn = <Button disabled={account.getIn(['relationship', 'blocked_by'])} className={classNames('logo-button', { 'button--destructive': account.getIn(['relationship', 'following']) })} text={intl.formatMessage(account.getIn(['relationship', 'following']) ? messages.unfollow : messages.follow)} onClick={this.handleFollow} />;
+        // Follow & Unfollow
+        return (<Button
+          disabled={account.getIn(['relationship', 'blocked_by'])}
+          className={classNames('logo-button', {
+            'button--destructive': account.getIn(['relationship', 'following']),
+          })}
+          text={intl.formatMessage(account.getIn(['relationship', 'following']) ? messages.unfollow : messages.follow)}
+          onClick={this.handleFollow}
+        />);
       } else if (account.getIn(['relationship', 'blocking'])) {
-        actionBtn = <Button className='logo-button' text={intl.formatMessage(messages.unblock, { name: account.get('username') })} onClick={this.handleBlock} />;
+        // Unblock
+        return <Button className='logo-button' text={intl.formatMessage(messages.unblock, { name: account.get('username') })} onClick={this.handleBlock} />;
       }
     } else {
-      actionBtn = <Button className='logo-button' text={intl.formatMessage(messages.edit_profile)} to='/settings/profile' />;
+      // Edit profile
+      return <Button className='logo-button' text={intl.formatMessage(messages.edit_profile)} to='/settings/profile' />;
     }
-    return actionBtn;
+    return empty;
   }
 
 }

app/soapbox/service_worker/entry.js

@@ -65,7 +65,9 @@ self.addEventListener('fetch', function(event) {
     url.pathname.startsWith('/avatars') ||
     url.pathname.startsWith('/authorize_follow') ||
     url.pathname.startsWith('/media_proxy') ||
-    url.pathname.startsWith('/relationships')) {
+    url.pathname.startsWith('/relationships') ||
+    url.pathname.startsWith('/main/ostatus') ||
+    url.pathname.startsWith('/ostatus_subscribe')) {
     //non-webapp routes
   } else if (url.pathname.startsWith('/')) {
     // : TODO : if is /web

webpack/development.js

@@ -22,6 +22,8 @@ const backendEndpoints = [
   '/.well-known/webfinger',
   '/static',
   '/emoji',
+  '/main/ostatus',
+  '/ostatus_subscribe',
 ];
 
 const makeProxyConfig = () => {