refactor subscribe button and comment-add for visitor-interact UX (#1100)

* refactor subscribe button for visitor-subscribe UX
* refactor comment-add for visitor-interact UX

7 files changed, 191 insertions, 56 deletions

diff --git a/client/src/app/shared/user-subscription/index.ts b/client/src/app/shared/user-subscription/index.ts
index faddae66a..e76940f7b 100644
--- a/client/src/app/shared/user-subscription/index.ts
+++ b/client/src/app/shared/user-subscription/index.ts
@@ -1,2 +1,3 @@
 export * from './user-subscription.service'
 export * from './subscribe-button.component'
+export * from './remote-subscribe.component'
diff --git a/client/src/app/shared/user-subscription/remote-subscribe.component.html b/client/src/app/shared/user-subscription/remote-subscribe.component.html
new file mode 100644
index 000000000..3762142f2
--- /dev/null
+++ b/client/src/app/shared/user-subscription/remote-subscribe.component.html
@@ -0,0 +1,25 @@
+<form novalidate [formGroup]="form" 
+      (ngSubmit)="formValidated()">
+  <div class="form-group">
+    <input type="email"
+      formControlName="text"
+      class="form-control"
+      (keyup.control.enter)="onValidKey()" (keyup.meta.enter)="onValidKey()"
+      placeholder="jane_doe@example.com">
+  </div>
+  <button type="submit"
+    [disabled]="!form.valid"
+    class="btn btn-sm btn-remote-follow"
+    i18n>
+    <span *ngIf="!interact">Remote subscribe</span>
+    <span *ngIf="interact">Remote interact</span>
+  </button>
+  <my-help *ngIf="!interact && showHelp"
+           helpType="custom"
+           i18n-customHtml customHtml="You can subscribe to the channel via any ActivityPub-capable fediverse instance. For instance with Mastodon or Pleroma you can type the channel URL in the search box and subscribe there.">
+  </my-help>
+  <my-help *ngIf="showHelp && interact"
+           helpType="custom"
+           i18n-customHtml customHtml="You can interact with this via any ActivityPub-capable fediverse instance. For instance with Mastodon or Pleroma you can type the current URL in the search box and interact with it there.">
+  </my-help>
+</form>
\ No newline at end of file
diff --git a/client/src/app/shared/user-subscription/remote-subscribe.component.scss b/client/src/app/shared/user-subscription/remote-subscribe.component.scss
new file mode 100644
index 000000000..e49271079
--- /dev/null
+++ b/client/src/app/shared/user-subscription/remote-subscribe.component.scss
@@ -0,0 +1,5 @@
+@import '_mixins';
+
+.btn-remote-follow {
+  @include orange-button;
+}
\ No newline at end of file
diff --git a/client/src/app/shared/user-subscription/remote-subscribe.component.ts b/client/src/app/shared/user-subscription/remote-subscribe.component.ts
new file mode 100644
index 000000000..7a81108cd
--- /dev/null
+++ b/client/src/app/shared/user-subscription/remote-subscribe.component.ts
@@ -0,0 +1,43 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { FormReactive } from '@app/shared/forms/form-reactive'
+import {
+  FormValidatorService,
+  UserValidatorsService
+} from '@app/shared/forms/form-validators'
+
+@Component({
+  selector: 'my-remote-subscribe',
+  templateUrl: './remote-subscribe.component.html',
+  styleUrls: ['./remote-subscribe.component.scss']
+})
+export class RemoteSubscribeComponent extends FormReactive implements OnInit {
+  @Input() account: string
+  @Input() interact = false
+  @Input() showHelp = false
+
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private userValidatorsService: UserValidatorsService
+  ) {
+    super()
+  }
+
+  ngOnInit () {
+    this.buildForm({
+      text: this.userValidatorsService.USER_EMAIL
+    })
+  }
+
+  onValidKey () {
+    this.onValueChanged()
+    if (!this.form.valid) return
+
+    this.formValidated()
+  }
+
+  formValidated () {
+    const address = this.form.value['text']
+    const [ , hostname ] = address.split('@')
+    window.open(`https://${hostname}/authorize_interaction?acct=${this.account}`)
+  }
+}
diff --git a/client/src/app/shared/user-subscription/subscribe-button.component.html b/client/src/app/shared/user-subscription/subscribe-button.component.html
index 34c024c17..b62fb7dfa 100644
--- a/client/src/app/shared/user-subscription/subscribe-button.component.html
+++ b/client/src/app/shared/user-subscription/subscribe-button.component.html
@@ -1,15 +1,45 @@
-<span i18n *ngIf="subscribed === false" class="subscribe-button" [ngClass]="size" role="button" (click)="subscribe()">
-  <span>Subscribe</span>
-  <span *ngIf="displayFollowers && videoChannel.followersCount !== 0" class="followers-count">
-    {{ videoChannel.followersCount | myNumberFormatter }}
-  </span>
-</span>
-
-<span *ngIf="subscribed === true" class="unsubscribe-button" [ngClass]="size" role="button" (click)="unsubscribe()">
-  <span class="subscribed" i18n>Subscribed</span>
-  <span class="unsubscribe" i18n>Unsubscribe</span>
-
-  <span *ngIf="displayFollowers && videoChannel.followersCount !== 0" class="followers-count">
-    {{ videoChannel.followersCount | myNumberFormatter }}
-  </span>
-</span>
+<div class="btn-group-subscribe btn-group"
+    [ngClass]="{'subscribe-button': subscribed !== true, 'unsubscribe-button': subscribed === true}">
+  <button *ngIf="subscribed === false && isUserLoggedIn()" type="button"
+          class="btn btn-sm" role="button"
+          (click)="subscribe()" i18n>
+    <span>
+      Subscribe
+    </span>
+    <span *ngIf="displayFollowers && videoChannel.followersCount !== 0" class="followers-count">
+      {{ videoChannel.followersCount | myNumberFormatter }}
+    </span>
+  </button>
+  <button *ngIf="subscribed === true" type="button"
+          class="btn btn-sm" role="button"
+          (click)="unsubscribe()" i18n>Unsubscribe</button>
+
+  <div class="btn-group" ngbDropdown autoClose="outside" 
+       placement="bottom-right" role="group"
+       aria-label="Multiple ways to subscribe to the current channel">
+    <button class="btn btn-sm dropdown-toggle-split" ngbDropdownToggle>
+      <span *ngIf="!isUserLoggedIn()">
+        Subscribe
+      </span>
+      <span *ngIf="displayFollowers && videoChannel.followersCount !== 0" class="followers-count">
+        {{ videoChannel.followersCount | myNumberFormatter }}
+      </span>
+    </button>
+    <div class="dropdown-menu" ngbDropdownMenu>
+
+      <h6 class="dropdown-header" i18n>Using an ActivityPub-compatible account</h6>
+      <button class="dropdown-item" (click)="subscribe()"
+              *ngIf="subscribed === false">
+        <span *ngIf="!isUserLoggedIn()" i18n>Subscribe with an account on {{ videoChannel.host }}</span>
+        <span *ngIf="isUserLoggedIn()" i18n>Subscribe with your local account</span>
+      </button>
+      <button class="dropdown-item" i18n>Subscribe with a remote account:</button>
+      <my-remote-subscribe showHelp="true" account="{{ uriAccount }}"></my-remote-subscribe>
+      <div class="dropdown-divider"></div>
+
+      <h6 class="dropdown-header" i18n>Using a syndication feed</h6>
+      <button (click)="rssOpen()" class="dropdown-item" i18n>Subscribe via RSS</button>
+
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/client/src/app/shared/user-subscription/subscribe-button.component.scss b/client/src/app/shared/user-subscription/subscribe-button.component.scss
index b78d2f59c..7a8a8ee08 100644
--- a/client/src/app/shared/user-subscription/subscribe-button.component.scss
+++ b/client/src/app/shared/user-subscription/subscribe-button.component.scss
@@ -1,51 +1,46 @@
 @import '_variables';
 @import '_mixins';
 
