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

5 files changed, 86 insertions, 16 deletions

diff --git a/client/src/app/videos/+video-watch/comment/video-comment-add.component.html b/client/src/app/videos/+video-watch/comment/video-comment-add.component.html
index f65a88d20..9441edfb1 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment-add.component.html
+++ b/client/src/app/videos/+video-watch/comment/video-comment-add.component.html
@@ -1,9 +1,11 @@
 <form novalidate [formGroup]="form" (ngSubmit)="formValidated()">
   <div class="avatar-and-textarea">
-    <img [src]="user.accountAvatarUrl" alt="Avatar" />
+    <img [src]="getAvatarUrl()" alt="Avatar" />
 
     <div class="form-group">
       <textarea i18n-placeholder placeholder="Add comment..." autosize
+                [readonly]="(user === null) ? true : false"
+                (click)="openVisitorModal($event)"
                 formControlName="text" [ngClass]="{ 'input-error': formErrors['text'] }"
                 (keyup.control.enter)="onValidKey()" (keyup.meta.enter)="onValidKey()" #textarea>
 
@@ -20,3 +22,25 @@
     </button>
   </div>
 </form>
+
+<ng-template #visitorModal let-modal>
+  <div class="modal-header">
+    <h4 class="modal-title" id="modal-basic-title" i18n>You are one step away from commenting</h4>
+    <button type="button" class="close" aria-label="Close" (click)="hideVisitorModal()"></button>
+  </div>
+  <div class="modal-body" i18n>
+    <span i18n>
+      If you have an account on this instance, you can login:
+    </span>
+    <span class="btn btn-sm mx-3" role="button" (click)="gotoLogin()" i18n>login to comment</span>
+    <span i18n>
+      Otherwise you can comment using an account on an ActivityPub-compatible instance:
+    </span>
+    <my-remote-subscribe [interact]="true" account="{{ uri }}"></my-remote-subscribe>
+  </div>
+  <div class="modal-footer inputs">
+    <span i18n class="action-button action-button-cancel" role="button" (click)="hideVisitorModal()">
+      Cancel
+    </span>
+  </div>
+</ng-template>
diff --git a/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss b/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss
index bb809296a..e998cba5e 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss
+++ b/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss
@@ -36,7 +36,7 @@ form {
 
   button {
     @include peertube-button;
-    @include orange-button
+    @include orange-button;
   }
 }
 
@@ -44,4 +44,16 @@ form {
   textarea, .submit-comment button {
     font-size: 14px !important;
   }
+}
+
+.modal-body {
+  .btn {
+    @include peertube-button;
+    @include orange-button;
+  }
+
+  span {
+    float: left;
+    margin-bottom: 20px;
+  }
 }
\ No newline at end of file
diff --git a/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts b/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts
index 9998685e8..91af113d2 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts
+++ b/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts
@@ -1,4 +1,5 @@
 import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
+import { Router } from '@angular/router'
 import { NotificationsService } from 'angular2-notifications'
 import { Observable } from 'rxjs'
 import { VideoCommentCreate } from '../../../../../../shared/models/videos/video-comment.model'
