src/app/common/components/post-menu/post-menu.component.spec.ts

@@ -26,6 +26,9 @@ import { FeaturesService } from '../../../services/features.service';
 import { activityServiceMock } from '../../../../tests/activity-service-mock.spec';
 import { storageMock } from '../../../../tests/storage-mock.spec';
 import { featuresServiceMock } from '../../../../tests/features-service-mock.spec';
+import { Storage } from '../../../services/storage';
+import { PermissionsService } from '../../services/permissions.service';
+import { MockService } from '../../../utils/mock';
 /* tslint:disable */
 
 /* Mock section */
@@ -99,6 +102,10 @@ describe('PostMenuComponent', () => {
         { provide: OverlayModalService, useValue: overlayModalServiceMock },
         { provide: ActivityService, useValue: activityServiceMock },
         { provide: FeaturesService, useValue: featuresServiceMock },
+        {
+          provide: PermissionsService,
+          useValue: MockService(PermissionsService),
+        },
         { provide: Storage, useValue: storageMock },
         {
           provide: BlockListService,
@@ -114,6 +121,7 @@ describe('PostMenuComponent', () => {
   // synchronous beforeEach
   beforeEach(() => {
     featuresServiceMock.mock('allow-comments-toggle', true);
+    featuresServiceMock.mock('permissions', false);
     fixture = TestBed.createComponent(PostMenuComponent);
 
     comp = fixture.componentInstance;

src/app/modules/channels/channel.component.html

@@ -145,6 +145,15 @@
         >
           Subscriptions ({{ user.subscriptions_count }})
         </a>
+
+        <a
+          [routerLink]="['/', user.username, 'requests']"
+          *ngIf="user.mode === 2 && user.guid == session.getLoggedInUser().guid"
+          class="mdl-tabs__tab"
+          [ngClass]="{ 'is-active': filter === 'requests' }"
+        >
+          Requests
+        </a>
       </div>
     </div>
 
@@ -174,6 +183,15 @@
         >
           Subscriptions ({{ user.subscriptions_count }})
         </a>
+
+        <a
+          [routerLink]="['/', user.username, 'requests']"
+          *ngIf="user.mode === 2 && user.guid == session.getLoggedInUser().guid"
+          class="mdl-tabs__tab"
+          [ngClass]="{ 'is-active': filter === 'requests' }"
+        >
+          Requests
+        </a>
       </div>
     </div>
 
@@ -182,6 +200,10 @@
       class="mdl-grid"
     ></m-channel--subscribers>
   </section>
+
+  <section class="mdl-cell mdl-cell--8-col" *ngIf="filter == 'requests'">
+    <m-subscriptionsRequests__list></m-subscriptionsRequests__list>
+  </section>
 </div>
 
 <m-channel--explicit-overlay [channel]="user"></m-channel--explicit-overlay>

src/app/modules/channels/channel.component.spec.ts

@@ -39,6 +39,7 @@ import { BlockListService } from '../../common/services/block-list.service';
 import { ChannelMode } from '../../interfaces/entities';
 import { ClientMetaService } from '../../common/services/client-meta.service';
 import { clientMetaServiceMock } from '../../../tests/client-meta-service-mock.spec';
+import { PermissionsService } from '../../common/services/permissions.service';
 
 describe('ChannelComponent', () => {
   let comp: ChannelComponent;
@@ -50,6 +51,14 @@ describe('ChannelComponent', () => {
         MaterialMock,
         MaterialSwitchMock,
         ChannelComponent,
+        MockComponent({
+          selector: 'minds-avatar',
+          inputs: ['object', 'src', 'editMode', 'waitForDoneSignal'],
+        }),
+        MockComponent({
+          selector: 'minds-button-subscribe',
+          inputs: ['user', 'request'],
+        }),
         MockComponent({
           selector: 'm-channel--supporters',
           inputs: ['channel'],
@@ -62,6 +71,10 @@ describe('ChannelComponent', () => {
           selector: 'm-channel--subscribers',
           inputs: ['channel'],
         }),
+        MockComponent({
+          selector: 'm-subscriptionsRequests__list',
+          inputs: [],
+        }),
         MockComponent({
           selector: 'm-channel--carousel',
           inputs: ['banners', 'editMode'],
@@ -108,6 +121,10 @@ describe('ChannelComponent', () => {
         { provide: FeaturesService, useValue: featuresServiceMock },
         { provide: BlockListService, useValue: MockService(BlockListService) },
         { provide: ClientMetaService, useValue: clientMetaServiceMock },
+        {
+          provide: PermissionsService,
+          useValue: MockService(PermissionsService),
+        },
       ],
     }).compileComponents(); // compile template and css
   }));
@@ -122,6 +139,7 @@ describe('ChannelComponent', () => {
     featuresServiceMock.mock('es-feeds', false);
     featuresServiceMock.mock('top-feeds', false);
     featuresServiceMock.mock('channel-filter-feeds', false);
+    featuresServiceMock.mock('permissions', false);
     comp = fixture.componentInstance;
     comp.username = 'username';
     comp.user = {

src/app/modules/channels/channels.module.ts

@@ -29,6 +29,8 @@ import { HashtagsModule } from '../hashtags/hashtags.module';
 import { ChannelSortedComponent } from './sorted/sorted.component';
 import { ChannelSortedModuleComponent } from './sorted/module.component';
 import { ReferralsModule } from '../wallet/tokens/referrals/referrals.module';
+import { SubscriptionsRequestsListComponent } from './requests/list.component';
+import { SubscriptionsRequestsRequestComponent } from './requests/request.component';
 
 const routes: Routes = [
   { path: 'channels/:filter', component: ChannelsListComponent },
@@ -65,6 +67,8 @@ const routes: Routes = [
     ExplicitOverlayComponent,
     ChannelSortedComponent,
     ChannelSortedModuleComponent,
+    SubscriptionsRequestsListComponent,
+    SubscriptionsRequestsRequestComponent,
   ],
   exports: [
     ChannelModulesComponent,

src/app/modules/channels/requests/list.component.html

+<ul class="m-subscriptionsRequests__list">
+  <li
+    *ngFor="let request of requests"
+    class="m-subscriptionsRequestsList__item"
+  >
+    <m-subscriptionsRequests__request
+      [request]="request"
+    ></m-subscriptionsRequests__request>
+  </li>
+</ul>

src/app/modules/channels/requests/list.component.scss

+.m-subscriptionsRequests__list {
+  //  @include m-theme() {
+  //    background-color: themed($m-white);
+  //  }
+  position: relative;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.m-subscriptionRequest__card {
+  @include m-theme() {
+    background-color: themed($m-white);
+  }
+  padding: $minds-padding * 2;
+  margin-bottom: $minds-margin;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  .m-subscriptionRequestCard__avatar {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+  }
+
+  .m-subscriptionRequestCard__body {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    margin-left: $minds-margin * 2;
+
+    h4 {
+      padding: 0;
+      margin: 0;
+      font-weight: 600;
+      font-size: 16px;
+    }
+    span {
+      font-size: 11px;
+      color: #888;
+    }
+    .m-btn {
+      margin-left: $minds-margin;
+    }
+  }
+}

src/app/modules/channels/requests/list.component.ts

+import { Component } from '@angular/core';
+import { Client } from '../../../services/api';
+
+@Component({
+  selector: 'm-subscriptionsRequests__list',
+  templateUrl: './list.component.html',
+})
+export class SubscriptionsRequestsListComponent {
+  minds = window.Minds;
+  requests: Array<any> = [];
+
+  constructor(private client: Client) {}
+
+  ngOnInit() {
+    this.load();
+  }
+
+  async load() {
+    const { requests } = <any>(
+      await this.client.get(`api/v2/subscriptions/incoming`)
+    );
+    this.requests = requests;
+  }
+}

src/app/modules/channels/requests/request.component.html

+<a class="m-subscriptionRequest__card m-border">
+  <div
+    class="m-subscriptionRequestCard__avatar"
+    [style.background-image]="
+      'url(' + minds.cdn_url + '/icon/' + request.subscriber.guid + ')'
+    "
+  ></div>
+  <div class="m-subscriptionRequestCard__body">
+    <div [title]="request.subscriber.briefdescription">
+      <h4>{{ request.subscriber.username }}</h4>
+      <span>{{ request.subscriber.briefdescription }}</span>
+    </div>
+    <div class="m-layout__spacer"></div>
+    <ng-container *ngIf="!request.completed; else completed">
+      <button class="m-btn m-btn--action m-btn--slim" (click)="accept($event)">
+        Accept
+      </button>
+      <button
+        class="m-btn m-btn--destructive m-btn--slim"
+        (click)="decline($event)"
+      >
+        Decline
+      </button>
+    </ng-container>
+    <ng-template #completed>
+      Saved
+    </ng-template>
+  </div>
+</a>

src/app/modules/channels/requests/request.component.ts

+import { Component, Input } from '@angular/core';
+import { Client } from '../../../services/api';
+
+@Component({
+  selector: 'm-subscriptionsRequests__request',
+  templateUrl: './request.component.html',
+})
+export class SubscriptionsRequestsRequestComponent {
+  minds = window.Minds;
+  @Input() request;
+
+  constructor(private client: Client) {}
+
+  async accept() {
+    this.request.declined = false;
+    this.request.completed = true;
+    <any>(
+      await this.client.put(
+        `api/v2/subscriptions/incoming/${this.request.subscriber_guid}/accept`
+      )
+    );
+  }
+
+  async decline() {
+    this.request.declined = true;
+    this.request.completed = true;
+    <any>(
+      await this.client.put(
+        `api/v2/subscriptions/incoming/${this.request.subscriber_guid}/decline`
+      )
+    );
+  }
+}

src/app/modules/channels/sidebar/sidebar.spec.ts

@@ -90,7 +90,7 @@ describe('ChannelSidebar', () => {
         }),
         MockComponent({
           selector: 'minds-button-subscribe',
-          inputs: ['user'],
+          inputs: ['user', 'request'],
         }),
         MockComponent({
           selector: 'm-hashtags-selector',

src/app/modules/channels/tile/tile.component.spec.ts

@@ -50,7 +50,7 @@ describe('ChannelsTileComponent', () => {
         }),
         MockComponent({
           selector: 'minds-button-subscribe',
-          inputs: ['user'],
+          inputs: ['user', 'request'],
         }),
         MockComponent({
           selector: 'm-safe-toggle',

src/app/modules/groups/profile/groups-settings-button.spec.ts

@@ -19,6 +19,9 @@ import { MockComponent, MockDirective, MockService } from '../../../utils/mock';
 import { OverlayModalService } from '../../../services/ux/overlay-modal';
 import { overlayModalServiceMock } from '../../../../tests/overlay-modal-service-mock.spec';
 import { GroupsService } from '../groups-service';
+import { FeaturesService } from '../../../services/features.service';
+import { featuresServiceMock } from '../../../../tests/features-service-mock.spec';
+import { PermissionsService } from '../../../common/services/permissions.service';
 
 let groupConfig = {
   countMembers: Promise.resolve(1),
@@ -63,11 +66,17 @@ describe('GroupsSettingsButton', () => {
         { provide: Client, useValue: clientMock },
         { provide: Session, useValue: sessionMock },
         { provide: OverlayModalService, useValue: overlayModalServiceMock },
+        { provide: FeaturesService, useValue: featuresServiceMock },
+        {
+          provide: PermissionsService,
+          useValue: MockService(PermissionsService),
+        },
       ],
     }).compileComponents();
   }));
 
   beforeEach(() => {
+    featuresServiceMock.mock('permissions', false);
     jasmine.MAX_PRETTY_PRINT_DEPTH = 2;
     jasmine.clock().uninstall();
     jasmine.clock().install();

src/app/modules/legacy/components/buttons/subscribe.ts

@@ -9,7 +9,7 @@ import { SignupModalService } from '../../../../modules/modals/signup/service';
   template: `
     <button
       class="m-btn m-btn--with-icon m-btn--subscribe"
-      *ngIf="!_user.subscribed"
+      *ngIf="!_user.subscribed && !_user.pending_subscribe"
       (click)="subscribe($event)"
     >
       <i class="material-icons">person_add</i>
@@ -25,6 +25,18 @@ import { SignupModalService } from '../../../../modules/modals/signup/service';
         </ng-container>
       </span>
     </button>
+    <button
+      class="m-btn m-btn--with-icon m-btn--subscribe subscribed"
+      *ngIf="_user.pending_subscribe"
+      (click)="unSubscribe($event)"
+    >
+      <i class="material-icons">close</i>
+      <span>
+        <ng-container i18n="@@MINDS__BUTTONS__UNSUBSCRIBE__SUBSCRIBED_LABEL"
+          >Pending</ng-container
+        >
+      </span>
+    </button>
     <button
       class="m-btn m-btn--with-icon m-btn--subscribe subscribed"
       *ngIf="_user.subscribed"
@@ -72,6 +84,10 @@ export class SubscribeButton {
       return false;
     }
 
+    if (this._user.mode === 2) {
+      return this.requestSubscribe();
+    }
+
     this._user.subscribed = true;
     this.onSubscribed.next();
 
@@ -90,6 +106,17 @@ export class SubscribeButton {
       });
   }
 
+  async requestSubscribe() {
+    this._user.pending_subscribe = true;
+
+    try {
+      await this.client.put(`api/v2/subscriptions/outgoing/${this._user.guid}`);
+    } catch (err) {
+      this._user.pending_subscribe = false;
+      alert('There was an error requesting to subscribe');
+    }
+  }
+
   unSubscribe(e) {
     e.preventDefault();
     e.stopPropagation();

src/app/modules/notifications/notification.component.html

@@ -42,6 +42,41 @@
     </a>
   </ng-template>
 
+  <!-- subscription_request_declined -->
+  <ng-template ngSwitchCase="subscription_request_declined">
+    <a [routerLink]="['/', notification.fromObj.username || '']">
+      <p>
+        <span class="pseudo-link mdl-color-text--blue-grey-400">{{
+          notification.fromObj.name
+        }}</span>
+        rejected your subscription request.
+      </p>
+    </a>
+  </ng-template>
+
+  <!-- subscription_request_accepted -->
+  <ng-template ngSwitchCase="subscription_request_accepted">
+    <a [routerLink]="['/', notification.fromObj.username || '']">
+      <p>
+        <span class="pseudo-link mdl-color-text--blue-grey-400">{{
+          notification.fromObj.name
+        }}</span>
+        accepted your subscription request. You are now subscribed.
+      </p>
+    </a>
+  </ng-template>
+
+  <ng-template ngSwitchCase="subscription_request_received">
+    <a [routerLink]="['/', session.getLoggedInUser().username, 'requests']">
+      <p>
+        <span class="pseudo-link mdl-color-text--blue-grey-400">{{
+          notification.fromObj.name
+        }}</span>
+        has requested to subscribe to you.
+      </p>
+    </a>
+  </ng-template>
+
   <!-- referral ping -->
   <ng-template ngSwitchCase="referral_ping">
     <a [routerLink]="['/wallet/tokens/contributions']">