-.subscribe-button {
+.btn-group-subscribe {
   @include peertube-button;
-  @include orange-button;
-}
+  @include disable-default-a-behaviour;
+  float: right;
+  padding: 0;
 
-.unsubscribe-button {
-  @include peertube-button;
-  @include grey-button
-}
+  &.btn-group > .btn:not(.dropdown-toggle) {
+    padding-right: 5px;
+    font-size: 15px;
+  }
+  &.btn-group > .btn-group:not(:first-child) > .btn {
+    padding-left: 2px;
+  }
 
-.subscribe-button,
-.unsubscribe-button {
-  display: inline-block;
+  &.subscribe-button {
+    .btn {
+      @include orange-button;
+      font-weight: 600;
+    }
 
-  &.small {
-    min-width: 75px;
-    height: 20px;
-    line-height: 20px;
-    font-size: 13px;
+    span.followers-count {
+      padding-left:5px;
+    }
   }
-
-  &.normal {
-    min-width: 120px;
-    height: 30px;
-    line-height: 30px;
-    font-size: 16px;
+  &.unsubscribe-button {
+    .btn {
+      @include grey-button;
+      font-weight: 600;
+    }
   }
-}
 
-.unsubscribe-button {
-  .subscribed {
-    display: inline;
+  .dropdown-header {
+    padding-left: 1rem;
   }
 
-  .unsubscribe {
-    display: none;
+  /deep/ form {
+    padding: 0.25rem 1rem;
   }
 
-  &:hover {
-    .subscribed {
-      display: none;
-    }
-
-    .unsubscribe {
-      display: inline;
-    }
+  input {
+    @include peertube-input-text(100%);
   }
-}
\ No newline at end of file
+}
diff --git a/client/src/app/shared/user-subscription/subscribe-button.component.ts b/client/src/app/shared/user-subscription/subscribe-button.component.ts
index b5873a2ee..e3c758942 100644
--- a/client/src/app/shared/user-subscription/subscribe-button.component.ts
+++ b/client/src/app/shared/user-subscription/subscribe-button.component.ts
@@ -1,4 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core'
+import { Router } from '@angular/router'
+import { AuthService } from '@app/core'
 import { UserSubscriptionService } from '@app/shared/user-subscription/user-subscription.service'
 import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
 import { NotificationsService } from 'angular2-notifications'
@@ -17,6 +19,8 @@ export class SubscribeButtonComponent implements OnInit {
   subscribed: boolean
 
   constructor (
+    private authService: AuthService,
+    private router: Router,
     private notificationsService: NotificationsService,
     private userSubscriptionService: UserSubscriptionService,
     private i18n: I18n
@@ -26,16 +30,30 @@ export class SubscribeButtonComponent implements OnInit {
     return this.videoChannel.name + '@' + this.videoChannel.host
   }
 
+  get uriAccount () {
+    return this.videoChannel.ownerAccount.name + '@' + this.videoChannel.host
+  }
+
   ngOnInit () {
-    this.userSubscriptionService.isSubscriptionExists(this.uri)
-      .subscribe(
-        res => this.subscribed = res[this.uri],
+    if (this.isUserLoggedIn()) {
+      this.userSubscriptionService.isSubscriptionExists(this.uri)
+        .subscribe(
+          res => this.subscribed = res[this.uri],
 
-        err => this.notificationsService.error(this.i18n('Error'), err.message)
-      )
+          err => this.notificationsService.error(this.i18n('Error'), err.message)
+        )
+    }
   }
 
   subscribe () {
+    if (this.isUserLoggedIn()) {
+      this.localSubscribe()
+    } else {
+      this.gotoLogin()
+    }
+  }
+
+  localSubscribe () {
     this.userSubscriptionService.addSubscription(this.uri)
       .subscribe(
         () => {
@@ -52,6 +70,12 @@ export class SubscribeButtonComponent implements OnInit {
   }
 
   unsubscribe () {
+    if (this.isUserLoggedIn()) {
+      this.localUnsubscribe()
+    }
+  }
+
+  localUnsubscribe () {
     this.userSubscriptionService.deleteSubscription(this.uri)
         .subscribe(
           () => {
@@ -66,4 +90,16 @@ export class SubscribeButtonComponent implements OnInit {
           err => this.notificationsService.error(this.i18n('Error'), err.message)
         )
   }
+
+  isUserLoggedIn () {
+    return this.authService.isLoggedIn()
+  }
+
+  gotoLogin () {
+    this.router.navigate([ '/login' ])
+  }
+
+  rssOpen () {
+    window.open('')
+  }
 }