From 660d11e91e1643927028d2d6870a911f569b34d8 Mon Sep 17 00:00:00 2001
From: Rigel Kent <par@rigelk.eu>
Date: Tue, 25 Sep 2018 15:42:58 +0200
Subject: 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
---
 .../comment/video-comment-add.component.html       | 26 +++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

(limited to 'client/src/app/videos/+video-watch/comment/video-comment-add.component.html')

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>
-- 
cgit v1.2.3