@@ -10,6 +11,8 @@ import { VideoCommentService } from './video-comment.service'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
 import { VideoCommentValidatorsService } from '@app/shared/forms/form-validators/video-comment-validators.service'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { AuthService } from '@app/core/auth'
 
 @Component({
   selector: 'my-video-comment-add',
@@ -25,15 +28,20 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit {
 
   @Output() commentCreated = new EventEmitter<VideoCommentCreate>()
 
+  @ViewChild('visitorModal') visitorModal: NgbModal
   @ViewChild('textarea') private textareaElement: ElementRef
 
   private addingComment = false
+  private uri: string
 
   constructor (
     protected formValidatorService: FormValidatorService,
     private videoCommentValidatorsService: VideoCommentValidatorsService,
     private notificationsService: NotificationsService,
     private videoCommentService: VideoCommentService,
+    private authService: AuthService,
+    private modalService: NgbModal,
+    private router: Router,
     private i18n: I18n
   ) {
     super()
@@ -44,19 +52,23 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit {
       text: this.videoCommentValidatorsService.VIDEO_COMMENT_TEXT
     })
 
-    if (this.focusOnInit === true) {
-      this.textareaElement.nativeElement.focus()
-    }
+    this.uri = this.router.url
 
-    if (this.parentComment) {
-      const mentions = this.parentComments
-        .filter(c => c.account.id !== this.user.account.id) // Don't add mention of ourselves
-        .map(c => '@' + c.by)
+    if (this.user) {
+      if (this.focusOnInit === true) {
+        this.textareaElement.nativeElement.focus()
+      }
+
+      if (this.parentComment) {
+        const mentions = this.parentComments
+          .filter(c => c.account.id !== this.user.account.id) // Don't add mention of ourselves
+          .map(c => '@' + c.by)
 
-      const mentionsSet = new Set(mentions)
-      const mentionsText = Array.from(mentionsSet).join(' ') + ' '
+        const mentionsSet = new Set(mentions)
+        const mentionsText = Array.from(mentionsSet).join(' ') + ' '
 
-      this.form.patchValue({ text: mentionsText })
+        this.form.patchValue({ text: mentionsText })
+      }
     }
   }
 
@@ -67,6 +79,20 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit {
     this.formValidated()
   }
 
+  openVisitorModal (event) {
+    if (this.user === null) { // we only open it for visitors
+      // fixing ng-bootstrap ModalService and the "Expression Changed After It Has Been Checked" Error
+      event.srcElement.blur()
+      event.preventDefault()
+
+      this.modalService.open(this.visitorModal)
+    }
+  }
+
+  hideVisitorModal () {
+    this.modalService.dismissAll()
+  }
+
   formValidated () {
     // If we validate very quickly the comment form, we might comment twice
     if (this.addingComment) return
@@ -101,6 +127,17 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit {
     return this.form.value['text']
   }
 
+  getAvatarUrl () {
+    if (this.user) return this.user.accountAvatarUrl
+    return window.location.origin + '/client/assets/images/default-avatar.png'
+  }
+
+  gotoLogin () {
+    this.hideVisitorModal()
+    this.authService.redirectUrl = this.router.url
+    this.router.navigate([ '/login' ])
+  }
+
   private addCommentReply (commentCreate: VideoCommentCreate) {
     return this.videoCommentService
       .addCommentReply(this.video.id, this.parentComment.id, commentCreate)
diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.html b/client/src/app/videos/+video-watch/comment/video-comments.component.html
index bf6706ed3..9919ac615 100644
--- a/client/src/app/videos/+video-watch/comment/video-comments.component.html
+++ b/client/src/app/videos/+video-watch/comment/video-comments.component.html
@@ -10,7 +10,6 @@
 
   <ng-template [ngIf]="video.commentsEnabled === true">
     <my-video-comment-add
-      *ngIf="isUserLoggedIn()"
       [video]="video"
       [user]="user"
       (commentCreated)="onCommentThreadCreated($event)"
diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html
index 630345a35..770785d02 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -126,7 +126,7 @@
                 <img [src]="video.videoChannelAvatarUrl" alt="Video channel avatar" />
               </a>
 
-              <my-subscribe-button #subscribeButton *ngIf="isUserLoggedIn()" [videoChannel]="video.channel" size="small"></my-subscribe-button>
+              <my-subscribe-button #subscribeButton [videoChannel]="video.channel" size="small"></my-subscribe-button>
             </div>
 
             <div class="video-info-by">
@@ -134,8 +134,6 @@
                 <span i18n>By {{ video.byAccount }}</span>
                 <img [src]="video.accountAvatarUrl" alt="Account avatar" />
               </a>
-
-              <my-help helpType="custom" i18n-customHtml customHtml="You can subscribe to this account via any ActivityPub-capable fediverse instance. For instance with Mastodon or Pleroma you can type in the search box <strong>@{{video.account.name}}@{{video.account.host}}</strong> and subscribe there."></my-help>
             </div>
           </div>